React Native Positioning Element with Flex

by Online Tutorials Library July 14, 2022

React Native Positioning Element with Flex

In the previous article Layout and Flexbox, we discuss about the Flexbox and its properties. In this tutorial, we will set the position of elements with Flex.

Example 1

Create a View component and place two elements TextInput and Button. The View component with flex property (1) occupy full space of device. The elements TextInput and Button are set in default flex axis (as column).

  import React, { Component } from “react”;  import { StyleSheet, TextInput, View , Button } from “react-native”;    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=”An awesome place”                          onChangeText={this.placeNameChangedHandler}                          style={styles.placeInput}                  />                  <Button                          title=”Button”                          onPress={this.placeSubmitHandler}                  />              </View>          );      }  }    const styles = StyleSheet.create({      container: {          flex: 1,          padding: 26,          backgroundColor: “#fff”,          justifyContent: “flex-start”      }  });  

Output:

Example 2

In this example, we will place the Button right to TextInput element. Add a child View component inside parent View with flex: 1 and flexDirtection : “row”. Setting flex: 1 for inner View occupies whole space from top to bottom and left to right. The flexDirtection: “row” set the elements in row-wise inside the inner View component.

  import React, { Component } from “react”;  import { StyleSheet, View, TextInput, Button } from “react-native”;    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=”An awesome place”                              onChangeText={this.placeNameChangedHandler}                      />                      <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,          flexDirection: “row”      }  });  

Output:

The flex: 1 for inner View occupy full space which does not look good as the TextInput and Button occupy all space from top to bottom.

Example 3

In this example, we remove flex property of inner View and add width: 100%. Removing flex form inner View set the default dimension of elements. Setting width :”100%” for inner View occupy full width and default height of elements.

  import React, { Component } from “react”;  import { StyleSheet, View, TextInput, Button } from “react-native”;    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=”An awesome place”                              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:

Next TopicReact Native ScrollView

React Native Positioning Element with Flex

React Native Positioning Element with Flex

Example 1

Example 2

Example 3

Area Aptitude Concepts and Formulas

Carousel in React

You may also like