Aligning Children using Flexbox in React Native

This tutorial is part of a series, in which we are learning all about the layout system in React Native. I recommend that you read the previous tutorial about how flexDirection works as we will continue using the same project that we created in the first tutorial.

Now that we have a better understanding of flex direction, let’s review the alignment options that we have available. We will create a container that displays a message with a title, we will learn how to align this component.

First we need to create the required views and texts, open the index.ios.js tab in your favorite text editor and add the following code to the render method, as a child of the content view.

   
'use strict';
  
var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Component
} = React;
 
class ReactLayouts extends Component{
    render() {
        return (
            <View style={styles.mainContainer}>
               <View style={styles.toolbar}>
                    <Text style={styles.toolbarButton}>Add</Text>
                    <Text style={styles.toolbarTitle}>This is the title</Text>
                    <Text style={styles.toolbarButton}>Like</Text>
                </View>
                <View style={styles.content}>
  
                    {/* START NEW CODE */}
 
                    <View style={styles.messageBox}>
                        <View>
                            <Text style={styles.messageBoxTitleText}>A simple mesage</Text>
                        </View>
                        <View>
                            <Text style={styles.messageBoxBodyText}>This is just a dummy sample it will help us to see the alignment in action.</Text>
                        </View>
                    </View>

              {/* END NEW CODE */}
  
                </View>
            </View>
        );
    }
}

In the previous code we’ve defined a message box container. It’s important to notice that we are adding just the code between the comments, the toolbar code was defined before in the flexDirection tutorial. We only have the title, and the content is completely static.

Once we have the component rendered, we need to add some styles to the stylesheet object.

   
var styles = StyleSheet.create({

  
   // …

    messageBox:{
        backgroundColor:'#ef553a',
        width:300,
        paddingTop:10,
        paddingBottom:20,
        paddingLeft:20,
        paddingRight:20, 
        borderRadius:10
    },
    messageBoxTitleText:{
        fontWeight:'bold',
        color:'#fff',
        textAlign:'center',
        fontSize:20,
        marginBottom:10
    },
    messageBoxBodyText:{
        color:'#fff',
        fontSize:16
    }
});

These is a pretty common styles, just some colors, paddings, fonts and so on. As a result we should have something as in the following image.

Now that we have a component, we can start playing around with the alignment. Aligning components in React is very straightforward, all we need to do is define the alignItems property in the container’s styles.

   
var styles = StyleSheet.create({
    //..
    content:{
        backgroundColor:'#ebeef0',
        flex:1,
        alignItems:'center'     //<-----
    },
  
    //...
});

This will automatically center the component on the screen. Because we didn’t define a flex direction, the column direction is used. Therefore the component is horizontally centered.

On the other hand, if we set the flex direction to row, the component will be vertically centered. This is a very important concept to keep in mind.

We have three more options to align our component.

1.flex-start which will align the component at the top/start of the parent component.

2.flex-end which will align the component to the bottom/end of the parent container.

3.stretch will set the height or width to 100% of the container, based on the flex direction.

We can also justify our components. For example if we want to center our components horizontally and vertically, we will need to apply the following changes to our styles.

   
var styles = StyleSheet.create({
    content:{
        flex:1,
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'center'
    },
   …
});

First we set the flex direction to row, this will arrange the children horizontally. In order to center the component horizontally we use the alignItems property, then we use justifyContent to vertically center the component.

We have a few more options to justify our component to the left, right, as well as to add space between or around the children.

Conclusion

The layout system in React Native is very powerful and flexible, we can create any layout with all the available options that we have. Understanding how flexbox works is important in order to build our very custom layouts and components.

You can download the code from Github. I recommend you to take a look at the documentation and try all the possible values in the available properties.