Once you have complete understanding of State and Props in React Native here, we are with all about style and Layout Flex in React Native.
As a component develops in complexity, it is often cleaner to use StyleSheet.create to characterize several styles in one place.
Here’s an example:
Layout with Flexbox
A component can indicate the layout of its children using the flexbox algorithm. Flexbox is intended to give a consistent layout on various screen sizes.
You will typically use a combination of flexDirection, alignItems, and justifyContent to achieve the correct layout.
Flex Direction regulates the direction in which the children of a node are spread out. This is also alluded to as the main axis. The cross axis is perpendicular axis to the main axis or the axis in which the wrapping lines are laid out in.
Align children from left to right. If wrapping is allowed then the next line will start under the first item on the left of the container.
Column (default value)
Align children from top to bottom. If allowed is permitted then the next line will start to the left first item on the top of the container.
Align children from right to left. If wrapping is allowed then the next line will start under the first item on the right of the container.
Align children from bottom to top. If wrapping is allowed then the next line will start to the left first item on the bottom of the container.
JustifyContent illustrates how to align children within the main axis of their container. For instance, you can utilize this property to center a child horizontally inside a container with flexDirection set to row or vertically inside a container with flexDirection set to the column.
We have many properties of justifyContent but in the above example, I use only two. You can elaborate on all properties by practice.
As this we use justifyContent we can also utilize align-item, align-self, align-content and flex-wrap.