Understanding Flexbox in React Native | by Navdeep Singh Bedi

The struggle is realMastering these simple Flexbox recipes will make you a React Native UI master in no timeGetting StartedLets start with a simple example. A container View component with three Text components.//Our views 1 2 3 //Styleslet styles = StyleSheet.create({container: { backgroundColor:’#4286f4'},viewStyleOne: {width:40,height:40,justifyContent: ‘center’,alignItems:’center’, backgroundColor:’#b642f4'},textStyle:{textAlign:’center’}})Which renders as so:Initial ViewNow we add flex:1 to the container:container: { backgroundColor:’#4286f4', flex: 1 }This makes container fill its parent, i.e. whole screen.flex : 1Now we add:container: { backgroundColor:’#4286f4', flex: 1,flexDirection:’row’}Each view’s flexDirection is set to colum by default but setting it to ‘row’ will change the orientation of the items in the container.flexDirection set to ‘row’Now we can control the orientation of the content using flexDirection.Now lets add justifyContent and alignItems :container:{ backgroundColor:’#4286f4', flex: 1, flexDirection: ‘row’,justifyContent: ‘flex-end’,alignItems:’flex-start’}justifyContent: ‘flex-end’Similarly for:container: { backgroundColor:’#4286f4', flex: 1, flexDirection: ‘row’,justifyContent: ‘flex-end’,alignItems:’flex-end’}Views will render like:alignItems:’flex-end’flexDirection determines the primary axis as ‘row’ or ‘column’.justifyContent determines distribution of children along primary axis.alignItems