Flexbox: How to use it to style thoroughly in React Native

React Native is very similar to React, but one of the major difference is styling the components. For styling, we use a module that is similar to CSS, which is called the React native flex 1 Layout. Likewise, its purpose is to provide a fixed layout on different screen sizes. It aims to give us an easy way to reason about, align, and distribute space among items in our layout, even when their size is unknown or even when their size is dynamic.

You’ve certainly seen React native flex 1 used in many of the examples. It makes laying out items much easier than alternative methods; it’s hard not to use it. It’s powerful. It will certainly benefit you to take your time and understand the material in this section. So, we – ArrowHiTech would like to introduce to you guys how to use Flexbox to style thoroughly in React Native. 

But first, let’s go through some definitions.

What is React native flex 1?

In short, CSS Flexible Box Layout, commonly known as React native flex 1, is a CSS 3 web layout model. It is likewise in the W3C’s Candidate recommendation (CR) stage. To clarify, the flex layout allows responsive elements within a container to be automatically arranged depending upon screen size (or device). 

Above all, one of the most defining features of the flex layout is its ability to form-fit, based on its viewing environment. Flex boxes can also adjust in size: decreasing, avoiding unnecessary space, or increasing to make room for contents to be constrained within its boundaries.

How to use it to style thoroughly in React Native?

#1. Altering a component’s dimensions with React native flex 1

The flex property specifies the ability of a component to alter its dimensions to fill the space of the container it’s in. This value is also relative to the flex properties specified for the rest of the items within the same container. This means that if we have a View element with a height of 300 and a width of 300, and a child View with a property of react native flex: 1, then the child view completely fills the parent view. If we decide to add another child element with a flex property of flex: 1, they’ll each take up equal space within the parent container.

Here we have the figure 1:

Flexbox figure 1

This is certainly easy to achieve by setting the appropriate flex value on the individual elements. Furthermore, figure 1 shows you the exact steps necessary to create this by using react native flex 1:


 render() {
   return (
     <View style={styles.container}>
       <View style={[styles.flexContainer]}>
         <Example style={[{flex: 1},styles.darkgrey]}>A 50%</Example>  #1
         <Example style={[{flex: 1}]}>B 50%</Example>
       </View>
       <View style={[styles.flexContainer]}>                 #2
         <Example style={[{flex: 1},styles.darkgrey]}>C 33%</Example>
         <Example style={{flex: 2}}>D 66%</Example>
       </View>
       <View style={[styles.flexContainer]}>                 #3
         <Example style={[{flex: 1},styles.darkgrey]}>E 25%</Example>
         <Example style={{flex: 3}}>F 75%</Example>
       </View>
     </View>
   );
 }
 …

To clarify, these three examples of layouts using the react native flex 1 property: 1:1 A = {flex: 1} and B = {flex: 1} resulting in each taking up 50% of the space, 1:2 C = {flex: 1} and D = {flex: 2} resulting in C taking up 33% of the space and D taking up 66%, and 1:3 E = {flex: 1} and F = {flex: 3} resulting in E taking up 25% of the space and F taking up 75% of the space. So when you use Flexbox, divided it into parts is essential:

  • #1: The items have the same flex value, and they also take up the same amount of space within their parent container.
  • #2: C takes up 1/3 of the total space, while D takes up 2/3 of the total space.
  • #3: E takes up 1/4 of the total space, while F takes up 3/4 of the total space.

Read : Lottie: Create better user experience (with animations) for React Native

#2. Specifying the direction of the flexbox with flexDirection

So, you may notice that the items in our flexbox containers are laying out in a column (Y-axis), meaning from top to bottom: A is stacked on B, C is stacked on D, and E is stacked on F. Using the flexDirection property, we can change the primary axis of the layout, and therefore change the direction of the layout.

Let’s take a look at figure 2:

Flexbox figure 2

