React Native – Understanding Flexbox Layout

Hello Readers, CoolMonkTechie heartily welcomes you in this article.

In this article, we will learn about Flexbox layout in React Native. We will discuss the different props of Flexbox layout for styling a component in React Native.

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. We will normally use a combination of flexDirectionalignItems, and justifyContent to achieve the right layout.

Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, with flexDirection defaulting to column instead of row, and the flex parameter only supporting a single number.

A famous quote about learning is :

” Wisdom is not a product of schooling but of the lifelong attempt to acquire it. “

Understanding Flexbox Layout


So Let’s begin.


1. flex

flex will define how our items are going to “fill” over the available space along our main axis. Space will be divided according to each element’s flex property.

In React Native flex does not work the same way that it does in CSS. flex is a number rather than a string, and it works according to the Yoga.

When flex is a positive number, it makes the component flexible, and it will be sized proportional to its flex value. So a component with flex set to 2 will take twice the space as a component with flex set to 1. flex: <positive number> equates to flexGrow: <positive number>, flexShrink: 1, flexBasis: 0.

When flex is 0, the component is sized according to width and height, and it is inflexible.

When flex is -1, the component is normally sized according to width and height. However, if there’s not enough space, the component will shrink to its minWidth and minHeight.

flexGrowflexShrink, and flexBasis work the same as in CSS.

In the following example, the red, yellow, and green views are all children in the container view that has flex: 1 set. The red view uses flex: 1 , the yellow view uses flex: 2, and the green view uses flex: 3 . 1+2+3 = 6, which means that the red view will get 1/6 of the space, the yellow 2/6 of the space, and the green 3/6 of the space.

Flexbox Props : Flex
Flexbox Props : Flex


2. flexDirection

‘column’/’column-reverse’/’row’/’row-reverse’

Defines the direction of the main axis. Opposite to the web, React Native default flexDirection is column which makes sense, most mobile apps much more vertically oriented.

Flexbox Props : flexDirection
Flexbox Props : flexDirection


3. justifyContent

‘flex-start’, ’flex-end’, ’center’, ’space-between’, ’space-around’

Determines the distribution of children along the primary axis. justifyContent describes how to align children within the main axis of their container (parent container). The default value is flex-start.

Flexbox Props : justifyContent
Flexbox Props : justifyContent


4. alignItems

‘flex-start’, ‘flex-end’, ‘center’, ‘stretch

Align items along the cross axis. So in a default view, it will control the horizontal alignment of items. alignItems describes how to align children along the cross axis of their container (parent container). alignItems is very similar to justifyContent but instead of applying to the main axis, alignItems applies to the cross axis. The default value is stretch.

For instance, if the parent has a flexDirection set to row. Then the opposite axis is the column. The alignItems will then align the children based on the value provided in vertical(column) axis.

Flexbox Props : alignItems
Flexbox Props : alignItems


5. alignSelf

‘auto’, ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’

Align an item along the cross axis overwriting his parent alignItem property. alignSelf can apply the property to a single child within a parent element, instead of applying it to all the children.

alignSelf has the same options and effect as alignItems but instead of affecting the children within a container, we can apply this property to a single child to change its alignment within its parent. alignSelf overrides any option set by the parent with alignItems. The default value is auto.

Flexbox Props : alignSelf
Flexbox Props : alignSelf


6. flexWrap

‘wrap’, ‘nowrap’, ‘wrap-reverse’

Controls whether flex items are forced on a single line or can be wrapped on multiple lines. The default value is nowrap.

Flexbox Props : flexWrap
Flexbox Props : flexWrap


7. alignContent

‘flex-start’, ’center’, ’flex-end’, ’stretch’, ’space-between’, ’space-around’

Defines the distribution of lines along the cross-axis. This only has effect when items are wrapped to multiple lines using flexWrap. The default value is flex-start.

Flexbox Props : alignContent
Flexbox Props : alignContent


8. position

‘relative’/’absolute’

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

position in React Native is similar to regular CSS, but everything is set to relative by default, so absolute positioning is always relative to the parent.

If we want to position a child using specific numbers of logical pixels relative to its parent, set the child to have absolute position.

If we want to position a child relative to something that is not its parent, don’t use styles for that. Use the component tree.

For example, Think of our container as a line of people. And we are telling each person to stand 5 meters behind the person in front of him (marginTop: 5). If this person is set to relative he will respect the line and will position himself relatively to the person in front of him. If this person is set to absolute he will ignore all of the people in the line and will position himself as if the line was empty, 5 meters from where the line (his parent container) starts.

Flexbox Props : position
Flexbox Props : position


9. zIndex

zIndex controls which components display on top of others. Normally, we don’t use zIndex. Components render according to their order in the document tree, so later components draw over earlier ones. zIndex may be useful if we have animations or custom modal interfaces where we don’t want this behavior.

It works like the CSS z-index property – components with a larger zIndex will render on top. Think of the z-direction like it’s pointing from the phone into our eyeball.

On iOS, zIndex may require Views to be siblings of each other for it to work as expected.

In the following example the zIndex of the yellow square to 1.

Flexbox Props : zIndex
Flexbox Props : zIndex


10. Flex Basis, Grow, and Shrink

  • flexGrow  describes how any space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children. flexGrow accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the children’s flexGrow values.
  • flexShrink describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. flexShrink is very similar to flexGrow and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed. flexShrink accepts any floating point value >= 0, with 1 being the default value. A container will shrink its children weighted by the children’s flexShrink values.
  • flexBasis is an axis-independent way of providing the default size of an item along the main axis. Setting the flexBasis of a child is similar to setting the width of that child if its parent is a container with flexDirection: row or setting the height of a child if its parent is a container with flexDirection: column. The flexBasis of an item is the default size of that item, the size of the item before any flexGrow and flexShrink calculations are performed.


11. Width and Height

The width property specifies the width of an element’s content area. Similarly, the height property specifies the height of an element’s content area.

Both width and height can take the following values:

  • auto (default value) React Native calculates the width/height for the element based on its content, whether that is other children, text, or an image.
  • pixels Defines the width/height in absolute pixels. Depending on other styles set on the component, this may or may not be the final dimension of the node.
  • percentage Defines the width or height in percentage of its parent’s width or height, respectively.

That’s all about in this article.


Conclusion

In this article, We understood about Flexbox layout in React Native. We also discussed the different basic props of Flexbox layout for styling a component in React Native. 

Thanks for reading ! I hope you enjoyed and learned about the Flexbox layout concepts in React Native. Reading is one thing, but the only way to master it is to do it yourself.

Please follow and subscribe us on this blog and and support us in any way possible. Also like and share the article with others for spread valuable knowledge.

If you have any comments, questions, or think I missed something, feel free to leave them below in the comment box.

Thanks again Reading. HAPPY READING !!😊😊😊

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s