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

Question

In react native I have:

<View style={styles.navBar}>   <Text>{'<'}</Text>     <Text style={styles.navBarTitle}>       Fitness & Nutrition Tracking     </Text>   <Image source={icon} style={styles.icon}/> </View> 

with these styles:

{     navBar: {         height: 60,         flexDirection: 'row',         justifyContent: 'space-between',         alignItems: 'center',     },     navBarTitle: {         textAlign: 'center',     },     icon: {         height: 60,         resizeMode: 'contain',     }, } 

This is the effect I get:

This is the effect I want:

In the first example, the spacing between items is equal.

In the second example, each item is justified differently. The first item is left-justified. The second item is center-justified. The third, right-justified.

This question is similar, but it looks like react native does not support margin: 'auto'. Furthermore, the other answers only work if you only care about left and right justification, but no one really addresses center justification without auto margin.

I am trying to make a navigation bar in react native. The vanilla ios version looks like this:

_{(source: apple.com)}

How do I do something similar? I'm mainly concerned with centering.

Answer 1

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 2

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