ActionSheet for both Android and iOS.
- Mimics ActionSheetIOS interface
- Native Android implementation on BottomSheetDialog
- iOS zero dependency (rely on ActionSheetIOS)
yarn add '@msco/react-native-action-sheet'
react-native link react-native-action-sheet
iOS integration
Nothings here. It uses ActionSheetIOS.
Replace your imports of ActionSheetIOS
to import ActionSheet from "react-native-action-sheet"
Android integration
settings.gradle
include ':react-native-action-sheet'
project(':react-native-action-sheet').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-action-sheet/android')
app.gradle
dependencies {
...
implementation project(':react-native-action-sheet')
}
Native App
override fun getPackages(): List<ReactPackage> {
return Arrays.asList(
MainReactPackage(),
ActionSheetPackage()
)
}
ActionSheet
import ActionSheet from 'react-native-action-sheet'
...
ActionSheet.showActionSheetWithOptions(
{
options: ['Cancel', 'Choose from library', 'Take photo', 'Delete'],
cancelButtonIndex: 0,
destructiveButtonIndex: 3,
title: 'Change profile photo',
message: 'Please choose your best ever photo',
android: {
header: {
color: '#BAFF94',
textColor: '#5A5959'
}
}
},
buttonIndex => {...}
)
Sharing dialog
import ActionSheet from 'react-native-action-sheet'
...
ActionSheet.showShareActionSheetWithOptions(
{
url: 'https://www.google.com',
subject: 'Your search engine',
message: "It's popular",
excludedActivityTypes: ['com.android.bluetooth'],
android: {
dialogTitle: 'Share with',
includedActivityTypes: [
// 'com.facebook.katana',
// 'com.ghisler.android.TotalCommander'
]
}
},
() => {}, //Failure callback
() => {} //Success callback
)
Refer to ActionSheetIOS
Android only props passed under android
props key
ActionSheet.showActionSheetWithOptions
Prop name | Description | Type | Required |
---|---|---|---|
color |
header background color | string (HEX value) | false |
textColor |
header text color | string (HEX value) | false |
cancelable |
can be closed by taping outside: true |
boolean | false |
ActionSheet.showShareActionSheetWithOptions
Prop name | Description | Type | Required |
---|---|---|---|
dialogTitle |
Android chooser dialog text | string | false |
includedActivityTypes |
Whitelist activities to show | string[] | false |