0.0.1 • Published 10 years ago
react-native-countdown-picker v0.0.1
react-native-countdown-picker
A wrapper on top of ActionSheetPicker-3.0 for displaying countdown timer in an actionsheet
Installation
npm i --save react-native-countdown-pickerYou need CocoaPods to install ActionSheetPicker-3.0.
To integrate ActionSheetPicker-3.0 into your Xcode project using CocoaPods, specify it in your Podfile:
pod 'ActionSheetPicker-3.0'Then, run the following command:
$ pod installAdd it to your iOS project
- Run
npm install react-native-countdown-picker --save - Open your project in XCode, right click on
Librariesand clickAdd Files to "Your Project Name"(Screenshot) then (Screenshot). - Add
libCJCountDownPicker.atoBuild Phases -> Link Binary With Libraries(Screenshot). - Whenever you want to use it within React code now you can:
var CountDownPicker = require('NativeModules').CountDownPicker;
Example
var CountDownPicker = require('NativeModules').CountDownPicker;
var ExampleApp = React.createClass({
showPicker: function() {
CountDownPicker.showCountDownPickerWithOptions({
title: 'show', //optional
countDownDuration: '' //optional intial time
}, (cancelled, duration) => {
if(cancelled) {
AlertIOS.alert('Error', 'select a time');
}
//duration is in seconds.
});
},
render: function() {
return (
<TouchableHighlight
onPress={this.showPicker}
underlayColor="#f7f7f7">
<View style={styles.container}>
<Image source={require('image!announcement')} style={styles.image} />
</View>
</TouchableHighlight>
);
}
});0.0.1
10 years ago