React Native Module 4: Creating Navigation and Drawer in React Native

Module 4: Navigation

Course Overview: This module teaches how to navigate between screens in React Native apps. You will learn about React Navigation library, stack, tab, and drawer navigators, passing data between screens, and deep linking techniques for external links.

✅ React Navigation Library

React Navigation is the most popular library for handling navigation in React Native. It supports stack, tab, drawer, and nested navigators.

Install React Navigation:

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

Wrap your app with NavigationContainer:

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

const Stack = createNativeStackNavigator();

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

—

✅ Stack Navigator

Stack Navigator allows navigation like a call stack: push and pop screens.

Example:

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

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

function DetailsScreen({ navigation }) {
  return (
    <View>
      <Text>Details Screen</Text>
      <Button title="Go Back" onPress={() => navigation.goBack()} />
    </View>
  );
}

export { HomeScreen, DetailsScreen };

Key points:

• navigation.navigate('ScreenName') moves to a screen.
• navigation.goBack() returns to the previous screen.
• Stack navigation automatically adds a header bar with back button.

—

✅ Tab Navigator

Tab Navigator provides bottom or top tabs for switching between screens.

Install:

npm install @react-navigation/bottom-tabs

Example:

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './HomeScreen';
import ProfileScreen from './ProfileScreen';

const Tab = createBottomTabNavigator();

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

Tips:

• Customize tab icons using tabBarIcon.
• Combine tab and stack navigators for nested navigation.

—

✅ Drawer Navigator

Drawer Navigator allows navigation via a side menu (hamburger menu).

Install:

npm install @react-navigation/drawer

Example:

import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import HomeScreen from './HomeScreen';
import SettingsScreen from './SettingsScreen';

const Drawer = createDrawerNavigator();

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

—

✅ Passing Data Between Screens

You can pass data using navigate:

navigation.navigate('Details', { itemId: 42, otherParam: 'Hello' });

Access data in the target screen:

function DetailsScreen({ route, navigation }) {
  const { itemId, otherParam } = route.params;
  return <Text>Item ID: {itemId}, Param: {otherParam}</Text>;
}

—

✅ Deep Linking and Navigation Lifecycle

Deep linking allows your app to open a specific screen from an external URL. Set it up using Linking API:

import { Linking } from 'react-native';

Linking.addEventListener('url', handleUrl);

function handleUrl(event) {
  console.log(event.url);
}

Tips:

• Define a URL scheme for your app in app.json (Expo) or native config (React Native CLI).
• Use navigation.navigate() to route based on URL.
• Combine deep linking with stack and tab navigators.

—

✅ Summary

• React Navigation is the standard library for navigation in React Native.
• Stack Navigator simulates a stack of screens with push/pop behavior.
• Tab Navigator allows switching between tabs (bottom/top).
• Drawer Navigator creates a side menu for navigation.
• Data can be passed between screens using route.params.
• Deep linking opens screens via external URLs and integrates with navigation lifecycle.

Mastering navigation ensures smooth transitions and better user experience in your React Native apps.