Component

Action sheet

A grouped stack of actions rising from the bottom edge, with destructive actions in red and a standalone cancel button set apart from the rest.

The primitive

action sheet.tsx

<NativeActionSheet
  open={open}
  onClose={() => setOpen(false)}
  title="Receipt"
  actions={[
    { label: "Save image", onPress: onSaveImage },
    { label: "Share", onPress: onShare },
    { label: "Delete", style: "destructive", onPress: onDelete },
    { label: "Cancel", style: "cancel", onPress: () => {} },
  ]}
/>

Example

Tapping a transaction row opens this sheet with two actions, view receipt and report a problem, plus a cancel control set apart at the bottom.

action-sheet-example.tsx

<NativeActionSheet
  open={open}
  onClose={() => setOpen(false)}
  title={transaction.reference}
  message={`Sent to ${transaction.bankName}, ending ${transaction.last4}`}
  actions={[
    { label: "Download receipt", onPress: onDownload },
    { label: "Report a problem", style: "destructive", onPress: onReport },
    { label: "Cancel", style: "cancel", onPress: () => {} },
  ]}
/>

Capabilities

Prop	Type	Description
openrequired	boolean	—
onCloserequired	() => void	—
title	string	—
message	string	—
actionsrequired	NativeActionSheetAction[]	—