Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 4 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 (about 2 years ago)
- Last Synced: 2024-10-30T05:57:31.308Z (about 2 months 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 [](https://badge.fury.io/js/react-native-action-sheet)  
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)