How do I use the React Navigation Drawer in my app?

How do I use the React Navigation Drawer in my app?

To use the React Navigation Drawer, first install the necessary packages: @react-navigation/native and @react-navigation/drawer. Then, set up your navigation container and create a drawer navigator.

Can you show me a code example?

Sure! Here's a basic example:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

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

export default function App() {
  return (
    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>
  );
}

This sets up a basic drawer with Home and Settings screens.

What if I want to customize the drawer's appearance?

You can customize the drawer's appearance by using the drawerStyle prop in the Drawer.Navigator. For example:

<Drawer.Navigator drawerStyle={{ backgroundColor: 'lightblue', width: 240 }}>
  {/* Screens */}
</Drawer.Navigator>