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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<View style={{ alignItems: 'flex-start', flex:1, margin: 5}}> <View style={{ width:100, height: 100, justifyContent:'center', backgroundColor: '#00BCD4' }} > <Text style={{fontSize: 24, textAlign: 'center', color: '#fff'}}> View 1 </Text> </View> <View style={{ width: 100, height: 100, justifyContent:'center', backgroundColor: '#FF1744',}} > <Text style={{fontSize: 24, textAlign: 'center', color: '#fff'}}> View 2 </Text> </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’ :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<View style={{ alignItems: 'center', flex:1, margin: 5}}> <View style={{ width:100, height: 100, justifyContent:'center', backgroundColor: '#00BCD4' }} > <Text style={{fontSize: 24, textAlign: 'center', color: '#fff'}}> View 1 </Text> </View> <View style={{ width: 100, height: 100, justifyContent:'center', backgroundColor: '#FF1744',}} > <Text style={{fontSize: 24, textAlign: 'center', color: '#fff'}}> View 2 </Text> </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’ :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<View style={{ alignItems: 'flex-end', flex:1, margin: 5}}> <View style={{ width:100, height: 100, justifyContent:'center', backgroundColor: '#00BCD4' }} > <Text style={{fontSize: 24, textAlign: 'center', color: '#fff'}}> View 1 </Text> </View> <View style={{ width: 100, height: 100, justifyContent:'center', backgroundColor: '#FF1744',}} > <Text style={{fontSize: 24, textAlign: 'center', color: '#fff'}}> View 2 </Text> </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’ :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<View style={{ alignItems: 'stretch', flex:1, margin: 5}}> <View style={{ height: 100, justifyContent:'center', backgroundColor: '#00BCD4' }} > <Text style={{fontSize: 24, textAlign: 'center', color: '#fff'}}> View 1 </Text> </View> <View style={{ width: 100, height: 100, justifyContent:'center', backgroundColor: '#FF1744',}} > <Text style={{fontSize: 24, textAlign: 'center', color: '#fff'}}> View 2 </Text> </View> </View> |
Complete source code for App.js File :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
import React, { Component } from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default class MainActivity extends Component { render() { return ( <View style={{ alignItems: 'stretch', flex:1, margin: 5}}> <View style={{ height: 100, justifyContent:'center', backgroundColor: '#00BCD4' }} > <Text style={{fontSize: 24, textAlign: 'center', color: '#fff'}}> View 1 </Text> </View> <View style={{ width: 100, height: 100, justifyContent:'center', backgroundColor: '#FF1744',}} > <Text style={{fontSize: 24, textAlign: 'center', color: '#fff'}}> View 2 </Text> </View> </View> ); } } |
Ty ! ♥
Welcome 🙂 .