Rn-time-picker NPM

React Native TimePicker

A customizable clock-style time picker component for React Native. This library allows you to create a visually appealing and fully customizable time picker that supports hours, minutes, and period selection (AM/PM).

Features

Customization options of each component
Drag-and-drop time selection

Demo

https://github.com/user-attachments/assets/20e90cdb-b379-470a-afd4-a0b25a0b888c

Installation

To install the library, run:

npm install react-native-timepicker --save

yarn add react-native-timepicker

Usage

Here's an example of how to use the TimePicker component in your project:

import TimePicker from "rn-time-picker"

export default function BasicTimePickerExample(){
    return (
        <TimePicker
        radius={120}
        numberRadius={100}
        customStyles={{
          container: {
            backgroundColor: "gray",
            padding: 12,
            borderRadius: 10
          },
          clock: {
            backgroundColor: "#1A1A1D"
          }
        }}
        colors={{ clockActiveColor: "#6A1E55", topActiveColor: "rgba(166, 77, 121,0.7)", topActiveTextColor: "white", }} />

     
    )
}

Props

Required Props

Prop	Type	Description
radius	number	The radius of the clock circle.

Optional Props

Prop	Type	Default Value	Description
numberRadius	number	radius - 40	The radius for positioning clock numbers.
colors	Colors	See below	Custom colors for the clock elements.
initialHour	number	12	The initial hour value.
initialMinute	number	0	The initial minute value.
initialPeriod	'am' \| 'pm'	'am'	Initial period setting
customComponents	Custom Components Object	-	Provide custom React components to override specific parts of the TimePicker.
customStyles	CustomStyles	-	Custom styles for the TimePicker and its elements.
onValueChange	(hour, minute, period) => void	-	Callback function triggered when the time value changes.

Customization

Custom Styles

You can pass a customStyles object to override default styles for various parts of the TimePicker:

Key	Type	Description
container	ViewStyle	Style for the overall container.
clock	ViewStyle	Style for the clock's outer circle.
activeNumber	TextStyle	Style for the currently selected number.
clockText	TextStyle	Style for clock numbers.
indicatorLine	ViewStyle	Style for the indicator line.
centerComponent	ViewStyle	Style for the clock center component.

Custom Components

You can provide your own React components to replace certain elements of the TimePicker:

Key	Type	Description
CenterComponent	React.ReactNode	Custom center element of the clock.
LineComponent	React.ReactNode	Custom line connecting the center to numbers.
EndComponent	React.ReactNode	Custom end component for clock hand.
NumberComponent	(props: { value: number, isActive: boolean }) => React.ReactNode	Custom component for clock numbers.
TopComponent	(props) => React.ReactNode	Custom top section displaying hours, minutes, and AM/PM.

Default Colors

If you don't provide custom colors, the following defaults are used:

const defaultColors = {
  clockActiveColor: 'rgb(76, 175, 80)',
  clockActiveTextColor: 'black',
  topActiveColor: 'rgb(200, 230, 201)',
  topInActiveColor: 'rgb(240, 240, 240)',
  topInActiveTextColor: 'rgb(97, 97, 97)',
};

Example with Custom Components

You can also find this is the example app in example/src/components/customizedComponent.tsx

import { StyleSheet, Text, TouchableHighlight, View, TextStyle, ViewStyle } from 'react-native';
import TimePicker, { Mode } from "rn-time-picker";

interface NumberComponentProps {
  value: number;
  isActive: boolean;
}

interface TopComponentProps {
  hour: number;
  minute: number;
  switchMode: (mode: Mode) => void;
  activeMode: Mode;
  period: "am" | "pm";
  setPeriod: (period: "am" | "pm") => void;
}

interface StyleTypes {
  container: ViewStyle;
  timePickerContainer: ViewStyle;
  timePickerClock: ViewStyle;
  activeNumber: TextStyle;
  inActiveNumber: TextStyle;
  numberComponent: TextStyle;
  activeNumberComponent: ViewStyle;
  timeText: TextStyle;
  activeTimeText: ViewStyle;
  amPmContainer: ViewStyle;
  periodContainer: ViewStyle;
  activePeriodAM: ViewStyle;
  activePeriodPM: ViewStyle;
  amPmText: TextStyle;
  activePeriodText: TextStyle;
}

