https://github.com/grovertb/react-native-actionsheet
https://github.com/grovertb/react-native-actionsheet
Last synced: 9 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/grovertb/react-native-actionsheet
- Owner: grovertb
- License: mit
- Created: 2020-11-12T04:01:41.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-11-12T04:07:31.000Z (over 5 years ago)
- Last Synced: 2025-09-21T03:59:47.303Z (10 months ago)
- Language: JavaScript
- Size: 635 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @grovertb/react-native-actionsheet
* [ FIX ] [react-native-actionsheet](https://github.com/beefe/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 @grovertb/react-native-actionsheet --save
```
## Usage
```js
import ActionSheet from '@grovertb/react-native-actionsheet'
const Demo = () => {
const actionSheetRef = React.useRef();
const _handleShowActionSheet = () => {
actionSheetRef.current.show()
}
return (
Open ActionSheet
{ /* do something */ }}
/>
)
}
```
### Use ActionSheetCustom directly
so you can customize option and title
```js
import { ActionSheetCustom as ActionSheet } from '@grovertb/react-native-actionsheet'
const options = [
'Cancel',
'Apple',
Banana,
'Watermelon',
Durian
]
const Demo = () => {
const actionSheetRef = React.useRef();
const _handleShowActionSheet = () => {
actionSheetRef.current.show()
}
return (
Open ActionSheet
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
Prop name
Description
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
{}