Flexbox in React Native

Note: Flexbox works same as it works in CSS for web (Visit). The only difference is that in web by default flex direction is row but in React Native it is column.

That is the main axis and the cross axis are interchanged in comparison with CSS.

Layout with Flexbox

A component can specify the layout of its children using the Flexbox . Flexbox is designed to provide a consistent layout on different screen sizes.

We will normally use a combination of flexDirection, alignItems, and justifyContent to achieve the right layout.

Flex

flex will define how the items are going to fill over the available space w.r.t to our main axis. Space will be divided according to each element's flex property.

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

const Flex = () => {
  return (
    <View
      style={styles.container}>
      <View style={{flex: 1, backgroundColor: 'red'}} />
      <View style={{flex: 2, backgroundColor: 'orange'}} />
      <View style={{flex: 3, backgroundColor: 'green'}} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
});

export default Flex;

In the following example, the red, orange, and green views are all children in the container view that has flex: 1 set.

The red view uses flex: 1 , the orange view uses flex: 2, and the green view uses flex: 3 .

1+2+3 = 6, which means that the red view will get 1/6 of the space, the orange 2/6 of the space, and the green 3/6 of the space.

Flex Direction

flexDirection controls direction in which the children of a parent element will be displayed. This is also referred to as the main axis. The cross axis is the axis perpendicular to the main axis.

It has the following value:

• column (default value): Align children from top to bottom. If wrapping is enabled, then the next line will start to the right of the first item on the top of the container.

• row Align: children from left to right. If wrapping is enabled, then the next line will start under the first item on the left of the container.

• column-reverse: Align children from bottom to top. If wrapping is enabled, then the next line will start to the right of the first item on the bottom of the container.

• row-reverse: Align children from right to left. If wrapping is enabled, then the next line will start under the first item on the right of the container.

Example:

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

const Flex = () => {
  return (
    <View
      style={styles.container}>
      <View style={{flex: 1, backgroundColor: 'red'}} />
      <View style={{flex: 2, backgroundColor: 'orange'}} />
      <View style={{flex: 3, backgroundColor: 'green'}} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    flexDirection: 'row',

  },
});

export default Flex;

In the above code i have set the flexDirection to row in container, so the items that were aligned in column by default has been aligned in row.

Justify Content

justifyContent describes how to align children within the main axis of their container.

It has the following value:

• flex-start(default value) Align children of a container to the start of the container's main axis.

• flex-end Align children of a container to the end of the container's main axis.

• center Align children of a container in the center of the container's main axis.

• space-between Evenly space off children across the container's main axis, distributing the remaining space between the children.

• space-around Evenly space off children across the container's main axis, distributing the remaining space around the children. Compared to space-between, using space-around will result in space being distributed to the beginning of the first child and end of the last child.

• space-evenly Evenly distribute children within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.

Align Items

alignItems describes how to align children within the cross axis of their container

It has the following values:

• stretch (default value) Stretch children of a container to match the height of the container's cross axis.

• flex-start Align children of a container to the start of the container's cross axis.

• flex-end Align children of a container to the end of the container's cross axis.

• center Align children of a container in the center of the container's cross axis.

• baseline Align children of a container along a common baseline. Individual children can be set to be the reference baseline for their parents.

Example:

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

const Flex = () => {
  return (
    <View
      style={styles.container}>
      <View style={{backgroundColor: 'red', height: 100, width: 100,}} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    flexDirection: 'row',
    backgroundColor: 'blue',
    //  justifyContent: 'center',
    //  alignItems: 'center'

  },
});

export default Flex;

After applying the comments

For learning more visit the official page