Above all you need to achieve the layout in figure 2 is to add a single line of code to the flexContainer style, which is the parent container for each of the example components. Changing the flexDirection on this container affects the layout of all its flex children. So you should add flexDirection: ‘row’ to the style and see how it changes the layout.

  flexContainer: {   #1
    width: 150,
    height: 150,
    borderWidth: 1,
    margin: 10,
    flexDirection: 'row'  #2
},
  • #1 flexContainer is the parent container of each example
  • #2 Adding flexDirection: ‘row’ to the parent container causes the children to be laid out horizontally

Two options for flexDirection are row and column. The default setting is “column”. So, if you don’t specify a flexDirection property, your content will be laid out in a column.

#3. Defining how space is used around a component with justifyContent

So how can you use Flexbox to layout components using their original size? We have an answer for you: justifyContent. It defines how space is distributed between and also around flex items along the primary axis of the container (the flex-direction). justifyContent is declared on the parent container. In addition, five options are available: center, flex-start, flex-end, space-around, and space-between. 

To understand more about this when using React native flex 1, let’s take a look at figure 3:

  ...
 render() {
   return (
     <View style={styles.container}>
       <FlexContainer style={[{justifyContent: 'center'}]}>  #1
         <Example>center</Example>
         <Example>center</Example>
       </FlexContainer>
       <FlexContainer style={[{justifyContent: 'flex-start'}]}> #2
         <Example>flex-start</Example>
         <Example>flex-start</Example>
       </FlexContainer>
       <FlexContainer style={[{justifyContent: 'flex-end'}]}> #3
         <Example>flex-end</Example>
         <Example>flex-end</Example>
       </FlexContainer>
       <FlexContainer style={[{justifyContent: 'space-around'}]}>  #4
         <Example>space-around</Example>
         <Example>space-around</Example>
       </FlexContainer>
       <FlexContainer style={[{justifyContent: 'space-between'}]}> #5
         <Example>space-between</Example>
         <Example>space-between</Example>
       </FlexContainer>
     </View>
   );
 }
 ...
  • #1 ‘center’ option.
  • #2 ‘flex-start’ option.
  • #3 ‘flex-end’ option.
  • #4 ‘space-around’ option.
  • #5 ‘space-between’ option

#4. Aligning children in a container with alignItems when using React native flex 1

alignItems defines how to align children along the secondary axis of its container. That is to say, this property is declared on the parent view and affects its React native flex 1 children as flexDirection does. Four possible values for alignItems are:

  • stretch
  • center
  • flex-start
  • flex-end

stretch is the default alignment, and it’s what we’ve seen in the figures 2 and 3. Moreover, each example component’s stretched to fill its parent container. They only take up as much space horizontally as is necessary to render their contents rather than stretch them to fill the entire space.

#5. Overriding the parent container’s alignment with alignSelf

With alignSelf, we can certainly get access to the alignItems property for individual elements within the container. alignSelf gives us the ability to override whatever alignment was set on the parent container and allows a child object to be aligned independently of its peers. The available options of this React native flex 1 usage are:

  • auto
  • stretch
  • center
  • flex-start
  • flex-end

The default value for alignSelf is auto. auto, in short, takes the value from the parent container’s alignItems settings. The remaining properties: stretch, center, flex-start, and flex-end, affect the layout in the same way as their corresponding properties on alignItems. So let’s take a look at figure 5 for more detail:

Flexbox figure 5

In figure 5, rather than supplying the style directly to the Example element, a new component property align was created by using React native flex 1. You certainly can see how align is passed down to the Example component and is used to set the alignSelf property. Otherwise, the example is the same as many others in this article; it also explores the effects of each value applied to the style.

Final words

That should be it! To conclude, here are some of the most prominent ways on how to use React native flex 1 to style thoroughly in React Native. The layout system in React Native is very powerful and flexible, so we can create any layout with all the available options that we have. All in all, you should now have a clear understanding of this module and the many ways in which it can help you build responsive layouts in React Native.

We – ArrowHiTech is proud to be one of the most well-established outsourcing companies all around the world. That is to say, with over 12 years of experience, we can provide the best React native app development services for your business. Also, if you want to go through our showcase, you should visit our product page here: MageSolution or our portfolio: ArrowHiTech portfolio.

ArrowHiTech services

If you have any questions, don’t hesitate to CONTACT US.

Tags

Share