{"id":11769,"library":"react-native-drawer-layout","title":"React Native Drawer Layout","description":"react-native-drawer-layout provides a foundational and highly customizable drawer component for React Native applications, allowing for swipeable side navigation panels. It is a standalone component often used as a building block for higher-level navigation solutions, such as the Drawer Navigator within the React Navigation ecosystem. The current stable version is 4.2.2. While this specific package doesn't show recent direct releases in the provided logs, it is part of the actively maintained React Navigation suite, which implies a consistent release cadence for the ecosystem. Key differentiators include its reliance on `react-native-reanimated` and `react-native-gesture-handler` for smooth, performant animations and gestures, offering a robust and highly configurable user experience compared to less performant JavaScript-based drawer implementations.","status":"active","version":"4.2.2","language":"javascript","source_language":"en","source_url":"https://github.com/react-navigation/react-navigation","tags":["javascript","react-native-component","react-component","react-native","ios","android","drawer","swipe","typescript"],"install":[{"cmd":"npm install react-native-drawer-layout","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-drawer-layout","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-drawer-layout","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React Native components.","package":"react","optional":false},{"reason":"Core dependency for any React Native component.","package":"react-native","optional":false},{"reason":"Required for smooth, performant animations and gesture handling within the drawer.","package":"react-native-reanimated","optional":false},{"reason":"Required for declarative gesture handling and integration with the native event system.","package":"react-native-gesture-handler","optional":false}],"imports":[{"note":"DrawerLayout is typically imported as a default export, not a named one.","wrong":"import { DrawerLayout } from 'react-native-drawer-layout'","symbol":"DrawerLayout","correct":"import DrawerLayout from 'react-native-drawer-layout'"},{"note":"Import types using `import type` for better TypeScript tree-shaking and clarity.","wrong":"import { DrawerLayoutProps } from 'react-native-drawer-layout'","symbol":"DrawerLayoutProps","correct":"import type { DrawerLayoutProps } from 'react-native-drawer-layout'"},{"note":"Hooks like `useDrawerStatus` are named exports.","wrong":"import useDrawerStatus from 'react-native-drawer-layout'","symbol":"useDrawerStatus","correct":"import { useDrawerStatus } from 'react-native-drawer-layout'"}],"quickstart":{"code":"import React, { useRef, useState } from 'react';\nimport { Button, Text, View, StyleSheet } from 'react-native';\nimport DrawerLayout from 'react-native-drawer-layout';\n\nconst App = () => {\n  const drawerRef = useRef(null);\n  const [drawerPosition, setDrawerPosition] = useState<'left' | 'right'>('left');\n\n  const openDrawer = () => {\n    drawerRef.current?.openDrawer();\n  };\n\n  const closeDrawer = () => {\n    drawerRef.current?.closeDrawer();\n  };\n\n  const toggleDrawerPosition = () => {\n    setDrawerPosition(prev => (prev === 'left' ? 'right' : 'left'));\n  };\n\n  const renderDrawer = () => (\n    <View style={styles.drawerContainer}>\n      <Text style={styles.drawerText}>I am the drawer content!</Text>\n      <Button title=\"Close Drawer\" onPress={closeDrawer} />\n      <Button title=\"Toggle Position\" onPress={toggleDrawerPosition} />\n    </View>\n  );\n\n  return (\n    <DrawerLayout\n      ref={drawerRef}\n      drawerWidth={300}\n      drawerPosition={drawerPosition}\n      renderNavigationView={renderDrawer}\n      statusBarAnimation={'slide'}\n      style={styles.container}\n    >\n      <View style={styles.content}>\n        <Text style={styles.mainText}>Main Content Area</Text>\n        <Button title=\"Open Drawer\" onPress={openDrawer} />\n      </View>\n    </DrawerLayout>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n  },\n  content: {\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  mainText: {\n    fontSize: 24,\n    marginBottom: 20,\n  },\n  drawerContainer: {\n    flex: 1,\n    backgroundColor: '#fff',\n    paddingTop: 50,\n    paddingHorizontal: 20,\n  },\n  drawerText: {\n    fontSize: 20,\n    marginBottom: 20,\n  },\n});\n\nexport default App;\n","lang":"typescript","description":"This quickstart demonstrates a basic `DrawerLayout` component with open/close functionality and dynamic drawer position toggling. It uses `useRef` to control the drawer programmatically and `useState` to manage its position, showcasing interaction with both the main content and the drawer itself."},"warnings":[{"fix":"Always check the release notes for `react-native-reanimated` and `react-native-gesture-handler` for specific migration guides. Ensure your app's `babel.config.js` is correctly configured for `react-native-reanimated`.","message":"Major versions of `react-native-reanimated` and `react-native-gesture-handler` can introduce breaking changes in their APIs, which `react-native-drawer-layout` depends on. Ensure compatibility when upgrading these peer dependencies.","severity":"breaking","affected_versions":">=3.0.0 (for reanimated), >=2.0.0 (for gesture-handler)"},{"fix":"Follow the official installation guides for `react-native-reanimated` (v2+) and `react-native-gesture-handler` meticulously, including any native setup steps for iOS and Android, and Babel plugin configuration.","message":"Proper installation and linking of `react-native-reanimated` and `react-native-gesture-handler` are crucial. Missing steps (e.g., adding `react-native-reanimated/plugin` to `babel.config.js` or making specific `MainActivity.java`/`AppDelegate.mm` changes) will lead to runtime errors or crashes.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Replace `onDrawerStateChange` with `onDrawerOpen` and `onDrawerClose` as needed to react to drawer status changes. For more granular state, consider `useDrawerStatus` hook if available or implemented via React Navigation.","message":"The `onDrawerStateChange` prop has been removed in favor of more specific `onDrawerOpen` and `onDrawerClose` callbacks for clearer event handling.","severity":"deprecated","affected_versions":">=4.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure your entire application or at least the section containing the `DrawerLayout` is wrapped within a `<NavigationContainer>` from `@react-navigation/native`.","cause":"While `react-native-drawer-layout` is a standalone component, it is often used with React Navigation. If you are trying to use hooks like `useNavigation` within content rendered by `DrawerLayout` and it's not nested inside a `NavigationContainer`, this error will occur.","error":"Invariant Violation: `[...]. You must be inside a <NavigationContainer> to use hook useNavigation`"},{"fix":"Add `plugins: ['react-native-reanimated/plugin']` to your `babel.config.js` file. Ensure `react-native-reanimated` is installed and rebuild your app (e.g., `npx react-native run-android` or `npm run ios`).","cause":"`react-native-reanimated` (v2+) requires a Babel plugin for its Worklets API. This error indicates the plugin is missing or incorrectly configured in your Babel setup.","error":"Animated module is not installed correctly. Please make sure that 'react-native-reanimated/plugin' is added to your babel.config.js."},{"fix":"Verify that you've followed *all* manual installation steps for `react-native-reanimated` (v2+), especially the changes in `android/app/src/main/java/<your-app-name>/MainActivity.java` (if applicable) and `ios/<your-app-name>/AppDelegate.mm`. Then, clean your build caches and rebuild the native application (`npx react-native start --reset-cache`, `cd android && ./gradlew clean`, `cd ios && pod install && xcodebuild clean`).","cause":"This typically occurs if the native part of `react-native-reanimated` is not correctly linked or initialized, often due to missing steps in `MainActivity.java` (Android) or `AppDelegate.mm` (iOS), or not rebuilding native apps after installation.","error":"Error: Reanimated 2 is not yet fully integrated in your app. Please make sure you've followed the installation instructions carefully."},{"fix":"Ensure you have added `import 'react-native-gesture-handler';` at the very top of your application's entry file (e.g., `index.js`). For older versions or specific configurations, also check `AppDelegate.mm` for `[RNGestureHandlerRootView install]` or similar setup.","cause":"This error usually indicates that `react-native-gesture-handler`'s native modules are not correctly linked or initialized on iOS, typically from not adding the necessary import or method swizzling in `AppDelegate.mm` or `index.js`.","error":"Unrecognized selector sent to instance ... (for `react-native-gesture-handler` related errors on iOS)"}],"ecosystem":"npm"}