React Native Flexbox Tutorial With Example

Dharmik Tank May 21, 2021

Hi Dev,

Today, I will learn you how to create flexbox in react native. You can easily create flexbox in react native. First i will import namespace View, after I will make flexbox using View tag in react native.

Here, I will give you full example for simply display flexbox using react native as bellow.

Step 1 - Create project

In the first step Run the following command for create project.

expo init flexbox

Step 2 - App.js

In this step, You will open App.js file and put the code.

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

const Home = (props) => {
   return (
      <View style = {styles.container}>
         <View style = {styles.redbox} />
         <View style = {styles.greenbox} />
         <View style = {styles.corolbox} />
         <View style = {styles.purplebox} />
      </View>
   )
}

export default Home

const styles = StyleSheet.create ({
   container: {
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      paddingTop: 130
   },
   redbox: {
      width: 100,
      height: 100,
      backgroundColor: 'red'
   },
   corolbox: {
      width: 100,
      height: 100,
      backgroundColor: '#ff7f50'
   },
   greenbox: {
      width: 100,
      height: 100,
      backgroundColor: 'green'
   },
   purplebox: {
      width: 100,
      height: 100,
      backgroundColor: 'purple'
   }
})

Step 3 - Run project

In the last step run your project using bellow command.