Drawer Navigator in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when you tap a drawer item?

In a React Native app using Drawer Navigator, what is the expected behavior when a user taps on a drawer item?

A The app crashes because drawer items cannot be tapped.

B The app navigates to the screen linked to that drawer item and closes the drawer.

C The drawer stays open and the app reloads the current screen.

D The drawer closes but the app does not change screens.

💡 Hint

Think about what a menu in a real app does when you pick an option.

Tapping a drawer item should navigate to the linked screen and close the drawer, just like choosing a menu option in a real app.

❓ lifecycle

intermediate

When is the drawer content rendered?

In React Navigation's Drawer Navigator, when is the drawer content component rendered?

A Only when the drawer is closed.

B Only when the drawer is opened by the user.

C Every time the user navigates to a new screen.

D Once when the app starts and stays mounted in memory.

💡 Hint

Think about performance and user experience for menus.

The drawer content is mounted once and stays in memory to allow quick opening without delay.

❓ navigation

advanced

How to programmatically open the drawer?

Which code snippet correctly opens the drawer programmatically in a React Native app using Drawer Navigator?

React Native

function MyScreen({ navigation }) {
  // What code opens the drawer?
}

A navigation.openDrawer();

B navigation.showDrawer();

C navigation.toggleDrawer(true);

D navigation.navigate('DrawerOpen');

💡 Hint

Check the official React Navigation docs for drawer methods.

The method openDrawer() is the official way to open the drawer programmatically.

📝 Syntax

advanced

Identify the correct Drawer Navigator setup

Which code snippet correctly sets up a Drawer Navigator with two screens named Home and Profile?

React Native

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

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    // Fill in the drawer navigator
  );
}

A return (<Drawer.Navigator><Drawer.Screen name="Home" component={HomeScreen} /><Drawer.Screen name="Profile" component={ProfileScreen} /></Drawer.Navigator>);

B return (<Drawer.Navigator><Screen name="Home" component={HomeScreen} /><Screen name="Profile" component={ProfileScreen} /></Drawer.Navigator>);

C return (<Drawer><Screen name="Home" component={HomeScreen} /><Screen name="Profile" component={ProfileScreen} /></Drawer>);

D return (<Drawer.Navigator><Drawer.Screen component={HomeScreen} name="Home" /><Drawer.Screen component={ProfileScreen} name="Profile" /></Drawer.Navigator>);

💡 Hint

Remember the exact component names from the library.

Drawer.Navigator and Drawer.Screen are the correct components. Screen alone is not imported from drawer.

🔧 Debug

expert

Why does the drawer not open on swipe?

You implemented a Drawer Navigator but swiping from the screen edge does not open the drawer. What is the most likely cause?

A The drawer navigator is missing the initialRouteName prop.

B You forgot to import React in your component file.

C The gestureHandlerRootHOC wrapper is missing around the app root.

D You used Stack Navigator instead of Drawer Navigator.

💡 Hint

Swipe gestures require special setup in React Native.

React Navigation's drawer gestures need react-native-gesture-handler setup, including wrapping the app root with gestureHandlerRootHOC.