Shows 24 hour time from 00:00 - 23:59
npm i react-native-time-picker-simple
import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import TimePicker from 'react-native-simple-time-picker';
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default class App extends Component {
state = {
selectedHours: 0,
selectedMinutes: 0,
}
render() {
const { selectedHours, selectedMinutes } = this.state;
return (
<View style={styles.container}>
<Text>{selectedHours}:{selectedMinutes}</Text>
<TimePicker
selectedHours={selectedHours}
selectedMinutes={selectedMinutes}
onChange={(hours, minutes) => this.setState({ selectedHours: hours, selectedMinutes: minutes })}
/>
</View>
);
}
}
Property | Type | Default | Description |
---|---|---|---|
selectedHours | Number | 0 | |
selectedMinutes | Number | 0 | |
onChange | Function | null | Callback function for when values are changed function(hours: number, minutes: number) => void |
hoursUnit | String | '' | Hours Unit for label |
minutesUnit | String | '' | Minutes Unit for label |