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).

1. import React, { Component } from "react";  
2. import { StyleSheet, TextInput, View , Button } from "react-native";  
3.   
4. export default class App extends Component {  
5.     state = {  
6.         placeName: "",  
7.         places: []  
8.     };  
9.   
10.     placeNameChangedHandler = val => {  
11.         this.setState({  
12.             placeName: val  
13.         });  
14.     };  
15.   
16.     placeSubmitHandler = () => {  
17.         alert("button clicked")  
18.     };  
19.   
20.     render() {  
21.         return (  
22.             <View style={styles.container}>  
23.                 <TextInput  
24.                         placeholder="An awesome place"  
25.                         onChangeText={this.placeNameChangedHandler}  
26.                         style={styles.placeInput}  
27.                 />  
28.                 <Button  
29.                         title="Button"  
30.                         onPress={this.placeSubmitHandler}  
31.                 />  
32.             </View>  
33.         );  
34.     }  
35. }  
36.   
37. const styles = StyleSheet.create({  
38.     container: {  
39.         flex: 1,  
40.         padding: 26,  
41.         backgroundColor: "#fff",  
42.         justifyContent: "flex-start"  
43.     }  
44. });  

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.

1. import React, { Component } from "react";  
2. import { StyleSheet, View, TextInput, Button } from "react-native";  
3.   
4. export default class App extends Component {  
5.     state = {  
6.         placeName: "",  
7.         places: []  
8.     };  
9.   
10.     placeNameChangedHandler = val => {  
11.         this.setState({  
12.             placeName: val  
13.         });  
14.     };  
15.   
16.     placeSubmitHandler = () => {  
17.         alert("button clicked")  
18.     };  
19.   
20.     render() {  
21.         return (  
22.             <View style={styles.container}>  
23.                 <View style={styles.innerContainer}>  
24.                     <TextInput  
25.                             placeholder="An awesome place"  
26.                             onChangeText={this.placeNameChangedHandler}  
27.                     />  
28.                     <Button  
29.                             title="Button"  
30.                             onPress={this.placeSubmitHandler}  
31.                     />  
32.                 </View>  
33.             </View>  
34.         );  
35.     }  
36. }  
37.   
38. const styles = StyleSheet.create({  
39.     container: {  
40.         flex: 1,  
41.         padding: 26,  
42.         backgroundColor: "#fff",  
43.         justifyContent: "flex-start"  
44.     },  
45.     innerContainer:{  
46.         flex: 1,  
47.         flexDirection: "row"  
48.     }  
49. });  

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.

1. import React, { Component } from "react";  
2. import { StyleSheet, View, TextInput, Button } from "react-native";  
3.   
4. export default class App extends Component {  
5.     state = {  
6.         placeName: "",  
7.         places: []  
8.     };  
9.   
10.     placeNameChangedHandler = val => {  
11.         this.setState({  
12.             placeName: val  
13.         });  
14.     };  
15.   
16.     placeSubmitHandler = () => {  
17.         alert("button clicked")  
18.     };  
19.   
20.     render() {  
21.         return (  
22.             <View style={styles.container}>  
23.                 <View style={styles.innerContainer}>  
24.                     <TextInput  
25.                             placeholder="An awesome place"  
26.                             onChangeText={this.placeNameChangedHandler}  
27.                             style={styles.textStyle}  
28.                     />  
29.                     <Button  
30.                             title="Button"  
31.                             onPress={this.placeSubmitHandler}  
32.                     />  
33.                 </View>  
34.             </View>  
35.         );  
36.     }  
37. }  
38.   
39. const styles = StyleSheet.create({  
40.     container: {  
41.         flex: 1,  
42.         padding: 26,  
43.         backgroundColor: "#fff",  
44.         justifyContent: "flex-start"  
45.     },  
46.     innerContainer:{  
47.        // flex: 1,  
48.         width: "100%",  
49.         flexDirection: "row",  
50.         justifyContent: "space-between",  
51.         alignItems: "center"  
52.     },  
53.     textStyle:{  
54.         width: "70%",  
55.         backgroundColor: "gray",  
56.     },  
57.     buttonStyle:{  
58.         width: "30%",  
59.     }  
60. });  

Output: