React Native — Flexbox Layout

React Native is a mobile development that’s based on React that we can use to do mobile development.

In this article, we’ll look at how to use it to create an app with React Native.

Layout with Flexbox

We can use flexbox for layouts with React Native.

It works the same way as CSS.

Flex

For example, we can write:

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

export default function App() {
  return (
    <View style={{ flex: 1, flexDirection: 'column' }}>
      <View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} />
      <View style={{ width: 50, height: 50, backgroundColor: 'skyblue' }} />
      <View style={{ width: 50, height: 50, backgroundColor: 'steelblue' }} />
    </View>
  );
}

We create a column layout by setting flexDirection to 'column' on the outer view.

Then the inner views have their own dimensions set.

Layout Direction

The default direction for layouts is left to right.

It can also be set to right to left.

Justify Content

We can set the justifyContent property to spread the content the way we want.

For example, we can write:

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

export default function App() {
  return (
    <View style={{
      flex: 1,
      flexDirection: 'column',
      justifyContent: 'space-between',
    }}>
      <View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} />
      <View style={{ width: 50, height: 50, backgroundColor: 'skyblue' }} />
      <View style={{ width: 50, height: 50, backgroundColor: 'steelblue' }} />
    </View>
  );
}

We have flexDirection set to 'column' and justifyContent set to 'space-between' .

Therefore, the inner views will be spread evenly in a column.

Align Items

We can set the alignItems property to align the items.

For example, we can write:

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

export default function App() {
  return (
    <View style={{
      flex: 1,
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'stretch',
    }}>
      <View style={{ height: 50, backgroundColor: 'powderblue' }} />
      <View style={{ height: 50, backgroundColor: 'skyblue' }} />
      <View style={{ height: 50, backgroundColor: 'steelblue' }} />
    </View>
  );
}

We set alignItems to 'stretch' , so the inner views will stretch across the screen.

Other values for alignItems can be 'flex-start' , 'center' , or 'flex-end' .

Align Self

The alignSelf property is also available with React Native.

For example, we can write:

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

export default function App() {
  return (
    <View style={{
      flex: 1,
      flexDirection: 'column',
      justifyContent: 'center',
    }}>
      <View style={{ width: 50, height: 50, backgroundColor: 'powderblue', alignSelf: 'flex-end' }} />
      <View style={{ width: 50, height: 50, backgroundColor: 'skyblue' }} />
      <View style={{ width: 50, height: 50, backgroundColor: 'steelblue' }} />
    </View>
  );
}

to add the alignSelf property to our first inner view.

It’s set to 'flex-end' so it’ll be put on the right side.

Conclusion

We can use many flexbox properties to create layouts with React Native.