Computer Science
Grade 9
20 min
6. Navigation: Implementing App Navigation with React Navigation
Learn how to implement app navigation using React Navigation, allowing users to move between different screens in the app.
Tutorial Preview
1
Introduction & Learning Objectives
Learning Objectives
Explain the purpose of a navigation library in a mobile app.
Install and configure the basic React Navigation Stack Navigator in a React Native project.
Define multiple screen components and register them within a navigator.
Use the `navigation.navigate()` function to move from one screen to another.
Pass data (parameters) from a source screen to a destination screen.
Access and display passed data on a screen using the `route.params` object.
Use `navigation.goBack()` to return to the previous screen in the stack.
Ever wondered how you jump from your Instagram feed to your DMs with a single tap? 📱 That's app navigation, and you're about to learn how to build it!
App navigation is like the system of hallways and doors in a building; it lets u...
2
Key Concepts & Vocabulary
TermDefinitionExample
NavigationThe system that allows users to move between different screens or pages within an application.Tapping the 'Settings' icon on your phone's home screen to open the Settings app is a form of navigation.
React NavigationA popular library for React Native that provides a complete, easy-to-use solution for handling navigation.We use functions from this library, like `createStackNavigator`, to define how our app's screens are connected.
Screen ComponentA single, independent view in a mobile app, typically represented by a React component.A `LoginScreen` component, a `HomeScreen` component, or a `UserProfileScreen` component.
NavigatorA special component from React Navigation that manages a set of screens and defines the user experience for movi...
3
Core Syntax & Patterns
Stack Navigator Setup Pattern
const Stack = createStackNavigator();
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
This is the core structure for a stack navigator. The `NavigationContainer` must wrap your entire navigator. `Stack.Navigator` acts as a manager, and each `Stack.Screen` links a unique string `name` to a specific screen `component`.
Navigating to a Screen
navigation.navigate('ScreenName', { key: 'value' });
Use this function from the `navigation` prop to move to another screen. The first argument is the string `name` of the screen y...
4 more steps in this tutorial
Sign up free to access the complete tutorial with worked examples and practice.
Sign Up Free to ContinueSample Practice Questions
Challenging
A user is on a `Settings` screen. The navigation stack is [Home, Profile, Settings]. If the user then executes `navigation.navigate('Home')`, what happens to the stack?
A.It becomes [Home]. React Navigation pops `Profile` and `Settings` off the stack to go back to the existing `Home` screen.
B.It becomes [Home, Profile, Settings, Home]. A new `Home` screen is pushed on top of the stack.
C.It throws an error because you cannot navigate to a screen that is already in the stack.
D.It becomes [Home, Profile]. It just goes back one level, ignoring the 'Home' parameter.
Challenging
A developer passes data like this: `navigation.navigate('Details', { 'product-id': 123 });`. On the `Details` screen, they try to get the data with `const { product-id } = route.params;`. This code causes a syntax error. Why?
A.Parameters must always be strings, but 123 is a number.
B.The `route.params` object does not exist on functional components.
C.JavaScript variable names used in destructuring cannot contain a hyphen. It must be accessed using bracket notation: `route.params['product-id']`.
D.The `navigate` function only accepts one parameter, the screen name.
Challenging
An app's navigation flow is `Feed -> Post A -> Post B` (where a link inside Post A leads to Post B). The current stack is `[Feed, Post A, Post B]`. If the user on `Post B` calls `navigation.goBack()` twice, which screen will they be on?
A.Post A
B.Feed
C.The app will crash because you can't go back twice.
D.blank screen because the stack will be empty.
Want to practice and check your answers?
Sign up to access all questions with instant feedback, explanations, and progress tracking.
Start Practicing Free