React Native Positioning Elements with flex

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