React Native Drawer Layout

4.2.2 · active · verified Sun Apr 19

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.

Common errors

Warnings

Install

Imports

Quickstart

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.

import React, { useRef, useState } from 'react';
import { Button, Text, View, StyleSheet } from 'react-native';
import DrawerLayout from 'react-native-drawer-layout';

const App = () => {
  const drawerRef = useRef(null);
  const [drawerPosition, setDrawerPosition] = useState<'left' | 'right'>('left');

  const openDrawer = () => {
    drawerRef.current?.openDrawer();
  };

  const closeDrawer = () => {
    drawerRef.current?.closeDrawer();
  };

  const toggleDrawerPosition = () => {
    setDrawerPosition(prev => (prev === 'left' ? 'right' : 'left'));
  };

  const renderDrawer = () => (
    <View style={styles.drawerContainer}>
      <Text style={styles.drawerText}>I am the drawer content!</Text>
      <Button title="Close Drawer" onPress={closeDrawer} />
      <Button title="Toggle Position" onPress={toggleDrawerPosition} />
    </View>
  );

  return (
    <DrawerLayout
      ref={drawerRef}
      drawerWidth={300}
      drawerPosition={drawerPosition}
      renderNavigationView={renderDrawer}
      statusBarAnimation={'slide'}
      style={styles.container}
    >
      <View style={styles.content}>
        <Text style={styles.mainText}>Main Content Area</Text>
        <Button title="Open Drawer" onPress={openDrawer} />
      </View>
    </DrawerLayout>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  mainText: {
    fontSize: 24,
    marginBottom: 20,
  },
  drawerContainer: {
    flex: 1,
    backgroundColor: '#fff',
    paddingTop: 50,
    paddingHorizontal: 20,
  },
  drawerText: {
    fontSize: 20,
    marginBottom: 20,
  },
});

export default App;

view raw JSON →