React Native Apply alignItems on View Explained With Example

The alignItems is used with component’s style to determine the Alignment of children along with Secondary axis. If we use flexDirection: ‘row’ in our Root view then the primary AXIS is row and it will automatically converts the children to secondary axis Column and if we use flexDirection: ‘column’ then it will change the all sub-views to Row format. By default the flexDirection value is Column so according to that alignItems should set children views in Horizontally (X-Axis) format. So in this tutorial we would going to create different type of layout code with alignItems in android iOS react native application.

Note: baseline property of alignItems is currently not supported in React Native as per Facebook React Native Documentation.

Properties of alignItems :

flex-start,
center,
flex-end
stretch.

1. flex-start : The flex-start property of alignItems will push all the views into horizontally left side of screen.

Code for Above Screenshot with alignItems: ‘flex-start’ :

<br />
<View style={{ alignItems: ‘flex-start’, flex:1, margin: 5}}></p>
<p>        <View style={{ width:100, height: 100, justifyContent:’center’, backgroundColor: ‘#00BCD4’ }} ></p>
<p>            <Text style={{fontSize: 24, textAlign: ‘center’, color: ‘#fff’}}> View 1 </Text></p>
<p>        </View></p>
<p>        <View style={{ width: 100, height: 100, justifyContent:’center’, backgroundColor: ‘#FF1744’,}} ></p>
<p>        <Text style={{fontSize: 24, textAlign: ‘center’, color: ‘#fff’}}> View 2 </Text></p>
<p>        </View></p>
<p></View>

</View>

</View>

2. center : The center property of alignItems will set all the views into horizontally center of device screen.

Code for Above Screenshot with alignItems: ‘center’ :

<br />
<View style={{ alignItems: ‘center’, flex:1, margin: 5}}></p>
<p>        <View style={{ width:100, height: 100, justifyContent:’center’, backgroundColor: ‘#00BCD4’ }} ></p>
<p>            <Text style={{fontSize: 24, textAlign: ‘center’, color: ‘#fff’}}> View 1 </Text></p>
<p>        </View></p>
<p>        <View style={{ width: 100, height: 100, justifyContent:’center’, backgroundColor: ‘#FF1744’,}} ></p>
<p>        <Text style={{fontSize: 24, textAlign: ‘center’, color: ‘#fff’}}> View 2 </Text></p>
<p>        </View></p>
<p></View>

</View>

</View>

3. flex-end : The flex-end property of alignItems will push all the views into horizontally right side of device screen.

Code for Above Screenshot with alignItems: ‘flex-end’ :

<br />
<View style={{ alignItems: ‘flex-end’, flex:1, margin: 5}}></p>
<p>        <View style={{ width:100, height: 100, justifyContent:’center’, backgroundColor: ‘#00BCD4’ }} ></p>
<p>            <Text style={{fontSize: 24, textAlign: ‘center’, color: ‘#fff’}}> View 1 </Text></p>
<p>        </View></p>
<p>        <View style={{ width: 100, height: 100, justifyContent:’center’, backgroundColor: ‘#FF1744’,}} ></p>
<p>        <Text style={{fontSize: 24, textAlign: ‘center’, color: ‘#fff’}}> View 2 </Text></p>
<p>        </View></p>
<p></View>

</View>

</View>

4. stretch : The stretch property of alignItems will stretch the children View according to View’s inside content, but you need to remove the width:100 from children View. As you can see in below screenshot i have removed width:100 from view and it will automatically covers the whole width area.

Code for Above Screenshot with alignItems: ‘stretch’ :

<br />
<View style={{ alignItems: ‘stretch’, flex:1, margin: 5}}></p>
<p>        <View style={{ height: 100, justifyContent:’center’, backgroundColor: ‘#00BCD4’ }} ></p>
<p>            <Text style={{fontSize: 24, textAlign: ‘center’, color: ‘#fff’}}> View 1 </Text></p>
<p>        </View></p>
<p>        <View style={{ width: 100, height: 100, justifyContent:’center’, backgroundColor: ‘#FF1744’,}} ></p>
<p>        <Text style={{fontSize: 24, textAlign: ‘center’, color: ‘#fff’}}> View 2 </Text></p>
<p>        </View></p>
<p></View>

</View>

</View>

Complete source code for App.js File :

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, Text, View } from ‘react-native’;</p>
<p>export default class MainActivity extends Component {</p>
<p>  render()<br />
  {</p>
<p>    return (</p>
<p>      <View style={{ alignItems: ‘stretch’, flex:1, margin: 5}}></p>
<p>        <View style={{ height: 100, justifyContent:’center’, backgroundColor: ‘#00BCD4’ }} ></p>
<p>            <Text style={{fontSize: 24, textAlign: ‘center’, color: ‘#fff’}}> View 1 </Text></p>
<p>        </View></p>
<p>        <View style={{ width: 100, height: 100, justifyContent:’center’, backgroundColor: ‘#FF1744’,}} ></p>
<p>        <Text style={{fontSize: 24, textAlign: ‘center’, color: ‘#fff’}}> View 2 </Text></p>
<p>        </View></p>
<p>      </View><br />
    );<br />
  }<br />
}