ActionSheetAn Action Sheet is an action-based menu that overlays the current screen, providing access to additional actions that are not visible on the main interface.

Overview

Usage Examples

StructureThe actionSheet is structured from several sections and elements, each section can be customized differently.

Header ContentCustomize the header with the following elements to provide the user with additional information.

Text

Property	Preview
Title (default)
Title+Subtitle

Prefix (only available with Title+Subtitle)

Propery	Preview
Thumbnail
Avatar

Suffix

Property	Preview
Icon
Thumbnail
Link Button

Custom Element

Property	Preview
Custom Element A custom element can be added beneath the header content.

Items ContentThe items in the actionSheet are based on the listItem component, but the content is intentionally kept concise to ensure the action sheet remains clear and easy to use.

Property	Preview
Title
Title+Subtitle
Section Header Use a section header to divide and organize the list of actions

Prefix

Property	Preview
None
Icon

Item StyleThe items in the action sheet support a destructive style for important actions. Use a native alert to confirm the action and explain the consequences.

Property	Preview
Default
Destructive

Spec

Tablet Spec

Dev

UsageCode Example

<ActionSheet
  testID={'uilib.actionSheet'}
  visible={isVisible}
  onDismiss={onDismiss}
  headerProps={headerProps}
  options={optionsData.options}
  destructiveButtonIndex={optionsData.destructiveButtonIndex}
  prominentButtonIndex={optionsData.prominentButtonIndex}
  gridOptions={gridOptions}
  footerCheckbox={checkboxProps}
/>

APIThis is the list of additional props for the component

destructiveButtonIndex

number

Index of the option represents the destructive action (will display red text. Usually used for 'delete' or 'abort' actions)This is now used in both platforms, not only for native iOS

footerCheckbox

CheckboxProps

The props of footer checkbox

gridNumColumns

number

The number of columns in the GridView

gridOptions

ActionSheetGridItemProps[]

Options for the action sheet (when wanting an ActionSheet with a GridView)

headerProps

DialogHeaderProps

The props that will be passed to the pannable header

options

ActionSheetOptionProps[]

Options for the action sheet (when wanting an ActionSheet with a List)

optionsContainerStyle

ViewStyle

The options' container style

prominentButtonIndex

number

Index of the option represents the prominent action (will display text with theme color. Used for a prominent action)

testID

string

Component Test id

useSmallItems

boolean

Indicates whether to use smaller height items