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:

npm install expo-drawer
# or
yarn 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:

import React from "react";
import { AnimatedDrawerSceneWrapper } from "expo-drawer";
import { MaterialIcons } from "@expo/vector-icons";
import HomeScreen from "@/src/screens/HomeScreen";

const Home = () => {
  return (
    <AnimatedDrawerSceneWrapper
      RightComponent={() => (
        <MaterialIcons name="notifications" size={28} color="#007AFF" />
      )}
      onRightPress={() => alert("Right!")}
      headerTitle="Home"
    >
      <HomeScreen />
    </AnimatedDrawerSceneWrapper>
  );
};

export default Home;

Props for AnimatedDrawerSceneWrapper

export interface AnimatedDrawerSceneWrapperProps {
  headerTitle?: string;
  leftPressDisable?: boolean;
  rightPressDisable?: boolean;
  onLeftPress?: () => void;
  onRightPress?: () => void;
  leftIcon?: string; // Icon name
  leftIconFamily?: string; // Icon family, e.g., "FontAwesome"
  leftIconSize?: number;
  leftIconColor?: string;
  leftIconStyle?: object;
  rightIcon?: string; // Icon name
  rightIconFamily?: string; // Icon family
  rightIconSize?: number;
  rightIconColor?: string;
  rightIconStyle?: object;
  LeftComponent?: React.ComponentType;
  RightComponent?: React.ComponentType;
  screenSizeWhenOpenDrawer?: number;
  animation?: "perspective" | "no-perspective" | "top-tilt" | "bottom-tilt";
  headerStyle?: StyleProp<ViewStyle>;
  children?: ReactNode;
}

2. Implementing the Drawer with AnimatedDrawer

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

Example:

import React from "react";
import { AnimatedDrawer } from "expo-drawer";
import { NavigationProp, useNavigation } from "@react-navigation/native";
import { TouchableOpacity, Text } from "react-native";

const Layout = () => {
  const navigation = useNavigation<NavigationProp<any>>();

  const drawerItems = [
    {
      name: "index",
      drawerLabel: "Home",
      title: "Overview",
      leftIcon: "home",
      leftIconFamily: "Entypo",
      leftIconSize: 20,
      leftIconColor: "black",
      onPress: () => navigation.navigate("index"),
    },
    {
      name: "about",
      drawerLabel: "About",
      title: "About",
      leftIcon: "contacts",
      leftIconFamily: "MaterialIcons",
      leftIconSize: 20,
      leftIconColor: "black",
    },
    {
      name: "contact",
      drawerLabel: "Contact",
      title: "Contact",
      leftIcon: "users",
      leftIconFamily: "FontAwesome",
      leftIconSize: 20,
      leftIconColor: "black",
    },
  ];

  return (
    <AnimatedDrawer
      drawerWidth="60%"
      drawerItems={drawerItems}
      drawerBackgroundColor="#73b2df"
      menuItemSelectedBackgroundColor="#4A90D9"
      menuItemSelectedTextColor="#FFFFFF"
      menuItemSelectedIconColor="#FFFFFF"
      menuItemUnselectedBackgroundColor="#D9EAF7"
      menuItemUnselectedTextColor="#2F5D80"
      menuItemUnselectedIconColor="#2F5D80"
      BottomComponent={() => (
        <TouchableOpacity
          activeOpacity={1}
          style={{
            backgroundColor: "rgba(255, 255, 255, 0.2)",
            borderRadius: 10,
            marginVertical: 7,
            padding: 17,
            width: "90%",
            alignItems: "center",
            justifyContent: "center",
            alignSelf: "center",
          }}
        >
          <Text
            style={{
              color: "#1a3950",
              fontWeight: "bold",
              fontSize: 16,
            }}
          >
            Logout
          </Text>
        </TouchableOpacity>
      )}
    />
  );
};

export default Layout;

Props for AnimatedDrawer

export type DrawerContentProps = {
  drawerItems: DrawerItem[];
  drawerWidth?: number | string;
  navigation?: any;
  showUserInfo?: boolean;
  userInfo?: {
    name?: string;
    email?: string;
    imageLink?: string;
  };
  BottomComponent?: React.ComponentType;
  userImageStyle?: StyleProp<ImageStyle>;
  userNameStyle?: StyleProp<TextStyle>;
  userEmailStyle?: StyleProp<TextStyle>;
  menuItemContainerStyle?: StyleProp<ViewStyle>;
  menuItemContainerContentStyle?: StyleProp<ViewStyle>;
  menuItemStyle?: StyleProp<ViewStyle>;
  menuTextStyle?: StyleProp<TextStyle>;
  iconStyle?: StyleProp<ViewStyle>;
  safeAreaBackgroundColor?: string;
  drawerBackgroundColor?: string;
  drawerHideStatusBarOnOpen?: boolean;
  menuItemSelectedBackgroundColor?: string;
  menuItemSelectedTextColor?: string;
  menuItemSelectedIconColor?: string;
  menuItemUnselectedBackgroundColor?: string;
  menuItemUnselectedTextColor?: string;
  menuItemUnselectedIconColor?: string;
};

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