How do I set up a navigation drawer in React Native?

How do I set up a navigation drawer in React Native?

To set up a navigation drawer in React Native, you can use the React Navigation library. First, install it using npm or yarn.

What are the steps after installing React Navigation?

After installation, you need to create a Drawer Navigator and define your screens. You can do this in your App.js file.

Can you show me a code example?

Sure! Here's a simple example:

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

const Drawer = createDrawerNavigator();

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

What if I want to customize the drawer?

You can customize the drawer by using the drawerContent prop to render your own component, allowing for more control over its appearance.