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.
- 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.
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
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.
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.
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.
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',
Property flex-end illustration, use the following syntax:
Property baseline illustration, use the following syntax: