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 :

flex-start
center
flex-end
space-around
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’ :

<br />
<View style={{ justifyContent:’flex-start’, flex:1,flexDirection: ‘column’, margin: 5}}></p>
<p>        <View style={{ height: 100, width: 100, justifyContent:’center’, backgroundColor: ‘#00BCD4’ }} ></p>
<p>            <Text style={{fontSize: 25, textAlign: ‘center’, color: ‘#fff’}}> View 1 </Text></p>
<p>        </View></p>
<p>        <View style={{ width: 100, height: 100, justifyContent:’center’, backgroundColor: ‘#FF1744’,}} ></p>
<p>            <Text style={{fontSize: 25, textAlign: ‘center’, color: ‘#fff’}}> View 2 </Text></p>
<p>        </View></p>
<p>        <View style={{ width: 100, height: 100, justifyContent:’center’, backgroundColor: ‘#4CAF50’,}} ></p>
<p>            <Text style={{fontSize: 25, textAlign: ‘center’, color: ‘#fff’}}> View 3 </Text></p>
<p>        </View></p>
<p></View>

</View>

</View>

</View>

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

Code for Above Screenshot with justifyContent:’center’ :

<br />
<View style={{ justifyContent:’center’, flex:1,flexDirection: ‘column’, margin: 5}}></p>
<p>        <View style={{ height: 100, width: 100, justifyContent:’center’, backgroundColor: ‘#00BCD4’ }} ></p>
<p>            <Text style={{fontSize: 25, textAlign: ‘center’, color: ‘#fff’}}> View 1 </Text></p>
<p>        </View></p>
<p>        <View style={{ width: 100, height: 100, justifyContent:’center’, backgroundColor: ‘#FF1744’,}} ></p>
<p>            <Text style={{fontSize: 25, textAlign: ‘center’, color: ‘#fff’}}> View 2 </Text></p>
<p>        </View></p>
<p>        <View style={{ width: 100, height: 100, justifyContent:’center’, backgroundColor: ‘#4CAF50’,}} ></p>
<p>            <Text style={{fontSize: 25, textAlign: ‘center’, color: ‘#fff’}}> View 3 </Text></p>
<p>        </View></p>
<p></View>

</View>

</View>

</View>

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’ :

<br />
<View style={{ justifyContent:’flex-end’, flex:1,flexDirection: ‘column’, margin: 5}}></p>
<p>        <View style={{ height: 100, width: 100, justifyContent:’center’, backgroundColor: ‘#00BCD4’ }} ></p>
<p>            <Text style={{fontSize: 25, textAlign: ‘center’, color: ‘#fff’}}> View 1 </Text></p>
<p>        </View></p>
<p>        <View style={{ width: 100, height: 100, justifyContent:’center’, backgroundColor: ‘#FF1744’,}} ></p>
<p>            <Text style={{fontSize: 25, textAlign: ‘center’, color: ‘#fff’}}> View 2 </Text></p>
<p>        </View></p>
<p>        <View style={{ width: 100, height: 100, justifyContent:’center’, backgroundColor: ‘#4CAF50’,}} ></p>
<p>            <Text style={{fontSize: 25, textAlign: ‘center’, color: ‘#fff’}}> View 3 </Text></p>
<p></View>

</View>

</View>

</View>

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’ :

<br />
<View style={{ justifyContent:’space-between’, flex:1,flexDirection: ‘column’, margin: 5}}></p>
<p>        <View style={{ height: 100, width: 100, justifyContent:’center’, backgroundColor: ‘#00BCD4’ }} ></p>
<p>            <Text style={{fontSize: 25, textAlign: ‘center’, color: ‘#fff’}}> View 1 </Text></p>
<p>        </View></p>
<p>        <View style={{ width: 100, height: 100, justifyContent:’center’, backgroundColor: ‘#FF1744’,}} ></p>
<p>            <Text style={{fontSize: 25, textAlign: ‘center’, color: ‘#fff’}}> View 2 </Text></p>
<p>        </View></p>
<p>        <View style={{ width: 100, height: 100, justifyContent:’center’, backgroundColor: ‘#4CAF50’,}} ></p>
<p>            <Text style={{fontSize: 25, textAlign: ‘center’, color: ‘#fff’}}> View 3 </Text></p>
<p>        </View></p>
<p></View>

</View>

</View>

</View>

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

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

<br />
<View style={{ justifyContent:’space-between’, flex:1,flexDirection: ‘column’, margin: 5}}></p>
<p>        <View style={{ height: 100, width: 100, justifyContent:’center’, backgroundColor: ‘#00BCD4’ }} ></p>
<p>            <Text style={{fontSize: 25, textAlign: ‘center’, color: ‘#fff’}}> View 1 </Text></p>
<p>        </View></p>
<p>        <View style={{ width: 100, height: 100, justifyContent:’center’, backgroundColor: ‘#FF1744’,}} ></p>
<p>            <Text style={{fontSize: 25, textAlign: ‘center’, color: ‘#fff’}}> View 2 </Text></p>
<p>        </View></p>
<p>        <View style={{ width: 100, height: 100, justifyContent:’center’, backgroundColor: ‘#4CAF50’,}} ></p>
<p>            <Text style={{fontSize: 25, textAlign: ‘center’, color: ‘#fff’}}> View 3 </Text></p>
<p>        </View></p>
<p></View>

</View>

</View>

</View>

Complete source code for App.js File :

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, Text, View } from ‘react-native’;</p>
<p>export default class MainActivity extends Component {</p>
<p>  render()<br />
  {</p>
<p>    return (</p>
<p>      <View style={{ justifyContent:’space-between’, flex:1,flexDirection: ‘column’, margin: 5}}></p>
<p>        <View style={{ height: 100, width: 100, justifyContent:’center’, backgroundColor: ‘#00BCD4’ }} ></p>
<p>            <Text style={{fontSize: 25, textAlign: ‘center’, color: ‘#fff’}}> View 1 </Text></p>
<p>        </View></p>
<p>        <View style={{ width: 100, height: 100, justifyContent:’center’, backgroundColor: ‘#FF1744’,}} ></p>
<p>            <Text style={{fontSize: 25, textAlign: ‘center’, color: ‘#fff’}}> View 2 </Text></p>
<p>        </View></p>
<p>        <View style={{ width: 100, height: 100, justifyContent:’center’, backgroundColor: ‘#4CAF50’,}} ></p>
<p>            <Text style={{fontSize: 25, textAlign: ‘center’, color: ‘#fff’}}> View 3 </Text></p>
<p>        </View></p>
<p>      </View><br />
    );<br />
  }<br />
}