react-native-drawer
A highly customizable drawer component for React Native apps, supporting material design, slack style, and parallax effects.
What is react-native-drawer?
React Native Drawer is a configurable drawer/side menu component for React Native applications. It enables developers to implement various navigation drawer styles, including material design, slack style, and parallax effects, across both iOS and Android platforms. However, the project maintainers caution that it may not be performant enough for production use compared to alternatives.
React Native developers who need a highly customizable drawer component for prototyping, experimentation, or non-production applications where performance is not critical.
Developers choose React Native Drawer for its extensive customization options, including multiple drawer types, flexible animation control via tween handlers, and configurable gestures, which allow for unique visual effects not easily achievable with more performant alternatives.
Overview
React Native Drawer
Use Cases
Best For
- Prototyping drawer-based navigation with custom animations like skew and fade effects.
- Implementing non-standard drawer styles such as parallax or slack-style side menus.
- Applications requiring drawers positioned on the top, bottom, left, or right of the screen.
- Projects where fine-grained control over drawer gestures (tap, double-tap, pan) is needed.
- Experimental or educational React Native projects exploring drawer customization.
- Scenarios where programmatic drawer control via props, refs, or context is preferred.
Not Ideal For
- Production applications requiring smooth 60fps drawer animations and gestures
- Teams using React Navigation who need a tightly integrated, performant navigation solution
- Projects that prioritize long-term stability over custom effects, given the impending API changes to Animated
- Simple drawer implementations where basic functionality is sufficient and the complexity of many props is unnecessary
Pros & Cons
Pros
Offers over 20 props to control drawer types (displace, overlay, static), offsets, gestures, and animations, enabling unique styles like material design and parallax effects as shown in the examples.
Uses a tween handler for custom animations, allowing transformations such as skew and fade via transformMatrix, which isn't easily achievable with simpler drawer components.
Supports drawer placement on all four screen edges (left, right, top, bottom), providing flexibility not found in many alternatives limited to left or right.
Allows drawer manipulation via props for controlled components, refs for imperative calls like .open(), or React context for decoupled access, as detailed in the usage section.
Cons
The README prominently warns against production use due to inefficient animations, recommending alternatives like React Navigation or React Native Side Menu for better performance.
Relies on a custom tween handler instead of React Native's Animated API, with a note that future updates will require breaking changes, risking long-term compatibility.
With numerous props for gestures, animations, and offsets, setting up even a basic drawer can be complex and error-prone, especially for developers needing simple functionality.
Compared to mainstream options like React Navigation, it lacks community plugins, frequent updates, and seamless integration, making troubleshooting and enhancements harder.
Frequently Asked Questions
Related Projects
react-native-vector-iconsCustomizable Icons for React Native with support for image source and full styling.
lottie-react-nativeLottie wrapper for React Native.
react-native-mapsReact Native Mapview component for iOS + Android
react-native-gifted-chat💬 The most complete chat UI for React Native
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.