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 :

1. flex-start,
2. center,
3. flex-end
4. 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’ :

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’ :

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’ :

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’ :

Complete source code for App.js File :