React Native justifyContent style Explained With Example Tutorial

The justifyContent in a component’s styles determines the alignment of Children View along with Primary Axis(Default Flex-direction). If your primary axis is flex-direction is column then the justifyContent will set all the children in Vertical format. You can learn more about Flex-direction from my this tutorial. So in this tutorial we would going to make a react native app with justifyContent style Explained With Example Tutorial in both iOS Android react native application.

Properties of justifyContent :

  1. flex-start
  2. center
  3. flex-end
  4. space-around
  5. space-between

Contents in this tutorial justifyContent style Explained With Example in React Native:

1. flex-start : The flex-start would set all the children views into vertically top side along with primary axis. If your primary axis is column then it will set all the views into vertically format and if the primary axis is row then it will set all the views into horizontal format.

Code for Above Screenshot with justifyContent:’flex-start’ :

2. Center : This would push all the views in vertically center of screen along with primary axis.

Code for Above Screenshot with justifyContent:’center’ :

3. flex-end : This would set the children views into bottom of primary axis(Column) in vertically bottom of screen.

Code for Above Screenshot with justifyContent:’flex-end’ :

4. space-around : This would gives the equal space between each View in primary axis. The first and last view also got space from top and bottom side.

Code for Above Screenshot with justifyContent:’space-around’ :

5. space-between : This would gives only space between items.

justifyContent Code for Above Screenshot with justifyContent:’space-between’ :

Complete source code for App.js File :

 

Leave a Reply

Your email address will not be published.