Getting Started with React Navigation, the Navigation Solution for React Native

Getting Started with React Navigation, a navigation solution for React Native:

  • I’ve used React Native since the very early days of it being opened sourced and have tried many solutions, this has been my navigator progression…NavigatorIOS Navigator react-native-router-flux NavigationExperimental or ex-navigation (depending on navigation requirements)Each upgrade took time to refactor and introduce a new, slightly different, pattern for navigation and managing navigation state.Fortunately, we’ve now got a single “official” solution to navigation in React Native with react-navigation.
  • The TabNavigator takes an object and each key/value pair is going to represent a tab.You can see that we then pass a screen to each tab—this will be the component that should be rendered when that tab is active.The last thing we need to do is use the Tabs navigator in our app entry point.
  • We can then replace the Feed screen definition in the TabNavigator with our new stack.I didn’t mention it before but in React Navigation, in addition to accepting components for the screen, it accepts other navigation stacks to display for a screen.
  • It, like the navigate function, is available on I’m pulling all the data to generate the UserDetail.js screen like thisModalThe final thing I want to cover in this tutorial is how to create a modal with React Navigation.
  • In addition to the mode, which I described above, we have headerMode which tells the StackNavigator to not display a navigation bar for this stack — we’ll let the children navigators do that.To keep a consistent interface and to show that you can nest a StackNavigator in a StackNavigator we’ll build one for the settings screen as well.Finally, we’ll want to tell the app entry point to use our new Root navigator instead of the Tabs.All of this leaves us with the followingRemember, all of this code is available on Github and I encourage you to check it out as well as the react navigation docs.

If you’ve worked with React Native for any amount of time you’ve likely been confused by how you navigate in your app (practices, packages, etc). I’ve used React Native since the very early days of…

@reactdaily: Getting Started with React Navigation, a navigation solution for React Native:

If you’ve worked with React Native for any amount of time you’ve likely been confused by how you navigate in your app (practices, packages, etc). I’ve used React Native since the very early days of it being opened sourced and have tried many solutions, this has been my navigator progression…

Each upgrade took time to refactor and introduce a new, slightly different, pattern for navigation and managing navigation state.

Fortunately, we’ve now got a single “official” solution to navigation in React Native with react-navigation. This solution will replace Navigator, NavigationExperimental, and ex-navigation becoming the new “official” navigation solution.

It’s currently in beta but is in a pretty stable state. If you’re starting a new React Native app I would say start with react-navigation, it will only get better from here.

Today, I want to take some time building an app with some common routing needs using react-navigation. We’ll cover tabs, stacks, and modals — this is just a very basic first look at the package. Here’s the end product

All the code for this tutorial can be found on Github. I’ll be starting with a simple app that has react-native-elements, a few screens made, and some user data from Random User Generator so that we can focus on the navigation rather than configuring the app.

Prefer to learn from video? Check out a video version of this tutorial on Youtube.

The first thing we’ll add is two tabs — one for a list of users, and one for details of the current user. To accomplish this we’ll use the TabNavigator from React Navigation.

With that completed we can actually start define our TabNavigator. The TabNavigator takes an object and each key/value pair is going to represent a tab.

You can see that we then pass a screen to each tab—this will be the component that should be rendered when that tab is active.

The last thing we need to do is use the Tabs navigator in our app entry point. The result of TabNavigator is simply a component and can be rendered like any other.

static or, and this is my preferred way, to define it at the same point you define the tabs.

Tabs are very simple to set up when using TabNavigator and you’re able to quickly update and modify them.

Now when pressing a row item you likely, and correctly, expect that we go to a new screen as a result. For this we’ll use the StackNavigator where we add a new screen onto the stack.

The API is extremely similar to that of TabNavigator where it takes an object in which we define all the screens that should be available in that stack.

. We then define the StackNavigation, just like we did for the TabNavigator. We can then replace the Feed screen definition in the TabNavigator with our new stack.

I didn’t mention it before but in React Navigation, in addition to accepting components for the screen, it accepts other navigation stacks to display for a screen. That means that our FeedStack will be nested within our Tabs.

to set it. Check out the docs on all that you’re able to do here.

Now to actually navigate from our list item to the screen.

function.

Without completely rehashing the docs, we’re telling navigate which screen we want to go to (which aligns with the key in our StackNavigator) and the data we want to pass to the next screen. This leaves us with

screen like this

The final thing I want to cover in this tutorial is how to create a modal with React Navigation. It’s a common pattern but one that I’ve found surprisingly difficult/not very intuitive to implement in other react native routing solutions.

To accomplish a modal we’ll be creating another StackNavigator, with one subtle difference. This “Root” navigator will have our TabNavigator inside of it as well as our settings screen. We’ll also tell this StackNavigator to, rather than bring cards/screens in from right to left, to bring them from bottom to top. All those words looks like this in code (make sure to import the Settings screen if you haven’t already).

which tells the StackNavigator to not display a navigation bar for this stack — we’ll let the children navigators do that.

To keep a consistent interface and to show that you can nest a StackNavigator in a StackNavigator we’ll build one for the settings screen as well.

Finally, we’ll want to tell the app entry point to use our new Root navigator instead of the Tabs.

All of this leaves us with the following

Remember, all of this code is available on Github and I encourage you to check it out as well as the react navigation docs.

Getting Started with React Navigation, the Navigation Solution for React Native