React Native - two items: one on the left, one in the center

You need to add flex: 1 to parent View and children Views (all children will have flex: 1 if you want them all to be of equal size, otherwise define width/flex for each child View individually).

Try this:

      <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
        <View style={{ flex: 1, paddingLeft: 10 }}>
          <Text style={{ fontSize: 20, color: 'red', fontWeight: '200' }}>LEFT_ELEM</Text>
        </View>
        <View style={{ flex: 1, paddingRight: 10 }}>
          <Text style={{ textAlign:'center' }}>CENTER</Text>
        </View>
        <View
          style={{ flex: 1, paddingRight: 10 }}>
        </View>
      </View>

Added style={{ textAlign:'center' }} to Text in center View child to give you an idea of its centered position. You can modify/remove it.


When I learned Android, I was told not to use too many 'layers' of components. In that philosophy, I decided to use 'absolute' property to the left element to achieve a simpler result. In this scheme, the 'left' item is almost stick to the left wall.

<View
    style={{
        height: 50,
        flexDirection: 'row', // a must
        alignItems: 'center', // to make items center vertically.
        justifyContent: 'center' // to make the second item center horizontally.
    }}
>
    <MaterialIcons
        style={[styles.titleIcon, { position: 'absolute', left: 0 }]} // on left, still center vertically.
        name='arrow-back'
        onPress={() => {
            navigation.goBack();
        }}
    />
    <Text style={styles.titleText}>{result.name}</Text> // on center automatically
</View>