Action Sheet

A modal view that presents choices related to an action people initiate.

Installation

Before copy/pasting, add the following dependencies to your project:

Usage

index.tsx
import { Button as RNButton, ButtonProps, View } from 'react-native';
import { useActionSheet } from '@expo/react-native-action-sheet';

import { useColorScheme } from '~/lib/useColorScheme';

function DefaultButton({ color, ...props }: ButtonProps) {
  const { colors } = useColorScheme();
  return <RNButton color={color ?? colors.primary} {...props} />;
}

function ActionSheetExample() {
  const { colorScheme, colors } = useColorScheme();
  const { showActionSheetWithOptions } = useActionSheet();
  return (
    <View className="items-center">
      <DefaultButton
        color="grey"
        onPress={async () => {
          const options = ['Delete', 'Save', 'Cancel'];
          const destructiveButtonIndex = 0;
          const cancelButtonIndex = 2;

          showActionSheetWithOptions(
            {
              options,
              cancelButtonIndex,
              destructiveButtonIndex,
              containerStyle: {
                backgroundColor: colorScheme === 'dark' ? 'black' : 'white',
              },
              textStyle: {
                color: colors.foreground,
              },
              },
              (selectedIndex) => {
              switch (selectedIndex) {
                case 1:
                // Save
                break;

                case destructiveButtonIndex:
                // Delete
                break;

                case cancelButtonIndex:
                // Canceled
              }
            }
          );
        }}
        title="Open action sheet"
      />
    </View>
  );
}
© Ronin Technologies LLC 2024