Up and running with React Navigation
Note: This post is adapted from a talk I gave at the React Native Los Angeles meetup in April 2017. Find my code and slides here.
If you’re building your first React Native app (or second, or tenth), you’ve most likely hit some hiccups while wiring up your navigation. Navigation can be tricky to reason about for a lot of different reasons. In this series, we’ll explore React Navigation, a library from react-community that is quickly being adopted as the standard. The first post will cover getting up and running, and later posts will dig into more advanced usage and customization.
We’re trying to solve a seemingly simple problem — getting from one screen to another — but it can feel like navigation has a layer of magic sprinkled over it. When we call this.props.navigation.navigate('Home') we go to the Home screen, but how do those navigation props get into our component in the first place?
Say this next part with me:
A Navigator is just a component
Your navigator is just a component that sits at the base of your app. Since your entire app is a child of your navigator component, the navigator can pass props to whatever other component it renders, allowing you to fire off its navigation methods, check in on its current state, etc. I had to constantly remind myself of this before my mental model started to make sense.
I’ll be building a simple app based on the React Navigation example app. It has three screens: Home, Chat, and Account (we won’t actually be building out the chat implementation, so you’ll have to use your imagination for that part). The HomeScreen will display a list of users. Tapping a user name will take you to a ChatScreen with that user, and from there you can view that user’s AccountScreen.
Setup
Getting started with React Navigation is fairly straightforward, and simpler than most other navigation options.
My App.js looks like this:
The basic steps are:
- Import the navigator and the screens to be used as your routes
- Create a config object that maps route names to the components that should be rendered. Note the shape of the object — your keys will be the name for each route (i.e. ‘Home’) and the values are objects that have a key of
screenand a value of the component you want to render. When you tell the navigator to navigate to ‘Home’, this is how it’ll know what to do. - Initialize your navigator with the config object you just created
- Render your navigator to your app
Each screen that the navigator renders gets a navigation prop that contains a few useful properties and methods. For now we’ll focus on props.navigation.navigate, a method that allows you to navigate from one screen to the next, and props.navigation.state, which stores whatever data you want to pass around the app as you navigate.
To go the ChatScreen, we’ll call props.navigation.navigate(‘Chat’)
Pretty easy, right?
But it lacks some features we need. We don’t just want to go to a generic Chat screen. We want to chat with a specific user.
Params
On our HomeScreen, we’ll display the name of a user named Rick. Clicking on Rick’s name should take us to a ChatScreen with a message letting us know that we’re chatting with Rick.
We pass Rick’s name to the Chat screen as a param on the second argument to navigate(): props.navigation.navigate(‘Chat’ , { name })
We can access the data we passed on the next screen via props.navigation.state.params
So, to get our name param, we access props.navigation.state.params.name
Here’s what our app looks like now:
Getting more interesting! Let’s build a more fleshed-out version of this with a list of users to chat with.
First we’ll create an array of user objects that we’ll use to populate our list. Then, we’ll map through that array and create a button for each user. The onPress of the button will call props.navigation.navigate with the ‘Chat’ route as the first argument, and the user’s name passed as a param.
We don’t need to change anything in our ChatScreen — it’s already updating itself based on the value of props.navigation.state.params.name
And there you have it! A super simple app that navigates from screen to screen and passes data between them. This use case may seem like a toy but it represents a sizable chunk of actual navigation requirements.
Follow this series! In future posts I’ll dig into other useful features of React Navigation.
Async builds high performance, reliable, and cost-effective applications by combining technical expertise and deep knowledge of industry trends.
For more information on development services, visit asy.nc
