Drawer Navigator in React Native - Mini App: Build & Ship

Build: Main Drawer Navigation

This screen shows a drawer navigation menu that lets users switch between Home and Profile screens by sliding from the left or tapping the menu icon.

Target UI

┌─────────────────────────────┐
│ ☰ Menu                     │
├─────────────────────────────┤
│ Home                       │
│ Profile                    │
└─────────────────────────────┘

[Main content area shows selected screen title]

Implement a drawer navigator with two screens: Home and Profile.

Each screen should display a centered title text.

Add a menu icon in the header to open the drawer.

Drawer slides from the left side.

Use React Navigation Drawer Navigator.

Starter Code

React Native

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

// TODO: Import necessary navigation libraries

export default function App() {
  // TODO: Setup drawer navigator with Home and Profile screens
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Welcome! Implement drawer navigation here.</Text>
    </View>
  );
}

Task 1

Task 2

Task 3

Task 4

Solution

React Native

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { Ionicons } from '@expo/vector-icons';

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

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

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        screenOptions={({ navigation }) => ({
          headerLeft: () => (
            <TouchableOpacity onPress={() => navigation.toggleDrawer()} style={{ marginLeft: 15 }} accessibilityLabel="Open menu drawer">
              <Ionicons name="menu" size={28} />
            </TouchableOpacity>
          ),
          headerTitleAlign: 'center'
        })}
      >
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Profile" component={ProfileScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

This solution uses React Navigation's Drawer Navigator to create a side menu.

We define two simple screens: Home and Profile, each showing a centered title.

The drawer navigator wraps these screens and provides a sliding menu from the left.

We add a menu icon button in the header that toggles the drawer when tapped.

This setup follows React Native best practices and accessibility by labeling the menu button.

Final Result

Completed Screen

┌─────────────────────────────┐
│ ☰ Menu                     │
├─────────────────────────────┤
│ Home Screen                │
│                           │
│                           │
│                           │
└─────────────────────────────┘

-- Swipe from left or tap ☰ to open drawer --

Drawer:
┌─────────────────────────────┐
│ Home                       │
│ Profile                    │
└─────────────────────────────┘

User taps the menu icon (☰) in the header to open the drawer menu.

User swipes from the left edge to open the drawer.

User taps 'Home' or 'Profile' in the drawer to switch screens.

Drawer closes automatically after selection.

Stretch Goal

Add icons next to Home and Profile items in the drawer menu.

💡 Hint

Use Ionicons or similar icon library and customize drawerContent or screenOptions drawerIcon property.

Practice

1. What is the main purpose of a Drawer Navigator in React Native?

easy

A. To create a side menu for switching between screens easily

B. To handle API requests in the app

C. To style components with CSS

D. To manage app state globally

Solution

1. Step 1: Understand Drawer Navigator role

   A Drawer Navigator provides a side menu that lets users switch screens easily.

2. Step 2: Compare with other options

   The other options relate to API requests, styling components, and global state management, not navigation menus.

3. Final Answer:

   To create a side menu for switching between screens easily -> Option A

4. Quick Check:

   Drawer Navigator = Side menu navigation [OK]

Hint: Drawer Navigator = side menu for screen switching [OK]

Common Mistakes:

• Confusing Drawer Navigator with state management
• Thinking it styles components
• Mixing it up with API handling

2. Which of the following is the correct way to add a screen named 'Home' to a Drawer Navigator?

easy

A.

B.

C.

D.

Solution

1. Step 1: Check required props for Drawer.Screen

   Drawer.Screen needs a 'name' and a 'component' prop to work correctly.

2. Step 2: Validate each option

   <Drawer.Screen name="Home" component={HomeScreen} /> correctly uses both 'name' and 'component'. The other options miss one or both props.

3. Final Answer:

   <Drawer.Screen name="Home" component={HomeScreen} /> -> Option C

4. Quick Check:

   Drawer.Screen requires name and component [OK]

Hint: Drawer.Screen needs both name and component props [OK]

Common Mistakes:

• Omitting the 'name' prop
• Omitting the 'component' prop
• Using incorrect JSX syntax

3. Given this code snippet, what will happen when the app runs?

import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import HomeScreen from './HomeScreen';
import ProfileScreen from './ProfileScreen';

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    
      
        
        
      
    
  );
}

medium

A. The app crashes because NavigationContainer is missing

B. The app shows a side menu with Home and Profile screens to switch between

C. Only the Home screen is shown without a menu

D. The drawer menu appears but screens are not accessible

Solution

1. Step 1: Check NavigationContainer usage

   The code wraps Drawer.Navigator inside NavigationContainer, which manages navigation state properly.

2. Step 2: Verify Drawer.Screen setup

   Two screens, Home and Profile, are added correctly to the drawer.

3. Final Answer:

   The app shows a side menu with Home and Profile screens to switch between -> Option B

4. Quick Check:

   NavigationContainer + Drawer.Screen = working drawer menu [OK]

Hint: NavigationContainer wraps Drawer.Navigator for working menu [OK]

Common Mistakes:

• Forgetting NavigationContainer causes errors
• Adding screens outside Drawer.Navigator
• Not providing component prop to Drawer.Screen

4. Identify the error in this Drawer Navigator setup:

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    
      
      
    
  );
}

medium

A. Drawer.Navigator should be inside a View component

B. Drawer.Screen components are missing the 'name' prop

C. HomeScreen and SettingsScreen components are not imported

D. Missing NavigationContainer wrapping the Drawer.Navigator

Solution

1. Step 1: Check for NavigationContainer presence

   The code does not wrap Drawer.Navigator inside NavigationContainer, which is required to manage navigation state.

2. Step 2: Verify other props and imports

   Drawer.Screen components have 'name' and 'component' props, so no issue there. The question does not show imports, but the main error is missing NavigationContainer.

3. Final Answer:

   Missing NavigationContainer wrapping the Drawer.Navigator -> Option D

4. Quick Check:

   NavigationContainer is required to wrap navigators [OK]

Hint: Always wrap Drawer.Navigator in NavigationContainer [OK]

Common Mistakes:

• Forgetting NavigationContainer causes navigation errors
• Assuming Drawer.Navigator works alone
• Ignoring import statements (not shown here)

5. You want to customize the drawer menu to show a custom header and add a logout button at the bottom. Which approach correctly applies this customization in a Drawer Navigator?

hard

A. Use the drawerContent prop on Drawer.Navigator to provide a custom component with header and logout button

B. Add a Drawer.Screen named 'Logout' with a button component

C. Wrap each screen component with a header and logout button manually

D. Use screenOptions to add header and logout button globally

Solution

1. Step 1: Understand drawer customization options

   The drawerContent prop lets you replace the default drawer menu with a custom component where you can add headers and buttons.

2. Step 2: Evaluate other options

   Add a Drawer.Screen named 'Logout' with a button component adds a screen, not a menu button. Wrap each screen component with a header and logout button manually duplicates UI in each screen, not efficient. Use screenOptions to add header and logout button globally controls screen headers, not drawer content.

3. Final Answer:

   Use the drawerContent prop on Drawer.Navigator to provide a custom component with header and logout button -> Option A

4. Quick Check:

   drawerContent prop customizes drawer UI [OK]

Hint: Use drawerContent prop for custom drawer UI [OK]

Common Mistakes:

• Adding logout as a screen instead of drawer content
• Trying to add buttons via screenOptions
• Manually adding UI inside each screen