# react-native-super-timepicker > React Native 24-hour super TimePicker for iOS Latest version **1.1.6** (published 2020-10-04) · MIT license · 0 weekly downloads ## Install ```sh npm install react-native-super-timepicker pnpm add react-native-super-timepicker yarn add react-native-super-timepicker bun add react-native-super-timepicker ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.1.6 | | Published | 2020-10-04 | | First published | 2020-10-04 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 1 | | Unpacked size | 14.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | Philip Su | | Maintainers | fivecar | | Keywords | react native, 24 hour, twenty four hour, time picker ios, number picker ios, time picker, react native time picker, react native timepicker | ## Links - npm: https://www.npmjs.com/package/react-native-super-timepicker - Repository: https://github.com/auderephilip/react-native-super-timepicker - Homepage: https://github.com/auderephilip/react-native-super-timepicker#readme - Issues: https://github.com/auderephilip/react-native-super-timepicker/issues - npm.io page: https://npm.io/package/react-native-super-timepicker ## Dependencies (1) - [react-native-raw-bottom-sheet](https://npm.io/package/react-native-raw-bottom-sheet.md) ^1.1.4 ## Alternatives - [random-seedable](https://npm.io/package/random-seedable.md) — 27.9K weekly downloads - [n2words](https://npm.io/package/n2words.md) — 22.2K weekly downloads - [@stdlib/math-base-special-factorialln](https://npm.io/package/@stdlib/math-base-special-factorialln.md) — 5.7K weekly downloads - [@stdlib/math-base-special-abs2](https://npm.io/package/@stdlib/math-base-special-abs2.md) — 1.7K weekly downloads - [commons-math-interpolation](https://npm.io/package/commons-math-interpolation.md) — 1.4K weekly downloads ## Recent versions - 1.1.6 (latest) — 2020-10-04 - 1.1.5 — 2020-10-04 - 1.1.4 — 2020-10-04 - 1.1.3 — 2020-10-04 - 1.1.2 — 2020-10-04 - 1.1.1 — 2020-10-04 - 1.1.0 — 2020-10-04 ## README # react-native-super-timepicker [![npm version](https://badge.fury.io/js/react-native-super-timepicker.svg)](//npmjs.com/package/react-native-super-timepicker) [![npm downloads](https://img.shields.io/npm/dm/react-native-super-timepicker.svg) ](//npmjs.com/package/react-native-super-timepicker) ## Summary A 24-hour format time picker which improves on [react-native-24h-timepicker](https://www.npmjs.com/package/react-native-24h-timepicker) by: - supporting `minHour` and `maxHour` (contribution by [mindmind](https://github.com/mindmind)) - removing deprecated stuff like `componentWillReceiveProps` - updated dependencies to the latest stuff ### Screenshot ![screenshot](https://user-images.githubusercontent.com/42978089/95019985-60a24e80-061d-11eb-9fad-fb9d437ca7b0.gif) ## Installation ``` npm i react-native-super-timepicker --save ``` ### or ``` yarn add react-native-super-timepicker ``` ## Example ```jsx import React, { Component } from "react"; import { StyleSheet, View, TouchableOpacity, Text } from "react-native"; import TimePicker from "react-native-super-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 ( REACT NATIVE 24 HOURS FORMAT TIMEPICKER this.TimePicker.open()} style={styles.button} > TIMEPICKER {this.state.time} { this.TimePicker = ref; }} onCancel={() => this.onCancel()} onConfirm={(hour, minute) => this.onConfirm(hour, minute)} /> ); } } 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; ``` ## Props | Prop | Type | Description | Default | | ------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------- | | minHour | number | Minimum of hour | 0 | | maxHour | number | Maximum of hour | 23 | | minMinute | number | Minimum of minute | 0 | | 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 (e.g. "hrs"). Include a space if you want a gap between the number and the text (e.g. " hrs" for "18 hrs") | "" | | hourUnitSingular | string | The first hour's extra text, if not hourUnit (e.g. "1 hr" vs "2 hrs") | "" | | minuteUnit | string | Add extra text to minute (e.g. "mins"). Include a space if you want a gap between the number and the text (e.g. " mins" for "4 mins") | "" | | minuteUnitSingular | string | The first minute's extra text, if not minuteUnit (e.g. "1 min" vs "2 mins") | "" | | 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 | | ## Methods | Method Name | Description | | ----------- | ---------------- | | open | Open TimePicker | | close | Close TimePicker | ### Note Always set `ref` to `TimePicker` and call each method by using `this.TimePicker.methodName()` like example above. ## License This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/auderephilip/react-native-super-timepicker/blob/master/LICENSE) file for details ## Author Made by [Philip Su](https://github.com/auderephilip), with thanks to original author NYSamnang. Repo was forked to provide more active maintenance and to accept others' pull requests. --- _Source: https://npm.io/package/react-native-super-timepicker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._