Drawer

A sliding panel that enters from the edge of the screen, commonly used for navigation or filters in mobile applications.

Installation

Install the component:

npx natively-ui add drawer

Usage

DrawerDemo.jsx

import { Drawer } from '@/components/ui/drawer';

export default function MyComponent() {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <>
      <Button onPress={() => setIsOpen(true)}>
        Open Drawer
      </Button>

      <Drawer
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        side="left"
      >
        <View style={{ padding: 16 }}>
          <Text style={{ fontSize: 20, fontWeight: 'bold' }}>
            Navigation
          </Text>
          <View style={{ marginTop: 16 }}>
            <Text>Menu Item 1</Text>
            <Text>Menu Item 2</Text>
            <Text>Menu Item 3</Text>
          </View>
        </View>
      </Drawer>
    </>
  );
}

Props

Prop	Type	Default	Description
isOpen	boolean	false	Controls the visibility of the drawer.
onClose	() => void	-	Callback when the drawer is closed.
side	'left' \| 'right' \| 'top' \| 'bottom'	'left'	The side from which the drawer appears.
width	number	300	Width of the drawer (for left/right drawers).
height	number	300	Height of the drawer (for top/bottom drawers).
overlayColor	string	'rgba(0, 0, 0, 0.5)'	Color of the overlay behind the drawer.
overlayClose	boolean	true	Whether clicking the overlay closes the drawer.
closeOnEscape	boolean	true	Whether pressing escape closes the drawer.
children	React.ReactNode	-	The content to display inside the drawer.
className	string	""	Additional CSS classes for the drawer container.
enableGestures	boolean	false	Enable swipe gestures to close the drawer.

Features

Smooth slide animations with React Native Reanimated
Multiple placement options (left, right, top, bottom)
Customizable dimensions and overlay styling
Backdrop overlay with tap-to-close functionality
Gesture-based interactions for intuitive closing
Keyboard navigation support with escape key
Accessible focus management and screen reader support
Safe area insets handling for notched devices
Portal rendering for proper z-index stacking
Customizable animation duration and easing

Examples

Navigation Drawer

NavigationDrawer.jsx

function NavigationDrawer() {
  const [isOpen, setIsOpen] = useState(false);

  const navigationItems = [
    { title: 'Home', icon: 'home' },
    { title: 'Profile', icon: 'user' },
    { title: 'Settings', icon: 'settings' },
    { title: 'Help', icon: 'help-circle' },
  ];

  return (
    <>
      <Button 
        leftIcon={<Icon name="menu" size={16} />}
        onPress={() => setIsOpen(true)}
      >
        Menu
      </Button>

      <Drawer
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        side="left"
        width={280}
      >
        <View style={{ padding: 20 }}>
          <Text style={{ fontSize: 24, fontWeight: 'bold', marginBottom: 20 }}>
            Navigation
          </Text>
          
          {navigationItems.map((item, index) => (
            <Pressable
              key={index}
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                paddingVertical: 12,
                paddingHorizontal: 16,
                borderRadius: 8,
              }}
              onPress={() => {
                console.log(`Navigate to ${item.title}`);
                setIsOpen(false);
              }}
            >
              <Icon name={item.icon} size={20} style={{ marginRight: 12 }} />
              <Text style={{ fontSize: 16 }}>{item.title}</Text>
            </Pressable>
          ))}
        </View>
      </Drawer>
    </>
  );
}

Bottom Sheet

BottomSheet.jsx

function BottomSheet() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button onPress={() => setIsOpen(true)}>
        Show Options
      </Button>

      <Drawer
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        side="bottom"
        height={400}
        overlayColor="rgba(0, 0, 0, 0.7)"
        enableGestures={true}
      >
        <View style={{ padding: 20 }}>
          <View style={{
            width: 40,
            height: 4,
            backgroundColor: '#ccc',
            borderRadius: 2,
            alignSelf: 'center',
            marginBottom: 20
          }} />
          
          <Text style={{ fontSize: 20, fontWeight: 'bold', marginBottom: 16 }}>
            Quick Actions
          </Text>
          
          <View style={{ gap: 12 }}>
            <Button variant="outline">Share</Button>
            <Button variant="outline">Edit</Button>
            <Button variant="outline">Duplicate</Button>
            <Button variant="destructive">Delete</Button>
          </View>
        </View>
      </Drawer>
    </>
  );
}

Filter Drawer

FilterDrawer.jsx

