React Native Flex Layout

React Native

About Lesson

In this React Native lesson we are going to learn about React Native Flex Layout, so according to React Native documentation a component can specify the layout of its children using the Flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes, and you will normally use a combination of flexDirection, alignItems, and justifyContent to achieve the right layout.

This is the complete code for this lesson.

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

function FlexLayout() {
    return (
        <View style = {{height:300, padding:20}}>
            <View style = {{flex:1, backgroundColor:'red'}}></View>
            <View style = {{flex:2, backgroundColor:'green'}}></View>
            <View style = {{flex:3, backgroundColor:'yellow'}}></View>         

        </View>
    )
}


const styles = StyleSheet.create({
    container: {
        flex:1,
        padding:50,
        alignItems:'center',
        justifyContent:'center'
        
   
      

    }
})

export default FlexLayout

import React from 'react'

import {View, Text, StyleSheet} from 'react-native';

function FlexLayout() {

return (

</View>

)

}

const styles = StyleSheet.create({

container: {

flex:1,

padding:50,

alignItems:'center',

justifyContent:'center'

}

})

export default FlexLayout

So in here we have created four View container in react native, the first one is our main view container and it has 300 height, we have created three child views and they have different flex layout like one, two and three, so the red view uses flex:1 , the green view uses flex:2 , and the yellow view uses flex:3 . 1+2+3 = 6, which means that the red view will get 1/6 of the space, the green2/6 of the space, and the yellow3/6 of the space.

This is our App.js and we have added our component in the App.js file.

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

import FlexLayout from './components/FlexLayout';



export default function App() {
  return (
 
   <FlexLayout/>
  
  );
}


const styles = StyleSheet.create({
  fab: {
    
      position: 'absolute',
      margin: 16,
      right: 0,
      flex:1,
      
     
    },
})

import React from 'react';

import { StyleSheet, Text, View } from 'react-native';

import FlexLayout from './components/FlexLayout';

export default function App() {

return (

);

}

const styles = StyleSheet.create({

fab: {

position: 'absolute',

margin: 16,

right: 0,

flex:1,

})

First run this command to start your metro bundler.

npm start

npm start

Now you can run your application.

Also you can add flexDirection in a Flex layout, flexDirection controls the direction in which the children of a node are laid out. This is also referred to as the main axis. The cross axis is the axis perpendicular to the main axis, or the axis which the wrapping lines are laid out in.

row Align children from left to right. If wrapping is enabled, then the next line will start under the first item on the left of the container.
column (default value) Align children from top to bottom. If wrapping is enabled, then the next line will start to the right of the first item on the top of the container.
row-reverse Align children from right to left. If wrapping is enabled, then the next line will start under the first item on the right of the container.
column-reverse Align children from bottom to top. If wrapping is enabled, then the next line will start to the right of the first item on the bottom of the container.

By default the flexDirection is column wise, you can make it row wise.

  <View style = {{flexDirection:"row",height:300, padding:20}}>

1	<View style = {{flexDirection:"row",height:300, padding:20}}>