react-native-cross-actionsheet v1.0.1

react-native-cross-actionsheet

Simple to use, static API, cross platform ActionSheets using Native Android ActionSheets and ActionSheetIOS.

• Native Android ActionSheets
• Simple API that can be statically called (no JSX components)
• Feature parity with iOS
• Modern sleek UI
• Typescript support
• Async support

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

Usage

ActionSheet.options

It's recommended to use the ActionSheet.options API as it is cleaner, more straightforward to use, and allows awaiting.

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
})

ActionSheet.showActionSheetWithOptions

If you wish to stick with the traditional API, you can call ActionSheet.showActionSheetWithOptions, which uses the exact same API as ActionSheetIOS.

anchor is only used for iOS.

Simple

import { ActionSheet } from 'react-native-cross-actionsheet'
ActionSheet.showActionSheetWithOptions(
  { 
    options: ['Create', 'Edit', 'Delete', 'Cancel'] 
  },
  buttonIndex => {
    console.log('buttonIndex', buttonIndex)
  }
)

Additional Options

import { ActionSheet } from 'react-native-cross-actionsheet'
ActionSheet.showActionSheetWithOptions(
  {
    title: 'Action Sheet',
    message: 'Choose an option',
    options: ['Create', 'Edit', 'Delete', 'Cancel'],
    destructiveButtonIndex: 2,
    cancelButtonIndex: 3,
    tintColor: '#008888'
  },
  buttonIndex => {
    console.log('buttonIndex', buttonIndex)
  }
)

Only require usage of ActionSheetAndroid

If you only wish to import ActionSheetAndroid as you wish to handle ActionSheets differently for different platforms, then you may import it directly:

import { ActionSheetAndroid } from 'react-native-cross-actionsheet'

ActionSheetAndroid.showActionSheetWithOptions({
... // same as AndroidSheetIOS
})

Why Native?

You may be wondering, why do you need a native implementation when the JS implementation can also do the same job?

JS implementations require you to include the <ActionSheet/> component somewhere in your code. As this is a native implementation and not rendered on the React level, no JSX components are required. Just call the ActionSheet statically.

For JS implementations, ActionSheets are rendered at the same level as your Modal. In some cases where Modals are not properly written, this may cause a conflict when you attempt to render an ActionSheet on top of a Modal. As this uses a native Android implementation, it will always render on top of your React layer.