Navigating Between Screens

The focus of this chapter is on navigating between the screens that make up your React Native application. Navigation in native apps is slightly different than navigation on web apps: mainly because there isn’t any notion of a URL that the user is aware of. In prior versions of React Native, there were primitive navigator components that you could use to control the navigation between screens. There were a number of challenges with these components that resulted in more code to accomplish basic navigation tasks. For example, initial navigation components, like Navigator and NavigatorIOS, were complex to implement and lacked features, leading to performance issues and inconsistency across platforms.

More recent versions of React Native encourage you to use the react-navigation package, which will be the focus of this chapter, even though there are several other options. You’ll learn about navigation basics, passing parameters to screens...

Technical requirements

You can find the code files for this chapter on GitHub at https://github.com/PacktPublishing/React-and-React-Native-5E/tree/main/Chapter19.

The basics of navigation

Navigation in React Native is crucial because it manages the transition between different screens in an app. It improves user experience by organizing the app’s flow logically, allowing users to intuitively understand how to access features and information. Effective navigation makes an app feel quick and responsive, reducing frustration and increasing user engagement. It also supports the app’s architecture, making it easier to scale and maintain by clearly defining how components are linked and interact. Without proper navigation, an app can become confusing and difficult to use, significantly impacting its success and user retention. This section will guide you through setting up navigation in your app by creating a small app where you can navigate between screens.

Let’s start off with the basics of moving from one page to another using the react-navigation package.

Before starting, you should install the react-navigation package...

Route parameters

When you develop React web applications, some of your routes have dynamic data in them. For example, you can link to a details page, and within that URL, you’ll have some sort of identifier. The component then has what it needs to render specific detailed information. The same concept exists within react-navigation. Instead of just specifying the name of the screen that you want to navigate to, you can pass along additional data.

Let’s take a look at route parameters in action.

We’ll start with the App component:

const Stack = createNativeStackNavigator<RootStackParamList>();
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Details" component={Details} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

This looks just like the example...

The navigation header

The navigation bars that you’ve created so far in this chapter have been sort of plain. That’s because you haven’t configured them to do anything, so react-navigation will just render a plain bar with a back button. Each screen component that you create can configure specific navigation header content.

Let’s build on the example discussed in the Route parameters section, which used buttons to navigate to a details page.

The App component has major updates, so let’s take a look at it:

const Stack = createNativeStackNavigator<RoutesParams>();
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen
          name="Details"
          component={Details}
          options={({ route }) => ({
            headerRight: () => {
              return (
        ...

Tab and drawer navigation

So far in this chapter, each example has used Button components to link to other screens in the app. You can use functions from react-navigation that will create tab or drawer navigation for you automatically based on the screen components that you give it.

Let’s create an example that uses bottom tab navigation on iOS and drawer navigation on Android.

You aren’t limited to using tab navigation on iOS or drawer navigation on Android. I’m just picking these two to demonstrate how to use different modes of navigation based on the platform. You can use the exact same navigation mode on both platforms if you prefer.

For this example, we need to install a few other packages for tab and drawer navigators:

npm install @react-navigation/bottom-tabs @react-navigation/drawer

Also, the drawer navigator requires some native modules. Let’s install them:

npx expo install react-native-gesture-handler react...

File-based navigation

In this section, we will talk about Expo Router, a file-based router works in a similar way to routing in Next.js. To add a new screen, you just need to add a new file to the app folder. It’s built on top of React Navigation, so the routes have the same options and parameters.

For more information and details about Expo Router, take a look at this link:

https://docs.expo.dev/routing/introduction/

To try it out, we will install a fresh project using:

npx create-expo-app –template

To install the project with Expo Router ready, we just need to choose the Navigation (TypeScript) template:

    Blank
    Blank (TypeScript)
❯   Navigation (TypeScript) - File-based routing with TypeScript enabled
    Blank (Bare)

When the installation is finished, you will find the app folder for the project. This folder will be used for all your screens. Let’s try to replicate the example from the The basics of...

Summary

In this chapter, you learned that mobile applications require navigation, just like web applications do. Although they are different, web application and mobile application navigation have enough conceptual similarities that mobile app routing and navigation don’t have to be a nuisance.

Older versions of React Native attempted to provide components to help manage navigation within mobile apps, but they never really took hold. Instead, the React Native community has dominated this area. One example of this is the react-navigation library: the focus of this chapter.

You learned how basic navigation works with react-navigation. You then learned how to control header components within the navigation bar. Next, you learned about the tab and drawer navigation components. These two navigation components can automatically render the navigation buttons for your app based on the screen components. You also learned how to work with the file-based Expo Router.

In the...