Skip to content

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

License

Notifications You must be signed in to change notification settings

danielpgauer/react-native-action-sheet

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Install

npm install @yfuks/react-native-action-sheet@latest --save react-native link @yfuks/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/@yfuks/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
        );
    }
...
}

Usage

import ActionSheet from '@yfuks/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)

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Java 37.2%
  • Objective-C 35.2%
  • JavaScript 14.5%
  • Python 13.1%