Back to Course|4 hours|Intermediate

Navigation & Routing

Implement navigation and routing in React Native applications using React Navigation.

Progress: 0/4 topics completed0%

Select Topics Overview

React Navigation Setup

Learn to set up React Navigation library and configure the basic navigation structure for React Native applications

Content by: Jigar Solanki

React Native Developer

Connect

Installing React Navigation

React Navigation is the most popular navigation library for React Native. Install it using npm: `npm install @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs @react-navigation/drawer`

Required Dependencies

•@react-navigation/native - Core navigation library
•@react-navigation/stack - Stack navigator
•@react-navigation/bottom-tabs - Tab navigator
•@react-navigation/drawer - Drawer navigator
•react-native-screens - Native screen optimization
•react-native-safe-area-context - Safe area handling
•react-native-gesture-handler - Gesture handling

Basic Setup

Wrap your app with NavigationContainer and create your first navigator. The NavigationContainer manages the navigation state and provides navigation context to all child components.

Basic Navigation Setup

Code Example

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

// Create stack navigator
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

// Screen components
const HomeScreen = ({ navigation }) => (
  <View style={styles.container}>
    <Text style={styles.title}>Home Screen</Text>
    <Text style={styles.subtitle}>Welcome to React Navigation!</Text>
  </View>
);

const ProfileScreen = ({ navigation }) => (
  <View style={styles.container}>
    <Text style={styles.title}>Profile Screen</Text>
    <Text style={styles.subtitle}>User profile information</Text>
  </View>
);

const SettingsScreen = ({ navigation }) => (
  <View style={styles.container}>
    <Text style={styles.title}>Settings Screen</Text>
    <Text style={styles.subtitle}>App settings and preferences</Text>
  </View>
);

// Tab Navigator
const TabNavigator = () => (
  <Tab.Navigator
    screenOptions={{
      tabBarActiveTintColor: '#2196F3',
      tabBarInactiveTintColor: 'gray',
    }}
  >
    <Tab.Screen 
      name="Home" 
      component={HomeScreen}
      options={{ title: 'Home' }}
    />
    <Tab.Screen 
      name="Profile" 
      component={ProfileScreen}
      options={{ title: 'Profile' }}
    />
    <Tab.Screen 
      name="Settings" 
      component={SettingsScreen}
      options={{ title: 'Settings' }}
    />
  </Tab.Navigator>
);

// Main App with Stack Navigator
const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerStyle: {
            backgroundColor: '#2196F3',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }}
      >
        <Stack.Screen 
          name="Main" 
          component={TabNavigator}
          options={{ headerShown: false }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10,
    color: '#333',
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    textAlign: 'center',
  },
});

export default App;

Swipe to see more code

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

// Create stack navigator
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

// Screen components
const HomeScreen = ({ navigation }) => (
  <View style={styles.container}>
    <Text style={styles.title}>Home Screen</Text>
    <Text style={styles.subtitle}>Welcome to React Navigation!</Text>
  </View>
);

const ProfileScreen = ({ navigation }) => (
  <View style={styles.container}>
    <Text style={styles.title}>Profile Screen</Text>
    <Text style={styles.subtitle}>User profile information</Text>
  </View>
);

const SettingsScreen = ({ navigation }) => (
  <View style={styles.container}>
    <Text style={styles.title}>Settings Screen</Text>
    <Text style={styles.subtitle}>App settings and preferences</Text>
  </View>
);

// Tab Navigator
const TabNavigator = () => (
  <Tab.Navigator
    screenOptions={{
      tabBarActiveTintColor: '#2196F3',
      tabBarInactiveTintColor: 'gray',
    }}
  >
    <Tab.Screen 
      name="Home" 
      component={HomeScreen}
      options={{ title: 'Home' }}
    />
    <Tab.Screen 
      name="Profile" 
      component={ProfileScreen}
      options={{ title: 'Profile' }}
    />
    <Tab.Screen 
      name="Settings" 
      component={SettingsScreen}
      options={{ title: 'Settings' }}
    />
  </Tab.Navigator>
);

