1.0.4 • Published 3 years ago
rn-actionsheet-module v1.0.4
React Native ActionSheet
This package will help you to using ActionSheetIOS(IOS) and BottomSheetDialog(Android).
Usage of this package same as for IOS and Android. Also this package usage same as ActionSheetIOS
Using ActionSheetIOS component for IOS and using RecyclerView and BottomSheetDialog for Android as NativeModule.
Version 1.0.4
tintColoradded for AndroidbackgroundColoradded for Android
Getting Started
With NPM
npm install --save rn-actionsheet-moduleWith YARN
yarn add rn-actionsheet-moduleAfter React Native v0.60 you don't need to link anything. Native Modules are now Autolinked
Automatic linking
react-native link rn-actionsheet-moduleManual Linking
Manual Installation (If something went wrong with react-native link)
Props
| Props | Type | Required | OS |
|---|---|---|---|
| optionsIOS | array | Yes | IOS |
| optionsAndroid | array | Yes | Android |
| title | string | Yes | Android, IOS |
| message | string | No | IOS |
| tintColor | string | No | IOS, Android |
| backgroundColor | string | No | Android |
| destructiveButtonIndex | number | No | IOS |
| cancelButtonIndex | number | No | IOS |
| onCancelAndroidIndex | number | Yes | Android |
With v0.2.0
Android doesn't need any cancel option but back button or outside click will return onCancelAndroidIndex
Usage
import ActionSheet from 'rn-actionsheet-module'
<TouchableOpacity onPress={() => {
ActionSheet(
{
title : "Lorem ipsum",
optionsIOS : ["Cancel", "From Gallery", "From Camera"],
optionsAndroid : ["From Gallery", "From Camera"],
destructiveButtonIndex: null, // undefined // 1, 2, etc.,
cancelButtonIndex : 0, //
onCancelAndroidIndex: 3 // android doesn't need any cancel option but back button or outside click will return onCancelAndroidIndex
}, (index) => {
switch (index) {
case Platform.OS === "ios" ? 1 : 0 :{
alert("From Camera clicked")
}
case Platform.OS === "ios" ? 2 : 1 :{
alert("From Camera clicked")
}
case Platform.OS === "ios" ? 0 : 3 :{
alert("onCancel")
}
default:{
alert("Default")
}
}
}
)
}}>
<Text>Show ActionSheet</Text>
</TouchableOpacity>FYI
You can use more than one ActionSheet in same screen.
License
This project is licensed under the MIT License - see the LICENSE.md file for details