Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/4catalyzer/react-native-actionsheet-picker
A wrapper on top of [ActionSheetPicker-3.0](https://github.com/skywinder/ActionSheetPicker-3.0) for displaying string picker in an actionsheet
https://github.com/4catalyzer/react-native-actionsheet-picker
Last synced: about 1 month ago
JSON representation
A wrapper on top of [ActionSheetPicker-3.0](https://github.com/skywinder/ActionSheetPicker-3.0) for displaying string picker in an actionsheet
- Host: GitHub
- URL: https://github.com/4catalyzer/react-native-actionsheet-picker
- Owner: 4Catalyzer
- Created: 2016-05-23T14:44:51.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-10-27T08:48:46.000Z (about 4 years ago)
- Last Synced: 2024-08-08T16:33:46.741Z (5 months ago)
- Language: Objective-C
- Size: 13.7 KB
- Stars: 14
- Watchers: 6
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-native-actionsheet-picker
A wrapper on top of [ActionSheetPicker-3.0](https://github.com/skywinder/ActionSheetPicker-3.0) for displaying string picker in an actionsheet
### Installation
```bash
npm i --save react-native-actionsheet-picker
```
You need CocoaPods to install `ActionSheetPicker-3.0`.
To integrate ActionSheetPicker-3.0 into your Xcode project using CocoaPods, specify it in your `Podfile`:
```ruby
pod 'ActionSheetPicker-3.0'
```
Then, run the following command:
```bash
$ pod install
```
### Add it to your iOS project
1. Run `npm install react-native-actionsheet-picker --save`
2. Open your project in XCode, right click on `Libraries` and click `Add
Files to "Your Project Name"` [(Screenshot)](http://url.brentvatne.ca/jQp8) then [(Screenshot)](http://url.brentvatne.ca/1gqUD).
3. Add `libCJActionSheetPicker.a` to `Build Phases -> Link Binary With Libraries`
[(Screenshot)](http://url.brentvatne.ca/17Xfe).
4. Whenever you want to use it within React code now you can: `var CountDownPicker = require('NativeModules').CJActionSheetPicker;`
## Example `ActionSheetPicker`
```javascript
var ActionSheetPicker = require('NativeModules').CJActionSheetPicker;
var ExampleApp = React.createClass({
showPicker: function() {
ActionSheetPicker.showStringPicker({
title: 'Fruits', //optional
selectedIndex: 1 //optional intial time,
rows: ['apple', 'orange']
}).then(({ cancelled, selectedIndex, selectedValue }) => {
// console.log(selectedIndex)
});
},
render: function() {
return (
);
}
});
```
## Example `ActionSheetPicker` with multiple selection
This depends on [this PR](https://github.com/skywinder/ActionSheetPicker-3.0/pull/321), you can use it now by changing your `Podfile` to:
```ruby
pod 'ActionSheetPicker-3.0', :git => 'https://github.com/oblador/ActionSheetPicker-3.0.git', :branch => 'feature/multiple-selection'
```
```javascript
import { showStringPicker } from 'react-native-actionsheet-picker';
showStringPicker({
title: 'Fruits',
multiple: true,
selectedIndices: [1, 2],
rows: ['apple', 'orange', 'pear', 'potato']
}).then(({ cancelled, selectedIndices, selectedValues }) => {
// console.log(selectedValues);
});
```
## Example `CountDownPicker`
```javascript
var CountDownPicker = require('NativeModules').CJCountDownPicker;
var ExampleApp = React.createClass({
showPicker: function() {
CountDownPicker.showCountDownPicker({
title: 'show', //optional
countDownDuration: '' //optional intial time
}).then(({ cancelled, selectedDate }) => {
if(cancelled) {
AlertIOS.alert('Error', 'select a time');
}
//duration is in seconds.
});
},
render: function() {
return (
);
}
});
```