React Native Layout and Flexbox
React Native Flexbox is an algorithm to specify the layout of component's children. It provides a consistent layout on different screen sizes.
Property of Flexbox
Flexbox provides three main properties to achieve the desired layout. These properties are: flexDirection, justifyContent, and alignItems.
React Native Flex Direction
The flexDirection adds the style to the component in a primary axis of its layout. It has a property row and column to organize children horizontally and vertically respectively. The default flexDirection is a column.
React Native Justify Content
The justifyContent determines the distribution of children component along the primary axis. The children component are distributed at the start, end, center, or space evenly.
React Native Align Items
The alignItems determine the alignment of children component along the secondary axis. If the primary axis is a column, then the secondary is a row, and when a primary axis is a row, then the secondary is a column. Using the alignItems, the children are aligned at start, end, center, or stretched.
Note: The stretch does not work if the children have a fixed dimension along the secondary axis. In above example, the alignItems: stretch will not work until we remove width: 50.