React-Native Flexbox tutorial Part 2

This is the second part of my flexbox tutorial explaining the various properties that are popularly used with the layout algorithm.

alignSelf

The alignSelf property is unique in that you can apply it to a child element and it will only affect that child and not all of them, alignSelf will override a property set on the parent with the alignItems property. The possible values for alignSelf are “flex-start”, “flex-end”, “center” and “baseline”

So navigate to the project we created in the previous tutorial (which can be found here

In the example for alignSelf I will set it to the value “flex-end” so ensure your “greenBox” style is set like the below.

greenBox: {
    backgroundColor: 'green',
    width: 100,
    height: 100,
    alignSelf:'flex-end'
  },

And the “container” class is like the below.

container: {
    flex:1,
    flexDirection: 'column',
  }

If you run the application you will see that the green box is at the right side (flex-end) of the view and the other 2 children are still on the left side.

Also, if you set the “alignItems” property to “center” on the “container” style then you will notice that the 2 children move to the center, however, the “greenBox” does not. This is because alignSelf overrides what is set in the style property.

flexWrap

The flexWrap property is set on the containers and controls what will happen when children inside the container go over the height/width of the container depending on what is set as the main axis. If this is not set the children will simply overflow and fall out of view of the screen, however, if wrapping is enabled then the child elements are wrapped onto multiple lines along the main axis. The possible values for flexWrap are “nowrap”, “wrap” and “wrap-reverse”.

For the flexWrap example please change the “App.tsx” file to the below.

<View style={styles.container}>
      <View style={styles.greenBox}>
      </View>
      <View style={styles.yellowBox}>
      </View>
      <View style={styles.pinkBox}></View>
      <View style={styles.yellowBox}>
      </View>
      <View style={styles.greenBox}>
      </View>
      <View style={styles.yellowBox}>
      </View>
      <View style={styles.greenBox}>
      </View>
      <View style={styles.pinkBox}></View>
      <View style={styles.yellowBox}>
      </View>


    </View>

Now change your container style to include “flexWrap” and set it to “nowrap”.

container: {
    flex: 1,
    flexDirection: 'column',
    flexWrap: 'nowrap'
  }

Now set the “flexWrap” to be “wrap” and watch how the alignment of the boxes change.

Now for the final example set “flexWrap” to be “wrap-reverse” which will wrap the items in reverse order.

flexBasis

This property allows you to provide a default size value for a child element along the primary axis before any extra space within the container is distributed. Setting this is much like setting the width of a child element if the parent container has a flexDirection value of “row” or setting the height of an element that has a parent container with a flexDirection of “column”.

The flexBasis property can be a number (length unit, percentage), auto (default value where the width/height is equal to the width/height of the flexible item), initial (sets property to default value) and inherit (inherits this property from the parent element)

One use case of flexBasis could be that you want one child item to be taller or wider than the rest of the children.

Examples of flex-basis values include ‘3px’, auto and ‘50%’ , the default value for flexBasis is 0.

flexGrow

The flexGrow property describes what amount of space should be distributed among the children along the primary axis when there is extra space available.

The default value for flexGrow is 0

For the flexGrow example change your styles variable to the below.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:'column'

  },
  greenBox: {
    backgroundColor: 'green',
    width: '100%',
    height:100,
    flexGrow:0
  },
  yellowBox: {
    backgroundColor: 'yellow',
    height:100,
    width: '100%',
    
  },
  pinkBox: {
    backgroundColor: 'pink',
    width: '100%',
    height: 100
  }
});

Now change your App.tsx return code to the below.

<View style={styles.container}>
      <View style={styles.greenBox}>
      </View>
      <View style={styles.yellowBox}>
      </View>
      <View style={styles.pinkBox}></View>
      <View style={styles.greenBox}>
      </View>
      <View style={styles.yellowBox}>
      </View>

    </View>

We have explicitly set flexGrow to 0 on the “greenBox”, you will see that there is no effect currently.

However, if we set “greenBox” flexGrow to 1 then you will notice that the “greenBox” view will push down/expand to fill the available space within the container.

As you can see from above, the green space is equal in height and has expanded to fill the space. We can apply the flexGrow property to multiple child elements, so now lets apply this to “pinkBox” and set “flexGrow” to 1.

To best show this example I think it would be better to just have 3 boxes in the app so change the App.tsx code to the below.

 <View style={styles.container}>
      <View style={styles.greenBox}>
      </View>
      <View style={styles.yellowBox}>
      </View>
      <View style={styles.pinkBox}></View>

    </View>

Our app will now look like the below with “greenBox” and “pinkBox” having flexGrow set to 1, they will equally distribute the available space between them.

Now lets try setting “greenBox” to have a flexBox of 3 and see what happens.

You will see that the “greenBox” takes up 3 times the amount of space than “pinkBox”.

flexShrink

flexShrink can be seen as the antithesis of flexGrow in that it describes how child elements will shrink along the main axis in the situation that the total size of the child elements will overlap the size of the container.

The default value of flexShrink is 0 and will accept any value greater than or equal to 0.

For this example we will only need 2 boxes so change the App.tsx to the below.

<View style={styles.container}>
      <View style={styles.greenBox}>
      </View>
      <View style={styles.yellowBox}>
      </View>

    </View>

For our example we will change the container to have a width that together the boxes will exceed, change the flexDirection to “row” and alignItems to “flex-start”, I’ll then show how flexShrink works. Change your styles variable to the below.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:'row',
    alignItems:'flex-start',
    width:300,
    marginTop:70,
    borderWidth:5,
    borderColor:'blue'

  },
  greenBox: {
    backgroundColor: 'green',
    width: 250,
    height:100,
  },
  yellowBox: {
    backgroundColor: 'yellow',
    height:100,
    width: 200,
    
  }
});

When you load up the simulator you should see the below.

As you can see the views are overflowing the container this would not be a good thing to happen in our application, we want a clean resolution to this, incoming “flexShrink”, add “flexShrink” to “greenBox” and set it to 1.

Refresh the simulator and you should see the below, the greenBox has been shrunk to fit the container.

That brings us to the end of this tutorial in the next tutorial I will be talking about rowGap, columnGap and gap. I hope you have learned something from this tutorial and found the examples shown useful, let me know how I can improve my articles in the responses and don’t forget to follow/give a clap for this article.