ActionSheet

A modal sheet of contextual actions, the iOS action sheet idiom: a bottom sheet of choices summoned in response to a user action.
It poses an optional title and message, lists a set of actions (any of which can be destructive), and offers a Cancel. Selecting an action runs it and closes the sheet; tapping the scrim or Cancel closes it without acting. Pass a trigger label for a self-contained button that opens the sheet, or drive open / onOpenChange yourself. For a small contextual menu anchored to a control, reach for Dropdown or RowMenu instead.
On light glass, muted header text uses the stronger surface foreground to remain readable over the dimmed background.
iOS accessibility escape and Android system back request cancellation without running an action. An open child overlay handles the request first. Disabled actions do not disable cancellation, and a controlled owner can keep the sheet open. The visible Cancel row remains available to assistive technology.
iOS
Android
Web
tsx
<ActionSheet
trigger="Add photo"
actions={[
{ label: "Take Photo", onPress: () => {} },
{ label: "Choose from Library", onPress: () => {} }
]}
/>

Props

Prop
Description
open
boolean
Controlled open state. Omit for uncontrolled (a `trigger` opens it).
onOpenChange
(open: boolean) => void
Fired when the open state changes (trigger press, scrim tap, Cancel, an action, back/escape).
trigger
string
Label for an optional trigger button. When set, the sheet renders the button and opens itself on press (uncontrolled). Omit when you drive `open` yourself.
title
string
Optional header title (a left-aligned primary-label heading on iOS, a short centered heading on web, left-aligned on Android).
message
string
Optional header message under the title.
actions
required
ActionSheetAction[]
The action rows. Each runs its `onPress` then closes the sheet.
cancelLabel
string
The Cancel row label (default "Cancel").
testID
string
E2E hook forwarded to the root element.
style
StyleProp<ViewStyle>
Outer layout composition for the bottom-anchored stack, composed onto the stack container; not a restyle hook. (The device's bottom safe-area inset is applied automatically, so it clears the home indicator without a manual `paddingBottom`.)

Do & Don’t

Right tool for the job

Don’t
Use an Action Sheet for a single yes/no confirmation; an Alert Dialog is the focused tool for that.
Do
Use an Action Sheet for a short list of choices triggered by a user action, with the dangerous option marked destructive.

Name the action, not a generic verb

Don’t
Generic labels force the user to re-read the title to know what each row does.
Do
Label each row with the action it performs (Take Photo, Delete File, Move).
← Stats
Board →