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
• Instructions

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";

var options = ["Option 0", "Option 1", "Option 2", "Delete", "Cancel"];

var DESTRUCTIVE_INDEX = 3;
var CANCEL_INDEX = 4;

ActionSheet.showActionSheetWithOptions(
  {
    options: options,
    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 hardware back button is pressed the buttonIndex value is cancelButtonIndex or 'undefined'

options

| option | iOS | Android | Info | | ---------------------- | --- | ------- | --------------------------------------------------------------- | | options | OK | OK | (array of strings) - a list of button titles (required on iOS) | | cancelButtonIndex | OK | Ok | (int) - index of cancel button in options | | destructiveButtonIndex | OK | - | (int) - index of destructive button in options (same as above) | | title | OK | OK | (string) - a title to show above the action sheet | | message | OK | - | (string) - a message to show below the title | | tintColor | OK | - | (string) - a color to set to the text (defined by processColor) |

Instructions

Subsequent updates of fork's Yoann Fuks (yfuks) react-native-action-sheet will be submitted to yfuks