React Native Navigator — Navigating Like A Pro in React Native

There is a lot you can do with the React Native Navigator. Here, I will try to go over a few examples of what you can do with the Navigator and explain how it all works in depth.

In React Native you have two stable choices as of now for Navigation (only one cross platform) out of the box. There is also the upcoming Navigator Experimental, which is not yet stable, but will be the replacement for the Navigator down the road. If you are interested in learning more about this, check out my tutorials here.

We will focus on the main Navigator component as that is what most questions I have seen pop up are about, and is the cross platform navigator option. We will not talk about NavigatorIOS as it is not currently maintained by the main react native project and is only available for use on iOS.

Passing Properties

What about passing properties? Let’s look at the above example and add this functionality.

We need to set up an object that we will use to pass these properties. Many people use the name passProps, but this can be whatever name you want. passProps just makes sense as it is actually passing properties. Our navigator component will stay the same. First, let’s edit our renderScene method:

…this.props —spread attributes to ensure any props passed down are available as usual as this.props

…route.passProps — when pushing to a route, allows a passProps property to pass props to next to component

route — route available as a prop on the component

navigator — navigator available as a prop on the component

There is another way to render the above configuration, though we will not be using it in our example it is useful to know about as it has an easier to read syntax if you are not familiar or do not want to use React.createElement:

Part 4 — Custom Navigation Bar

You may want to have a persistent Navigation Bar in your app. To do this, you need to add another property to the Navigator component called navigationBar and pass in a <Navigator.NavigationBar /> component:

We’ve already covered the route and navigator properties, and the same properties will be available in the route and navigator properties here as they are in the renderScene method. index keeps tabs of how far into the route stack you are. index starts at 0 an goes up, so if you want to do calculations based on index you can use this.

We will check if index is zero to show or hide the back button.

We will also check to see if there is a route.onPress function passed in and show or hide a right button with a custom function and text:

React Native may be undergoing a future change in the navigation, as there is a proposal to replace the api and functionality. In that case, I will try to do another tutorial on the new navigator functionality in the future if it is released!