React Native Flexbox justifyContent Property

In this article, We are going to see the justifyContent Property of flexbox in React Native. Flexbox has three main properties. One of them is justifyContent. justifyContent property is used to determine how should children’s components be aligned within the primary axis of their container. It can align children horizontally or vertically within a container. If flexDirection is set to row then alignment will be horizontally else it will be vertically aligned within a container.

Syntax:

justify-content: flex-start|flex-end|center|space-between|
space-around|space-evenly;

Property Values:

• flex-start: It is the default value of justifyContent. It is used to align flex items or children components from the beginning of the container.
• flex-end: It acts in the opposite manner of flex-start. It is used to align the children component at the end of the container.
• center: It aligns the children component at the center of the container.
• space-between: The children’s components are placed with equal spacing where the item is pushed to start and the last item is pushed to end.
• space-around: The space between the children component and space from the corners is the same.
• space-evenly: The children component are positioned with equal spacing between them but the spacing from corners differs.

Now let’s start with the implementation:

• Step 1: Open your terminal and install expo-cli by the following command.

  npm install -g expo-cli

• Step 2: Now create a project by the following command.

  expo init myapp

• Step 3: Now go into your project folder i.e. myapp

  cd myapp

Project Structure: It will look like the following.

Example: Here in this example, flex direction is set to row, and justifyContent is flex-start.  

App.js

import React, { Component } from 'react'
import { View, StyleSheet } from 'react-native'

const App = (props) => {
   return (
      <View style = {styles.container}>
         <View style =
               {[styles.item,{backgroundColor:'green'}]} />
         <View style =
               {[styles.item,{backgroundColor:'blue'}]} />
         <View style =
               {[styles.item,{backgroundColor:'red'}]} />
      </View>
   )
}
export default App;

const styles = StyleSheet.create ({
   container: {
      flexDirection: 'row',
      justifyContent: 'flex-start',
      marginTop:10,
      height: 600
   },
   item:{
     width:120,
     height:120
   }
})

Start the server by using the following command.

npm run android

Output: If your emulator did not open automatically then you need to do it manually. First, go to your android studio and run the emulator. Now start the server again. 

Now we will keep the entire code the same and just do the changes in justifyContent property value to see the change as shown below:

• Property flex-end illustration, use the following syntax:

  justifyContent: 'flex-end',

  

• Property center illustration, use the following syntax:

  justifyContent: 'center',

  

• Property space-between illustration, use the following syntax:

  justifyContent: 'space-between',

  

• Property space-around illustration, use the following syntax:

  justifyContent: 'space-around',

  

• Property space-evenly illustration, use the following syntax:

  justifyContent: 'space-evenly',