Managing UIKit Navigation with React Native Navigator

Managing transition between views is one of the most important areas for mobile applications. A solid navigation stack and animation is mandatory, and React Native offers everything we need to develop an easy navigation with navigation bar, title and back stack.

In this tutorial I will show you how to use the NavigatorIOS, the React Native navigator for going up and down your navigation stack.
Apparently, the documentation for the NavigatorIOS is quite heavy and not that easy to understand. Therefore I want to show you easy it is to get your React Native navigator up and running without all the fancy shiny code around it.

If you want to customise the behaviour or appearance, check out the documentation for the NavigatorIOS to see all possible options. For now, let’s see how it works in general, developing your own ideas comes after learning how this element basically works.

Setting up the project

We start with a blank React Native project so create a new one right now:

react native init devdacticNavigator

As said before, we will use the NavigatorIOS which is the React way of creating a Navigation Controller with a title bar and back button when going deeper in the view chain. The general structure and views for our app will look like this:

Therefore, we need a total of 4 files:

• index.ios.js (already included in your starter project)
• root.ios.js
• child.ios.js
• child2.ios.js

The first one should be in your project, but not the last 3 so go ahead and create them now. As you can see in the image, the index.ios will hold the NavigatorIOS, the root is the initial view of the Navigation controller and the 2 children are additional views which will be stacked on top of our root.

Creating the Navigation

First of all we need to have a view with the Navigator, and our initial view inside the index.ios.js is the right place, so open it and insert:

'use strict';

var React = require('react-native');
var RootNav = require('./root.ios');

var {
  AppRegistry,
  StyleSheet,
  NavigatorIOS
} = React;

var devdacticNavigator = React.createClass({
  render: function() {
    return (
      <NavigatorIOS
                 style={styles.container}
                 initialRoute={{
             title: 'My Root',
             component: RootNav
         }}/>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
  }
});

AppRegistry.registerComponent('devdacticNavigator', () => devdacticNavigator);

The only interesting part here is the initialisation of the Navigator, which gets a styling and our initial route, which is our RootNav we required at the top. This will be the first view rendered inside the Navigation, so let’s go right to it and insert this into the root.ios.js:

'use strict';

var React = require('react-native');
var Child = require('./child.ios');

var {
  StyleSheet,
  View,
  TouchableHighlight,
  Text
} = React;

var RootNav = React.createClass({
  goDerper: function() {
    this.props.navigator.push({
               title: 'The child title',
               component: Child,
               passProps: {myElement: 'this could be your value!'}
           });
  },
  render: function() {
    return (
      <View style={styles.container}>
        <TouchableHighlight
          style={styles.button}
          onPress={() => this.goDerper()}
          underlayColor='#bbbbbb'>
          <Text style={styles.btnText}>We must go derper</Text>
        </TouchableHighlight>
      </View>
    );
  }
})

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#5151f4',
    padding: 10
  },
  button: {
    height: 36,
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#123456',
    justifyContent: 'center',
    color: '#FFFFFF',
  },
  btnText: {
    fontSize: 18,
    color: '#fff',
    marginTop: 6,
  }
});

module.exports = RootNav;

Our root view holds only one button for going down one level, but that’s enough to show you how everything works. The only thing you need to do is to push a new view to the React Native Navigator. We also pass the new title, the component which will be rendered, and additional some value to show how you can pass data between those views of a Navigation.

Also make sure to require our first child at the top which will be the component of our new view, and also to export this class at the bottom of the file so our index file we have previously created can require this part of our app!

Next we got the code for our child.ios.js, so open the file and insert:

'use strict';

var React = require('react-native');
var LowestChild = require('./child2.ios');

var {
  StyleSheet,
  View,
  TouchableHighlight,
  Text
} = React;

var ChildNav = React.createClass({
  goDerper: function() {
    this.props.navigator.push({
               title: 'Even lower',
               component: LowestChild,
           });
  },
  render: function() {
    return (
      <View style={styles.container}>
          <Text style={styles.text}>My value: {this.props.myElement}</Text>
          <TouchableHighlight
            style={styles.button}
            onPress={() => this.goDerper()}
            underlayColor='#bbbbbb'>
            <Text style={styles.btnText}>DERPER</Text>
          </TouchableHighlight>
      </View>
    );
  }
})

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#1aaf2d',
    padding: 10
  },
  text: {
    flex: 2,
    fontSize: 18,
    color: '#fff',
  },
  button: {
    height: 36,
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#123456',
    justifyContent: 'center',
    color: '#FFFFFF',
  },
  btnText: {
    fontSize: 18,
    color: '#fff',
    marginTop: 6,
  }
});

module.exports = ChildNav;

Again, nothing special, the only new feature is that we make use of the passed variable myElement by using it like this inside our view:
{this.props.myElement}

We again can go one level deeper with a button, which is the same push command as before but this time without the optional passed value. As before make sure to require the needed components and also to export this class.

Now we only need the last view(you could obviously stack more views) which shows how to go back just one level inside the navigation or how to jump to the start of your navigation, meaning the root view. You always get the back arrow at the top bar when navigating through a React Native Navigator, but there are times when you need to trigger this behavior manually, so open your child2.ios.js and insert:

'use strict';

var React = require('react-native');

var {
  StyleSheet,
  View,
  TouchableHighlight,
  Text
} = React;

var Child2Nav = React.createClass({
  popAll: function() {
    this.props.navigator.popToTop();
  },
  popOnce: function() {
    this.props.navigator.pop();
  },
  render: function() {
    return (
      <View style={styles.container}>
          <Text style={styles.text}>Derpest child!</Text>
          <TouchableHighlight
            style={styles.button}
            onPress={() => this.popAll()}
            underlayColor='#bbbbbb'>
            <Text style={styles.btnText}>Pop to root</Text>
          </TouchableHighlight>
          <TouchableHighlight
            style={styles.button}
            onPress={() => this.popOnce()}
            underlayColor='#bbbbbb'>
            <Text style={styles.btnText}>Pop once</Text>
          </TouchableHighlight>
      </View>
    );
  }
})

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#ffd007',
    padding: 10
  },
  text: {
    flex: 1,
    fontSize: 18,
    color: '#fff',
  },
  button: {
    height: 36,
    flex: 2,
    flexDirection: 'row',
    backgroundColor: '#123456',
    justifyContent: 'center',
    color: '#FFFFFF',
    margin: 2
  },
  btnText: {
    fontSize: 18,
    color: '#fff',
    marginTop: 6,
  }
});

module.exports = Child2Nav;

So now we got 2 new functions, let’s take a look what they do.

popOnce() will pop the current view off the stack, which means we simply navigate one view back like when we use the back arrow. This is done by calling pop() on our Navigator, and that’s all you need to do!

popAll() will bring you back to your root or initial view, and again it’s just one line of code calling popToTop() on our Navigator. Boom!

There are more functions and customisations available, so if you are looking for something specific just take a look at the React Native NavigatorIOS documentation.

When you run your app now you should be able to navigate through all of our 3 views by using the buttons, the arrow inside the navigation bar and even the native pull to go back feature. This is one of the most interesting points, as this makes an app feel really native, and that’s exactly what you got – but without any native code and just Javascript!

Conclusion

Using the React Native Navigator isn’t really hard if you understand how the general structure and flow looks like. By using this component you can easily structure your app and get an awesome looking AND feeling user interface in about now time!

For more information watch a video version of this article below.

Code on,
Simon

The post Managing UIKit Navigation with React Native Navigator appeared first on Devdactic.