React Native Flexbox alignItems Property

In this article, We are going to see the Flexbox alignItems Property in React Native. Flexbox has three main properties. One of them is alignItems. alignItems property is used to determine how should children’s components be aligned along the secondary axis of their container. The secondary axis is always opposite to the primary axis. If the primary axis is a column, then the secondary will be a row, and vice-versa.

Syntax:  

alignItems: stretch|center|flex-start|flex-end|baseline;

Property Values:

• stretch: It is the default value of alignItems. In this, the children’s components are stretched to fit the height of the container’s secondary axis.
• center: Alignment of the children components should be at the center of the container’s secondary axis.
• flex-start: Children components will be aligned to the beginning of the container’s secondary axis.
• flex-end: Children components will be aligned to the end of the container’s secondary axis.
• baseline: Children’s components will be aligned to the baseline of the container.

Implementation:

• Step 1: Open your terminal and install expo-cli by the following command.

  npm install -g expo-cli

• Step 2: Now create a project by the following command.

  expo init myapp

• Step 3: Now go into your project folder i.e. myapp

  cd myapp

Project Structure:

Example 1: Here in this example, flex-direction is set to row, and alignItems property value is stretch. When we put the value stretch for alignItems then we do not give the dimension to our secondary axis. Hence, in the following code, we have not given the height to our item.

App.js

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

const App = (props) => {
  return (
     <View style = {styles.container}>
        <View style = {[styles.item,{backgroundColor:'green'}]} />
        <View style = {[styles.item,{backgroundColor:'blue'}]} />
        <View style = {[styles.item,{backgroundColor:'red'}]} />
     </View>
  )
}
export default App;

const styles = StyleSheet.create ({
  container: {
     flexDirection: 'row',
     alignItems: 'stretch',
     height: 700
  },
  item:{
    width:100
  }
})

Start the server by using the following command.

npm run android

Output: If your emulator did not open automatically then you need to do it manually. First, go to your android studio and run the emulator. Now start the server again. 

GFG

Example 2: In this example, the entire code will be the same we will just change the value of alignItems property to center and provide the height to the item.

App.js

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

const App = (props) => {
  return (
     <View style = {styles.container}>
        <View style = {[styles.item,{backgroundColor:'green'}]} />
        <View style = {[styles.item,{backgroundColor:'blue'}]} />
        <View style = {[styles.item,{backgroundColor:'red'}]} />
     </View>
  )
}
export default App;

const styles = StyleSheet.create ({
  container: {
     flexDirection: 'row',
     alignItems: 'center',
     height: 700
  },
  item:{
    width:100,
    height:100
  }
})

Output:

GFG

Now we will keep the entire code the same and just do the changes in alignItems property value to see the change.

• Property flex-start illustration, use the following syntax:

  alignItems : 'flex-start',

  

  GFG

• Property flex-end illustration, use the following syntax:

  alignItems:'flex-end',

  

  GFG

• Property baseline illustration, use the following syntax:

  alignItems:'baseline',

  

  GFG

Reference:https://reactnative.dev/docs/flexbox#align-items