REACT-NATIVES

WIRED FOR SPEED

react-natives v2.1.2

Theme

Light

Dark

Get Started

Components

Feedback & Overlay

Drawer

A compound slide-in panel component with backdrop, content, header, body, footer, and close button, supporting four placement directions.

Example

Preview

Code

Props

Drawer Props

Prop

Type

Default

Description

isOpen *

boolean

—

Controls whether the drawer is visible.

onClose *

() => void

—

Callback invoked when the drawer should close.

placement

'left' | 'right' | 'top' | 'bottom'

'left'

The edge of the screen from which the drawer slides in.

size

'sm' | 'md' | 'lg' | 'full'

'md'

Controls the width (or height for top/bottom) of the drawer.

DrawerBackdrop Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the drawer backdrop overlay.

DrawerContent Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the drawer content panel.

DrawerHeader Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the drawer header.

DrawerBody Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the drawer body.

DrawerFooter Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the drawer footer.

DrawerCloseButton Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the drawer close button.

Usage Guidelines

When to use

Use Drawer for supplementary panels like navigation menus, settings, or detail views that slide in from the screen edge.

Best practices

•

Use left placement for navigation menus and right for detail panels.

•

Include DrawerCloseButton for explicit dismissal.

•

Avoid putting critical content in drawers that users might miss.

Accessibility

Drawer traps focus when open and returns focus to the trigger on close. Backdrop and close button are accessible.

Related Components

Modal

A compound overlay dialog component with backdrop, content, header, body, footer, and close button sub-components.

ActionSheet

A compound bottom-sheet component that slides up from the bottom of the screen with a drag indicator, selectable items, and backdrop.

Tabs

A compound tabbed interface component with tab list, individual tabs, and content panels for organizing content into switchable views.

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License