# @selcouth-digital/react-native-action-sheet

> React Native Action Sheet with hooks

Latest version **1.2.0** (published 2019-07-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install @selcouth-digital/react-native-action-sheet
pnpm add @selcouth-digital/react-native-action-sheet
yarn add @selcouth-digital/react-native-action-sheet
bun add @selcouth-digital/react-native-action-sheet
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2019-07-29 |
| First published | 2019-05-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Author | Simon Wierzchowski |
| Maintainers | swierzchowski |
| Keywords | react-native-action-sheet, react native action sheet, actionsheet, action sheet, react-native, custom-action-sheet |

## Links

- npm: https://www.npmjs.com/package/@selcouth-digital/react-native-action-sheet
- Repository: https://github.com/SelcouthDigital/react-native-action-sheet
- Homepage: https://github.com/SelcouthDigital/react-native-action-sheet#readme
- Issues: https://github.com/SelcouthDigital/react-native-action-sheet/issues
- npm.io page: https://npm.io/package/@selcouth-digital/react-native-action-sheet

## Recent versions

- 1.2.0 (latest) — 2019-07-29
- 1.1.1 (alpha.1) — 2019-05-09
- 1.0.0 (beta) — 2019-05-09
- 1.1.5 — 2019-05-10
- 1.1.4 — 2019-05-10
- 1.1.3 — 2019-05-10
- 1.1.2 — 2019-05-10
- 1.1.0 — 2019-05-09
- 1.0.1 — 2019-05-09
- 0.2.2 — 2019-05-06
- 0.2.1 — 2019-05-05
- 0.2.0 — 2019-05-05
- 0.1.1 — 2019-05-05
- 0.1.0 — 2019-05-05

## README

# React Native - Action Sheet

React Native - Custom Action Sheet (with hooks).

<img src="https://github.com/SelcouthDigital/react-native-action-sheet/blob/master/examples/react-native-action-sheet.gif?raw=true" width="250">

## Notes

React Native Action Sheet cannot get dismissed programatically, so we've decided to use React Native Modal and imitate Action Sheet behaviour with it to enable dismissable option.

## Install

`yarn add @selcouth-digital/react-native-action-sheet`

## Usage

Simple example:

```javascript
import React, { Fragment, useState } from 'react'
import ActionSheet from '@selcouth-digital/react-native-action-sheet'

const Example = () => {
  const [showActionSheet, setShowActionSheet] = useState(false)
  
  const options = [
    {
      onPress: () => console.log('option 1 pressed'),
      title: 'Option 1'
    }
  ]
  
  return (
    <Fragment>
      <Button onPress={() => setShowActionSheet(true)} title="Open Action Sheet" />

      /*
       * note that the ActionSheet component has to be at the highest screen level
       * so it overlaps the other components
       */
      <ActionSheet
        onDismiss={() => setShowActionSheet(false)}
        options={options}
        visible={showActionSheet}
      />
    </Fragment>
  )
}

export default Example
```

## API

### Props

| Name           | Type    | Required?  | Default                 |
| -------------- |:-------:|:----------:|:-----------------------:|
| `options`      | Array   | -          |                         |
| `title`        | String  | -          | `'Select an option...'` |
| `visible`      | Boolean | `true`     | `false`                 |
| `CancelButton` | Node    | -          | -                       |
| `styles`*      | Object  | -          | -                       |

*see available styles below

### Methods

| Name         | Required?  | Description                |
| ------------ |:----------:|:--------------------------:|
| `onDismiss()`| `true`     | ActionSheet gets destroyed |

### Styles

| Name           | Description                             |
| -------------- |:---------------------------------------:|
| `overlayBox`   | Overlay wrapper (animated view)         |
| `overlay`      | Overlay "clickable" layer               |
| `body`         | Action Sheet wrapper (box)              |
| `titleBox`     | Title wrapper (box)                     |
| `titleText`    | Title text                              |
| `option`       | Option wrapper (box)                    |
| `optionText`   | Option text                             |
| `cancelButton` | Cancel button                           |

## TODO

* Add more Action Sheet types
* Add Gesture Handler to resize action sheet (when it's too long for half a screen)
* Unit Tests
* Add icons and subtitles to options

## PEER Dependencies

### Reanimated

We use [Ract Native Reanimated](https://github.com/kmagiera/react-native-reanimated) library for animating! Special thanks to @[kmagiera](https://github.com/kmagiera) for providing it!

___

### Created with ♥ by Selcouth.DIGITAL team

---
_Source: https://npm.io/package/@selcouth-digital/react-native-action-sheet · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._