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 |
|---|---|
 |
 |
npm install @yfuks/react-native-action-sheet@latest --save
// 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/<...>/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
);
}
...
}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);
});For the iOS implementation see ActionSheetIOS
/**
* 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) |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent