Drawer

Installation

$ npx shadcn@latest add https://goodui.dev/native/r/drawer.json

Then run npx expo install --fix so react-native-gesture-handler, react-native-reanimated match your Expo SDK. Files land in components/goodui-native/drawer.

Usage

import { Pressable, Text, View } from "react-native";
import { Drawer, useDrawer } from "@/components/goodui-native/drawer/drawer";

function Menu() {
  const { close } = useDrawer();
  return (
    <View style={{ padding: 16, gap: 12 }}>
      <Pressable accessibilityRole="button" onPress={close}>
        <Text>Inbox</Text>
      </Pressable>
    </View>
  );
}

function Inbox() {
  const { toggle } = useDrawer();
  return (
    <Pressable accessibilityRole="button" onPress={toggle}>
      <Text>Open menu</Text>
    </Pressable>
  );
}

export function MailScreen() {
  return (
    <Drawer variant="card" accessibilityLabel="Mailboxes" content={<Menu />}>
      <Inbox />
    </Drawer>
  );
}

When to use

Examples

const [open, setOpen] = useState(false);

<Drawer side="right" width={300} open={open} onOpenChange={setOpen} accessibilityLabel="Filters" content={<Filters onApply={() => setOpen(false)} />}>
  <Results onFilters={() => setOpen(true)} />
</Drawer>

<View style={{ height: 480, borderRadius: 20, overflow: "hidden" }}>
  <Drawer insets={false} content={<Menu />}>
    <Preview />
  </Drawer>
</View>

API reference

Motion and haptics

• •One progress value drives everything: the drawer's position (1:1 with the finger), the scrim's opacity and, in the card variant, the screen's scale (to 0.86), corner radius (to radius.xl) and slide.
• •Release projects the velocity: past halfway (with a flick counted in) it opens, otherwise it closes, on the smooth spring carrying the finger's velocity.
• •Overlay: the screen behind shifts 10 % of the drawer width as the drawer arrives. Card: the drawer underneath eases in from behind and fades up.
• •Reduced motion: opening and closing from a button fade the drawer and scrim instead of sliding; a swipe still follows the finger and settles with a short timing; no parallax.

• •Haptic: tap when a swipe or a scrim tap commits open or closed (configurable with haptic); none for programmatic changes

• •All motion runs on the UI thread from a single shared value; React state changes only when the drawer commits or finishes closing.
• •Drawer content mounts when the drawer starts opening and unmounts after it closes.

Accessibility

• •The open drawer is a modal dialog named by accessibilityLabel (accessibilityViewIsModal on iOS, role dialog with aria-modal on the web); the screen behind is hidden from screen readers while it is open.
• •The scrim is a button named 'Close <label>' with activate and escape actions; Escape closes on the web and the back button closes on Android.
• •Opening and closing are announced ('Menu opened').
• •The closed drawer's content is unmounted, so it is never reachable by keyboard or screen reader; the edge strip is hidden from them.

Notes for AI

Related