https://github.com/yfuks/react-native-action-sheet

React native simple action sheet with native android (using the built-in AlertDialog)
https://github.com/yfuks/react-native-action-sheet

Last synced: 3 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/yfuks/react-native-action-sheet
• Owner: yfuks
• License: mit
• Created: 2016-10-14T15:12:21.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-08T02:27:30.000Z (almost 2 years ago)
• Last Synced: 2024-10-30T05:57:31.308Z (17 days ago)
• Language: Java
• Homepage:
• Size: 1.4 MB
• Stars: 183
• Watchers: 5
• Forks: 53
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native-native-modules - react-native-action-sheet ★66 - in AlertDialog). (<a name="Alter,-Prompt,-Action-&-Dialog:-Native-Modules">Alter, Prompt, Action & Dialog: Native Modules</a>)

README

        
# react-native-action-sheet [![npm version](https://badge.fury.io/js/react-native-action-sheet.svg)](https://badge.fury.io/js/react-native-action-sheet) ![MIT](https://img.shields.io/dub/l/vibe-d.svg) ![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-yellow.svg)

React native action sheet with native android (using the built-in [AlertDialog](https://developer.android.com/reference/android/app/AlertDialog.html))

This module simply return the [ActionSheetIOS](https://facebook.github.io/react-native/docs/actionsheetios.html) if the device on iOS

iOS | Android

------- | ----

 | 

## Table of contents

- [Install](#install)

- [Usage](#usage)

- [Methods](#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/[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.

```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';

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](https://facebook.github.io/react-native/docs/actionsheetios.html)

#### 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 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)