Day 1: Setting Up Navigation with React Navigation

In this tutorial, you’ll learn how to implement React Navigation in your React Native app, allowing you to create a multi-screen app with stack navigation, tab navigation, and drawer navigation. By the end of today’s lesson, you’ll have a working navigation setup to use in future tutorials.

What You Will Learn Today:

1. Installing React Navigation and its dependencies
2. Setting up stack navigation
3. Adding tab navigation for multiple screens
4. Implementing drawer navigation

Step 1: Install React Navigation

React Navigation is the most widely-used navigation library for React Native apps, providing a flexible and customizable way to manage navigation in your app.

1. Install React Navigation and the necessary dependencies:

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

2. Install the stack navigator:

npm install @react-navigation/native-stack

3. For tab and drawer navigation, you’ll also need to install the following packages:

npm install @react-navigation/bottom-tabs
npm install @react-navigation/drawer

4. Finally, install the required peer dependencies by running:

expo install react-native-gesture-handler react-native-reanimated

Explanation:

• @react-navigation/native: The core package for React Navigation.
• @react-navigation/native-stack: Provides stack navigation.
• @react-navigation/bottom-tabs: Provides tab navigation for switching between screens.
• @react-navigation/drawer: Provides drawer navigation.
• react-native-gesture-handler and react-native-reanimated: Required peer dependencies for smooth animations and gesture handling.

Step 2: Set Up a Navigation Container

Next, you’ll need to wrap your app in a NavigationContainer to manage the navigation state.

1. Open App.js and set up the NavigationContainer:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

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

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

Explanation:

• NavigationContainer: This component wraps your entire app and provides the navigation context.
• createNativeStackNavigator: Creates a stack navigator to manage screens in a stack-based flow (like pushing new screens onto the stack and going back).
• Stack.Navigator: The container for the stack navigation, where you define the routes (screens) that will be part of the stack.

Step 3: Add Stack Navigation for Multiple Screens

Stack navigation allows you to navigate between screens in a linear way, similar to how a browser works with pages. Let’s add a second screen and demonstrate navigation between two screens.

1. Modify App.js to include a second screen, DetailsScreen:

import * as React from 'react';
import { View, Text, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

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>
  );
}

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

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>
  );
}

Explanation:

• navigation.navigate(‘Details’): This function navigates the user to the DetailsScreen when the button is pressed.
• Stack navigation works like a call stack: the user moves from the HomeScreen to the DetailsScreen, and can press a back button to return.

Step 4: Adding Tab Navigation

Tab navigation is useful for switching between multiple screens (like a dashboard, profile, and settings).

1. Modify App.js to include tab navigation using createBottomTabNavigator:

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

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

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

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Explanation:

• createBottomTabNavigator: Creates a tab-based navigation where each tab corresponds to a different screen.
• Tab.Navigator: The container for the tab navigation, defining the tabs (screens) that will appear.

Step 5: Implementing Drawer Navigation

Drawer navigation allows you to hide and reveal a navigation menu from the side of the screen, typically used for complex apps with multiple sections.

1. Modify App.js to include drawer navigation using createDrawerNavigator:

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

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

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

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

Explanation:

• createDrawerNavigator: Creates a drawer navigation where users can swipe or tap a menu icon to reveal a side navigation drawer.
• Drawer.Navigator: The container for drawer navigation, where you define the screens accessible through the drawer.

Step 6: Customizing Navigation Options

You can customize the header, icons, and behavior of your navigation screens.

1. Modify the navigation options in App.js:

<Stack.Navigator
  screenOptions={{
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  }}
>

Explanation:

• headerStyle: Customize the background color of the navigation header.
• headerTintColor: Set the color of the back button and title text.
• headerTitleStyle: Set the font weight and style of the title.

Step 7: Recap and Summary

In today’s tutorial, you learned how to set up navigation using React Navigation. Here’s a quick summary of what you’ve done:

• Installed React Navigation and its dependencies.
• Set up stack navigation to navigate between screens.
• Implemented tab navigation for switching between multiple sections.
• Added drawer navigation to allow for complex navigation menus.
• Customized the navigation header to match your app’s design.

With navigation in place, your app is ready for multi-screen navigation. You’ll be using these navigation concepts throughout the series.

Next Up: Day 2 – Managing State with Redux in React Native

In Day 2, we’ll dive into managing state in React Native using Redux. You’ll learn how to set up Redux, create actions and reducers,

and manage global state across your app.

Stay tuned for more advanced features tomorrow!