# react-native-action-sheet-modal

> Cross platform action sheet design which supports on both Android and iOS.

Latest version **1.0.2** (published 2020-07-11) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-action-sheet-modal
pnpm add react-native-action-sheet-modal
yarn add react-native-action-sheet-modal
bun add react-native-action-sheet-modal
```

## 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.0.2 |
| Published | 2020-07-11 |
| First published | 2020-07-11 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 114.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Praveen, Sandhees |
| Maintainers | praveenmobdev |
| Keywords | react native action sheet modal, react-native-action-sheet-modal, action sheet modal, action-sheet-modal, action sheet, action-sheet |

## Links

- npm: https://www.npmjs.com/package/react-native-action-sheet-modal
- Repository: https://github.com/praveenmobdev/react-native-action-sheet-modal
- Homepage: https://github.com/praveenmobdev/react-native-action-sheet-modal#readme
- Issues: https://github.com/praveenmobdev/react-native-action-sheet-modal/issues
- npm.io page: https://npm.io/package/react-native-action-sheet-modal

## Dependencies (1)

- [react-native-modal](https://npm.io/package/react-native-modal.md) *

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 1.0.2 (latest) — 2020-07-11
- 1.0.1 — 2020-07-11
- 1.0.0 — 2020-07-11

## README

# react-native-action-sheet-modal

Highly customizable Action sheet modal for react native.

<p align="center">
    <img src="./demo.gif" height="500" />
</p>

## Setup

This library is available on npm, install it with: `npm i react-native-action-sheet-modal`.

## Usage

1.  Import Actionsheet from react-native-action-sheet-modal:

```javascript
import Actionsheet from 'react-native-action-sheet-modal';
```

2.  Create a modal and nest its content inside of it:

```javascript
function OptionsWindow() {
  return (
    <ActionSheet options={list} isVisible={visible} onClose={()=>onClose()} onChange={onChange}/>
  )
}
```

## A complete example

```javascript
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, { useState } from 'react';
import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
} from 'react-native';

import ActionSheet from 'react-native-action-sheet-modal'

const App = () => {
  const [visible, setVisible] = useState(false)
  const [result, setResult] = useState('')
  const list = [{ name: "Choose from camera", value: 'Choose from camera', extraData:{type:"video"} }, { name: "Choose from gallery", value: 'Choose from gallery', extraData:{type:"video"} }]

  function onChange(value, extraData) {
    setResult(value)
    onClose()
  }

  function onClose(){
    setVisible(false)
  }

  return (
    <>
      <ActionSheet options={list} isVisible={visible} onClose={()=>onClose()} onChange={onChange}/>
      <View style={styles.container}>
        <TouchableOpacity 
        onPress={()=>setVisible(true)}
        style={styles.button}><Text>Open</Text></TouchableOpacity>
        <Text>{result}</Text>
      </View>
    </>
  );
};



const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  button:{ paddingHorizontal: 20, marginVertical:20, paddingVertical: 10, backgroundColor: "cyan", borderRadius: 10, },
});

export default App;
```

## Props

| Name | Type | Required |Description  | Default |
|--|--|--|--|--|
| isVisible | boolean | Yes | boolean value(true/false) to open/close the action sheet. | false |
| onClose | function | Yes | function to call while clicking cancel button and the backdrop area | () => {} |
| options | array | Yes | list of options to display | [] |
| onChange | function | Yes | function to call while choosing an option | () => {} |
| hideCancel | boolean | No | to hide the bottom cancel button | false |
| cancelText | string | No | text to be display on the cancel button | "Cancel" |
| cancelTextStyle | object | No | to update the style of the cancel button text | |
| cancelContainerStyle | object | No | to update the style of the cancel button container | |
| optionsTextStyle | object | No | to update the text style of the options | |
| optionsContainerStyle | object | No | to update the options container style | |
| modalProps | object | No | It accepts all the props of the react-native-modal package. For all props, Kindly refer the react-native-modal package. | |

Pull requests, feedbacks and suggestions are welcome!

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