Positioning & Arranging View Components In React Native

When I started learning React Native years ago, aligning item in the View components used to be a big doubt, props such as alignItemsalignContent & justifyContent always made the same sense in the beginning, but with the correct approach, it is really easy to understand along with some practices. We will be looking at some practices while understanding how aligning and arranging items works in the View components.

Before we deep dive into the concepts, note that we need to define the width & height or backgroundColor the least to render a view, otherwise you won’t observe anything being rendered on the screen.

Flex

The flex property decides how the items are going to fill over the available area along your main axis, in React Native flex doesn’t work the same way as it does in CSS, here flex is simply a number rather than a string and works according to the Yoga (A cross-platform layout engine which implements flexbox) layout engine.

  • Flex is a positive number that makes the component flexible and that component is always sized proportionally to its flex value.
  • For example, a component with flex:2 will take twice the place as a component with flex:1.
  • And when the flex is 0 the component is sized according to its height & width property.
  • When flex: -1, the component size normally according to its height & width, but if there is not enough space for the component it will shrink to its minimum possible value of height & width (minHeight & minWidth).

#javascript

Positioning & Arranging View Components In React Native