# react-native-customizable-actionsheet

> a customizable actionsheet , you will love it

Latest version **1.1.1** (published 2017-04-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-customizable-actionsheet
pnpm add react-native-customizable-actionsheet
yarn add react-native-customizable-actionsheet
bun add react-native-customizable-actionsheet
```

## 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.1.1 |
| Published | 2017-04-17 |
| First published | 2017-04-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | lxfriday |
| Maintainers | lxfriday |
| Keywords | actionsheet, action-sheet, customizable |

## Links

- npm: https://www.npmjs.com/package/react-native-customizable-actionsheet
- Repository: https://github.com/lxfriday/react-native-customizable-actionsheet
- Homepage: https://github.com/lxfriday/react-native-customizable-actionsheet#readme
- Issues: https://github.com/lxfriday/react-native-customizable-actionsheet/issues
- npm.io page: https://npm.io/package/react-native-customizable-actionsheet

## Recent versions

- 1.1.1 (latest) — 2017-04-17
- 1.1.0 — 2017-04-17
- 1.0.6 — 2017-04-16
- 1.0.5 — 2017-04-16
- 1.0.4 — 2017-04-16
- 1.0.3 — 2017-04-16
- 1.0.1 — 2017-04-16
- 1.0.0 — 2017-04-16

## README

# react-native-customizable-actionsheet

## Demos 

|default|notitle|customize title or item|customize items|
|-------|-------|----------|---------------|
|<img src="https://github.com/lxfriday/react-native-customizable-actionsheet/blob/master/img/default.png?raw=true" width=250 />|<img src="https://github.com/lxfriday/react-native-customizable-actionsheet/blob/master/img/notitle.png?raw=true" width=250 />|<img src="https://github.com/lxfriday/react-native-customizable-actionsheet/blob/master/img/customize_title_item.png?raw=true" width=250 />|<img src="https://github.com/lxfriday/react-native-customizable-actionsheet/blob/master/img/customize_items.png?raw=true" width=250 />|

<img src="https://github.com/lxfriday/react-native-customizable-actionsheet/blob/master/img/actionsheet.gif?raw=true" width=250 />

## Code
```js
// notitle
<ActionSheet
  ref={ref => this.actionsheet = ref}
  funcs={actionSheetFuncs}
  actions={actionSheetActions}
/>

// customize the title 
<ActionSheet
  title={<IconElement name='call' size={15} color='red'/>}
  ref={ref => this.actionsheet = ref}
  funcs={actionSheetFuncs}
  actions={actionSheetActions}
/>

// OR

<ActionSheet
  title={'电话'}
  ref={ref => this.actionsheet = ref}
  funcs={actionSheetFuncs}
  actions={actionSheetActions}
/>

// customize items
import {Icon as IconElement} from 'react-native-elements';
import Communications from 'react-native-communications';
<ActionSheet
  title={'电话'}
  ref={ref => this.actionsheet = ref}
  buttonComponents={<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}><IconElement name='call' size={50} color='red' raised reverse/></View>}
/>

// actionSheetFuncs: [() => Communications.phonecall(phone, true), () =>  Communications.text(phone), () => {Clipboard.setString(phone);this.actionsheet.hide();} ],
// actionSheetActions: [<View style={{flexDirection: 'row'}}><IconElement name='call' color='blue' size={15}/><Text>{phone}</Text></View>, '发短信给' + phone, '复制号码' ],

```

## API
|Property|Type|Default|Description|
|:-------|:---|:------|:----------|
|`funcs`|array of `function`|`[]`|function|
|`actions`|arrayof (`React.Component` or `string`)|`[]`|item title name|
|`title`|`React.Component` or `string`|`''`|top title|
|`buttonShows`|`number`|`6`|number of items to show|
|`buttonHeight`|`number`|`50`|item height|
|`buttonComponents`|`React.Component`|`null`|customize it youself **when set, actions and funcs will be useless**|
|`buttonComponentsHeight`|`number`|`150`|buttonComponentsHeight use with buttonComponents|
|`animationType`|[Easing](http://facebook.github.io/react-native/docs/easing.html)|`Easing.elastic(1)`|Animated.timing(v,{easing: `animationType`})|



## You Can Enjoy Customization

## [License](https://github.com/lxfriday/react-native-customizable-actionsheet/blob/master/LICENSE)

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