How to build layouts with Flexbox in React Native
Flexbox is a layout method designed to provide consistent design layouts for different screen sizes. It comes with several properties, such as flexDirection, alignItems, and justifyContent. We can use these properties to achieve a suitable layout for our application. The behavior of Flexbox in React Native is similar to its behavior in CSS.
Properties
Let’s review some of the most common properties of Flexbox in React Native.
The flex property
flex defines how our components will fill the available space along the main axis. The space is partitioned based on the flex attribute assigned to each component.
The code snippet below shows how we can apply the flex property to the View component.
import React from 'react';import { View } from 'react-native';const App = () => {return (<View style={{ flex: 1 }}>{/* Children components */}</View>);}export default App;
Suppose we have three View components with the flex values of 3, 4, and 5, respectively. Then the total will be 12. This means:
The
Viewwith aflexvalue of3will occupy3/12of the parent component.The
Viewwith aflexvalue of4will occupy4/12of the parent component.The
Viewwith aflexvalue of5will occupy5/12of the parent component.
The illustration below summarizes the working of theflexproperty.
The flexDirection property
flexDirection is used to specify whether the components will be aligned vertically or horizontally. It determines the main axis. flexDirection can have the following values:
-
column: This is the default value. Incolumn, the child components are aligned from top to bottom. -
row: The child components are aligned from left to right. -
column-reverse: The child components are aligned from bottom to top. -
row-reverse: The child components are aligned from right to left.
The code snippet below shows how to use the flexDirection property of the Flexbox.
import React from 'react';
import { SafeAreaView, View, StyleSheet } from 'react-native';
const App = () => {
return (
<SafeAreaView style={styles.container}>
<View style={styles.directionStyle1}>
<View style={styles.style1} />
<View style={styles.style2} />
</View>
<View style={styles.directionStyle2}>
<View style={styles.style1} />
<View style={styles.style2} />
</View>
<View style={styles.directionStyle3}>
<View style={styles.style1} />
<View style={styles.style2} />
</View>
<View style={styles.directionStyle4}>
<View style={styles.style1} />
<View style={styles.style2} />
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
style1: {
width: 50,
height: 50,
backgroundColor: 'orange'
},
style2: {
width: 50,
height: 50,
backgroundColor: 'red'
},
directionStyle1: {
flex: 1,
flexDirection: "column"
},
directionStyle2: {
flex: 1,
flexDirection: "row"
},
directionStyle3: {
flex: 1,
flexDirection: "column-reverse"
},
directionStyle4: {
flex: 1,
flexDirection: "row-reverse"
}
});
export default App;The flexWrap property
This property controls the behavior of the child component when it exceeds the size of the parent component. flexWrap can have the following two values:
-
nowrap: This is the default value. If the size of the child component is larger than the parent component, it will flow off the screen. The child component will be clipped and will not be visible to the user. -
wrap: If the size of the child component is larger than the parent component, it will be moved to the next column.
The code snippet below shows how to use the flexWrap property of the Flexbox.
import React from 'react';
import { SafeAreaView, View, StyleSheet } from 'react-native';
const App = () => {
return (
<SafeAreaView style={styles.container}>
<View style={styles.viewStyle1} />
<View style={styles.viewStyle2} />
<View style={styles.viewStyle3} />
<View style={styles.viewStyle4} />
<View style={styles.viewStyle5} />
<View style={styles.viewStyle6} />
<View style={styles.viewStyle7} />
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
flexWrap: "wrap" // can also be changed to nowrap
},
viewStyle1: {
width: 150,
height: 180,
backgroundColor: 'red'
},
viewStyle2: {
width: 150,
height: 180,
backgroundColor: 'orange'
},
viewStyle3: {
width: 150,
height: 180,
backgroundColor: 'blue'
},
viewStyle4: {
width: 150,
height: 180,
backgroundColor: 'green'
},
viewStyle5: {
width: 150,
height: 180,
backgroundColor: 'purple'
},
viewStyle6: {
width: 150,
height: 180,
backgroundColor: 'pink'
},
viewStyle7: {
width: 150,
height: 180,
backgroundColor: 'deepskyblue'
},
});
export default App;The alignItems property
alignItems describes how the child components will be aligned along the cross axis. The cross axis depends on the flexDirection:
-
If the
flexDirectionis set torow, then the cross axis will becolumn. -
If the
flexDirectionis set tocolumn, then the cross axis will berow.
The following are some of the most used values of alignItems:
-
stretch: This is the default value and causes the child components to stretch and fill the parent component along the cross axis. -
center: This value causes the child components to be aligned at the center of the parent component along the cross axis. -
flex-start: This value causes the child components to be aligned at the start of the parent component along the cross axis. -
flex-end: This value causes the child components to be aligned at the end of the parent component along the cross axis.
The code snippet below shows how to use the alignItems property of the Flexbox.
import React from 'react';
import { SafeAreaView, View, StyleSheet } from 'react-native';
const App = () => {
return (
<SafeAreaView style={styles.container}>
<View style={styles.viewStyle1} />
<View style={styles.viewStyle2} />
<View style={styles.viewStyle3} />
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
alignItems: "center" // can also be changed to stretch, flex-start, and flex-end
},
viewStyle1: {
width: 80,
height: 80,
backgroundColor: 'red'
},
viewStyle2: {
width: 80,
height: 80,
backgroundColor: 'blue'
},
viewStyle3: {
width: 80,
height: 80,
backgroundColor: 'orange'
},
});
export default App;The justifyContent property
justifyContent describes how the child components will be aligned along the main axis. The main axis depends on the flexDirection:
If the
flexDirectionis set torow, then the main axis will berow.If the
flexDirectionis set tocolumn, then the main axis will becolumn.
The following are some of the most used values of justifyContent:
flex-start: This is the default value and causes the child components to be aligned at the start of the parent component along the main axis.flex-end: This value causes the child components to be aligned at the end of the parent component along the main axis.center: This value causes the child components to be aligned at the center of the parent component along the main axis.space-between: This value causes the child components to be evenly spaced along the main axis of the parent component. Any remaining space is distributed between the child components.space-around: This value causes the child components to be evenly spaced along the main axis of the parent component. Any remaining space is distributed around the child components.
The code snippet below shows how to use the justifyContent property of the Flexbox.
import React from 'react';
import { SafeAreaView, View, StyleSheet } from 'react-native';
const App = () => {
return (
<SafeAreaView style={styles.container}>
<View style={styles.viewStyle1} />
<View style={styles.viewStyle2} />
<View style={styles.viewStyle3} />
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
justifyContent: "center" // can also be changed to flex-start, flex-end, space-between, and space-around
},
viewStyle1: {
width: 80,
height: 80,
backgroundColor: 'red'
},
viewStyle2: {
width: 80,
height: 80,
backgroundColor: 'blue'
},
viewStyle3: {
width: 80,
height: 80,
backgroundColor: 'orange'
},
});
export default App;The alignSelf property
All of the Flexbox properties we have discussed so far are applied to the parent component. Once applied to the parent component, those properties are also automatically applied to all children components. However, if we want to align a child component differently than the others, we can use the alignSelf property of the Flexbox. This property overrides the alignItems property and allows a child to align itself independently of other children's components.
import React from 'react';
import { SafeAreaView, View, StyleSheet } from 'react-native';
const App = () => {
return (
<SafeAreaView style={styles.container}>
<View style={styles.viewStyle1} />
<View style={styles.viewStyle2} />
<View style={styles.viewStyle3} />
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
alignItems: "center"
},
viewStyle1: {
width: 80,
height: 80,
backgroundColor: 'red',
},
viewStyle2: {
width: 80,
height: 80,
backgroundColor: 'blue',
alignSelf: "flex-start" // can also be changed to auto, stretch, center, and flex-end
},
viewStyle3: {
width: 80,
height: 80,
backgroundColor: 'orange',
alignSelf: "flex-end" // can also be changed to auto, stretch, center, and flex-start
},
});
export default App;Free Resources
