react-native-super-timepicker

react-native-super-timepicker

Summary

A 24-hour format time picker which improves on react-native-24h-timepicker by:

• supporting minHour and maxHour (contribution by mindmind)
• putting a space gap between the number and the label (e.g. "24 mins" instead of "24mins")
• removing deprecated stuff like componentWillReceiveProps

Screenshot

Installation

npm i react-native-super-timepicker --save

or

yarn add react-native-super-timepicker

Example

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 (
      <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;

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")	""
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")	""
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 file for details

Author

Made by Philip Su, with thanks to original author NYSamnang. Repo was forked to provide more active maintenance and to accept others' pull requests.