react-native-super-timepicker v1.1.6

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)
• removing deprecated stuff like componentWillReceiveProps
• updated dependencies to the latest stuff

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

Methods

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.