react native children view justifyContent property not working-CodePudding

Im trying to align items in react native using expo, but the children View justifyContent is not working after aligning items in the parent View. For example:

<View>
  <View style={{ borderBottomColor: 'black',borderBottomWidth: 3}}>
    <View style={{flexDirection:'row',justifyContent:'space-between'}}>
      <Text style={{ color: "#6B35E2"}}>Name</Text>
      <Text style={{ fontWeight: 'bold',color: "#6B35E2"}}>Nico</Text>
    </View>
   </View>
   <View style={{alignSelf:'flex-end'}}>
    <Icon
      name="fingerprint"
      iconStyle={styles.iconRight}
    />
  </View>
</View>

Renders the following image. The icon apears below the bottom border, and I need it to be at the right of the second text. Its important to note that the bottom border must not reach the icon. It has to end at the second text. So, I tried to apply a flexDirection:row to the parent View like this:

<View style={{flexDirection: "row"}}>
  <View style={{ borderBottomColor: 'black',borderBottomWidth: 3}}>
    <View style={{flexDirection:'row',justifyContent:'space-between'}}>
      <Text style={{ color: "#6B35E2"}}>Name</Text>
      <Text style={{ fontWeight: 'bold',color: "#6B35E2"}}>Nico</Text>
    </View>
  </View>
  <View style={{alignSelf:'flex-end'}}>
    <Icon
      name="fingerprint"
      iconStyle={styles.iconRight}
    />
  </View>
</View>

Sadly, it does not render correctly. The icon is at the right as expected and the bottom border ends just before, but the justifyContent:space-between property applied to the child View does not work anymore. Any ideas? Here is a image with the expected result. Its important that the bottom border must not be under the icon, it must end before.

CodePudding user response：

If you want the icon on the same row of Name and Nico then you need to put the Icon component inside the same row of Name and Nico.

<View style={{flexDirection: "row"}}>
  <View style={styles.futBorder}>
    <View style={{flexDirection:'row',justifyContent:'space-between'}}>
      <Text style={styles.placeholderText}>Name</Text>
      <Text style={styles.dataText}>Nico</Text>
      <View style={{alignSelf:'flex-end'}}>
        <Icon
          name="fingerprint"
          iconStyle={styles.iconRight}
        />
      </View>
    </View>
  </View>
</View>

That way places Nico at the middle of the row. You also can create 2 rows inside one row like this:

<View style={{flexDirection:'row',justifyContent:'space-between'}}> {/* parent row */}
  <View style={{flexDirection: 'row'}}> {/* child row */}
      <Text style={styles.placeholderText}>Name</Text>
      <Text style={styles.dataText}>Nico</Text>
  </View>
  <View style={{alignSelf:'flex-end'}}>
    <Icon
      name="fingerprint"
      iconStyle={styles.iconRight}
    />
  </View>
</View>

And then if necessary you can adjust the widths

CodePudding user response：

The idea is to have a parent view with flexDirection of row. Then inside the parent view there will be two views -

1.) First View With flex: 1, flexDirection : 'row' and justifyContent: 'space-between'

2.) Second View would not have any styles just a simple view.

I've made a Snack for this.

You can do something like this

<View style={styles.parentView}>
  <View style={styles.firstRowView}>
    <Text>Name</Text>
    <Text>Nico</Text>
  </View>

  <View style={styles.secondRow}>
    <Ionicons name="finger-print" size={24} color="black" />
  </View>
</View>

And Styles will be

parentView: {
  flexDirection: 'row',
},
firstRowView: {
  flex: 1,
  flexDirection: 'row',
  justifyContent: 'space-between',
  borderBottomColor: 'black',
  borderBottomWidth: 2,
},
secondRow: {},