@expo/react-native-action-sheet

What is @expo/react-native-action-sheet?

@expo/react-native-action-sheet is a library that provides a customizable ActionSheet component for React Native applications. It allows developers to present a list of options to the user in a modal dialog, which can be used for various purposes such as selecting an item, confirming an action, or displaying additional options.

What are @expo/react-native-action-sheet's main functionalities?

Displaying an ActionSheet

This feature allows you to display an ActionSheet with a list of options. The user can select an option, and the selected option's index is returned in the callback function.

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

const App = () => {
  const { showActionSheetWithOptions } = useActionSheet();

  const onOpenActionSheet = () => {
    const options = ['Option 1', 'Option 2', 'Cancel'];
    const cancelButtonIndex = 2;

    showActionSheetWithOptions(
      {
        options,
        cancelButtonIndex,
      },
      (buttonIndex) => {
        // Handle button press
        console.log('Selected option:', buttonIndex);
      }
    );
  };

  return (
    <View>
      <Button title="Open ActionSheet" onPress={onOpenActionSheet} />
    </View>
  );
};

export default App;

Customizing ActionSheet Options

This feature allows you to customize the ActionSheet options, including setting a destructive button (e.g., for delete actions) and a cancel button.

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

const App = () => {
  const { showActionSheetWithOptions } = useActionSheet();

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

    showActionSheetWithOptions(
      {
        options,
        cancelButtonIndex,
        destructiveButtonIndex,
      },
      (buttonIndex) => {
        // Handle button press
        console.log('Selected option:', buttonIndex);
      }
    );
  };

  return (
    <View>
      <Button title="Open ActionSheet" onPress={onOpenActionSheet} />
    </View>
  );
};

export default App;

Other packages similar to @expo/react-native-action-sheet

react-native-action-sheet

react-native-action-sheet is a popular library for displaying action sheets in React Native applications. It provides similar functionality to @expo/react-native-action-sheet, allowing developers to present a list of options to the user. However, it may require additional setup and configuration compared to the Expo version.

react-native-modal

react-native-modal is a versatile library for creating modals in React Native applications. While it is not specifically designed for action sheets, it can be used to create custom modal dialogs with a list of options. It offers more flexibility and customization options compared to @expo/react-native-action-sheet but may require more effort to implement.

README

react-native-action-sheet

ActionSheet is a cross-platform React Native component that uses the native UIActionSheet on iOS and a JS implementation on Android. Almost a drop in replacement for ActionSheetIOS except it cannot be called statically.

Installation

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

Try it out

Try it with Expo: https://expo.io/@community/react-native-action-sheet-example

Usage

See the example app source