React Native Layout and Flexbox

Understanding FlexBox with Examples

This blog section will learn flexbox properties with their code and output.

Flex Direction

We have learned about flex-direction in the above part of the blog, but here we will see its example. In the following example, we have three blocks, and they are arranged in the row direction of flex which is the default direction. Write the following code in your javascript extension file of react.

Code

import { StyleSheet,View } from 'react-native'; 
import React, { Component } from 'react';  
 
 
export default class FlexDirection extends Component {  
    render() {  
        return (  
            <View style={styles.container}>  
                <View style={styles.aqua} />  
                <View style={styles.red} />  
                <View style={styles.green} />  
            </View>  
        );  
    }  
}  
const styles = StyleSheet.create({  
    container:{  
        flex: 1,  
        flexDirection: 'row',  
    },  
    aqua:{  
        width: 70,  
        height: 70,  
        backgroundColor: 'aqua',  
    },  
    red:{  
        width: 70,  
        height: 70,  
        backgroundColor: 'red',  
    },  
    green:{  
        width: 70,  
        height: 70,  
        backgroundColor: 'green',  
    }  
})  

Output

Justify Content

We have learned about justify-content in the above portion of the blog. Here we will understand it in more depth with some examples.

Code

Here we have set the flex-direction to column and justify-content to center.

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

 
 
export default class FlexDirectionBasics extends Component {  
    render() {  
        return (  
            <View style={styles.container}>  
                <View style={styles.aqua} />  
                <View style={styles.red} />  
                <View style={styles.green} />  
            </View>  
        );  
    }  
}  
const styles = StyleSheet.create({  
    container:{  
        flex: 1,  
        flexDirection: 'coloumn',  
        justifyContent: 'center',  
    },  
    aqua:{  
        width: 70,  
        height: 70,  
        backgroundColor: 'aqua',  
    },  
    red:{  
        width: 70,  
        height: 70,  
        backgroundColor: 'red',  
    },  
    green:{  
        width: 70,  
        height: 70,  
        backgroundColor: 'green',  
    }  
})  

Output

Align Items

Here we will learn more about aligning items with the help of examples.

Code

In this code, we are using the align-items property to stretch the last item equal to the container's width.

import { StyleSheet,View } from 'react-native';
import React, { Component } from 'react';  
 
 
export default class FlexDirectionBasics extends Component {  
    render() {  
        return (  
            <View style={styles.container}>  
                <View style={styles.aqua} />  
                <View style={styles.red} />  
                <View style={styles.green} />  
            </View>  
        );  
    }  
}  
const styles = StyleSheet.create({  
    container:{  
        flex: 1,  
        flexDirection: 'coloumn',
        alignItems: 'stretch',
    },  
    aqua:{  
        width: 70,  
        height: 70,  
        backgroundColor: 'aqua',  
    },  
    red:{  
        width: 70,  
        height: 70,  
        backgroundColor: 'red',  
    },  
    green:{  
        width: 70,  
        height: 70,  
        backgroundColor: 'green',  
    }  
})  

Output

Combined Examples of Align Items and Justify-Content

Here we will see some combined examples where we will use both justify-content and align-items.

Code 1

In this example, we will align the items in mid of the container. The code will look as follows:

import { StyleSheet,View } from 'react-native';
import React, { Component } from 'react';  
 
 
export default class FlexDirectionBasics extends Component {  
    render() {  
        return (  
            <View style={styles.container}>  
                <View style={styles.aqua} />  
                <View style={styles.red} />  
                <View style={styles.green} />  
            </View>  
        );  
    }  
}  
const styles = StyleSheet.create({  
    container:{  
        flex: 1,  
        flexDirection: 'coloumn',
        justifyContent: 'center',  
        alignItems: 'center',
    },  
    aqua:{  
        width: 70,  
        height: 70,  
        backgroundColor: 'aqua',  
    },  
    red:{  
        width: 70,  
        height: 70,  
        backgroundColor: 'red',  
    },  
    green:{  
        width: 70,  
        height: 70,  
        backgroundColor: 'green',  
    }  
})  

Output 1

Code 2

Here we will try to set the items on the flex-end side with even space between them. The code for the following task will look like this:

import { StyleSheet,View } from 'react-native';
import React, { Component } from 'react';  
 
export default class FlexDirectionBasics extends Component {  
    render() {  
        return (  
            <View style={styles.container}>  
                <View style={styles.aqua} />  
                <View style={styles.red} />  
                <View style={styles.green} />  
            </View>  
        );  
    }  
}  
const styles = StyleSheet.create({  
    container:{  
        flex: 1,  
        flexDirection: 'coloumn',
        justifyContent: 'space-around',  
        alignItems: 'flex-end',
    },  
    aqua:{  
        width: 70,  
        height: 70,  
        backgroundColor: 'aqua',  
    },  
    red:{  
        width: 70,  
        height: 70,  
        backgroundColor: 'red',  
    },  
    green:{  
        width: 70,  
        height: 70,  
        backgroundColor: 'green',  
    }  
})  

Output 2

Also see,  React Native Reanimated

Read More, React Native Paper

FAQs

Write some of the benefits of using react-native.

With the help of this, developers can make mobile applications by using javascript, even without learning any new programming language like kotlin for android studio.

How is react different from Cordova in making the mobile application?

The mobile app, which is made using react-native, is a real running application on mobile, whereas Cordova made a web running application.

What is the function of flex-wrap?

Flex wrap tells the direction of where the elements will be flooded when the browser's width is changed.

What is the function of the flex-basis property?

The flex basis defines the width of the flex element.

Conclusion

In this article, we have extensively discussed FlexBox in react native with a proper introduction and its properties, followed by examples of different properties with code and output.

We hope this blog has helped you enhance your knowledge of FlexBox in react native.

Refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, React, JavaScript, System Design, etc. Enrol in our courses and refer to the mock test and problems available; take a look at the interview experiences and interview bundle for placement preparations. Do upvote our blog to help other ninjas grow.

 “Happy Coding!”