React Native Basics (Part 6): Adding Routing and Navigation

In this tutorial, you’ll learn how to navigate between different screens in a React Native app using React Navigation.

1. Setting Up React Navigation

Before we can start using navigation, we need to install the necessary dependencies.

Step 1: Install React Navigation

Open your terminal and run the following commands:

npm install @react-navigation/native

Step 2: Install Required Dependencies

React Navigation requires additional packages for proper functioning:

npm install @react-navigation/native-stack @react-navigation/bottom-tabs
npm install react-native-screens react-native-safe-area-context

• @react-navigation/native-stack: For creating stack navigators.
• @react-navigation/bottom-tabs: For creating bottom tab navigation.
• react-native-screens and react-native-safe-area-context: Used internally by React Navigation to optimize performance.

2. Basic Navigation Setup

Step 1: Create a Navigation Container

In React Navigation, we use a NavigationContainer to manage the navigation tree. Wrap your entire app with NavigationContainer.

Step 2: Creating Screens

Create two simple screens, HomeScreen and DetailsScreen.

Example: App.js

import React from "react";
import { Button, Text, View, StyleSheet } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

// Create a Stack Navigator
const Stack = createNativeStackNavigator();

// Home Screen Component
function HomeScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>Home Screen</Text>
      <Button
        title='Go to Details'
        onPress={() => navigation.navigate("Details")}
      />
    </View>
  );
}

// Details Screen Component
function DetailsScreen() {
  return (
    <View style={styles.container}>
      <Text>Details Screen</Text>
    </View>
  );
}

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

Code Explanation

• NavigationContainer: The root component that manages the navigation tree.
• createNativeStackNavigator: A function that creates a stack navigator, allowing you to navigate between screens in a stack.
• Stack.Navigator: Defines the navigation structure. It contains multiple Stack.Screen components.
• navigation.navigate('Details'): The function used to navigate between screens.
• initialRouteName="Home": Sets the first screen to show when the app loads.

3. Adding Bottom Tab Navigation

Now, let’s introduce a bottom tab navigation with HomeScreen and SettingsScreen.

Step 1: Install Bottom Tabs Package (Already done previously)

You should have already installed @react-navigation/bottom-tabs in the setup step.

Step 2: Modify the Code to Include Tabs

Update your App.js to use a bottom tab navigator:

Example: App.js

import React from "react";
import { Button, Text, View, StyleSheet } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

// Create Navigators
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

// Home Screen Component
function HomeScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>Home Screen</Text>
      <Button
        title='Go to Details'
        onPress={() => navigation.navigate("Details")}
      />
    </View>
  );
}

// Details Screen Component
function DetailsScreen() {
  return (
    <View style={styles.container}>
      <Text>Details Screen</Text>
    </View>
  );
}

// Settings Screen Component
function SettingsScreen() {
  return (
    <View style={styles.container}>
      <Text>Settings Screen</Text>
    </View>
  );
}

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

// Main App Component with Bottom Tabs
export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name='Home'
          component={HomeStack}
        />
        <Tab.Screen
          name='Settings'
          component={SettingsScreen}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

Code Explanation

• createBottomTabNavigator: Creates a bottom tab navigator.
• HomeStack: A function that returns a stack navigator for the HomeScreen and DetailsScreen.
• Tab.Navigator: Defines the tab navigation structure.
• Tab.Screen: Represents individual tabs. Here, we have a Home tab that contains a stack navigator and a Settings tab.

Summary

• React Navigation: The go-to library for handling navigation in React Native apps.
• NavigationContainer: The root component for navigation.
• Stack Navigator: Used to navigate between screens in a stack format (like pages in a book).
• Tab Navigator: Creates a bottom tab bar for navigation.
• Navigating Between Screens: Use navigation.navigate('ScreenName') to switch screens.

Next Steps

• Explore other navigators like DrawerNavigator for side menu navigation.
• Customize your tabs using icons with the react-native-vector-icons package.
• Learn to pass parameters between screens using navigation.navigate('ScreenName', { paramName: 'value' }).

This tutorial covers the basics of setting up and using navigation in a React Native app. With React Navigation, you can build apps with complex navigation structures, providing a smooth user experience.