Awesome
React Native TimePicker For iOS
React native custom timepicker (24 hours format) for iOS
Screenshots
Installation
$ npm i react-native-timepicker --save
Basic Usage
import React, {
AppRegistry,
Component,
View,
StyleSheet
} from 'react-native';
import TimePicker from 'react-native-timepicker';
export default class App extends Component {
constructor() {
super();
}
_onValueChange = (hour, minute) => {
console.log("Selected time:", hour, ':', minute);
};
render() {
return (
<View style={styles.container}>
<TimePicker
style={styles.picker}
selectedHour={0}
selectedMinute={30}
minuteInterval={5}
onValueChange={this._onValueChange}
loop={true} />
</View>
);
}
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#D9D9D9'
},
picker: {
backgroundColor: '#E5E5E5'
}
});
AppRegistry.registerComponent('App', () => App);
Properties - Basic
Prop | Default | Type | Description |
---|
selectedHour | 0 | number | Set default hour |
selectedMinute | 0 | number | Set default minute |
minuteInterval | 1 | number | Set interval at which minutes can be selected |
loop | false | bool | Set component wrap around property |
style | {...} | style | Set style for timepicker container |
Properties - Methods
Prop | Params | Type | Description |
---|
onValueChange | hour , minute | function | onValueChange method is called when hours or minutes value was changed |