Skip to main content

ActionSheet

<ActionSheet
 title={'Title'}
 message={'Message goes here'}
 cancelButtonIndex={3}
 destructiveButtonIndex={0}
 options={[
  {label: '', onPress: },
  {label: '', onPress: },
  {label: 'Cancel', onPress: () => console.log('cancel')0}
 ]}
/>
APIThis is the list of additional props for the component

cancelButtonIndex
number
​

Index of the option represents the cancel action (to be displayed as the separated bottom bold button)

containerStyle
ViewStyle
​

Add or override style of the action sheet (wraps the title and actions)

destructiveButtonIndex
number
​

Index of the option represents the destructive action (will display red text. Usually used for delete or abort actions)

dialogStyle
ViewStyle
​

Add or override style of the dialog wrapping the action sheet

message
string
​

Message of the action sheet

onDismiss
DialogProps['onDismiss']
​

Called when dismissing the action sheet (usually used for setting 'visible' prop to false)

onModalDismissed
DialogProps['onDialogDismissed']
​

Called once the modal has been dismissediOS only, modal only

options
Array<ButtonProps>
​

List of options for the action sheet, follows the Button prop types (supply 'label' string and 'onPress' function)

optionsStyle
ViewStyle
​

Add or override style of the options list

renderAction
( option: ButtonProps, index: number, onOptionPress: ActionSheetOnOptionPress ) => JSX.Element
​

Render custom actionYou will need to call 'onOptionPress' so the option's 'onPress' will be called

renderTitle
() => JSX.Element
​

Render custom title

showCancelButton
boolean
​

When passed (only with useNativeIOS), will display a cancel button at the bottom (overrides cancelButtonIndex)

testID
string
​

The test id for e2e tests

title
string
​

Title of the action sheetIf both 'title' and 'message' are not passed will not render the title view at all

useNativeIOS
boolean
​

Should use the native action sheet for iOS

useSafeArea
boolean
​

In iOS, use safe area, in case component attached to the bottom

visible
boolean
​

Whether to show the action sheet or not