// Main App with Stack Navigator
const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerStyle: {
            backgroundColor: '#2196F3',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }}
      >
        <Stack.Screen 
          name="Main" 
          component={TabNavigator}
          options={{ headerShown: false }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10,
    color: '#333',
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    textAlign: 'center',
  },
});

export default App;

Scroll

🎯 Practice Exercise

Test your understanding of this topic:

I understand the basic concepts covered in this topicI can apply the concepts in practical scenariosI'm ready to move to the next topic

Stack Navigator

Master Stack Navigator for screen-to-screen navigation with push, pop, and replace operations in React Native applications

Content by: Jigar Solanki

React Native Developer

Connect

Stack Navigator Basics

Stack Navigator provides a way for your app to transition between screens where each new screen is placed on top of a stack. It's perfect for hierarchical navigation patterns.

Navigation Methods

•navigation.navigate() - Navigate to a screen
•navigation.push() - Push a new screen onto the stack
•navigation.pop() - Go back to previous screen
•navigation.replace() - Replace current screen
•navigation.goBack() - Go back to previous screen
•navigation.reset() - Reset navigation state

Passing Parameters

You can pass parameters to screens through navigation. Parameters are available in the route prop of the screen component and can be used to configure the screen or pass data.

Stack Navigator Example

Code Example

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

const Stack = createStackNavigator();

