Justifycontent react native

Flexbox is used to provide consistency to a layout. It is used to make the layout adaptive to the screen size of the device it is running on. Using flexbox design you can specify that a certain element of layout will span to this fraction of the available space.

In React Native, Flexbox is the same as it is for basic CSS.

The only difference being in default values.

• flexDirection: The default value for CSS is row whereas the default value in React Native is column.
• alignContent: The default value for CSS is stretch the default value in React Native is flex-start.
• flexShrink: The default value for CSS is 1 whereas the default value in React Native is 0.

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 AwesomeProject

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

  AwesomeProject

  cd AwesomeProject

Project Structure: It will look like this.