Drawer – Once UI

Drawer takes the same props as on the web (open, onClose, side, size, title, description, footer, showClose, closeOnClickaway, flush). It slides in from one edge and floats a step in from it, clear of the notch and the home indicator. Use it for an app's menu, a set of filters or a record's details; for a short task, a Dialog bottom sheet fits better. See the web Drawer for the same component in the browser.

Basic usage

The drawer is always controlled: keep open in state and close it in onClose. The close button, the Android back button and a tap on the backdrop all call onClose.

Filters.tsx

import { useState } from "react";
import { Button, Drawer, Switch } from "@once-ui-system/native";

export function Filters() {
const [open, setOpen] = useState(false);
return (
  <>
    <Button label="Filters" prefixIcon="filter" variant="secondary" onPress={() => setOpen(true)} />
    <Drawer
      open={open}
      onClose={() => setOpen(false)}
      title="Filters"
      description="Show only what you need today."
      footer={<Button label="Apply" onPress={() => setOpen(false)} />}
    >
      <Switch label="Only open tables" defaultChecked />
    </Drawer>
  </>
);
}

Side and size

side is the edge it slides from: right (the default), left, top or bottom. size is the width of a left or right drawer and the most a top or bottom one grows to: s 20rem, m 28rem, l 40rem, never wider than the screen less the inset. full covers the screen, less the inset.

Menu.tsx

<Drawer open={open} onClose={close} side="left" size="s" title="Morning Coffee">
<Nav density="compact">
  <NavItem icon="home" label="Today" selected />
  <NavItem icon="calendar" label="Bookings" />
</Nav>
</Drawer>

Flush

flush drops the header and the padding, so the content reaches the edges, for media or a list. The close button floats in the corner; showClose={false} hides it.

Differences from the web

Focus props (initialFocusRef, returnFocusRef) are left out: React Native moves the screen reader into the drawer on its own.
It slides in over 240ms, and appears at once when the device's reduce-motion setting is on.
The Android back button closes it.

API reference

Prop	Type	Default	Description
open	boolean		Shows the drawer. Required.
onClose	() => void		Called by the close button, the back button and a tap on the backdrop. Required.
side	"left" \| "right" \| "top" \| "bottom"	"right"	The edge it slides in from.
size	"s" \| "m" \| "l" \| "full"	"m"	Width (left, right) or most height (top, bottom).
title	ReactNode		The heading.
description	ReactNode		A line under the title.
footer	ReactNode		Actions pinned under the scrolling content.
showClose	boolean	true	Shows the close button.
closeOnClickaway	boolean	true	A tap on the backdrop closes it.
flush	boolean	false	No header and no padding.
aria-label	string		The name a screen reader announces when there is no title.
style	ViewStyle		Style for the panel.