// List Screen
const ListScreen = ({ navigation }) => {
  const items = [
    { id: 1, title: 'Item 1', description: 'Description for item 1' },
    { id: 2, title: 'Item 2', description: 'Description for item 2' },
    { id: 3, title: 'Item 3', description: 'Description for item 3' },
  ];

  return (
    <View style={styles.container}>
      <Text style={styles.title}>List Screen</Text>
      {items.map((item) => (
        <TouchableOpacity
          key={item.id}
          style={styles.item}
          onPress={() => navigation.navigate('Detail', { item })}
        >
          <Text style={styles.itemTitle}>{item.title}</Text>
          <Text style={styles.itemDescription}>{item.description}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
};

// Detail Screen
const DetailScreen = ({ route, navigation }) => {
  const { item } = route.params;

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Detail Screen</Text>
      <View style={styles.detailContainer}>
        <Text style={styles.detailTitle}>{item.title}</Text>
        <Text style={styles.detailDescription}>{item.description}</Text>
        <Text style={styles.detailId}>ID: {item.id}</Text>
      </View>
      
      <TouchableOpacity
        style={styles.button}
        onPress={() => navigation.goBack()}
      >
        <Text style={styles.buttonText}>Go Back</Text>
      </TouchableOpacity>
    </View>
  );
};

// Main App
const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerStyle: {
            backgroundColor: '#2196F3',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }}
      >
        <Stack.Screen 
          name="List" 
          component={ListScreen}
          options={{ title: 'Items List' }}
        />
        <Stack.Screen 
          name="Detail" 
          component={DetailScreen}
          options={({ route }) => ({ 
            title: route.params?.item?.title || 'Detail' 
          })}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
    color: '#333',
  },
  item: {
    backgroundColor: 'white',
    padding: 15,
    marginBottom: 10,
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  itemTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 5,
  },
  itemDescription: {
    fontSize: 14,
    color: '#666',
  },
  detailContainer: {
    backgroundColor: 'white',
    padding: 20,
    borderRadius: 8,
    marginBottom: 20,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  detailTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 10,
  },
  detailDescription: {
    fontSize: 16,
    color: '#666',
    marginBottom: 10,
  },
  detailId: {
    fontSize: 14,
    color: '#999',
  },
  button: {
    backgroundColor: '#2196F3',
    padding: 15,
    borderRadius: 8,
    alignItems: 'center',
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default App;

Swipe to see more code

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

const Stack = createStackNavigator();

// List Screen
const ListScreen = ({ navigation }) => {
  const items = [
    { id: 1, title: 'Item 1', description: 'Description for item 1' },
    { id: 2, title: 'Item 2', description: 'Description for item 2' },
    { id: 3, title: 'Item 3', description: 'Description for item 3' },
  ];

  return (
    <View style={styles.container}>
      <Text style={styles.title}>List Screen</Text>
      {items.map((item) => (
        <TouchableOpacity
          key={item.id}
          style={styles.item}
          onPress={() => navigation.navigate('Detail', { item })}
        >
          <Text style={styles.itemTitle}>{item.title}</Text>
          <Text style={styles.itemDescription}>{item.description}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
};

// Detail Screen
const DetailScreen = ({ route, navigation }) => {
  const { item } = route.params;

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Detail Screen</Text>
      <View style={styles.detailContainer}>
        <Text style={styles.detailTitle}>{item.title}</Text>
        <Text style={styles.detailDescription}>{item.description}</Text>
        <Text style={styles.detailId}>ID: {item.id}</Text>
      </View>
      
      <TouchableOpacity
        style={styles.button}
        onPress={() => navigation.goBack()}
      >
        <Text style={styles.buttonText}>Go Back</Text>
      </TouchableOpacity>
    </View>
  );
};

// Main App
const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerStyle: {
            backgroundColor: '#2196F3',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }}
      >
        <Stack.Screen 
          name="List" 
          component={ListScreen}
          options={{ title: 'Items List' }}
        />
        <Stack.Screen 
          name="Detail" 
          component={DetailScreen}
          options={({ route }) => ({ 
            title: route.params?.item?.title || 'Detail' 
          })}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
    color: '#333',
  },
  item: {
    backgroundColor: 'white',
    padding: 15,
    marginBottom: 10,
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  itemTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 5,
  },
  itemDescription: {
    fontSize: 14,
    color: '#666',
  },
  detailContainer: {
    backgroundColor: 'white',
    padding: 20,
    borderRadius: 8,
    marginBottom: 20,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  detailTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 10,
  },
  detailDescription: {
    fontSize: 16,
    color: '#666',
    marginBottom: 10,
  },
  detailId: {
    fontSize: 14,
    color: '#999',
  },
  button: {
    backgroundColor: '#2196F3',
    padding: 15,
    borderRadius: 8,
    alignItems: 'center',
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default App;

Scroll

🎯 Practice Exercise

Test your understanding of this topic:

I understand the basic concepts covered in this topicI can apply the concepts in practical scenariosI'm ready to move to the next topic

Tab Navigator

Learn to implement Tab Navigator for bottom tab navigation, providing easy access to different sections of your app

Content by: Jigar Solanki

React Native Developer

Connect

Tab Navigator Features

Tab Navigator creates a tab bar at the bottom of the screen (or top on Android) that allows users to switch between different screens. It's perfect for main app sections.

Tab Configuration

•tabBarIcon - Icon for each tab
•tabBarLabel - Label for each tab
•tabBarBadge - Badge on tab
•tabBarActiveTintColor - Active tab color
•tabBarInactiveTintColor - Inactive tab color
•tabBarStyle - Custom tab bar styling

Tab Icons

Use icon libraries like react-native-vector-icons or @expo/vector-icons to add icons to your tabs. Icons help users quickly identify different sections of your app.

Tab Navigator Example

Code Example

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

// Screen components
const HomeScreen = ({ navigation }) => (
  <View style={styles.container}>
    <Text style={styles.title}>Home</Text>
    <Text style={styles.subtitle}>Welcome to the home screen!</Text>
    <TouchableOpacity
      style={styles.button}
      onPress={() => navigation.navigate('Profile')}
    >
      <Text style={styles.buttonText}>Go to Profile</Text>
    </TouchableOpacity>
  </View>
);

const SearchScreen = () => (
  <View style={styles.container}>
    <Text style={styles.title}>Search</Text>
    <Text style={styles.subtitle}>Search for content here</Text>
  </View>
);

const ProfileScreen = () => (
  <View style={styles.container}>
    <Text style={styles.title}>Profile</Text>
    <Text style={styles.subtitle}>User profile information</Text>
  </View>
);

const SettingsScreen = () => (
  <View style={styles.container}>
    <Text style={styles.title}>Settings</Text>
    <Text style={styles.subtitle}>App settings and preferences</Text>
  </View>
);

// Tab Navigator
const TabNavigator = () => (
  <Tab.Navigator
    screenOptions={({ route }) => ({
      tabBarIcon: ({ focused, color, size }) => {
        let iconName;

        if (route.name === 'Home') {
          iconName = 'home';
        } else if (route.name === 'Search') {
          iconName = 'search';
        } else if (route.name === 'Profile') {
          iconName = 'person';
        } else if (route.name === 'Settings') {
          iconName = 'settings';
        }

        return <Icon name={iconName} size={size} color={color} />;
      },
      tabBarActiveTintColor: '#2196F3',
      tabBarInactiveTintColor: 'gray',
      tabBarStyle: {
        backgroundColor: 'white',
        borderTopWidth: 1,
        borderTopColor: '#e0e0e0',
        paddingBottom: 5,
        paddingTop: 5,
        height: 60,
      },
      headerStyle: {
        backgroundColor: '#2196F3',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    })}
  >
    <Tab.Screen 
      name="Home" 
      component={HomeScreen}
      options={{ 
        title: 'Home',
        tabBarBadge: 3, // Show badge with number
      }}
    />
    <Tab.Screen 
      name="Search" 
      component={SearchScreen}
      options={{ title: 'Search' }}
    />
    <Tab.Screen 
      name="Profile" 
      component={ProfileScreen}
      options={{ title: 'Profile' }}
    />
    <Tab.Screen 
      name="Settings" 
      component={SettingsScreen}
      options={{ title: 'Settings' }}
    />
  </Tab.Navigator>
);

// Main App
const App = () => {
  return (
    <NavigationContainer>
      <TabNavigator />
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10,
    color: '#333',
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    textAlign: 'center',
    marginBottom: 20,
  },
  button: {
    backgroundColor: '#2196F3',
    padding: 15,
    borderRadius: 8,
    alignItems: 'center',
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default App;

Swipe to see more code

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

// Screen components
const HomeScreen = ({ navigation }) => (
  <View style={styles.container}>
    <Text style={styles.title}>Home</Text>
    <Text style={styles.subtitle}>Welcome to the home screen!</Text>
    <TouchableOpacity
      style={styles.button}
      onPress={() => navigation.navigate('Profile')}
    >
      <Text style={styles.buttonText}>Go to Profile</Text>
    </TouchableOpacity>
  </View>
);

const SearchScreen = () => (
  <View style={styles.container}>
    <Text style={styles.title}>Search</Text>
    <Text style={styles.subtitle}>Search for content here</Text>
  </View>
);

const ProfileScreen = () => (
  <View style={styles.container}>
    <Text style={styles.title}>Profile</Text>
    <Text style={styles.subtitle}>User profile information</Text>
  </View>
);

const SettingsScreen = () => (
  <View style={styles.container}>
    <Text style={styles.title}>Settings</Text>
    <Text style={styles.subtitle}>App settings and preferences</Text>
  </View>
);

// Tab Navigator
const TabNavigator = () => (
  <Tab.Navigator
    screenOptions={({ route }) => ({
      tabBarIcon: ({ focused, color, size }) => {
        let iconName;

        if (route.name === 'Home') {
          iconName = 'home';
        } else if (route.name === 'Search') {
          iconName = 'search';
        } else if (route.name === 'Profile') {
          iconName = 'person';
        } else if (route.name === 'Settings') {
          iconName = 'settings';
        }

        return <Icon name={iconName} size={size} color={color} />;
      },
      tabBarActiveTintColor: '#2196F3',
      tabBarInactiveTintColor: 'gray',
      tabBarStyle: {
        backgroundColor: 'white',
        borderTopWidth: 1,
        borderTopColor: '#e0e0e0',
        paddingBottom: 5,
        paddingTop: 5,
        height: 60,
      },
      headerStyle: {
        backgroundColor: '#2196F3',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    })}
  >
    <Tab.Screen 
      name="Home" 
      component={HomeScreen}
      options={{ 
        title: 'Home',
        tabBarBadge: 3, // Show badge with number
      }}
    />
    <Tab.Screen 
      name="Search" 
      component={SearchScreen}
      options={{ title: 'Search' }}
    />
    <Tab.Screen 
      name="Profile" 
      component={ProfileScreen}
      options={{ title: 'Profile' }}
    />
    <Tab.Screen 
      name="Settings" 
      component={SettingsScreen}
      options={{ title: 'Settings' }}
    />
  </Tab.Navigator>
);

// Main App
const App = () => {
  return (
    <NavigationContainer>
      <TabNavigator />
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10,
    color: '#333',
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    textAlign: 'center',
    marginBottom: 20,
  },
  button: {
    backgroundColor: '#2196F3',
    padding: 15,
    borderRadius: 8,
    alignItems: 'center',
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default App;

Scroll

🎯 Practice Exercise

Test your understanding of this topic:

I understand the basic concepts covered in this topicI can apply the concepts in practical scenariosI'm ready to move to the next topic

Drawer Navigator

Implement Drawer Navigator for side menu navigation, providing access to different sections through a sliding drawer

Content by: Jigar Solanki

React Native Developer

Connect

Drawer Navigator Basics

Drawer Navigator provides a slide-out menu that can be accessed by swiping from the edge of the screen or tapping a menu button. It's great for apps with many sections.

Drawer Configuration

•drawerIcon - Icon for drawer items
•drawerLabel - Label for drawer items
•drawerActiveTintColor - Active item color
•drawerInactiveTintColor - Inactive item color
•drawerStyle - Custom drawer styling
•drawerContent - Custom drawer content

Drawer Actions

•navigation.openDrawer() - Open the drawer
•navigation.closeDrawer() - Close the drawer
•navigation.toggleDrawer() - Toggle drawer state
•navigation.getState() - Get navigation state

Drawer Navigator Example

Code Example

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

const Drawer = createDrawerNavigator();

// Screen components
const HomeScreen = ({ navigation }) => (
  <View style={styles.container}>
    <Text style={styles.title}>Home</Text>
    <Text style={styles.subtitle}>Welcome to the home screen!</Text>
    <TouchableOpacity
      style={styles.button}
      onPress={() => navigation.openDrawer()}
    >
      <Text style={styles.buttonText}>Open Drawer</Text>
    </TouchableOpacity>
  </View>
);

const ProfileScreen = () => (
  <View style={styles.container}>
    <Text style={styles.title}>Profile</Text>
    <Text style={styles.subtitle}>User profile information</Text>
  </View>
);

const SettingsScreen = () => (
  <View style={styles.container}>
    <Text style={styles.title}>Settings</Text>
    <Text style={styles.subtitle}>App settings and preferences</Text>
  </View>
);

const HelpScreen = () => (
  <View style={styles.container}>
    <Text style={styles.title}>Help</Text>
    <Text style={styles.subtitle}>Get help and support</Text>
  </View>
);

// Custom Drawer Content
const CustomDrawerContent = (props) => {
  return (
    <ScrollView style={styles.drawerContainer}>
      <View style={styles.drawerHeader}>
        <Text style={styles.drawerTitle}>My App</Text>
        <Text style={styles.drawerSubtitle}>Navigation Menu</Text>
      </View>
      
      <View style={styles.drawerContent}>
        <TouchableOpacity 
          style={styles.drawerItem}
          onPress={() => props.navigation.navigate('Home')}
        >
          <Icon name="home" size={24} color="#333" />
          <Text style={styles.drawerItemText}>Home</Text>
        </TouchableOpacity>
        
        <TouchableOpacity 
          style={styles.drawerItem}
          onPress={() => props.navigation.navigate('Profile')}
        >
          <Icon name="person" size={24} color="#333" />
          <Text style={styles.drawerItemText}>Profile</Text>
        </TouchableOpacity>
        
        <TouchableOpacity 
          style={styles.drawerItem}
          onPress={() => props.navigation.navigate('Settings')}
        >
          <Icon name="settings" size={24} color="#333" />
          <Text style={styles.drawerItemText}>Settings</Text>
        </TouchableOpacity>
        
        <TouchableOpacity 
          style={styles.drawerItem}
          onPress={() => props.navigation.navigate('Help')}
        >
          <Icon name="help" size={24} color="#333" />
          <Text style={styles.drawerItemText}>Help</Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  );
};

// Drawer Navigator
const DrawerNavigator = () => (
  <Drawer.Navigator
    drawerContent={(props) => <CustomDrawerContent {...props} />}
    screenOptions={{
      headerStyle: {
        backgroundColor: '#2196F3',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
      drawerStyle: {
        backgroundColor: '#f5f5f5',
        width: 280,
      },
    }}
  >
    <Drawer.Screen 
      name="Home" 
      component={HomeScreen}
      options={{
        drawerIcon: ({ color }) => (
          <Icon name="home" size={24} color={color} />
        ),
      }}
    />
    <Drawer.Screen 
      name="Profile" 
      component={ProfileScreen}
      options={{
        drawerIcon: ({ color }) => (
          <Icon name="person" size={24} color={color} />
        ),
      }}
    />
    <Drawer.Screen 
      name="Settings" 
      component={SettingsScreen}
      options={{
        drawerIcon: ({ color }) => (
          <Icon name="settings" size={24} color={color} />
        ),
      }}
    />
    <Drawer.Screen 
      name="Help" 
      component={HelpScreen}
      options={{
        drawerIcon: ({ color }) => (
          <Icon name="help" size={24} color={color} />
        ),
      }}
    />
  </Drawer.Navigator>
);

// Main App
const App = () => {
  return (
    <NavigationContainer>
      <DrawerNavigator />
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10,
    color: '#333',
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    textAlign: 'center',
    marginBottom: 20,
  },
  button: {
    backgroundColor: '#2196F3',
    padding: 15,
    borderRadius: 8,
    alignItems: 'center',
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
  drawerContainer: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  drawerHeader: {
    backgroundColor: '#2196F3',
    padding: 20,
    paddingTop: 40,
  },
  drawerTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    color: 'white',
  },
  drawerSubtitle: {
    fontSize: 16,
    color: 'rgba(255, 255, 255, 0.8)',
    marginTop: 5,
  },
  drawerContent: {
    padding: 20,
  },
  drawerItem: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 15,
    borderRadius: 8,
    marginBottom: 5,
  },
  drawerItemText: {
    fontSize: 16,
    marginLeft: 15,
    color: '#333',
  },
});

export default App;

Swipe to see more code

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

const Drawer = createDrawerNavigator();

// Screen components
const HomeScreen = ({ navigation }) => (
  <View style={styles.container}>
    <Text style={styles.title}>Home</Text>
    <Text style={styles.subtitle}>Welcome to the home screen!</Text>
    <TouchableOpacity
      style={styles.button}
      onPress={() => navigation.openDrawer()}
    >
      <Text style={styles.buttonText}>Open Drawer</Text>
    </TouchableOpacity>
  </View>
);

const ProfileScreen = () => (
  <View style={styles.container}>
    <Text style={styles.title}>Profile</Text>
    <Text style={styles.subtitle}>User profile information</Text>
  </View>
);

const SettingsScreen = () => (
  <View style={styles.container}>
    <Text style={styles.title}>Settings</Text>
    <Text style={styles.subtitle}>App settings and preferences</Text>
  </View>
);

const HelpScreen = () => (
  <View style={styles.container}>
    <Text style={styles.title}>Help</Text>
    <Text style={styles.subtitle}>Get help and support</Text>
  </View>
);

// Custom Drawer Content
const CustomDrawerContent = (props) => {
  return (
    <ScrollView style={styles.drawerContainer}>
      <View style={styles.drawerHeader}>
        <Text style={styles.drawerTitle}>My App</Text>
        <Text style={styles.drawerSubtitle}>Navigation Menu</Text>
      </View>
      
      <View style={styles.drawerContent}>
        <TouchableOpacity 
          style={styles.drawerItem}
          onPress={() => props.navigation.navigate('Home')}
        >
          <Icon name="home" size={24} color="#333" />
          <Text style={styles.drawerItemText}>Home</Text>
        </TouchableOpacity>
        
        <TouchableOpacity 
          style={styles.drawerItem}
          onPress={() => props.navigation.navigate('Profile')}
        >
          <Icon name="person" size={24} color="#333" />
          <Text style={styles.drawerItemText}>Profile</Text>
        </TouchableOpacity>
        
        <TouchableOpacity 
          style={styles.drawerItem}
          onPress={() => props.navigation.navigate('Settings')}
        >
          <Icon name="settings" size={24} color="#333" />
          <Text style={styles.drawerItemText}>Settings</Text>
        </TouchableOpacity>
        
        <TouchableOpacity 
          style={styles.drawerItem}
          onPress={() => props.navigation.navigate('Help')}
        >
          <Icon name="help" size={24} color="#333" />
          <Text style={styles.drawerItemText}>Help</Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  );
};

// Drawer Navigator
const DrawerNavigator = () => (
  <Drawer.Navigator
    drawerContent={(props) => <CustomDrawerContent {...props} />}
    screenOptions={{
      headerStyle: {
        backgroundColor: '#2196F3',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
      drawerStyle: {
        backgroundColor: '#f5f5f5',
        width: 280,
      },
    }}
  >
    <Drawer.Screen 
      name="Home" 
      component={HomeScreen}
      options={{
        drawerIcon: ({ color }) => (
          <Icon name="home" size={24} color={color} />
        ),
      }}
    />
    <Drawer.Screen 
      name="Profile" 
      component={ProfileScreen}
      options={{
        drawerIcon: ({ color }) => (
          <Icon name="person" size={24} color={color} />
        ),
      }}
    />
    <Drawer.Screen 
      name="Settings" 
      component={SettingsScreen}
      options={{
        drawerIcon: ({ color }) => (
          <Icon name="settings" size={24} color={color} />
        ),
      }}
    />
    <Drawer.Screen 
      name="Help" 
      component={HelpScreen}
      options={{
        drawerIcon: ({ color }) => (
          <Icon name="help" size={24} color={color} />
        ),
      }}
    />
  </Drawer.Navigator>
);

// Main App
const App = () => {
  return (
    <NavigationContainer>
      <DrawerNavigator />
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10,
    color: '#333',
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    textAlign: 'center',
    marginBottom: 20,
  },
  button: {
    backgroundColor: '#2196F3',
    padding: 15,
    borderRadius: 8,
    alignItems: 'center',
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
  drawerContainer: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  drawerHeader: {
    backgroundColor: '#2196F3',
    padding: 20,
    paddingTop: 40,
  },
  drawerTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    color: 'white',
  },
  drawerSubtitle: {
    fontSize: 16,
    color: 'rgba(255, 255, 255, 0.8)',
    marginTop: 5,
  },
  drawerContent: {
    padding: 20,
  },
  drawerItem: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 15,
    borderRadius: 8,
    marginBottom: 5,
  },
  drawerItemText: {
    fontSize: 16,
    marginLeft: 15,
    color: '#333',
  },
});

export default App;

Scroll

🎯 Practice Exercise

Test your understanding of this topic:

I understand the basic concepts covered in this topicI can apply the concepts in practical scenariosI'm ready to move to the next topic

Previous Module

Module 3: User Input & Forms

Next Module

Module 5: State Management

Ready for the Next Module?

Continue your learning journey and master the next set of concepts.

Continue to Module 5

Module 4: Navigation & Routing

Navigation & Routing

Select Topics Overview

React Navigation Setup

Stack Navigator

Tab Navigator

Drawer Navigator

React Navigation Setup

Stack Navigator

Tab Navigator

Drawer Navigator

React Navigation Setup

Installing React Navigation

Required Dependencies

Basic Setup

Basic Navigation Setup

🎯 Practice Exercise

Stack Navigator

Stack Navigator Basics

Navigation Methods

Passing Parameters

Stack Navigator Example

🎯 Practice Exercise

Tab Navigator

Tab Navigator Features

Tab Configuration

Tab Icons

Tab Navigator Example

🎯 Practice Exercise

Drawer Navigator

Drawer Navigator Basics

Drawer Configuration

Drawer Actions

Drawer Navigator Example

🎯 Practice Exercise

Module 3: User Input & Forms

Module 5: State Management

Ready for the Next Module?