How to use Flexbox in React Native?

Flexbox is a one-dimensional layout system used in React Native for arranging and aligning items in rows or columns, similar to how it's used in CSS on the web, but with some default differences. It is designed to help us create layouts that look good on different screen sizes.

Using flexbox in React Native is like arranging objects on a shelf by placing books, pictures, and other items in different positions and orientations. This allows us to create responsive, flexible layouts that adapt to different screen sizes and orientations.

In this tutorial, we will go through the basics of using Flexbox in React Native.

Layout in React Native with Flexbox

To get the desired layout, we usually use a combination of flexDirection, alignItems, and justifyContent in React Native.

flexDirection

The flexDirection property is used to specify the primary axis of a layout. By default, the value is set to "column”.

Here are the possible options for flexDirection −

• row − Arrange items horizontally, from left to right

• row-reverse − Arrange items horizontally, from right to left

• column − Arrange items vertically, from top to bottom

• column-reverse − Arrange items vertically, from bottom to top

justifyContent

The justifyContent property controls the way items are distributed along the primary axis of a container. By default, the value is set to " flex-start”.

Here are the possible options for justifyContent −

• flex-start − aligns items to the beginning of the container.

• flex-end − aligns items to the end of the container.

• center − centers items within the container.

• space-between − evenly distributes items, with the first item at the beginning of the container and the last item at the end.

• space-around − evenly distributes items with equal space around them.

• space-evenly − evenly distributes items with equal space around them and at the beginning and end of the container.

alignItems

The alignItems property is used to align items along the primary axis of a layout. When flexDirection is set to "row", alignItems controls the horizontal alignment of items, and when flexDirection is set to "column", alignItems controls the vertical alignment of items.

The possible values for alignItems are −

• flex-start − Items are aligned to the start of the container.

• flex-end − Items are aligned to the end of the container.

• center − Items are centred in the container.

• stretch − Items are stretched to fill the container.

• baseline − Items are aligned based on their baselines.

Additional Properties

In addition to the commonly used flex property, there are other properties such as −

• flex − This property determines how much a component should grow relative to its siblings. A higher value means it will take up more space. For example, “flex: 1” will make the component expand to fill available space.

• flex-wrap − This property sets whether the flex items should wrap to a new line if there is not enough space in the container. The available values are nowrap, wrap, and wrap-reverse.

• flex-shrink − This property sets the ability of an item to shrink when the container is too small. The default value is 1.

• flex-grow − This property sets the ability of an item to grow when there is extra space in the container. The default value is 0.

• align-self − This property sets an individual item's alignment along the container's cross axis. The available values are auto, flex-start, flex-end, centre, stretch, and baseline.

• Order − This property sets the order of an item in the flex container. The default value is 0.

Example

In the example below, we create a vertical column layout using Flexbox in React Native.

The app displays three boxes of different colours that are arranged vertically within a container. We use the "flexDirection" property to set the direction of the layout to "column" and the "justifyContent" property to distribute the available space evenly between the boxes. Finally, the "alignItems" property is used to center the boxes within the container.

Overall, this example demonstrates the power and flexibility of Flexbox in React Native.

import React from "react";
import { View, Text } from "react-native"; 
const VerticalColumnLayoutExample = () => {
   return (
      <>
         <Text
            style={{
               fontSize: 20,
               fontWeight: "bold",
               textAlign: "center",
               marginBottom: "1rem"
            }}
         >
            Vertical Column Layout Example
         </Text>
         <View
            style={{
               flexDirection: "column",
               justifyContent: "space-between",
               alignItems: "center",
               height: 340
            }}
         >
            <View style={{ width: 100, height: 100, backgroundColor: "red" }} />
            <View style={{ width: 100, height: 100, backgroundColor: "green" }} />
            <View style={{ width: 100, height: 100, backgroundColor: "blue" }} />
         </View>
      </> 
   );
};
export default VerticalColumnLayoutExample;

Output

Example

In the example below, we're creating a horizontal row layout using Flexbox in React Native.

It creates a view with three child views, which are aligned using the "flexDirection," "justifyContent," and "alignItems" properties. The child views are also given background colours to make them visually distinguishable. The example showcases how these properties can be used to create different layouts in React Native.

import React from 'react';
import { View, StyleSheet ,Text} from 'react-native';

const App = () => {
   return (
      <>
         <Text style={{ fontSize: 20, fontWeight: 'bold', textAlign: "center", marginBottom: "0.5rem" }}> Horizontal Row Layout Example</Text> 
         <View style={styles.container}>
            <View style={styles.box1}></View>
            <View style={styles.box2}></View>
            <View style={styles.box3}></View>
         </View>
      </>
   );
};

const styles = StyleSheet.create({
   container: {
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'space-evenly',
      alignItems: 'center',
      backgroundColor: 'lightgray',
   },
   box1: {
      width: 100,
      height: 100,
      backgroundColor: 'red',
   },
   box2: {
      width: 100,
      height: 100,
      backgroundColor: 'blue',
   },
   box3: {
      width: 100,
      height: 100,
      backgroundColor: 'green',
   },
});
export default App;

Output

In this tutorial, we learned about using Flexbox in React Native for creating layouts. We discussed the main properties of Flexbox, such as flexDirection, justifyContent, and alignItems, which can be used to control the layout of components in a container. We saw how to create a vertical column layout and a horizontal row layout using Flexbox in React Native.

In the end, Flexbox is an essential skill for React Native developers looking to create modern and engaging user interfaces that provide a great user experience.