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