React Native Layout and Flexbox

React Native Flexbox is an algorithm to specify the layout of component's children. It provides a consistent layout on different screen sizes.

Property of Flexbox

Flexbox provides three main properties to achieve the desired layout. These properties are: flexDirection, justifyContent, and alignItems.

Property	Values	Description
flexDirection	'column', 'row'	Used to align its elements vertically or horizontally.
justifyContent	'center', 'flex-start', 'flex-end', 'space-around', 'space-between'	Used to distribute the elements inside the container.
alignItems	'center', 'flex-start', 'flex-end', 'stretched'	Used to distribute the element inside the container along the secondary axis (opposite to flexDirection).

React Native Flex Direction

The flexDirection adds the style to the component in a primary axis of its layout. It has a property row and column to organize children horizontally and vertically respectively. The default flexDirection is a column.

1. import React, { Component } from 'react';  
2. import { StyleSheet,View } from 'react-native';  
3.   
4. export default class FlexDirectionBasics extends Component {  
5.     render() {  
6.         return (  
7.             <View style={styles.container}>  
8.                 <View style={styles.powderblue} />  
9.                 <View style={styles.skyblue} />  
10.                 <View style={styles.steelblue} />  
11.             </View>  
12.         );  
13.     }  
14. }  
15. const styles = StyleSheet.create({  
16.     container:{  
17.         flex: 1,  
18.         flexDirection: 'row',// set elements horizontally, try column.  
19.     },  
20.     powderblue:{  
21.         width: 60,  
22.         height: 60,  
23.         backgroundColor: 'powderblue',  
24.     },  
25.     skyblue:{  
26.         width: 60,  
27.         height: 60,  
28.         backgroundColor: 'skyblue',  
29.     },  
30.     steelblue:{  
31.         width: 60,  
32.         height: 60,  
33.         backgroundColor: 'steelblue',  
34.     }  
35. })  

Output

React Native Justify Content

The justifyContent determines the distribution of children component along the primary axis. The children component are distributed at the start, end, center, or space evenly.

1. import React, { Component } from 'react';  
2. import { StyleSheet,View } from 'react-native';  
3.   
4. export default class JustifyContentBasics extends Component {  
5.     render() {  
6.         return (  
7.             <View style={styles.container}>  
8.                 <View style={styles.powderblue} />  
9.                 <View style={styles.skyblue} />  
10.                 <View style={styles.steelblue} />  
11.             </View>  
12.         );  
13.     }  
14. }  
15. const styles = StyleSheet.create({  
16.     container:{  
17.         flex: 1,  
18.         flexDirection: 'column', // set elements horizontally`.  
19.         justifyContent: 'center',  
20.   
21.     },  
22.     powderblue:{  
23.         width: 60,  
24.         height: 60,  
25.         backgroundColor: 'powderblue'  
26.     },  
27.     skyblue:{  
28.         width: 60,  
29.         height: 60,  
30.         backgroundColor: 'skyblue',  
31.     },  
32.     steelblue:{  
33.         width: 60,  
34.         height: 60,  
35.         backgroundColor: 'steelblue',  
36.     }  
37. })  

Output

React Native Align Items

The alignItems determine the alignment of children component along the secondary axis. If the primary axis is a column, then the secondary is a row, and when a primary axis is a row, then the secondary is a column. Using the alignItems, the children are aligned at start, end, center, or stretched.

1. import React, { Component } from 'react';  
2. import { StyleSheet,View } from 'react-native';  
3.   
4. export default class AlignItemsBasics extends Component {  
5.     render() {  
6.         return (  
7.             <View style={styles.container}>  
8.                 <View style={styles.powderblue} />  
9.                 <View style={styles.skyblue} />  
10.                 <View style={styles.steelblue} />  
11.             </View>  
12.         );  
13.     }  
14. }  
15. const styles = StyleSheet.create({  
16.     container:{  
17.         flex: 1,  
18.         flexDirection: 'column', // set elements horizontally`.  
19.         justifyContent: 'center',  
20.         alignItems: 'stretch',  
21.     },  
22.     powderblue:{  
23.         width: 60,  
24.         height: 60,  
25.         backgroundColor: 'powderblue'  
26.     },  
27.     skyblue:{  
28.         width: 60,  
29.         height: 60,  
30.         backgroundColor: 'skyblue',  
31.     },  
32.     steelblue:{  
33.         /*width: 60,*/  
34.         height: 60,  
35.         backgroundColor: 'steelblue',  
36.     }  
37. })  

Output

Note: The stretch does not work if the children have a fixed dimension along the secondary axis. In above example, the alignItems: stretch will not work until we remove width: 50.