Reactnative TimePicker

Reactnative TimePicker is a custom component for React Native applications that allows users to select time easily and efficiently. It provides a sleek and intuitive user interface with handy features such as slider, hour and minute inputs, and 12/24-hour format support.

Features

• Easy to use and integrate with React Native applications
• Support for both iOS and Android platforms
• Can be customized to adapt to various design styles
• 12/24-hour format support
• Slider input for selecting from preset times
• Hour and minute inputs for precise selections

Installation

To use Reactnative TimePicker in your React Native project, run the following command:

yarn add react-native-timepicker

or

npm install react-native-timepicker

Usage

Here is an example of how to use Reactnative TimePicker in your React Native project:

import React, { useState } from "react";
import { Text, View, StyleSheet } from "react-native";
import TimePicker from "react-native-timepicker";

export default function App() {
  const [selectedTime, setSelectedTime] = useState("12:00 AM");
  const [showPicker, setShowPicker] = useState(false);

  const onTimeSelected = (hours, minutes) => {
    setShowPicker(false);
    let time = formatTime(hours, minutes);
    setSelectedTime(time);
  };

  const formatTime = (hours, minutes) => {
    let ampm = hours >= 12 ? "PM" : "AM";
    hours = hours % 12;
    hours = hours ? hours : 12; // the hour '0' should be '12'
    minutes = minutes < 10 ? "0" + minutes : minutes;
    let strTime = hours + ":" + minutes + " " + ampm;
    return strTime;
  };

  return (
    <View style={styles.container}>
      <Text>{selectedTime}</Text>

      {showPicker && (
        <TimePicker
          onCancel={() => setShowPicker(false)}
          onTimeSelected={onTimeSelected}
        />
      )}

      <Button title="Select Time" onPress={() => setShowPicker(true)} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

Props

Reactnative TimePicker supports the following props:

| Prop | Type | Required | Description | | ---------------- | -------- | -------- | ----------------------------------------------------------------- | | onTimeSelected | function | Yes | Callback function called when a time is selected | | onCancel | function | No | Callback function called when the 'Cancel' button is pressed | | hours | number | No | The initial hour value to be displayed on the TimePicker | | minutes | number | No | The initial minute value to be displayed on the TimePicker | | format24 | boolean | No | Determines if the TimePicker should display in 24-hour mode or not | | textColor | string | No | The color of the text within the TimePicker | | selectedColor | string | No | The background color of the selected time slot | | unselectedColor | string | No | The background color of the unselected time slots | | sliderLineColor | string | No | The color of the line behind the slider handle | | sliderThumbColor | string | No | The color of the slider handle |

Conclusion

Reactnative TimePicker is an excellent solution for implementing time selection functionality in React Native applications. It is easy to use, customizable, and supports both iOS and Android platforms. With its slider, hour and minute inputs, and 12/24-hour format support, users can effortlessly select time according to their preferences.