React Native Drawer Layout
A cross-platform Drawer component for React Native implemented using react-native-gesture-handler and react-native-reanimated on native platforms and CSS transitions on Web.
If you need React Navigation integration, e.g. show screens in the drawer and be able to navigate between them using navigation.navigate etc, use Drawer Navigator instead.
Installation
To use this package, open a Terminal in the project root and run:
npm
yarn
pnpm
bun
npm install react-native-drawer-layout
yarn add react-native-drawer-layout
pnpm add react-native-drawer-layout
bun add react-native-drawer-layout
The library depends on react-native-gesture-handler for gestures and react-native-reanimated for animations.
- Expo
- Community CLI
If you have a Expo managed project, in your project directory, run:
npx expo install react-native-gesture-handler react-native-reanimated react-native-worklets
If you have a bare React Native project, in your project directory, run:
- npm
- yarn
- pnpm
- bun
npm install react-native-gesture-handler react-native-reanimated react-native-worklets
yarn add react-native-gesture-handler react-native-reanimated react-native-worklets
pnpm add react-native-gesture-handler react-native-reanimated react-native-worklets
bun add react-native-gesture-handler react-native-reanimated react-native-worklets
After installation, configure the Reanimated Babel Plugin in your project following the installation guide.
If you're on a Mac and developing for iOS, you also need to install pods to complete the linking.
npx pod-install ios
Quick start
import * as React from 'react';
import { Text