React native action sheet with native android
npm install @scrawllife/react-native-action-sheetReact native action sheet with native android (using the built-in AlertDialog)
This module simply return the ActionSheetIOS if the device on iOS
| iOS | Android |
| ----------------------------------------------------------------- | --------------------------------------------------------------------- |
|
|
|
- Install
- Usage
- Methods
- Instructions
npm install react-native-action-sheet@latest --savereact-native link react-native-action-sheet
npm install @yfuks/react-native-action-sheet@0.0.3 --savereact-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.
``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
return Arrays.
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
`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);
}
);
`
For the iOS implementation see ActionSheetIOS
#### 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) |
Subsequent updates of fork's Yoann Fuks (yfuks) react-native-action-sheet will be submitted to yfuks`