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
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. “
So Let’s begin.
flexwill 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.
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.
flex is 0, the component is sized according to
height, and it is inflexible.
flex is -1, the component is normally sized according to
height. However, if there’s not enough space, the component will shrink to its
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.
Defines the direction of the main axis. Opposite to the web, React Native default
column which makes sense, most mobile apps much more vertically oriented.
‘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’, ‘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.
‘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.
‘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
‘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
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
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.
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.
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.
10. Flex Basis, Grow, and Shrink
flexGrowdescribes 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.
flexGrowaccepts 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
flexShrinkdescribes 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.
flexShrinkis very similar to
flexGrowand 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.
flexShrinkaccepts any floating point value >= 0, with 1 being the default value. A container will shrink its children weighted by the children’s
flexBasisis an axis-independent way of providing the default size of an item along the main axis. Setting the
flexBasisof a child is similar to setting the
widthof that child if its parent is a container with
flexDirection: rowor setting the
heightof a child if its parent is a container with
flexDirection: column. The
flexBasisof an item is the default size of that item, the size of the item before any
flexShrinkcalculations are performed.
11. Width and Height
width property specifies the width of an element’s content area. Similarly, the
height property specifies the height of an element’s content area.
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.
pixelsDefines 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.
percentageDefines the width or height in percentage of its parent’s width or height, respectively.
That’s all about in this article.
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 !!😊😊😊