# react-native-actionsheet Cross platform ActionSheet. This component implements a custom ActionSheet and provides the same way to drawing it on the defferent platforms(iOS and Android). Actually, In order to keep the best effect, it still uses the ActionSheetIOS on iOS.

## Install ``` npm install react-native-actionsheet --save ``` ## Usage ```js import ActionSheet from 'react-native-actionsheet' class Demo extends React.Component { showActionSheet = () => { this.ActionSheet.show() } render() { return ( Open ActionSheet this.ActionSheet = o} title={'Which one do you like ?'} options={['Apple', 'Banana', 'cancel']} cancelButtonIndex={2} destructiveButtonIndex={1} onPress={(index) => { /* do something */ }} /> ) } } ``` ### Use ActionSheetCustom directly so you can customize option and title ```js import { ActionSheetCustom as ActionSheet } from 'react-native-actionsheet' const options = [ 'Cancel', 'Apple', Banana, 'Watermelon', Durian ] class Demo extends React.Component { showActionSheet = () => { this.ActionSheet.show() } render() { return ( Open ActionSheet this.ActionSheet = o} title={Which one do you like?} options={options} cancelButtonIndex={0} destructiveButtonIndex={4} onPress={(index) => { /* do something */ }} /> ) } } ``` ### How to redesign style ? The style of ActionSheet is defined in [lib/styles.js](https://github.com/beefe/react-native-actionsheet/blob/master/lib/styles.js). We can pass the `styles` prop to cover default style. See [Example](https://github.com/beefe/react-native-actionsheet/blob/master/example/app/ExampleB.js#L48) . ```javascript // example const styles = { titleBox: { background: 'pink' }, titleText: { fontSize: 16, color: '#000' } } ``` ## Props https://github.com/beefe/react-native-actionsheet/blob/master/lib/options.js

Prop name	Desciption	Type	Default
title		PropTypes.string or PropTypes.element
message		PropTypes.string or PropTypes.element
options		PropTypes.arrayOf([PropTypes.string, PropTypes.element])
tintColor		PropTypes.string
cancelButtonIndex		PropTypes.number
destructiveButtonIndex		PropTypes.number
onPress		PropTypes.func	(index) => {}
styles	only for ActionSheetCustom		{}

패키지	다운로드	Stars	크기	Issues	발행일	라이선스

react-native-actionsheet	15,592	1,355	15.6 kB	104	-	MIT