CodeBlanks Logo Icon CodeBlanks
Login Register

React Navigation

Learn the React Navigation library.

What is React Navigation?

In React Native, screen transitions are handled by the React Navigation library. It manages the screen stack, tabs and drawer. Each screen is a component; transitions happen through the navigation object.

React Navigation is not part of the React Native core; it is installed as a separate package. The base package is @react-navigation/native. In Expo projects the dependencies are usually pre-installed, but installing them explicitly is still good practice.

Package installation

To use React Navigation you first install the @react-navigation/native package. For stack navigation you also need @react-navigation/native-stack. With Expo: npx expo install @react-navigation/native @react-navigation/native-stack.

These packages also require react-native-screens and react-native-safe-area-context; Expo adds them automatically. After installation you import the NavigationContainer component to build the root wrapper.

Practice Your turn: wrap App with NavigationContainer

Import NavigationContainer from @react-navigation/native. Wrap the root view returned by the App component with <NavigationContainer>.

Starter code

App.js
// import the container
// wrap the App component with the container
function App() {
  return null;
}

Sample solution

App.js
import { NavigationContainer } from '@react-navigation/native';

function App() {
  return (
    <NavigationContainer>
      {/* screens go here */}
    </NavigationContainer>
  );
}

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 What does React Navigation provide?

  • Network requests
  • Persistent data storage
  • Screen-to-screen transitions Correct answer
  • Style definitions

Explanation: React Navigation manages screen transitions and routing.

2 Fill in the blank: import NavigationContainer

Question 
import { ____ } from '@react-navigation/native';
Answer 
import { NavigationContainer } from '@react-navigation/native';

Explanation: NavigationContainer is the root wrapper component.

3 Match: package and purpose

Term Meaning
@react-navigation/native root wrapper
@react-navigation/native-stack stack navigation
react-native-screens screen optimization

All lessons in Beginner

1 React Native basics

  1. What is React Native?
  2. Expo setup
  3. Your first component
  4. App.js
  5. Running
  6. Summary - React Native basics

2 JSX

  1. What is JSX?
  2. Expressions
  3. Component tree
  4. Self-closing
  5. Conditional rendering
  6. Summary - JSX

3 Components

  1. Functional components
  2. Props
  3. Children
  4. Multiple props
  5. Component reuse
  6. Summary - Components

4 Project: Counter app

  1. Project design
  2. useState
  3. Increment and decrement
  4. TouchableOpacity
  5. Putting it together

5 TextInput

  1. TextInput
  2. onChangeText
  3. Controlled input
  4. placeholder
  5. Secure text
  6. Summary - TextInput

6 Style

  1. style prop
  2. StyleSheet.create
  3. Color and font
  4. Margin and padding
  5. border
  6. Summary - Style

7 Flexbox

  1. flexDirection
  2. justifyContent
  3. alignItems
  4. flex
  5. flexWrap
  6. Summary - Flexbox

8 Buttons

  1. Button
  2. TouchableOpacity
  3. Pressable
  4. onPress and onPressIn
  5. disabled
  6. Summary - Buttons

9 Project: To-do app

  1. App design
  2. Adding tasks
  3. Task list
  4. Completing tasks
  5. Putting it together

10 Lists

  1. FlatList
  2. renderItem
  3. keyExtractor
  4. SectionList
  5. List header and footer
  6. Summary - Lists

11 ScrollView

  1. ScrollView
  2. horizontal
  3. contentContainerStyle
  4. onScroll
  5. RefreshControl
  6. Summary - ScrollView

12 Images

  1. Image
  2. source
  3. resizeMode
  4. ImageBackground
  5. Image size
  6. Summary - Images

13 State

  1. useState
  2. State update
  3. Previous state
  4. Multiple state
  5. Object state
  6. Summary - State

14 Events

  1. onPress
  2. onLongPress
  3. Event parameters
  4. onLayout
  5. Form events
  6. Summary - Events

15 Project: Weather app

  1. App design
  2. Data model
  3. Display
  4. City selection
  5. Putting it together

16 Navigation

  1. React Navigation
  2. Stack navigator
  3. navigate
  4. params
  5. Back button
  6. Summary - Navigation

17 Alerts

  1. Alert
  2. Alert buttons
  3. Toast
  4. Modal
  5. Modal animation
  6. Summary - Alerts

18 Platform

  1. Platform.OS
  2. Platform.select
  3. Platform.Version
  4. File extension
  5. Platform-specific components
  6. Summary - Platform

19 Async Storage

  1. AsyncStorage
  2. setItem
  3. getItem
  4. removeItem
  5. JSON serialize
  6. Summary - Async Storage

20 Beginner final

  1. Project design
  2. Components
  3. State and events
  4. Navigation
  5. Putting it together