React Native Flexbox alignItems Property

25 May, 2021
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 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 2: Now create a project by the following command.
expo init myapp
Step 3: Now go into your project folder i.e. myappcd 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-start illustration, use the following syntax:
alignItems : 'flex-start',
GFG
Property flex-end illustration, use the following syntax:alignItems:'flex-end',GFG
Property flex-end illustration, use the following syntax:
alignItems:'flex-end',
GFG
Property baseline illustration, use the following syntax:alignItems:'baseline',GFG
Property baseline illustration, use the following syntax:
alignItems:'baseline',
GFG
Reference:https://reactnative.dev/docs/flexbox#align-items
Picked
React-Native
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.