How to justify (left, right, center) each child independently?

Question

In react native I have:

  {\'<\'}
    
      Fitness &a         


        

Answer 1

use this

marginLeft: "auto",
marginRight: "auto"

Answer 2

One way is to use nested View (flex containers) for 3 different regions and set flex:1 to left and right region

<View style={styles.navBar}>
  <View style={styles.leftContainer}>
    <Text style={[styles.text, {textAlign: 'left'}]}>
      {'<'}
    </Text>
  </View>
  <Text style={styles.text}>
    Fitness & Nutrition Tracking
  </Text>
  <View style={styles.rightContainer}>
    <View style={styles.rightIcon}/>
  </View>
</View>

const styles = StyleSheet.create({
  navBar: {
    height: 60,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: 'blue',
  },
  leftContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    backgroundColor: 'green'
  },
  rightContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
    backgroundColor: 'red',
  },
  rightIcon: {
    height: 10,
    width: 10,
    resizeMode: 'contain',
    backgroundColor: 'white',
  }
});

Answer 3

If you're using a NavigationBar from the Navigator module see my question: Changing the default style for a Navigator.NavigationBar (title)

Answer 4

You could also set marginLeft: 'auto' to the middle component. It should push it to the right. Also works for React Native

Source: https://hackernoon.com/flexbox-s-best-kept-secret-bd3d892826b6