Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
FlexBox and its Properties
2.1.
Properties of FlexBox
2.1.1.
Flex direction
2.1.2.
Justify Content
2.1.3.
Align Items
3.
Understanding FlexBox with Examples
3.1.
Flex Direction
3.1.1.
Code
3.1.2.
Output
3.2.
Justify Content
3.2.1.
Code
3.2.2.
Output
3.3.
Align Items
3.3.1.
Code
3.3.2.
Output
3.4.
Combined Examples of Align Items and Justify-Content
3.4.1.
Code 1
3.4.2.
Output 1
3.4.3.
Code 2
3.4.4.
Output 2
4.
FAQs
4.1.
Write some of the benefits of using react-native.
4.2.
How is react different from Cordova in making the mobile application?
4.3.
What is the function of flex-wrap?
4.4.
What is the function of the flex-basis property?
5.
Conclusion
Last Updated: Mar 27, 2024
Easy

React Native Layout and Flexbox

Author Naman Kukreja
0 upvote
Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

Suppose you are a developer. Sometimes you have to deal with web development or simply HTML and CSS. In that case, you must have faced difficulty arranging the layouts and positions of elements.

In some scenarios, if you want to arrange all the elements towards the left, center, or right, you have to do it individually for every element. So is there any better way to efficiently handle the layout and positioning of elements?

The answer is Yes. We can use the Flexbox property to arrange the elements together and quickly. We will learn all about flexbox while preceding further in the blog, so let's get on with our topic without wasting any time.

Click on the following link to read further: Hooks in React JS

FlexBox and its Properties

Flexbox is an option available in CSS that enables you to manage layouts based on rows and columns. This is the default way to manage layouts in react. It is used in mobile development as it can be used to adjust our layout for different screen sizes and is also responsive.

Properties of FlexBox

In this section, we will have a brief introduction to the properties of the flexbox. We will learn all of them with examples in a different blog section.

Flex direction

flex-direction is the property of flex that controls the order in which the flexbox items will be arranged. There are mainly four directions or values which can have. By default, the direction of flex is row.

  1. Row: the elements will arrange in left to right order according to their size. And if they have to wrap, then the following line will start under the first item of the previous row.
  2. Column: The items will be arranged in the top to bottom order. And if they have to wrap, then the following line will start in the right direction of the last line.
  3. Column- reverse: As the name suggests, it works in the opposite direction of the column, i.e., in this, items will align in the bottom to the top order. And in the case of wrapping, it will start from the bottom of the container in the right direction of the last line.
  4. Row-reverse: This is the opposite of row as it aligns the items in the right to left order, and in the case of wrapping, the next line will start to form the right side of the container and below the last line.

Justify Content

This property defines or describes how the children will align with the central axis of the parent container. It will also be responsible for the different spaces between children inside the parent container. This property has different values that we can use as developers, which we will learn here.

  1. Flex-start:  It is the default value of justify-content in which it arranges or aligns the items in the direction of flex of the central axis.
  2. Flex-end: The items will be arranged at the opposite end of the container's central axis.
  3. Space-between: Align the children in the main direction with equal spaces between all of them.
  4. Space-around: It will arrange the children evenly along the container's main axis. In this, the half-space of the total space between children will be at the start of the flex and another half at last.
  5. Space-evenly: The children will be arranged in equal space along with the main axis start and end.
  6. Center: It will align the children in the container's main axis center.

Align Items

It will describe how the children will arrange themselves in the container. It is pretty similar to justify-content, but the difference between them is that justify-content arranges the items along the central axis and  align items will arrange them in a cross axis.

  1. Stretch: The children will be stretched to match the container’s height along the cross axis.
  2. Flex-start: It will arrange the children at the start of the container along the cross axis.
  3. Flex-end: The items will be arranged at the end of the container along the cross axis.
  4. Center: Align the children along the center of the cross axis.
  5. Baseline: It will align the children along the standard baseline of the cross axis. Each element can be adjusted accordingly.
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

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!”

Previous article
React Native Buttons
Next article
Reverse Polish Notation
Live masterclass