Adding Navigation to a React Native App with React Navigation

In this tutorial, we will explore how to use the React Navigation library to implement navigation between screens in a React Native app. Navigation is a crucial aspect of any mobile application, allowing users to move between different sections and features seamlessly. React Navigation is a popular and flexible navigation library for React Native that provides a simple and intuitive way to handle navigation in your app.

Prerequisites:

Before we begin, make sure you have the following prerequisites installed on your system:

• Node.js
• npm or Yarn
• React Native CLI

Step 1: Setting Up a New React Native Project

Let's start by setting up a new React Native project. Open your terminal and run the following command:

npx react-native init NavigationApp

Step 2: Installing React Navigation

Next, navigate to the project directory by running cd NavigationApp. Now, install the React Navigation library using either npm or Yarn:

npm install @react-navigation/native

or

yarn add @react-navigation/native

Step 3: Installing Dependencies

To use React Navigation, we need to install its dependencies. Run the following command:

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

or

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Step 4: Linking Native Dependencies (React Native < 0.69)

Some of the React Navigation dependencies require linking. Run the following command to link them to your project:

npx react-native link

Step 5: Setting Up Navigation Containers

React Navigation uses navigation containers to manage the navigation state. Let's create a basic navigation container in your app's entry point (usually App.js). Replace the existing code with the following:

1import * as React from "react";
2import { NavigationContainer } from "@react-navigation/native";
3
4function App() {
5  return (
6    <NavigationContainer>{/* Your screens will go here */}</NavigationContainer>
7  );
8}
9
10export default App;

Step 6: Creating Stack Navigator

A stack navigator allows you to navigate between screens using a stack-based approach. Create a new file called HomeScreen.js and add the following code:

1import React from "react";
2import { View, Text, Button } from "react-native";
3
4function HomeScreen({ navigation }) {
5  return (
6    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
7      <Text>Welcome to the Home Screen!</Text>
8      <Button
9        title="Go to Details"
10        onPress={() => navigation.navigate("Details")}
11      />
12    </View>
13  );
14}
15
16export default HomeScreen;

Similarly, create another file called DetailsScreen.js and add the following code:

1import React from "react";
2import { View, Text } from "react-native";
3
4function DetailsScreen() {
5  return (
6    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
7      <Text>Welcome to the Details Screen!</Text>
8    </View>
9  );
10}
11
12export default DetailsScreen;

Step 7: Setting Up Stack Navigator

Now, let's set up the stack navigator in the App.js file. Import the necessary components and add the following code inside the NavigationContainer component:

1import { createStackNavigator } from "@react-navigation/stack";
2
3import HomeScreen from "./HomeScreen";
4import DetailsScreen from "./DetailsScreen";
5
6const Stack = createStackNavigator();
7
8function App() {
9  return (
10    <NavigationContainer>
11      <Stack.Navigator>
12        <Stack.Screen name="Home" component={HomeScreen} />
13        <Stack.Screen name="Details" component={DetailsScreen} />
14      </Stack.Navigator>
15    </NavigationContainer>
16  );
17}
18
19export default App;

Step 8: Testing the App

Congratulations! You have successfully implemented navigation in your React Native app using React Navigation. To test the app, run the following command in your project directory:

npx react-native run-android

or

npx react-native run-ios

Conclusion:

In this tutorial, we covered how to add navigation to a React Native app using the React Navigation library. We learned how to set up the navigation container, create stack navigator, and navigate between screens. React Navigation offers many more features, such as drawer navigation and tab navigation, which you can explore to enhance your app's navigation capabilities.

Feel free to experiment with different navigators and customize the screens to match your app's requirements. Happy coding!