REACT-NATIVES

WIRED FOR SPEED

react-natives v2.2.0

Theme

Light

Dark

Get Started

Components

Feedback & Overlay

ActionSheet

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

Example

Preview

Code

Props

ActionSheet Props

Prop

Type

Default

Description

isOpen *

boolean

—

Controls whether the action sheet is visible.

onClose *

() => void

—

Callback invoked when the action sheet should close.

ActionSheetBackdrop Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the action sheet backdrop.

ActionSheetContent Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the action sheet content container.

ActionSheetDragIndicatorWrapper Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the drag indicator wrapper.

ActionSheetDragIndicator Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the drag indicator bar.

ActionSheetItem Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the action sheet item.

ActionSheetItemText Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the action sheet item text.

Usage Guidelines

When to use

Use ActionSheet for presenting a set of actions or options from the bottom of the screen on mobile.

Best practices

•

Use for presenting a set of 2-6 actions from the bottom of the screen.

•

Include a drag indicator for intuitive dismissal.

•

Place destructive actions last with warning styling.

Accessibility

ActionSheet manages focus and is dismissible via the backdrop. Each item is individually focusable.

Related Components

Drawer

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

Modal

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

Select

A compound dropdown select component with trigger, portal-based content, search filtering, single-select, and multi-select badge support.

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License