react-native-cross-actionsheet : Easy to use cross-platform ActionSheet with Native Android implementation
Tags: reactnative, actionsheet
Published: 2020-06-07 15:45:38

## Quickstart

yarn: `yarn add react-native-cross-actionsheet`

npm: `npm install react-native-cross-actionsheet`

```typescript
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                                          |
|----------------------------------------------|----------------------------------------------|
| <img src="https://i.imgur.com/HSPgkCw.gif"/> | <img src="https://i.imgur.com/XJ6rgw5.gif"/> |

# Background

Was a bit surprised to find out that while ReactNative had support for [iOS ActionSheets](https://reactnative.dev/docs/actionsheetios), 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 <ActionSheet/> 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
```typescript
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
```typescript
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
```typescript
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](https://github.com/aelesia/react-native-cross-actionsheet#actionsheetshowactionsheetwithoptions).

## Only require usage of ActionSheetAndroid

You can also import just [ActionSheetAndroid by itself](https://github.com/aelesia/react-native-cross-actionsheet#only-require-usage-of-actionsheetandroid) 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