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.