How to use Flexbox in 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.

Project Structure

Flex property: Flex property will define how the components in your layout are going to span over the available space along your main axis which by default is a column. Space will be divided in the ratio of each element’s flex property.

Example: Write down the following code in the App.js file.

App.js

import React from 'react';
import {View } from 'react-native';

export default function App() {
  return (
    <View style={{
      flex: 1
    }}>
        <View style={{ flex: 4, backgroundColor: "white" }} />
        <View style={{ flex: 1, backgroundColor: "black" }} />
        <View style={{ flex: 7, backgroundColor: "green" }} />
      </View>
  );
}

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.  

Output

Flex Direction Property: The flexDirection property controls the direction in which the children of a node are laid out, that is, the main axis. There are four types of flexDirection given below:

• column (default value): This aligns children from top to bottom in a vertical manner.
• row: This aligns children from left to right in a horizontal manner.
• column-reverse: This aligns children from bottom to top in vertical space.
• row-reverse: This aligns children from right to left in horizontal space.

Example: Write down the following code in the App.js file.

App.js

import React from 'react';
import {View } from 'react-native';

export default function App() {
  return (
    <View style={{
      flex: 1,
      flexDirection: "row",
    }}>
        <View style={{ flex: 4, backgroundColor: "white" }} />
        <View style={{ flex: 1, backgroundColor: "black" }} />
        <View style={{ flex: 7, backgroundColor: "green" }} />
      </View>
  );
}

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.  

Output

Reference: https://reactnative.dev/docs/flexbox