react-native-cross-action-sheet

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

• Native Android and iOS 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 @tadth/react-native-cross-action-sheet

npm: npm install @tadth/react-native-cross-action-sheet

import ActionSheet from '@tadth/react-native-cross-action-sheet'

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

Usage

ActionSheet.options

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

Name	Type	Required	Default
title	string	No
message	string	No
options	{ text, onPress, destructable }	Yes
.text	string	Yes
.onPress	() => void	No
.destructable	boolean	No	false
cancel	{ text, onPress } OR false	Yes
.text	string	No	'Cancel'
.onPress	() => void	No
tintColor	string (eg. '#0088FF')	No
anchor (iOS)	number	No

Simple

import ActionSheet from '@tadth/react-native-cross-action-sheet'
...
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 '@tadth/react-native-cross-action-sheet'
...
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 '@tadth/react-native-cross-action-sheet'
...
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 '@tadth/react-native-cross-action-sheet'
...
ActionSheet.showActionSheetWithOptions(
  { 
    options: ['Create', 'Edit', 'Delete', 'Cancel'] 
  },
  buttonIndex => {
    console.log('buttonIndex', buttonIndex)
  }
)

Additional Options

import ActionSheet from '@tadth/react-native-cross-action-sheet'
...
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)
  }
)

ActionSheet.dismiss

Dismisses the most upper action sheet presented.

import ActionSheet from '@tadth/react-native-cross-action-sheet'
...
ActionSheet.dismiss()

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.