ActionSheet

The ActionSheet component mimics the react native ActionSheetIOS or ios Action Sheet inbuilt component, and provides all the customization for UI.

This displays a sheet of actions from the bottom of the screen with animation. It's commonly used to present users with a set of choices related to a task they want to complete.

It provides:

• Bottom-anchored action list
• iOS-style feel customization option
• Customizable actions and styling
• Built-in dismiss handling

Usage

The basic usage shows an action sheet with multiple action items. Each action can have a title and an onPress handler. The sheet automatically dismisses when an action is selected or when tapping outside.

Show ActionSheet

function ActionSheetUsage() {
  return (
    <Button
      onPress={() => {
        ActionSheet.show({
          title: 'This is a ActionSheet message!',
          options: [
            {key: 'option1', label: 'Option 1'},
            {key: 'option2', label: 'Option 2'},
            {key: 'option3', label: 'Option 3'},
          ],
          onItemPress: (key, index) => {
            console.log('ActionSheet action pressed!', key, index)
          },
        })
      }}>
      Show ActionSheet
    </Button>
  )
}

iOS Feel

Create iOS-style action sheet, a more native iOS appearance by customizing the labelStyle prop.

Show ActionSheet

function ActionSheetIosFeel() {
  const {colors} = useBlossomTheme()
  return (
    <Button
      onPress={() => {
        ActionSheet.show({
          message: 'This is a ActionSheet message!',
          options: [
            {
              key: 'option1',
              label: 'Option 1',
              labelStyle: {color: colors.info500},
            },
            {
              key: 'option2',
              label: 'Option 2',
              labelStyle: {color: colors.info500},
            },
            {
              key: 'option3',
              label: 'Option 3',
              destructive: true,
            },
          ],

          onItemPress: (key, index) => {
            console.log('ActionSheet action pressed!', key, index)
          },
          withCancelButton: true,
          cancelButtonTextStyle: {color: colors.error500},
        })
      }}>
      Show ActionSheet
    </Button>
  )
}

Custom

Customize the action sheet with different colors, styles, and layouts. You can modify individual action items to have different appearances based on their purpose (e.g., destructive actions in red).

Show ActionSheet

function ActionSheetCustom() {
  return (
    <Button
      onPress={() => {
        ActionSheet.show({
          title: 'This is a custom ActionSheet message!',
          message:
            'This is a custom message for ActionSheet. You can customize the content as you want.',
          titleStyle: {
            fontSize: 20,
            fontWeight: 'bold',
            color: 'purple',
          },
          messageStyle: {
            fontSize: 16,
            color: 'gray',
          },
          options: [
            {key: 'option1', label: '🔥 Option 1'},
            {key: 'option2', label: '💧 Option 2'},
            {key: 'option3', label: '🌟 Option 3', destructive: true},
          ],
          withCancelButton: true,
          onItemPress: (key, index) => {
            console.log('ActionSheet action pressed!', key, index)
          },
        })
      }}>
      Show ActionSheet
    </Button>
  )
}

Props

Prop	Data Type	Default Value	Description
Extends	ActionSheetViewProps	--	Inherits properties from ActionSheetViewProps
onShow	() => void	--	Callback function that is called when the ActionSheet is shown. This can be used to perform any setup or side effects when the ActionSheet becomes visible.
onHide	() => void	--	Callback function that is called when the ActionSheet is dismissed. This can be used to perform any cleanup or side effects when the ActionSheet becomes not visible.
title	string	--	Title to be displayed at the top of the ActionSheet
titleStyle	StyleProp<TextStyle>	--	Style for the title of the ActionSheet
message	string	--	Message to be displayed below the title of the ActionSheet
messageStyle	StyleProp<TextStyle>	--	Style for the message of the ActionSheet
options	ActionSheetItem[]	--	Options to be displayed in the ActionSheet
containerStyle	StyleProp<ViewStyle>	--	Style for the container of the ActionSheet
withCancelButton	boolean	--	Whether to show a cancel button at the bottom of the ActionSheet
cancelButtonLabel	string	Cancel	Label for the cancel button. If not provided, it will default to "Cancel".
cancelButtonTextStyle	StyleProp<TextStyle>	--	Style for the cancel button text
itemStyle	StyleProp<ViewStyle>	--	Action item style for each item in the ActionSheet
onItemPress	(key: string, index: number) => void	--	Callback function for option press action