React Native Layout and FlexboxReact Native Flexbox is an algorithm to specify the layout of component's children. It provides a consistent layout on different screen sizes. Property of FlexboxFlexbox provides three main properties to achieve the desired layout. These properties are: flexDirection, justifyContent, and alignItems.
React Native Flex DirectionThe 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. Output React Native Justify ContentThe justifyContent determines the distribution of children component along the primary axis. The children component are distributed at the start, end, center, or space evenly. Output React Native Align ItemsThe 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. Output 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.
Next TopicPositioning Element with Flex
|