react-native-action-sheet

React native action sheet with native android (using the built-in AlertDialog)

This module simply return the ActionSheetIOS if the device on iOS

iOS	Android

Table of contents

• Install
• Usage
• Methods

IMPORTANT ! Package name on npm is now react-native-action-sheet

Install

npm install react-native-action-sheet@latest --save react-native link react-native-action-sheet

if react native < 0.47

npm install @yfuks/[email protected] --save react-native link @yfuks/react-native-action-sheet

Android

The react-native link command above should do everything you need, but if for some reason it does not work, you can replicate its effects manually by making the following changes.

// file: android/settings.gradle ...  include ':react-native-action-sheet' project(':react-native-action-sheet').projectDir = new File(settingsDir, '../node_modules/react-native-action-sheet/android')

// file: android/app/build.gradle ...  dependencies {     ...     compile project(':react-native-action-sheet') }

// file: android/app/src/main/java/com/<...>/MainApplication.java ...  import com.actionsheet.ActionSheetPackage; // <-- add this import  public class MainApplication extends Application implements ReactApplication {     @Override     protected List<ReactPackage> getPackages() {         return Arrays.<ReactPackage>asList(             new MainReactPackage(),             new ActionSheetPackage() // <-- add this line         );     } ... } 

(Optional) Style customization

You can change the style of the dialog by editing nodes_modules/react-native-action-sheet/android/src/main/res/values/style.xml

Usage

import ActionSheet from 'react-native-action-sheet'; import { Platform } from 'react-native';  var BUTTONSiOS = [   'Option 0',   'Option 1',   'Option 2',   'Delete',   'Cancel' ];  var BUTTONSandroid = [   'Option 0',   'Option 1',   'Option 2' ];  var DESTRUCTIVE_INDEX = 3; var CANCEL_INDEX = 4;  ActionSheet.showActionSheetWithOptions({   options: (Platform.OS == 'ios') ? BUTTONSiOS : BUTTONSandroid,   cancelButtonIndex: CANCEL_INDEX,   destructiveButtonIndex: DESTRUCTIVE_INDEX,   tintColor: 'blue' }, (buttonIndex) => {   console.log('button clicked :', buttonIndex); });

Methods

For the iOS implementation see ActionSheetIOS

showActionSheetWithOptions (Android)

/**  * Display the native action sheet  */  static showActionSheetWithOptions(options, callback);

@note: on Android in case of a touch outside the ActionSheet or the button back is pressed the buttonIndex value is 'undefined'

options