React Native Time Input 🕓

This package works on both Android and iOS

Preview

Try it out

You can run the example module by performing these steps:

$ git clone [email protected]:tighten/react-native-time-input.git
$ yarn
$ yarn example start

Installation

You can install this package by running one of the following commands:

NPM

npm i @tighten/react-native-time-input

Yarn

yarn add @tighten/react-native-time-input

Usage

import React, { useState } from 'react';
import { Text, View } from 'react-native';
import TimeInput from '@tighten/react-native-time-input';

const MyApp = () => {
  const [time, setTime] = useState('');

  const handleTimeChange = (time, validTime) => {
    if (!validTime) return;

    setTime(time);
  }

  return (
    <View>
      <TimeInput 
        setCurrentTime 
        onTimeChange={handleTimeChange} 
      />

      <Text>Current time entered is: {time}</Text>
    </View>
  );
}

export default MyApp;

Props

Prop	Default	Type	Description
theme		TimeInputTheme	See the customization section below for configuration instructions
styles		TimeInputStyle	See the customization section below for configuration instructions
errorText	"Please enter a valid time."	string	The message that is displayed when the user enters an invalid time.
initialTime	null	Date	Optionally set the initial time for the input on first render.
setCurrentTime	false	boolean	Decide if the input should load with the user's current time set as it's value. This prop is ignored when an initialTime is passed in.
onTimeChange	(localeTime, isValid) => {}	function	A callback function that runs when the value of the time input or meridiem is changed. Receives a locale time string (hh:mm a) and a boolean value specifying if the time is valid.

Customization

The look and feel of this component is completely customizable.

Theme

You can implement minimal changes to the look and feel by adjusting the default theme's color values for elements inside the component. Hex color codes and named color text strings (e.g., blue) are valid values. Here's what's available:

Prop	Default
errorTextColor	#c0392b
inputBackgroundColor	#ffffff
inputBorderColor	#a6a6a6
inputTextColor	#2e2e2e
toggleBackgroundColor	#e6e6e6
toggleButtonActiveBackgroundColor	#a6a6a6
toggleButtonActiveTextColor	#ffffff
toggleButtonBackgroundColor	#e6e6e6
toggleButtonTextColor	#2e2e2e

Example

import React from 'react';
import TimeInput from '@tighten/react-native-time-input';

export const MyApp = () => {
  return (
    <TimeInput 
      theme={{
        inputBackgroundColor: '#000000',
        inputTextColor: '#ffff00',
      }} 
    />
  )
};

Styles

Note: Theme overrides take precedent over all other styles.

If you want to make adjustments to the component's layout, you can pass in a style object to override the default styles.

Prop	Description
componentContainer	A wrapper View element that surrounds all elements in the component
container	A wrapper View element that surrounds the text input and meridiem toggle
input	The TextInput field
toggle	A wrapper View element that surrounds the meridiem toggle and buttons
toggleButton	The TouchableOpacity (iOS) or TouchableNativeFeedback (Android) element for AM and PM
toggleButtonActive	An Animated.View element
errorText	The Text field displayed below the input when there are errors

Example

import React from 'react';
import TimeInput from '@tighten/react-native-time-input';

export const MyApp = () => {
  return (
    <TimeInput 
      styles={{
        componentContainer: {
          borderStyle: 'solid',
          borderWidth: 2,
          paddingHorizontal: 20,
        },
      }} 
    />
  )
};

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT