React Native Align Self Flex End not working as expected

Issue

Pretty simple one, looking to align some text on the left, and some on the right. For this I thought I’d use flexbox with the following code:

return (
<TouchableOpacity disabled={isLoading}>
  <View style={styles.container}>
    <View style={styles.venueImageContainer}>
      {isLoading ? (
        <Loader />
      ) : (
        <Image style={styles.venueImage} source={ { uri: getImage()} } />
      )}
    </View>
    <View style={{flexDirection: 'row', backgroundColor: 'red'}}>
      <View style={{alignSelf: 'flex-start', backgroundColor: 'blue'}}>
        <Text style={styles.venueName}>{venue.name}</Text>
      </View>
      <View style={{alignSelf: 'flex-end', backgroundColor: 'green'}}>
        <Text style={styles.personCount}>Test</Text>
      </View>
    </View>
  </View>
</TouchableOpacity>)

The only styles being referred to via ‘Styles.’ are for the text color and size. So nothing that could interfere with the flex layout.

So ideally, I’d like I want “Text1” on the far left, and then “Text2” on the far right, but instead I am getting this:
Image showing flexbox error

So the parent container gets full width, but the children are not aligning themselves by flex-start or flex-end.

I am new to React / React Native so please go easy on me…

Cheers guys 🙂

Solution

Have you tried space-between?

<View style={{flexDirection:'row', justifyContent:'space-between', backgroundColor:'red'}}>

Answered By – Michael Benjamin

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published