https://github.com/gxsshallot/react-native-general-actionsheet
ActionSheet api on iOS and Android same as ActionSheetIOS.
https://github.com/gxsshallot/react-native-general-actionsheet
actionsheet react-native
Last synced: 6 months ago
JSON representation
ActionSheet api on iOS and Android same as ActionSheetIOS.
- Host: GitHub
- URL: https://github.com/gxsshallot/react-native-general-actionsheet
- Owner: gxsshallot
- License: mit
- Created: 2018-11-20T02:38:24.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-07-10T05:13:54.000Z (almost 7 years ago)
- Last Synced: 2025-06-03T11:57:24.052Z (about 1 year ago)
- Topics: actionsheet, react-native
- Language: JavaScript
- Homepage:
- Size: 322 KB
- Stars: 23
- Watchers: 1
- Forks: 7
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-general-actionsheet
[](https://www.npmjs.com/package/react-native-general-actionsheet)
[](https://travis-ci.org/gaoxiaosong/react-native-general-actionsheet)
[中文说明](https://www.jianshu.com/p/2377cca9a58c)
This is a general ActionSheet api. You can use [ActionSheetIOS](https://facebook.github.io/react-native/docs/actionsheetios) in iOS and use a custom view in Android. Or you can use custom view in both iOS and Android.
It only support `ActionSheet.showActionSheetWithOptions` now.
## ScreenShots
### Portrait
### Landscape
## Install
Install by Yarn:
```shell
yarn add react-native-general-actionsheet
```
Install by NPM:
```shell
npm install --save react-native-general-actionsheet
```
## Usage
Use the module in file:
```javascript
import ActionSheet from 'react-native-general-actionsheet';
ActionSheet.showActionSheetWithOptions(options, callback);
```
Parameters `options` and `callback` is same as [ActionSheetIOS](https://facebook.github.io/react-native/docs/actionsheetios).
## Use `ActionSheetIOS`
You can change using `ActionSheetIOS` or not globally:
```javascript
import ActionSheet from 'react-native-general-actionsheet';
ActionSheet.useActionSheetIOS = true/false;
```
## Customize Style
You can change style of container globally.
```javascript
import ActionSheet from 'react-native-general-actionsheet';
ActionSheet.Container.defaultProps.xxx = yyy;
```
It supports following properties:
| Name | Type | Description |
| :-: | :-: | :- |
| backgroundColor | string | Background color of whole view |
| contentBackgroundColor | string | Background color of content view |
| separatorColor | string | Separator line color |
| fontSize | number | Button text font size |
| color | string | Button text color |
| titleStyle | object | Style of title text |
| messageStyle | object | Style of message text |
| destructiveButtonStyle | object | Style of destructive button |
| cancelButtonStyle | object | Style of cancel button |
| touchableUnderlayColor | string | Underlay color of button touch action |
| supportedOrientations | array | Supported orientations for iOS |