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

If you’ve been working with web technologies for a while, jumping into React Native is very straightforward, especially if you are familiar with ES6. Installing the development environment is relatively easy if you are familiar with NPM. Follow the instructions on the official website to get started.

The layout system is a fundamental concept that needs to be mastered in order to create great layouts and UIs. React Native uses Flexbox to create the layouts, which is great when we need to accommodate our components and views in different screen sizes or even different devices.

Let’s start by creating a new app. In order to do this, we need to run the following command in our terminal.

  
$ react-native init ReactLayouts

This command will generate a new project with a very basic application scaffolding. Open ReactLayouts.xcodeproj in Xcode and run the app in a simulator. You should see something like the below image.

React Layouts

Now we are ready to start building our app.

Understanding column and row

When we use flexbox, we can arrange the children of a container in two directions, vertically or horizontally.

By default, all children will be arranged vertically. The flex direction is called column. If we want to arrange the children horizontally, we need to change the flex direction to row.

Flex Direction

Let’s create a toolbar in the first tab. The toolbar will have one button on the right, one on the left, and a centered title. Add the following code to the index.ios.js file.

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Component
} = React;
  
class ReactLayouts extends Component{
    render() {
        return (
          <View>
                <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>
        );
    }
}
  
var styles = StyleSheet.create({

});
    
AppRegistry.registerComponent('ReactLayouts', () => ReactLayouts);

As you can see, inside of the render method we have a container with a style called toolbar. Inside of this container we have three different text containers. If we refresh our application, we will see that all three texts will be displayed vertically, one after another. However, we need to display the text horizontally. The title text should be flexible, depending on the device width.

In order to arrange the direction of the text horizontally, we need to change the flexDirection property of the toolbar container.

  
var styles = StyleSheet.create({
    toolbar:{
        backgroundColor:'#81c04d',
        paddingTop:30,
        paddingBottom:10,
        flexDirection:'row'    //Step 1
    },
    toolbarButton:{
        width: 50,            //Step 2
        color:'#fff',
        textAlign:'center'
    },
    toolbarTitle:{
        color:'#fff',
        textAlign:'center',
        fontWeight:'bold',
        flex:1                //Step 3
    }
});
  1. Change the flex direction to the parent. In this case, the row direction will display the children horizontally.
  2. Set the width of the buttons. This step is not necessary, but if we don’t set a fixed width, then the default width of the text will be used.
  3. Set the title to flexible. This means that this container will use all the available space. This is really neat when changing from portrait to landscape because the toolbar will expand horizontally based on the available space.

Here’s the result of our new toolbar.

Flex row toolbar

Go ahead and change the simulator to landscape using Command + Right/Left arrow key (⌘+Left Arrow), you will see how the title will adjust its width in order to use all the available space.

Now let’s add some content after the toolbar. We need to add a container, and expand it to take all the available vertical space. In order to add a new container, let’s modify the render method.

  
render() {
    return (
        <View style={styles.mainContainer}>     //Step 1
            <View style={styles.toolbar}>
                ...
            </View>
            <View style={styles.content}>            //Step 2
                <Text>This is the content</Text>
            </View>
        </View>
    );
}
  1. Add a new style definition to the main container. We need to expand this container to take up the full screen.
  2. Define the new content. In this case, a view with text.

Now let’s style the two new elements.

  
var styles = StyleSheet.create({
    ...
  
    mainContainer:{
        flex:1                  //Step 1
    },
    content:{
        backgroundColor:'#ebeef0',
        flex:1                //Step 2
    }
});
  1. Make the main container flexible. This way, the component will take all the available height. This is handy when changing from portrait to landscape.
  2. Define the content as flexible. We also set a background color so we can see how the container takes the available space.

Flex Row Tool Bar 2

In the left image, the content is not flexible, therefore the height depends on the content itself. In the right image, the content is flexible, the height will be adjusted to use all the available vertical space. As you can see, it’s very easy to make flexible containers in React Native.

Conclusion

To recap, whenever we need to arrange the children of a container horizontally, we need to set the flex direction to row. By default, the flex direction is column. This means that the children will be arranged vertically.

We can use these concepts to create responsive layouts. The width or height of a container will use all the space in the device. Our next tutorial in the series will show you how to align the children of a container.

Posted in Application Development
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
IT 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
    • Careers
  • Let’s talk
  • EN
  • FR