React Native Navigator — Navigating Like A Pro in React Native

Looking to learn React Native? Check out React Native Training.

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.

Here are a few other good navigation options from the community:

1. ExNavigator by Exponent
2. React Native Navigator
3. React Native Router Flux
4. React Native Simple Router

Part 1 — Basic Scene Rendering

One thing to understand is that whatever you pass to

navigator.push

is then available in the renderScene method as a property of the route.