https://github.com/lxfriday/react-native-customizable-actionsheet
a customizable actionsheet
https://github.com/lxfriday/react-native-customizable-actionsheet
react-native
Last synced: about 1 year ago
JSON representation
a customizable actionsheet
- Host: GitHub
- URL: https://github.com/lxfriday/react-native-customizable-actionsheet
- Owner: lxfriday
- License: mit
- Created: 2017-04-16T10:00:19.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-04-17T14:14:12.000Z (about 9 years ago)
- Last Synced: 2025-05-19T19:17:32.914Z (about 1 year ago)
- Topics: react-native
- Language: JavaScript
- Size: 1.27 MB
- Stars: 6
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-customizable-actionsheet
## Demos
|default|notitle|customize title or item|customize items|
|-------|-------|----------|---------------|
|
|
|
|
|
## Code
```js
// notitle
this.actionsheet = ref}
funcs={actionSheetFuncs}
actions={actionSheetActions}
/>
// customize the title
}
ref={ref => this.actionsheet = ref}
funcs={actionSheetFuncs}
actions={actionSheetActions}
/>
// OR
this.actionsheet = ref}
funcs={actionSheetFuncs}
actions={actionSheetActions}
/>
// customize items
import {Icon as IconElement} from 'react-native-elements';
import Communications from 'react-native-communications';
this.actionsheet = ref}
buttonComponents={}
/>
// actionSheetFuncs: [() => Communications.phonecall(phone, true), () => Communications.text(phone), () => {Clipboard.setString(phone);this.actionsheet.hide();} ],
// actionSheetActions: [{phone}, '发短信给' + 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)