Layout in React Native

Layout in React Native

To achieve the desired layout, flexbox offers three main properties − flexDirection justifyContent and alignItems.

The following table shows the possible options:

Property Values Description
flexDirection ‘column,' 'row’ Used to specify if elements will be aligned vertically or horizontally.
justifyContent 'center', 'flex-start', 'flex-end', 'space-around', 'space-between' Used to determine how elements should be distributed inside the container.
alignItems 'center', 'flex-start', 'flex-end', 'stretched' Used to determine how should elements be distributed inside the container along the secondary axis (opposite of flexDirection)

A component can specify the layout of its children using the Flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes. Usually, use a combination of flexDirection, alignItems, and justifyContent to achieve a suitable layout.

Flexbox works the same way in React Native as in CSS on the web, with a few exceptions. The defaults are different, with flexDirection defaulting to column instead of row, alignContent defaulting to flex-start instead of stretch, flexShrink defaulting to 0 instead of 1, the flex parameter only supporting a single number.

A component can specify the layout of its children using the Flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes.

Flex Direction

flexDirection controls the direction in which the children of a node are laid out. This is also referred to as the central axis. The cross axis is perpendicular to the central axis, or the axis in which the wrapping lines are laid out.

  • Column (default value): Align children from top to bottom. If wrapping is enabled, the following line will start to the right of the first item on the top of the container.
  • Row: Align children from left to right. If wrapping is enabled, the following line will start under the first item on the left of the container.
  • Column-reverse: Align children from bottom to top. If wrapping is enabled, the following line will start to the right of the first item on the bottom of the container.
  • Row-reverse: Align children from right to left. The following line will start under the first item on the container's request if the wrapping is enabled.

Layout Direction

Layout direction specifies the direction in which children and text in a hierarchy should be laid out. Layout direction also affects what edge start and end refer to. By default, React Native lays out with LTR layout direction. In this mode, start refers to left, and end refers to right.

  • LTR (default value): Text and children are laid out from left to right. Margin and padding applied to the start of an element are used on the left side.
  • RTL Text and children are laid out from right to left. Margin and padding applied to the start of an element are used on the right side.

Absolute & Relative Layout

The position type of an element defines how it is positioned within its parent.

  • Relative (default value): An element is positioned relatively by default. This means an element is arranged according to the normal flow of the layout and then offset relative to that position based on the values of top, right, bottom, and left. The offset does not affect the position of any sibling or parent elements.
  • Absolute: When positioned absolutely, an element doesn't participate in the standard layout flow, and it is laid out independent of its siblings. The position is determined based on the top, right, bottom, and left values.