function FilterDrawer() {
  const [isOpen, setIsOpen] = useState(false);
  const [filters, setFilters] = useState({
    category: 'all',
    priceRange: [0, 1000],
    inStock: false
  });

  return (
    <>
      <Button 
        rightIcon={<Icon name="filter" size={16} />}
        onPress={() => setIsOpen(true)}
      >
        Filters
      </Button>

      <Drawer
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        side="right"
        width={320}
        overlayClose={false}
      >
        <View style={{ padding: 20, flex: 1 }}>
          <View style={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
            marginBottom: 24
          }}>
            <Text style={{ fontSize: 20, fontWeight: 'bold' }}>
              Filters
            </Text>
            <Button
              size="icon"
              variant="ghost"
              onPress={() => setIsOpen(false)}
            >
              <Icon name="x" size={20} />
            </Button>
          </View>

          <View style={{ gap: 24, flex: 1 }}>
            <View>
              <Text style={{ fontSize: 16, fontWeight: '600', marginBottom: 8 }}>
                Category
              </Text>
              {/* Category selection components */}
            </View>

            <View>
              <Text style={{ fontSize: 16, fontWeight: '600', marginBottom: 8 }}>
                Price Range
              </Text>
              {/* Price range slider component */}
            </View>

            <View>
              <Text style={{ fontSize: 16, fontWeight: '600', marginBottom: 8 }}>
                Availability
              </Text>
              {/* Checkbox component */}
            </View>
          </View>

          <View style={{ flexDirection: 'row', gap: 12, marginTop: 'auto' }}>
            <Button 
              variant="outline" 
              style={{ flex: 1 }}
              onPress={() => setFilters({ category: 'all', priceRange: [0, 1000], inStock: false })}
            >
              Reset
            </Button>
            <Button 
              style={{ flex: 1 }}
              onPress={() => {
                console.log('Apply filters:', filters);
                setIsOpen(false);
              }}
            >
              Apply
            </Button>
          </View>
        </View>
      </Drawer>
    </>
  );
}

Multiple Directions

MultiDirectionDrawers.jsx

function MultiDirectionDrawers() {
  const [activeDrawer, setActiveDrawer] = useState(null);

  const drawers = [
    { side: 'left', label: 'Left Menu', width: 280 },
    { side: 'right', label: 'Right Panel', width: 320 },
    { side: 'top', label: 'Top Banner', height: 200 },
    { side: 'bottom', label: 'Bottom Sheet', height: 300 }
  ];

  return (
    <View style={{ gap: 12, padding: 20 }}>
      {drawers.map((drawer) => (
        <Button
          key={drawer.side}
          variant="outline"
          onPress={() => setActiveDrawer(drawer.side)}
        >
          Open {drawer.label}
        </Button>
      ))}

      {drawers.map((drawer) => (
        <Drawer
          key={drawer.side}
          isOpen={activeDrawer === drawer.side}
          onClose={() => setActiveDrawer(null)}
          side={drawer.side}
          width={drawer.width}
          height={drawer.height}
        >
          <View style={{ 
            padding: 20, 
            alignItems: 'center', 
            justifyContent: 'center',
            flex: 1 
          }}>
            <Text style={{ fontSize: 18, fontWeight: 'bold' }}>
              {drawer.label}
            </Text>
            <Text style={{ marginTop: 8, textAlign: 'center' }}>
              This drawer slides in from the {drawer.side}
            </Text>
            <Button
              style={{ marginTop: 16 }}
              onPress={() => setActiveDrawer(null)}
            >
              Close
            </Button>
          </View>
        </Drawer>
      ))}
    </View>
  );
}

Nested Drawers

NestedDrawers.jsx

function NestedDrawers() {
  const [primaryOpen, setPrimaryOpen] = useState(false);
  const [secondaryOpen, setSecondaryOpen] = useState(false);

  return (
    <>
      <Button onPress={() => setPrimaryOpen(true)}>
        Open Main Menu
      </Button>

      <Drawer
        isOpen={primaryOpen}
        onClose={() => setPrimaryOpen(false)}
        side="left"
        width={280}
      >
        <View style={{ padding: 20 }}>
          <Text style={{ fontSize: 20, fontWeight: 'bold', marginBottom: 20 }}>
            Main Menu
          </Text>
          
          <Button
            variant="outline"
            style={{ marginBottom: 12 }}
            onPress={() => setSecondaryOpen(true)}
          >
            Open Sub Menu
          </Button>
          
          <Button variant="outline">
            Other Option
          </Button>
        </View>
      </Drawer>

      <Drawer
        isOpen={secondaryOpen}
        onClose={() => setSecondaryOpen(false)}
        side="right"
        width={250}
        overlayColor="rgba(0, 0, 0, 0.3)"
      >
        <View style={{ padding: 20 }}>
          <Text style={{ fontSize: 18, fontWeight: 'bold', marginBottom: 16 }}>
            Sub Menu
          </Text>
          
          <Text>Nested drawer content</Text>
          
          <Button
            style={{ marginTop: 20 }}
            onPress={() => setSecondaryOpen(false)}
          >
            Close Sub Menu
          </Button>
        </View>
      </Drawer>
    </>
  );
}

Overview

Getting Started

Components