react-native-action-sheet  !MIT !Platform - Android and iOS

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/react-native-action-sheet@0.0.3 --save
react-native link @yfuks/react-native-action-sheet

$3

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.

``gradle
// 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')
`
`gradle
// file: android/app/build.gradle
...

dependencies {
...
compile project(':react-native-action-sheet')
}
`

`java
// 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 getPackages() {
return Arrays.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

`javascript
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)
`javascript
/**
* 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

option | iOS | Android | Info
------ | ---- | ------- | ----
options | OK | OK | (array of strings) - a list of button titles (required on iOS)
cancelButtonIndex | OK | - | (int) - index of cancel button in options (useless in android since we have back button)
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)