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

Photo by Alexander Andrews on Unsplash

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

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

  1. A screen that shows which cities we have lists for, e.g. “Los Angeles” or “Austin”.
  2. For each city, screen with a list of lists, e.g. “Best bagels in New York” or “LA’s favorite donut shops”.
  3. 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

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

There are two things to note here:

  1. The navigation prop: this is passed into every screen in stack navigator.
  2. The navigate("screen_name") function: this is what we use to navigate to a specific screen, identified by its name. In HTML, navigate would be the <a> tag and the screen name would be the value of thehref attribute.

The result

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

Co-founder & CTO @ AgentRisk. Former infra-tech guy (storage, networks). Startup nerd. Always building cool side-projects. #LongLA