Setting up navigation
This post is part of a series, where I document my experiences learning React Native while building my first-ever mobile app. This is also my way of giving back to the React Native community, with tips and insights I note along the journey.
Mobile navigation basics
If you want to have an app with more than one screens, you need to navigate between them. When it comes to mobile apps, there are two main navigation patterns: stack navigation and tab navigation. You’ve definitely seen both of them, often in the same app.
With stack navigation, when you tap to navigate to a new screen, the previous screen is pushed into a stack. A “back” navigation button enables you to return to the previous screen (i.e. popping that screen off the stack). This means that screens are laid out in a sequential logical order.
Tab navigation, on the other hand, enables you to navigate arbitrarily to any of the screens, usually from a set of tabs on the bottom of the screen. Other apps will instead have a drawer of tabs, that slides from the side.
Many apps use a combination of both, usually tab navigation for the top-level screens (e.g. “inbox” and “sent” folders in an email app) and stack navigation for moving around more detailed screens (e.g. viewing an individual email within the “inbox” screen).
Navigation in React Native
The most common navigation library for React Native is React Navigation, which is what we’ll use in this project as well. To install it, simply run:
Since we’re using Expo, we don’t need to install anything else. For the curious, more detailed installation instructions are here.
Basic screens in our app
Here are the basic screens that our app will have. Note that we’re not adding a login/sign up flow yet, so these screens are not here in this demo.
- A screen that shows which cities we have lists for, e.g. “Los Angeles” or “Austin”.
- For each city, screen with a list of lists, e.g. “Best bagels in New York” or “LA’s favorite donut shops”.
- For each list, a screen with a list of businesses or dishes, e.g. “Pizzanista” or “Pastrami Pad Kee Mao at NIGHT+MARKET”.
These screens naturally adapt to stack navigation, so this is what we’ll use.
Setting up the screens
Following the react-navigation guide, let’s update the code in App.jsthat got generated by expo init with the code below:
As you can see, the createStackNavigator function takes a list of components and returns a React component, which we export in App.js. But there’s one small problem with this code! Even though our app now has multiple screens, we can’t navigate to them! The reason? There isn’t an element (e.g. a button) that triggers the navigation. In React Native, this can be a Button component or any other of the “Touchable” components. For now, let’s use a Button.
Navigating between screens
As we said below, we need to add a navigation component to the screens. We only need to add this to the first two screens, since theEntries screen is the innermost screen. Let’s update the code in App.js to the following:
There are two things to note here:
- The
navigationprop: this is passed into every screen in stack navigator. - The
navigate("screen_name")function: this is what we use to navigate to a specific screen, identified by its name. In HTML,navigatewould be the<a>tag and the screen name would be the value of thehrefattribute.
The result
Here’s what navigating around our app looks like. Pretty basic for now, but we will build on it in the following days.
If you’re curious, make sure you check out the really great documentation for react-navigation. That’s it for now! Next up: displaying lists.
If you enjoyed this article, feel free to hit that clap button 👏 to help others find it.
About me
I’m Alex, a software engineer and startup geek. Currently, I’m a co-founder at a startup called AgentRisk, where I’m the VP of Product & Engineering. In a past life, I was part of the founding engineering team at an enterprise cloud storage startup in Silicon Valley, did a bunch of cool cutting-edge projects at Cisco Research, and worked on some really innovative data center network architectures while doing my Master’s at UCSD. I always enjoy learning new technologies and b̵u̵i̵l̵d̵i̵n̵g̵ shipping side-projects all the time.
