{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-drawer-layout"],"cli":null},"imports":["import DrawerLayout from 'react-native-drawer-layout'","import type { DrawerLayoutProps } from 'react-native-drawer-layout'","import { useDrawerStatus } from 'react-native-drawer-layout'"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}