export default function CustomizedTimePickerExample(): JSX.Element {
  const NumberComponent = ({ value, isActive }: NumberComponentProps): JSX.Element => (
    <Text style={[
      styles.numberComponent,
      isActive && styles.activeNumberComponent
    ]}>
      {value}
    </Text>
  );

  const TopComponent = ({
    hour,
    minute,
    switchMode,
    activeMode,
    period,
    setPeriod
  }: TopComponentProps): JSX.Element => {
    return (
      <View style={styles.container}>
        <Text
          style={[
            styles.timeText,
            activeMode === Mode.HOUR && styles.activeTimeText
          ]}
          onPress={() => switchMode(Mode.HOUR)}
        >
          {hour.toString().padStart(2, "0")}
        </Text>

        <Text
          style={[
            styles.timeText,
            activeMode === Mode.MINUTE && styles.activeTimeText
          ]}
          onPress={() => switchMode(Mode.MINUTE)}
        >
          {minute.toString().padStart(2, "0")}
        </Text>

        <TouchableHighlight
          onPress={() => setPeriod(period === "am" ? "pm" : "am")}
          style={styles.amPmContainer}
        >
          <>
            <View
              style={[
                styles.periodContainer,
                period === "am" && styles.activePeriodAM
              ]}
            >
              <Text
                style={[
                  styles.amPmText,
                  period === "am" && styles.activePeriodText
                ]}
              >
                AM
              </Text>
            </View>

            <View
              style={[
                styles.periodContainer,
                period === "pm" && styles.activePeriodPM
              ]}
            >
              <Text
                style={[
                  styles.amPmText,
                  period === "pm" && styles.activePeriodText
                ]}
              >
                PM
              </Text>
            </View>
          </>
        </TouchableHighlight>
      </View>
    );
  };

  return (
    <TimePicker
      radius={140}
      numberRadius={110}
      customComponents={{
        NumberComponent,
        TopComponent
      }}
      customStyles={{
        container: styles.timePickerContainer,
        clock: styles.timePickerClock,
        activeNumber: styles.activeNumber,
        inActiveNumber: styles.inActiveNumber
      }}
      colors={{
        clockActiveColor: "#FF6500",
        topActiveColor: "#0B192C",
        topActiveTextColor: "white",
        topInActiveTextColor: "black"
      }}
    />
  );
}

const styles = StyleSheet.create<StyleTypes>({
  container: {
    flexDirection: "row",
    gap: 12,
  },
  timePickerContainer: {
    backgroundColor: "gray",
    padding: 12,
    borderRadius: 10
  },
  timePickerClock: {
    backgroundColor: "#1E3E62"
  },
  activeNumber: {
    fontSize: 19,
    width: 40,
    height: 40
  },
  inActiveNumber: {
    fontSize: 19,
    width: 40,
    height: 40
  },
  numberComponent: {
    height: 55,
    width: 55,
    borderRadius: 100,
    zIndex: 10,
    textAlignVertical: "center",
    textAlign: "center",
    fontWeight: "600",
    fontSize: 20,
    color: "white"
  },
  activeNumberComponent: {
    backgroundColor: "#FF6500"
  },
  timeText: {
    fontSize: 18,
    fontWeight: "600",
    backgroundColor: "rgba(30, 62, 98,0.7)",
    padding: 12,
    borderRadius: 12,
    color: "white"
  },
  activeTimeText: {
    backgroundColor: "#FF6500"
  },
  amPmContainer: {
    flexDirection: "column",
    borderColor: "black",
    borderWidth: 1,
  },
  periodContainer: {
    padding: 4,
    borderRadius: 8,
    justifyContent: "center",
    alignItems: "center",
  },
  activePeriodAM: {
    backgroundColor: "#32CD32"
  },
  activePeriodPM: {
    backgroundColor: "#FFD700"
  },
  amPmText: {
    fontSize: 12,
    fontWeight: "600",
  },
  activePeriodText: {
    color: "#FFFFFF"
  }
});