powerdesigninc/react-native-actionsheet

help you to using ActionSheet cross platform iOS(ActionSheetIOS) and Android(BottomSheetDialog)

React Native ActionSheet

Inspired by talut/rn-actionsheet-module.

This package will help you to using ActionSheet cross platform iOS(ActionSheetIOS) and Android(BottomSheetDialog).

Use the same way as ActionSheetIOS, simply just change ActionSheetIOS to ActionSheet.

Screenshots

Android	iOS

Installation

# with npm
npm install @powerdesigninc/react-native-actionsheet
# with yarn
yarn add @powerdesigninc/react-native-actionsheet

React Native >= v0.60

you don't need to link anything. Native Modules are now Autolinked

React Native < v0.60, Manual linking

react-native link @powerdesigninc/react-native-actionsheet

Example

import ActionSheet from "@powerdesigninc/react-native-actionsheet"

const App = () => {
  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={styles.button}
        onPress={() => {
          ActionSheet.showActionSheetWithOptions(
            {
              title: 'Title',
              message: 'message',
              options: ['Cancel', 'From Gallery', 'From Camera'],
              destructiveButtonIndex: 1,
              cancelButtonIndex: 0,
            },
            index => {
              switch (index) {
                case 1: 
                  Alert.alert('From Camera clicked');
                  break;
                case 2: 
                  Alert.alert('From Camera clicked');
                  break;
                case 0: 
                  Alert.alert('onCancel');
                  break;
                default: 
                  Alert.alert('Default');
                  break;
              }
            },
          );
        }}>
        <Text>Show ActionSheet</Text>
      </TouchableOpacity>
    </View>
  );
};

Options

// same as ActionSheetIOSOptions
interface ActionSheetOptions {
  title?: string;
  options: string[];
  cancelButtonIndex?: number;
  destructiveButtonIndex?: number;
  message?: string;
  anchor?: number;
  tintColor?: string;
  hideCancelButton?: boolean; // if you don't want to show cancel on Android, but no effect on iOS
}

Run Example Project

cd example
yarn install

yarn ios
yarn android

License

This project is licensed under the MIT License - see the LICENSE.md file for details