Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Flex in React Native
3.
Understanding Flex with Examples
3.1.
Example 1
3.1.1.
Code
3.1.2.
Output
3.2.
Example 2
3.2.1.
Code
3.2.2.
Output
3.3.
Example 3
3.3.1.
Code
3.3.2.
Output
4.
Frequently Asked Questions
4.1.
How is react native different from reactJs?
4.2.
What does flexDirection specify in flex?
4.3.
Mention some of the advantages of react-native.
4.4.
Are there any default props available in react native?
5.
Conclusion
Last Updated: Mar 27, 2024
Easy

React Native Positioning Elements with flex

Author Naman Kukreja
0 upvote
Leveraging ChatGPT - GenAI as a Microsoft Data Expert
Speaker
Prerita Agarwal
Data Specialist @
23 Jul, 2024 @ 01:30 PM

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 achieve our goal quickly with the help of flex and using its different properties to adjust elements' position. We will learn about different positions in flex while moving further in the blog, so let’s get on with our topic without wasting any further time.

Also See, Hooks in React JS

Flex in React Native

Flex is a property that decides the positioning of elements within a container’s main and cross-axis. We can select the flex property in CSS, but it is selected by default in react native. In react, flex makes the component flexible according to the flex value.

We have already explained everything about flexbox and layout in react native with scratch to a higher level with proper examples. There we have explained all the properties in detail. So If you have any doubt about the properties of flex, it is advised that you must go through this blog first. After understanding that blog, there is a meagre chance of any doubt. In this blog, we will discuss various examples using different flex properties to set different positions of elements.

Read More, React Native Paper

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 Flex with Examples

In this blog, the section will see various examples of different positions of elements in the display.

Example 1

In this example, we will place the text input and button right to each other. To do so, set the flexDirection: row and flex: 1. Flex:1 means the inner components will occupy the total height from top to bottom, and the flexDirection: row will arrange the items in row order.

Code

import { StyleSheet, View, TextInput, Button } from "react-native"; 
import React, { Component } from "react";  
 
export default class App extends Component {  
    state = {  
        placeName: "",  
        places: []  
    };  
 
    placeNameChangedHandler = val => {  
        this.setState({  
            placeName: val  
        });  
    };  
 
    placeSubmitHandler = () => {  
        alert("button clicked")  
    };  
 
    render() {  
        return (  
            <View style={styles.container}>  
                <View style={styles.innerContainer}>  
                    <TextInput  
                            placeholder="Enter your text here"  
                            onChangeText={this.placeNameChangedHandler}  
                    />  
                    <Button  
                            title="Button"  
                            onPress={this.placeSubmitHandler}  
                    />  
                </View>  
            </View>  
        );  
    }  
}  
 
const styles = StyleSheet.create({  
    container: {  
        flex: 1,  
        padding: 26,  
        backgroundColor: "blue",  
        justifyContent: "flex-start"  
    },  
    innerContainer:{  
        flex: 1,  
        flexDirection: "row"  
    }  
});  

Output

Example 2

In this example, we will place the textInput and button in a normal flex axis with flex-direction specified as the column. This will occupy the full space of the device.

Code

import { StyleSheet, TextInput, View , Button } from "react-native";  
import React, { Component } from "react";  
  export default class App extends Component {  
    state = {  
        placeName: "",  
        places: []  
    };  
 
    placeNameChangedHandler = val => {  
        this.setState({  
            placeName: val  
        });  
    };  
 
    placeSubmitHandler = () => {  
        alert("button clicked")  
    };  
 
    render() {  
        return (  
            <View style={styles.container}>  
                <TextInput  
                        placeholder="Enter your text here"  
                        onChangeText={this.placeNameChangedHandler}  
                        style={styles.placeInput}  
                />  
                <Button  
                        title="Button"  
                        onPress={this.placeSubmitHandler}  
                />  
            </View>  
        );  
    }  
}  
 
const styles = StyleSheet.create({  
    container: {  
        flex: 1,  
        padding: 26,  
        backgroundColor: "blue",  
        justifyContent: "flex-start"  
    }  
});

Output

Example 3

This example will set the inner view width as 100% and remove the flex property. After removing the flex from inside, now textInput and button will lie alongside each other, and their heights will be set to default.

Code

import { StyleSheet, View, TextInput, Button } from "react-native";  
import React, { Component } from "react";  

 
 
export default class App extends Component {  
    state = {  
        placeName: "",  
        places: []  
    };  
 
    placeNameChangedHandler = val => {  
        this.setState({  
            placeName: val  
        });  
    };  
 
    placeSubmitHandler = () => {  
        alert("button clicked")  
    };  
 
    render() {  
        return (  
            <View style={styles.container}>  
                <View style={styles.innerContainer}>  
                    <TextInput  
                            placeholder="Enter your text here"  
                            onChangeText={this.placeNameChangedHandler}  
                            style={styles.textStyle}  
                    />  
                    <Button  
                            title="Button"  
                            onPress={this.placeSubmitHandler}  
                    />  
                </View>  
            </View>  
        );  
    }  
}  
 
const styles = StyleSheet.create({  
    container: {  
        flex: 1,  
        padding: 26,  
        backgroundColor: "#fff",  
        justifyContent: "flex-start"  
    },  
    innerContainer:{  
       // flex: 1,  
        width: "100%",  
        flexDirection: "row",  
        justifyContent: "space-between",  
        alignItems: "center"  
    },  
    textStyle:{  
        width: "70%",  
        backgroundColor: "gray",  
    },  
    buttonStyle:{  
        width: "30%",  
    }  
});  

Output

Also see,  React Native Reanimated, React devtools

Frequently Asked Questions

How is react native different from reactJs?

React Js is used for making responsive web applications, whereas we use react native when we want to create a mobile application with a native feel.

What does flexDirection specify in flex?

It specifies the direction in which elements are aligned, either horizontally or vertically.

Mention some of the advantages of react-native.

It has a very large community, we can also reuse the code that is written once, and with this, we also have some additional plugins.

Are there any default props available in react native?

Yes, they are present in react native and can be used when we do not pass the prop value, then it can use them.

Conclusion

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

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

And if you want to learn more about flexbox and its properties, you must refer to this blog. You will understand every property of flex with explanation and with examples.

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

Live masterclass