React Native — Flexbox Alignment and Sizing

Photo by Alora Griffiths on Unsplash

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.

Align Content

We can use the alignContent property to set the alignment of the items in our React Native view.

For example, we can write:

import React from 'react';
import { View } from 'react-native';
export default function App() {
  return (
    <View style={{
      flex: 1,
      flexDirection: 'row',
      flexWrap: 'wrap',
      alignContent: 'flex-end'
    }}>
      <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 set the alignContent to 'flex-end' with the flexDirection set to 'row' to put the inner views at the bottom of the screen.

The alignContent property is only applied when we set the flexWrap property.

The default value of 'flex-start' which puts the items at the top of the screen.