Quickstart
yarn: yarn add react-native-cross-actionsheet
npm: npm install react-native-cross-actionsheet
import { ActionSheet } from 'react-native-cross-actionsheet'
ActionSheet.options({
options: [
{ text: 'Create', onPress: () => console.log('create') },
{ text: 'Update', onPress: () => console.log('update') },
{ text: 'Delete', destructive: true, onPress: () => console.log('delete')}
],
cancel: { onPress: () => console.log('cancel') }
})
Preview
Android | iOS |
---|---|
Background
Was a bit surprised to find out that while ReactNative had support for iOS ActionSheets, they didn't have any support for Android even though it's a fairly common thing.
Searched around, but most of the crossplatform ActionSheet libraries only had React implementations rather than native implementations. There were some crossplatform native libraries, but most of these were rather dated.
Furthermore, most ActionSheet libraries have cumbersome APIs requiring you to have to import an component, and manually manage your states using const showActionSheet = useState()
.
So with that I decided to just make my own library that is backed by Native Android Actionsheets. The API is extremely easy to use as you can call it statically, meaning you don't need to enter any JSX code. I also reimplemented all the options available to ActionSheetIOS (besides anchor) to bring Android on parity with iOS. Which means you can add title, message, tintColor, and destructive.
Usage
Simple
import { ActionSheet } from 'react-native-cross-actionsheet'
ActionSheet.options({
options: [
{ text: 'Create', onPress: () => console.log('create') },
{ text: 'Update', onPress: () => console.log('update') },
{ text: 'Delete', destructive: true, onPress: () => console.log('delete')}
],
cancel: { onPress: () => console.log('cancel') }
})
Additional Options
import { ActionSheet } from 'react-native-cross-actionsheet'
ActionSheet.options({
title: 'ActionSheet Title',
message: 'Select an option',
options: [
{ text: 'Create', onPress: () => console.log('create') },
{ text: 'Update', onPress: () => console.log('update') },
{ text: 'Delete', onPress: () => console.log('delete'), destructive: true }
],
cancel: { text: 'Cancel', onPress: () => console.log('cancel') },
tintColor: '#008888'
})
Disable Cancel
import { ActionSheet } from 'react-native-cross-actionsheet'
ActionSheet.options({
options: [
{ text: 'Create', onPress: () => console.log('create') },
{ text: 'Update', onPress: () => console.log('update') },
{ text: 'Delete', onPress: () => console.log('delete'), destructive: true }
],
cancel: false
})
showActionSheetWithOptions
If you aren't comfortable using this API and would prefer to use the original, it is also available and behaves exactly the same as ActionSheetIOS.
Only require usage of ActionSheetAndroid
You can also import just ActionSheetAndroid by itself if you wish to manually handle different platforms.
The library was written in full Typescript, so it has full autocompletion support and will prompt you if you made any errors.
Feel free to leave feedback on the library!
https://github.com/aelesia/react-native-cross-actionsheet
https://www.npmjs.com/package/react-native-cross-actionsheet
Top comments (0)