react-native-24h-timepicker

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.