Drawer Navigation
Drawer Navigation
Drawer Navigation provides a slide-out side menu, commonly used for apps with many navigation destinations that do not fit neatly into a bottom tab bar.
Installing the Drawer Package
bash
npm install @react-navigation/drawer
npm install react-native-gesture-handler react-native-reanimated
Creating a Drawer Navigator
javascript
import { createDrawerNavigator } from '@react-navigation/drawer';
const Drawer = createDrawerNavigator();
function App() {
return (
);
}
Opening and Closing the Drawer Programmatically
javascript
navigation.openDrawer();
navigation.closeDrawer();
navigation.toggleDrawer();
Customizing the Drawer Content
The drawerContent prop allows you to render a fully custom menu layout instead of the default list of screen names.
javascript
Styling the Drawer
The drawerStyle and screenOptions props allow customizing the drawer’s width, background color, and active/inactive item colors.
javascript
Combining Drawer with Stack Navigation
Similar to tab navigators, drawer screens commonly wrap their own nested stack navigators to allow deeper navigation within each drawer section.
Conclusion
Drawer Navigation is ideal for apps with numerous top-level destinations or settings-heavy applications. Customizing its content and styling allows it to match your app’s specific design requirements.
