React Native Flexbox flexDirection Property

In this article, We are going to see the Flexbox flexDirection Property in React Native. Flexbox has three main properties. One of them is flexDirection. The flexDirection property is used to determine the alignment of its elements in the horizontal or vertical directions. It established the main axis of the layout. 

Syntax:

flexDirection: 'column|row|column-reverse|row-reverse'

Property Values:

• column: It is the default value of flexDirection property. It aligns the children items from top to bottom directions.
• row: It aligns the children’s items from left to right directions.
• column-reverse: It aligns the children items from bottom to top directions. It is the reverse of the column value.
• row-reverse: It aligns the children from right to left directions.

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 this.

Example: Here in this example, flexDirection is set to the column.

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: {
  flex:1,
     flexDirection: 'column',
  },
  item:{
    height:100,
    width:100
  }
})

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 flexDirection property value to see the change.

• Property row illustration, use the following syntax:

  flexDirection: 'row'

  

• Property column-reverse illustration, use the following syntax:

  flexDirection: 'column-reverse'

  

• Property row-reverse illustration, use the following syntax:

  flexDirection: 'row-reverse'

  

Reference: https://reactnative.dev/docs/flexbox#flex-direction