/react-native-24h-timepicker

React Native 24 hours format TimePicker for iOS

Primary LanguageJavaScriptMIT LicenseMIT

react-native-24h-timepicker

npm version npm downloads

Screenshot

screenshot

Installation

npm i react-native-24h-timepicker --save

or

yarn add react-native-24h-timepicker

Example

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;

Props

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

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 with ❤️ by NY Samnang.