Signup/Sign In
LAST UPDATED: SEPTEMBER 6, 2021

Create Flexbox in React Native

    Flexbox is used to specify the layout of a component's children. the main thing is that it provides a consistent layout on different screen sizes. It works in the same way as it does in CSS. The difference is only that the react-native flex only supports a single number and the default direction of flex is a column instead of a row.

    React Native Flex

    It will define how a component going to fill over the available space along with the parent component. let's take an example to understand it properly.

    import React from 'react';
    import { StyleSheet, View} from 'react-native';
    export default class App extends React.Component{
      render(){
        return(
          <View style={styles.container}>
            <View style={styles.first}></View>
            <View style={styles.second}></View>
            <View style={styles.third}></View>
            <View style={styles.fourth}></View>
          </View>
    
        );
      }
    }
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#fff',
      },
      first: {
        flex: 1,
        backgroundColor: 'red'
      },
      second: {
        flex: 2,
        backgroundColor: 'green'
      },
      third: {
        flex: 3,
        backgroundColor: 'yellow'
      },
      fourth: {
        flex: 1,
        backgroundColor: 'blue'
      }
    });

    flexbox in react native


    Here in the above example, we define a parent View component and then we set flex: 1 property using container style.

    It means it will take all the available space of its parent component that is the complete screen and inside the parent View component, we define our four View components and set the flex: 1, flex: 2, flex: 3, flex: 4 to the first, second, third and fourth child View component.

    So the parent View space is divided into 1+2+3+1 = 7 equal blocks. So the first View component only takes space of one block and the second View component will take space of 2 blocks.

    Similarly third View component takes the space of 3 blocks. and fourth will take space of one block as you see in the above-given image.
    In react native flex can also have some other properties that are used to achieve the right layout for our app. let's see all the properties one by one.

    React Native flexDirection

    This property used to control the direction of the component. the default value for flexDirection is a column that means all the components will start from top to bottom.

    React Native flexDirection:row

    If flexDirection is set to row then all the children items inside a component will start from left to right.

    import React from 'react';
    import { View, Text } from 'react-native';
    
    const App = () => {
        return (
          <View style={{flex: 1, flexDirection: 'row', marginTop: 40}}>
            <View style={{width: 100, height: 100, backgroundColor: 'blue', justifyContent: 'center'}} >
              <Text style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 30}} >1</Text>
            </View>
            <View style={{width: 100, height: 100, backgroundColor: 'green', justifyContent: 'center'}} >
              <Text style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 30}} >2</Text>
            </View>
            <View style={{width: 100, height: 100, backgroundColor: 'red', justifyContent: 'center'}} >
              <Text style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 30}} >3</Text>
            </View>
          </View>
        );
    };
    
    export default App;
    

    flexdirection is row react native flexbox guide


    Here we define flexDirection: 'row' to the parent View. so all the child View start from left to right as you see in the above-given image.

    React Native flexDirection:column

    If we set flexDirection: 'column' then all the children items inside a component will fill by a column that is from top to bottom direction as you see in the given below image.

    flexdirection is column react native flexbox guide

    React Native flexDirection:row-reverse

    If we set flexDirection: 'row-reverse' then all the children items inside a component will fill by right to left direction.

    flexdirection row reverse in react native flexbox guide


    React Native flexDirection:column-reverse

    If we set flexDirection: 'column-reverse' then all the children items inside a component will fill by the bottom to top direction.

    flexdirection column reverse in react native flexbox guide

    React Native justifyContent

    This property is used to align the child items inside a parent component using the main axis. the default value for justifyContent is flex-start means all the child components will fill from the top-left corner of the parent component.

    React Native justifyContent:space-between

    By using justifyContent: 'space-between' all the child items will get equal space between them.

    import React from 'react';
    import { View, Text } from 'react-native';
    
    const App = () => {
        return (
          <View style={{flex: 1, flexDirection: 'column', justifyContent: 'space-between', marginTop: 40}}>
            <View style={{width: 100, height: 100, backgroundColor: 'blue', justifyContent: 'center'}} >
              <Text style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 30}} >1</Text>
            </View>
            <View style={{width: 100, height: 100, backgroundColor: 'green', justifyContent: 'center'}} >
              <Text style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 30}} >2</Text>
            </View>
            <View style={{width: 100, height: 100, backgroundColor: 'red', justifyContent: 'center'}} >
              <Text style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 30}} >3</Text>
            </View>
          </View>
        );
    };
    
    export default App;

    justifyContent space around property in react native flexbox

    Here we set flexDirection: 'column', and justifyContent: 'space-between' to parent View component. so all the child components will fill from top to bottom direction and also they will get the equal space between all of them using the vertical axis. because we define flexDirection to the column so our main axis is vertical as you could see in the given image above.

    React Native justifyContent:flex-start

    This property justifyContent: 'flex-start' is used to fill all the child components from the start corner of the parent component.

    justifycontent flex-start in react native flexbox

    React Native justifyContent:flex-end

    This property justifyContent: 'flex-end' is used to fill all the child components from the end corner of the parent component.

    justifycontent flex-end in react native flexbox

    React Native justifyContent:center

    This property justifyContent: 'center' is used to align all the components to the center of the parent component.

    justifycontent center in react native flexbox

    React Native justifyContent:space-around

    This property justifyContent: 'space-around' is used to Evenly distribute all the available space between all the child components.

    justifycontent space around in react native flexbox

    Also Read: Touchable Component in React Native


    React Native alignItems

    This property is similar to justifyContent but instead of applying a style to the main axis, it will apply throughout the cross axis. the default value that applies to this property is stretch.

    React Native alignItems:stretch

    This property is used to fill complete space to the cross axis of the parent component.

    import React from 'react';
    import { View, Text } from 'react-native';
    
    const App = () => {
        return (
          <View style={{flex: 1, flexDirection: 'column', justifyContent: 'space-around', alignItems: 'stretch' ,marginTop: 40}}>
            <View style={{ height: 100, backgroundColor: 'blue', justifyContent: 'center'}} >
              <Text style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 30}} >1</Text>
            </View>
            <View style={{ height: 100, backgroundColor: 'green', justifyContent: 'center'}} >
              <Text style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 30}} >2</Text>
            </View>
            <View style={{ height: 100, backgroundColor: 'red', justifyContent: 'center'}} >
              <Text style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 30}} >3</Text>
            </View>
          </View>
        );
    };
    
    export default App;

    alignitem property in react native flexbox


    Here to the main View component, we set flexDirection: 'column' so all the child components fill from top to bottom direction. and the property justifyContent: 'space-around' will give the equal space around the main axis to all the child components. after applying the alignItems: 'stretch' property all the components will fill all the available space of the parent axis through the cross axis that is the horizontal axis.


    React Native alignItems:flex-start

    This property alignItems: 'flex-start' is used to align the Items from the start corner of the parent's cross axis.

    alignitem start propery in react native flexbox


    React Native alignItems:flex-end

    This property alignItems: 'flex-end' is used to align the Items from the end corner of the parent's cross axis.

    alignitems  flex end property in react native flexbox


    React Native alignItems:center

    This property alignItems: 'center' is used to align the Items in the center of the parent's cross axis.

    alignitems center property in react native flexbox


    React Native flexWrap

    This property is used to control the overflow condition of child items when the overall length of all the child components is greater than the parent component. The default value of this property is set to nowrap.

    import React from 'react';
    import { View, Text } from 'react-native';
    
    const App = () => {
        return (
          <View style={{flex: 1, flexDirection: 'row' , flexWrap: 'nowrap', marginTop: 40}}>
            <View style={{ height: 100, width: 100, backgroundColor: 'blue', justifyContent: 'center'}} >
              <Text style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 30}} >1</Text>
            </View>
            <View style={{ height: 100, width: 100, backgroundColor: 'green', justifyContent: 'center'}} >
              <Text style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 30}} >2</Text>
            </View>
            <View style={{ height: 100, width: 100, backgroundColor: 'red', justifyContent: 'center'}} >
              <Text style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 30}} >3</Text>
            </View>
            <View style={{ height: 100, width: 100, backgroundColor: 'black', justifyContent: 'center'}} >
              <Text style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 30}} >3</Text>
            </View>
            <View style={{ height: 100, width: 100, backgroundColor: 'pink', justifyContent: 'center'}} >
              <Text style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 30}} >3</Text>
            </View>
          </View>
        );
    };
    
    export default App;

    flexwrap property in react native flexbox

    Here, we apply the flexWrap: 'nowrap' property to the parent View component. and here we define 5 child components inside the parent View. but the total height of the all child View component is greater than the parent component. so here component will overflow and only the four-child view will display on the screen. here to overcome this condition we can apply flexWrap: 'wrap' property to the parent component. so all the child components will automatically wrap to the available screen as you could see in the given below image.

    flexwrap in react native flexbox

    You may also like:

    Yash Pal is a highly skilled technical author with a passion for writing about React and React Native.His articles are highly informative and filled with practical insights and tips for developers, providing valuable guidance on React Native Language
    IF YOU LIKE IT, THEN SHARE IT
    Advertisement

    RELATED POSTS