@expo/react-native-action-sheet

The useActionSheet hook is the recommended way to access the showActionSheetWithOptions method within a functional component. You pass an options object and a callback function that receives the selectedIndex of the chosen option.

// Using the provided hook
import { useActionSheet } from '@expo/react-native-action-sheet';

export default function Menu() {
  const { showActionSheetWithOptions } = useActionSheet();

  const onPress = () => {
    const options = ['Delete', 'Save', 'Cancel'];
    const destructiveButtonIndex = 0;
    const cancelButtonIndex = 2;

    showActionSheetWithOptions({
      options,
      cancelButtonIndex,
      destructiveButtonIndex
    }, (selectedIndex: number) => {
      switch (selectedIndex) {
        case 1:
          // Save
          break;

        case destructiveButtonIndex:
          // Delete
          break;

        case cancelButtonIndex:
          // Canceled
          break;
      }
    });
  };

  return (
    <Button title="Menu" onPress={onPress}/>
  );
}

When calling showActionSheetWithOptions, you can use the following universal props to configure the behavior and appearance across all platforms (iOS, Android, and Web):

• options (array of strings, required): A list of button titles.
• cancelButtonIndex (number): The index of the cancel button in the options array.
• cancelButtonTintColor (string): The text color for the cancel button.
• destructiveButtonIndex (number | array of numbers): The index or indices of destructive buttons.
• title (string): The title displayed above the action sheet.
• message (string): The message displayed below the title.
• tintColor (string): The color used for non-destructive button titles.
• disabledButtonIndices (array of numbers): The indices of buttons that should be disabled.

| Name | Type | Description |
| ------------------------ | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `options` | array of strings | A list of button titles **(required)** |
| `cancelButtonIndex` | number | Index of cancel button in options |
| `cancelButtonTintColor` | string | Color used for the change the text color of the cancel button |
| `destructiveButtonIndex` | number or array of numbers | Indices of destructive buttons in options |
| `title` | string | Title to show above the action sheet |
| `message` | string | Message to show below the title |
| `tintColor` | string | Color used for non-destructive button titles |
| `disabledButtonIndices` | array of numbers | Indices of disabled buttons in options |

These props allow you to modify the look and feel of the custom ActionSheet used on Android and Web. They have no effect on the native iOS implementation.

• icons (array): An array of required images or icons (e.g., via require or vector icons).
• tintIcons (boolean): If false, icons retain their source color instead of being tinted to match the text color. Note: If providing custom nodes instead of require images, you must tint them manually.
• textStyle (TextStyle): Styles for the option text. tintColor takes precedence.
• titleTextStyle (TextStyle): Styles for the title.
• messageTextStyle (TextStyle): Styles for the message.
• autoFocus (boolean): Automatically gives screen reader focus to the first option. On iOS, this is the default.
• showSeparators (boolean): Shows separators between items (no effect on iOS).
• containerStyle (ViewStyle): Styles for the action sheet container.
• separatorStyle (ViewStyle): Styles for the separators.
• useModal (boolean): Wraps the sheet in a Modal to ensure it appears in front of other open Modals. Defaults to false (or true if autoFocus is true).
• destructiveColor (string): Color for destructive text. Defaults to #d32f2f.

| Name | Type | Description |
| ------------------ | --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `icons` | array of required images or icons | Show icons to go along with each option. If image source paths are provided via `require`, images will be rendered for you. Alternatively, you can provide an array of elements such as vector icons, pre-rendered Images, etc. |
| `tintIcons` | boolean | Icons by default will be tinted to match the text color. When set to false, the icons will be the color of the source image. This is useful if you want to use multicolor icons. If you provide your own nodes/pre-rendered icons rather than required images in the `icons` array, you will need to tint them appropriately before providing them in the array of `icons`; `tintColor` will not be applied to icons unless they are images from a required source. |
| `textStyle` | TextStyle | Apply any text style props to the options. If the `tintColor` option is provided, it takes precedence over a color text style prop. |
| `titleTextStyle` | TextStyle | Apply any text style props to the title if present. |
| `messageTextStyle` | TextStyle | Apply any text style props to the message if present. |
| `autoFocus` | boolean | If `true`, this will give the first option screen reader focus automatically when the action sheet becomes visible. On iOS, this is the default behavior of the native action sheet. |
| `showSeparators` | boolean | Show separators between items. On iOS, separators always show so this prop has no effect. |
| `containerStyle` | ViewStyle | Apply any view style props to the container rather than use the default look (e.g. dark mode). |
| `separatorStyle` | ViewStyle | Modify the look of the separators rather than use the default look. |
| `useModal` | boolean | Defaults to `false` (`true` if autoFocus is also `true`) Wraps the ActionSheet with a Modal, in order to show in front of other Modals that were already opened ([issue reference](https://github.com/expo/react-native-action-sheet/issues/164)). |
| `destructiveColor` | string | Modify color for text of destructive option. Defaults to `#d32f2f`. |

The ActionSheetProvider accepts the following props to configure global behavior:

• useCustomActionSheet (boolean): iOS only. If true, uses the custom JS action sheet (the Android/Web version) instead of the native ActionSheetIOS component. Defaults to false.
• useNativeDriver (boolean): Windows only. Allows disabling the native animation driver for React Native Windows projects targeting Windows 10 Version-1809 or earlier. Not needed for Version-1903 and later.

| Name | Type | Description |
| ---------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `useCustomActionSheet` | boolean | iOS only prop that uses the custom pure JS action sheet (Android/Web version) instead of the native ActionSheetIOS component. Defaults to `false`. |
| `useNativeDriver` | boolean | Windows only option that provides the option to disable the [native animation](https://reactnative.dev/docs/animated#using-the-native-driver) driver for React Native Windows projects targeting _Windows 10 Version-1809 ; Build-10.0.17763.0_ and earlier. `useNativeDriver` is [supported in Version-1903 and later](https://microsoft.github.io/react-native-windows/docs/win10-compat) so if your project is targeting that, you don't need to set this prop. |

The following props are specific to iOS and allow for platform-specific adjustments:

• anchor (number): Used on iPad to dock the action sheet to a specific node.
• userInterfaceStyle (string): Sets the interface style to light or dark. If not set, the system default is used.

| Name | Type | Description |
| -------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `anchor` | number | iPad only option that allows for docking the action sheet to a node. See [ShowActionSheetButton.tsx](/example/ShowActionSheetButton.tsx) for an example on how to implement this. |
| `userInterfaceStyle` | string | The interface style used for the action sheet, can be set to `light` or `dark`, otherwise the default system style will be used. |