expo-drawer

expo-drawer is a flexible and customizable drawer navigation library for React Native and Expo projects. It provides seamless animations and enhanced drawer functionality for building modern and interactive user interfaces.

---

Installation

Install the package using npm or yarn:

1npm install expo-drawer
2# or
3yarn add expo-drawer

Features

• Animated Drawer: Smooth and configurable animations for the drawer.
• Header Customization: Support for customizable headers with icons and actions.
• Flexible Drawer Content: Easily add items, user information, and custom components.
• TypeScript Support: Fully typed props for better developer experience.

Screenshots

---

Usage

1. Wrapping Screens with AnimatedDrawerSceneWrapper

Use the AnimatedDrawerSceneWrapper to wrap individual screens and customize the header content.

Example:

1import React from "react";
2import { AnimatedDrawerSceneWrapper } from "expo-drawer";
3import { MaterialIcons } from "@expo/vector-icons";
4import HomeScreen from "@/src/screens/HomeScreen";
5
6const Home = () => {
7  return (
8    <AnimatedDrawerSceneWrapper
9      RightComponent={() => (
10        <MaterialIcons name="notifications" size={28} color="#007AFF" />
11      )}
12      onRightPress={() => alert("Right!")}
13      headerTitle="Home"
14    >
15      <HomeScreen />
16    </AnimatedDrawerSceneWrapper>
17  );
18};
19
20export default Home;

Props for AnimatedDrawerSceneWrapper

1export interface AnimatedDrawerSceneWrapperProps {
2  headerTitle?: string;
3  leftPressDisable?: boolean;
4  rightPressDisable?: boolean;
5  onLeftPress?: () => void;
6  onRightPress?: () => void;
7  leftIcon?: string; // Icon name
8  leftIconFamily?: string; // Icon family, e.g., "FontAwesome"
9  leftIconSize?: number;
10  leftIconColor?: string;
11  leftIconStyle?: object;
12  rightIcon?: string; // Icon name
13  rightIconFamily?: string; // Icon family
14  rightIconSize?: number;
15  rightIconColor?: string;
16  rightIconStyle?: object;
17  LeftComponent?: React.ComponentType;
18  RightComponent?: React.ComponentType;
19  screenSizeWhenOpenDrawer?: number;
20  animation?: "perspective" | "no-perspective" | "top-tilt" | "bottom-tilt";
21  headerStyle?: StyleProp<ViewStyle>;
22  children?: ReactNode;
23}

---

2. Implementing the Drawer with AnimatedDrawer

The AnimatedDrawer component provides the main drawer functionality with customization options for the design and behavior.

Example:

1import React from "react";
2import { AnimatedDrawer } from "expo-drawer";
3import { NavigationProp, useNavigation } from "@react-navigation/native";
4import { TouchableOpacity, Text } from "react-native";
5
6const Layout = () => {
7  const navigation = useNavigation<NavigationProp<any>>();
8
9  const drawerItems = [
10    {
11      name: "index",
12      drawerLabel: "Home",
13      title: "Overview",
14      leftIcon: "home",
15      leftIconFamily: "Entypo",
16      leftIconSize: 20,
17      leftIconColor: "black",
18      onPress: () => navigation.navigate("index"),
19    },
20    {
21      name: "about",
22      drawerLabel: "About",
23      title: "About",
24      leftIcon: "contacts",
25      leftIconFamily: "MaterialIcons",
26      leftIconSize: 20,
27      leftIconColor: "black",
28    },
29    {
30      name: "contact",
31      drawerLabel: "Contact",
32      title: "Contact",
33      leftIcon: "users",
34      leftIconFamily: "FontAwesome",
35      leftIconSize: 20,
36      leftIconColor: "black",
37    },
38  ];
39
40  return (
41    <AnimatedDrawer
42      drawerWidth="60%"
43      drawerItems={drawerItems}
44      drawerBackgroundColor="#73b2df"
45      menuItemSelectedBackgroundColor="#4A90D9"
46      menuItemSelectedTextColor="#FFFFFF"
47      menuItemSelectedIconColor="#FFFFFF"
48      menuItemUnselectedBackgroundColor="#D9EAF7"
49      menuItemUnselectedTextColor="#2F5D80"
50      menuItemUnselectedIconColor="#2F5D80"
51      BottomComponent={() => (
52        <TouchableOpacity
53          activeOpacity={1}
54          style={{
55            backgroundColor: "rgba(255, 255, 255, 0.2)",
56            borderRadius: 10,
57            marginVertical: 7,
58            padding: 17,
59            width: "90%",
60            alignItems: "center",
61            justifyContent: "center",
62            alignSelf: "center",
63          }}
64        >
65          <Text
66            style={{
67              color: "#1a3950",
68              fontWeight: "bold",
69              fontSize: 16,
70            }}
71          >
72            Logout
73          </Text>
74        </TouchableOpacity>
75      )}
76    />
77  );
78};
79
80export default Layout;

