Action Sheet

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

Installation

Run the following command:

npx nwui-cli@latest add action-sheet

Edit _layout.tsx

Next, wrap your root component with an ActionSheetProvider.

~/app/_layout.tsx

import { ActionSheetProvider } from '@expo/react-native-action-sheet';

export default function Layout({ children }) {
  return (
    <ActionSheetProvider>
        {children}
    </ActionSheetProvider>
  );
}

🚀

Ship.

Add the following dependencies to your project:

npx expo install @expo/react-native-action-sheet

Edit _layout.tsx

Next, wrap your root component with an ActionSheetProvider.

~/app/_layout.tsx

import { ActionSheetProvider } from '@expo/react-native-action-sheet';

export default function Layout({ children }) {
  return (
    <ActionSheetProvider>
        {children}
    </ActionSheetProvider>
  );
}

🚢

Ship.

Usage

index.tsx

Download

import { Button, View } from 'react-native';
import { useActionSheet } from '@expo/react-native-action-sheet';

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

function ActionSheetExample() {
  const { colorScheme, colors } = useColorScheme();
  const { showActionSheetWithOptions } = useActionSheet();
  return (
    <View className="items-center">
      <Button
        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>
  );
}

Action Sheet

Installation

Usage

NativeWindUI