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
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
.gitignore add Oct 15, 2016
LICENSE remove references to old package Sep 20, 2018
index.d.ts Fix module name Oct 12, 2018

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


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


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/<...>/

import com.actionsheet.ActionSheetPackage; // <-- add this import

public class MainApplication extends Application implements ReactApplication {
    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


import ActionSheet from 'react-native-action-sheet';
import { Platform } from 'react-native';

var BUTTONSiOS = [
  'Option 0',
  'Option 1',
  'Option 2',

var BUTTONSandroid = [
  'Option 0',
  'Option 1',
  'Option 2'


  options: (Platform.OS == 'ios') ? BUTTONSiOS : BUTTONSandroid,
  cancelButtonIndex: CANCEL_INDEX,
  destructiveButtonIndex: DESTRUCTIVE_INDEX,
  tintColor: 'blue'
(buttonIndex) => {
  console.log('button clicked :', buttonIndex);


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'


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.