The Project | About Us | Contribute | Donations | License

HOME

React Navigation is a popular library used for routing and navigation in React Native applications. It provides a way to navigate between different screens and manage the navigation history. This module will introduce you to the basics of React Navigation, including how to set it up and use it in your React Native projects.

Key Concepts

Navigation Container: The root component that manages the navigation state of your app.
Navigators: Components that manage the navigation between different screens. Common types include Stack Navigator, Tab Navigator, and Drawer Navigator.
Screens: The individual views or pages that users navigate between.
Routes: The paths or names that define the different screens in your app.

Setting Up React Navigation

To get started with React Navigation, you need to install the necessary packages. Follow these steps:

Step 1: Install React Navigation

First, install the core library:

npm install @react-navigation/native

Step 2: Install Required Dependencies

React Navigation relies on some additional libraries for proper functioning. Install them using the following command:

npm install react-native-screens react-native-safe-area-context

Step 3: Install Specific Navigators

Depending on the type of navigation you want to implement, you need to install specific navigator libraries. For this introduction, we'll use the Stack Navigator:

npm install @react-navigation/stack

Step 4: Set Up the Navigation Container

In your main application file (e.g., App.js), set up the Navigation Container and define your navigators and screens.

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Step 5: Create Screen Components

Create the screen components that you referenced in the navigator. For example, create HomeScreen.js and DetailsScreen.js:

HomeScreen.js

import React from 'react';
import { View, Text, Button } from 'react-native';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

export default HomeScreen;

DetailsScreen.js

import React from 'react';
import { View, Text } from 'react-native';

function DetailsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

export default DetailsScreen;

Practical Exercise

Exercise: Create a Simple Navigation Flow

Objective: Create a simple navigation flow with three screens: Home, Profile, and Settings.
Steps:
- Set up React Navigation in your project.
- Create three screen components: HomeScreen, ProfileScreen, and SettingsScreen.
- Configure a Stack Navigator to navigate between these screens.
- Add buttons on each screen to navigate to the other screens.

Solution

App.js

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import ProfileScreen from './screens/ProfileScreen';
import SettingsScreen from './screens/SettingsScreen';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
        <Stack.Screen name="Settings" component={SettingsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

HomeScreen.js

import React from 'react';
import { View, Text, Button } from 'react-native';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Profile"
        onPress={() => navigation.navigate('Profile')}
      />
      <Button
        title="Go to Settings"
        onPress={() => navigation.navigate('Settings')}
      />
    </View>
  );
}

export default HomeScreen;

ProfileScreen.js

import React from 'react';
import { View, Text, Button } from 'react-native';

function ProfileScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Profile Screen</Text>
      <Button
        title="Go to Home"
        onPress={() => navigation.navigate('Home')}
      />
      <Button
        title="Go to Settings"
        onPress={() => navigation.navigate('Settings')}
      />
    </View>
  );
}

export default ProfileScreen;

SettingsScreen.js

import React from 'react';
import { View, Text, Button } from 'react-native';

function SettingsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings Screen</Text>
      <Button
        title="Go to Home"
        onPress={() => navigation.navigate('Home')}
      />
      <Button
        title="Go to Profile"
        onPress={() => navigation.navigate('Profile')}
      />
    </View>
  );
}

export default SettingsScreen;

Summary

In this section, you learned the basics of React Navigation, including how to set it up and create a simple navigation flow using the Stack Navigator. You also created screen components and configured navigation between them. This foundational knowledge will be essential as you explore more advanced navigation techniques in the following modules.

Introduction to React Navigation

Key Concepts

Setting Up React Navigation

Step 1: Install React Navigation

Step 2: Install Required Dependencies

Step 3: Install Specific Navigators

Step 4: Set Up the Navigation Container

Step 5: Create Screen Components

Practical Exercise

Exercise: Create a Simple Navigation Flow

Solution

Summary

React Native Course

Module 1: Introduction to React Native

Module 2: Core Components and Styling

Module 3: State and Lifecycle

Module 4: Navigation

Module 5: Networking and Data

Module 6: Advanced Concepts

Module 7: Deployment and Publishing

Module 8: Real-World Projects