
Security News
High Salaries No Longer Enough to Attract Top Cybersecurity Talent
A survey of 500 cybersecurity pros reveals high pay isn't enough—lack of growth and flexibility is driving attrition and risking organizational security.
react-native-24h-timepicker
Advanced tools
npm i react-native-24h-timepicker --save
yarn add react-native-24h-timepicker
import React, { Component } from "react";
import { StyleSheet, View, TouchableOpacity, Text } from "react-native";
import TimePicker from "react-native-24h-timepicker";
class Example extends Component {
constructor() {
super();
this.state = {
time: ""
};
}
onCancel() {
this.TimePicker.close();
}
onConfirm(hour, minute) {
this.setState({ time: `${hour}:${minute}` });
this.TimePicker.close();
}
render() {
return (
<View style={styles.container}>
<Text style={styles.text}>REACT NATIVE</Text>
<Text style={styles.text}>24 HOURS FORMAT TIMEPICKER</Text>
<TouchableOpacity
onPress={() => this.TimePicker.open()}
style={styles.button}
>
<Text style={styles.buttonText}>TIMEPICKER</Text>
</TouchableOpacity>
<Text style={styles.text}>{this.state.time}</Text>
<TimePicker
ref={ref => {
this.TimePicker = ref;
}}
onCancel={() => this.onCancel()}
onConfirm={(hour, minute) => this.onConfirm(hour, minute)}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
backgroundColor: "#fff",
paddingTop: 100
},
text: {
fontSize: 20,
marginTop: 10
},
button: {
backgroundColor: "#4EB151",
paddingVertical: 11,
paddingHorizontal: 17,
borderRadius: 3,
marginVertical: 50
},
buttonText: {
color: "#FFFFFF",
fontSize: 16,
fontWeight: "600"
}
});
export default Example;
Prop | Type | Description | Default |
---|---|---|---|
maxHour | number | Maximum of hour | 23 |
maxMinute | number | Maximum of minute | 59 |
hourInterval | number | The interval at which hours can be selected. | 1 |
minuteInterval | number | The interval at which minutes can be selected. | 1 |
hourUnit | string | Add extra text to hour | "" |
minuteUnit | string | Add extra text to minute | "" |
selectedHour | string | Default hour | "0" |
selectedMinute | string | Default minute | "00" |
itemStyle | object | Item text style | {} |
textCancel | string | Cancel button text | Cancel |
textConfirm | string | Confirm button text | Confirm |
onCancel | function | Event on Cancel button | |
onConfirm | function | Event on Confirm button |
Method Name | Description |
---|---|
open | Open TimePicker |
close | Close TimePicker |
Always set ref
to TimePicker
and call each method by using this.TimePicker.methodName()
like example above.
This project is licensed under the MIT License - see the LICENSE.md file for details
Made with ❤️ by NY Samnang.
FAQs
React Native 24 hours format TimePicker for iOS
The npm package react-native-24h-timepicker receives a total of 62 weekly downloads. As such, react-native-24h-timepicker popularity was classified as not popular.
We found that react-native-24h-timepicker demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A survey of 500 cybersecurity pros reveals high pay isn't enough—lack of growth and flexibility is driving attrition and risking organizational security.
Product
Socket, the leader in open source security, is now available on Google Cloud Marketplace for simplified procurement and enhanced protection against supply chain attacks.
Security News
Corepack will be phased out from future Node.js releases following a TSC vote.