CODEWITHSUNDEEP
react-nativeflexbox
devedv
devedv

Reputation: 622

React Native Flex Items Alignment

I need to arrange three items in row one on the leftmost and two others in the center. How I can achieve that?

enter image description here

I have already tried the following:

<View style={{flexDirection: 'row', justifyContent: 'center'}}>
<View style={{flexDirect: 'row', justiftContent:'flex-start'}}>
<Text>item1</Text>
</View>

<View>
<Image source={calendar} style={{height: 30, width:30}} />
</View>

<View>
<Text>item2</Text>
</View>
</View>

but this code center aligns all the items, I get something like this:

     ------------------------------|
    |      item1,image,item2       |
    |                              |
    |______________________________|

I have tried space-between as well, but it aligns item2 on the rightmost side.

     ------------------------------   
    |item1,      image,      item2 |
    |                              |
    |______________________________|

Upvotes: 1

Views: 72

Answers (2)

Tim
Tim

Reputation: 10709

In the following, I provide you a solution to your problem. Btw you have several typos in your style definitions.

Code: 

  <View style={{flex: 1, flexDirection: 'row', justifyContent: 'center', marginTop: 20}}>
  <View style={{flex: 1, flexDirection: 'row', alignItems:'flex-start'}}>
    <Text>item1</Text>
  </View>

  <View style={{flex: 1, flexDirection: 'row', justifyContent: 'center'}}>
    <Image source={{uri: 'https://i.ytimg.com/vi/MPV2METPeJU/maxresdefault.jpg'}} style={{height: 30, width:30}} />
    <Text>item2</Text>
  </View>
   <View style={{flex: 1}} />
  </View>

Output:

enter image description here

Working example:

https://snack.expo.io/H1Zv59D6r

Upvotes: 2

Anand Ratna
Anand Ratna

Reputation: 116

Try this 

<View style={{flexDirection: 'row'}}>
    <View style={{flexDirection: 'row',justifyContent:'space-between',width:"50%"}}>
        <View >
        <Text>item1</Text>
        </View>

        <View>
        <Image source={calendar} style={{height: 30, width:30}} />
        </View>
    </View>

    <View style={{flexDirection:'row',justifyContent:"flex-start",width:"50%"}}>
    <Text>item2</Text>
    </View>
</View>

Upvotes: 2

Related Questions