Props for AnimatedDrawer

1export type DrawerContentProps = {
2  drawerItems: DrawerItem[];
3  drawerWidth?: number | string;
4  navigation?: any;
5  showUserInfo?: boolean;
6  userInfo?: {
7    name?: string;
8    email?: string;
9    imageLink?: string;
10  };
11  BottomComponent?: React.ComponentType;
12  userImageStyle?: StyleProp<ImageStyle>;
13  userNameStyle?: StyleProp<TextStyle>;
14  userEmailStyle?: StyleProp<TextStyle>;
15  menuItemContainerStyle?: StyleProp<ViewStyle>;
16  menuItemContainerContentStyle?: StyleProp<ViewStyle>;
17  menuItemStyle?: StyleProp<ViewStyle>;
18  menuTextStyle?: StyleProp<TextStyle>;
19  iconStyle?: StyleProp<ViewStyle>;
20  safeAreaBackgroundColor?: string;
21  drawerBackgroundColor?: string;
22  drawerHideStatusBarOnOpen?: boolean;
23  menuItemSelectedBackgroundColor?: string;
24  menuItemSelectedTextColor?: string;
25  menuItemSelectedIconColor?: string;
26  menuItemUnselectedBackgroundColor?: string;
27  menuItemUnselectedTextColor?: string;
28  menuItemUnselectedIconColor?: string;
29};

---

API Reference

Components

AnimatedDrawer

A customizable drawer component with animated interactions and detailed configuration options.

AnimatedDrawerSceneWrapper

A wrapper component for screens that provides header customization and enhanced functionality.

Props

AnimatedDrawerSceneWrapperProps

• headerTitle: A string for the header title.
• leftPressDisable: Disable left button press.(Header)
• rightPressDisable: Disable right button press.(Header)
• onLeftPress: Callback for left button press.(Header)
• onRightPress: Callback for right button press.(Header)
• leftIcon: Icon name for the left button.(Header)
• leftIconFamily: Icon family for the left button.(Header)
• leftIconSize: Size of the left button icon.(Header)
• leftIconColor: Color of the left button icon.(Header)
• leftIconStyle: Style for the left button icon.(Header)
• rightIcon: Icon name for the right button.(Header)
• rightIconFamily: Icon family for the right button.(Header)
• rightIconSize: Size of the right button icon.(Header)
• rightIconColor: Color of the right button icon.(Header)
• rightIconStyle: Style for the right button icon.(Header)
• LeftComponent and RightComponent: Custom components for the header.(Header)
• screenSizeWhenOpenDrawer: Size of the screen when the drawer is open. default value 0.8 ot of 1.0
• animation: The type of drawer animation. Options: "perspective", "no-perspective", "top-tilt", "bottom-tilt". Default :"perspective"
• headerStyle: Styling for the header.(Header)

DrawerContentProps

• drawerItems: An array of drawer item configurations.
• drawerWidth: Width of the drawer.
• showUserInfo: Boolean to show user info.(Default Style)
• userInfo: Object containing name, email, and imageLink for user information.(Default Style)
• BottomComponent: A component to render at the bottom of the drawer.
• TopComponent: A component to render at the top of the drawer in the UserInfo Location.
• userImageStyle: Styling for the user image.
• userNameStyle: Styling for the user name.
• userEmailStyle: Styling for the user email.
• menuItemContainerStyle: Styling for the menu item container.
• menuItemContainerContentStyle: Styling for the content within the menu item container.
• menuItemStyle: Styling for individual menu items.
• menuTextStyle: Styling for the menu item text.
• iconStyle: Styling for menu item icons.
• safeAreaBackgroundColor: Background color for safe areas.
• drawerBackgroundColor: Background color for the drawer.
• drawerHideStatusBarOnOpen: Boolean to hide the status bar when the drawer is open.
• menuItemSelectedBackgroundColor: Background color for selected menu items.
• menuItemSelectedTextColor: Text color for selected menu items.
• menuItemSelectedIconColor: Icon color for selected menu items.
• menuItemUnselectedBackgroundColor: Background color for unselected menu items.
• menuItemUnselectedTextColor: Text color for unselected menu items.
• menuItemUnselectedIconColor: Icon color for unselected menu items.

---

License

This project is licensed under the MIT License. See the LICENSE file for details.

---

Contributing

Contributions are welcome! Feel free to submit issues or pull requests to help improve the package.

---

Author

Developed by Younis Rahman.

Prerequisite packages most of them are default and come with Expo

• react-native-reanimated
• @react-navigation/drawer
• expo-router/drawer
• react-native-gesture-handler
• @react-navigation/drawer
• @react-navigation/native
• expo-header
• @react-navigation/drawer
• @expo/vector-icons