Skip to content
React native simple action sheet with native android (using the built-in AlertDialog)
Java Objective-C JavaScript Python
Branch: master
Clone or download
yfuks Merge pull request #43 from Vladimir-Vdovic/patch-1
Resolve Android build issue
Latest commit a52d299 Jul 12, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Example Bump lodash from 4.17.11 to 4.17.14 in /Example Jul 12, 2019
android
.gitignore add Oct 15, 2016
LICENSE
README.md remove references to old package Sep 20, 2018
index.d.ts Fix module name Oct 12, 2018
index.js
package.json

README.md

react-native-action-sheet npm version 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

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

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

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)
You can’t perform that action at this time.