Skip to content

Modus-Logo-Long-BlackCreated with Sketch.

  • Services
  • Work
  • Blog
  • Resources

    OUR RESOURCES

    Innovation Podcast

    Explore transformative innovation with industry leaders.

    Guides & Playbooks

    Implement leading digital innovation with our strategic guides.

    Practical guide to building an effective AI strategy
  • Who we are

    Our story

    Learn about our values, vision, and commitment to client success.

    Open Source

    Discover how we contribute to and benefit from the global open source ecosystem.

    Careers

    Join our dynamic team and shape the future of digital transformation.

    How we built our unique culture
  • Let's talk
  • EN
  • FR

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.


NEW RESEARCH: LEARN HOW DECISION-MAKERS ARE PRIORITIZING DIGITAL INITIATIVES IN 2024.

Get Report


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.

iOS Simulator with Title and Static Content

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.

iOS Simulator with Simple Message Pop up

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.

2 images of the iOS Simulator with a Simple Message Horizontally Defined with flexDirection set to column

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.

iOS Simulator with a Simple Message centered horizontally and with justifyContent

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.

Need efficient and scalable software solutions? Learn more about our software development expertise.

Posted in Application Development, News
Share this

Crysfel Villa

Crysfel Villa was a Sr. Engineer at Modus Create. He's a passionate JavaScript coder and an accomplished software developer with over 8 years of experience on technical training, consulting and systems analysis. When he's away from the keyboard, he enjoys playing the guitar, piano and violin. Crysfel currently lives in NY and can be found attending tech meetups throughout the city. He has co-authored The React Native book, which was published in December 2016.
Follow

Related Posts

  • React Navigation and Redux in React Native Applications
    React Navigation and Redux in React Native Applications

    In React Native, the question of “how am I going to navigate from one screen…

  • React Navigation and Redux in React Native Applications
    React Navigation and Redux in React Native Applications

    In React Native, the question of “how am I going to navigate from one screen…

Want more insights to fuel your innovation efforts?

Sign up to receive our monthly newsletter and exclusive content about digital transformation and product development.

What we do

Our services
AI and data
Product development
Design and UX
Modernization
Platform and MLOps
Developer experience
Security

Our partners
Atlassian
AWS
GitHub
Other partners

Who we are

Our story
Careers
Open source

Our work

Our case studies

Our resources

Blog
Innovation podcast
Guides & playbooks

Connect with us

Get monthly insights on AI adoption

© 2025 Modus Create, LLC

Privacy PolicySitemap
Scroll To Top
  • Services
  • Work
  • Blog
  • Resources
    • Innovation Podcast
    • Guides & Playbooks
  • Who we are
    • Our story
    • Careers
  • Let’s talk
  • EN
  • FR