Time Picker

Time components share the same provider used by the date picker. Mount TimePicker.Provider in mode="time" and the value is a single Date whose time portion is meaningful.

Selections are staged in draft mode by default — pair with <DatePicker.Actions /> to commit. Pass draft={false} for auto-save.

---

Full time picker (field + trigger + modal clock)

Preview (Web)

import { useState } from 'react';
import { IconButton } from 'react-native-molecules/components/IconButton';
import { TextInput } from 'react-native-molecules/components/TextInput';
import { TimeField } from 'react-native-molecules/components/TimeField';
import { TimePicker } from 'react-native-molecules/components/TimePicker';

export default function Example() {
  const [time, setTime] = useState<Date | null>(new Date());

  return (
      <TimePicker.Provider mode="time" value={time} onChange={setTime}>
          <TimeField>
              <TextInput.Right>
                  <TimePicker.Trigger>
                      <IconButton name="clock-outline" />
                  </TimePicker.Trigger>
              </TextInput.Right>
          </TimeField>
          <TimePicker.Modal>
              <TimePicker.Clock />
          </TimePicker.Modal>
      </TimePicker.Provider>
  );
}

---

Just the field (typed entry only)

Preview (Web)

import { useState } from 'react';
import { TimeField } from 'react-native-molecules/components/TimeField';
import { TimePicker } from 'react-native-molecules/components/TimePicker';

export default function Example() {
  const [time, setTime] = useState<Date | null>(null);

  return (
      <TimePicker.Provider mode="time" value={time} onChange={setTime} draft={false}>
          <TimeField />
      </TimePicker.Provider>
  );
}

---

Just the clock (standalone)

TimePicker.Clock accepts time / onTimeChange directly when there's no provider.

Preview (Web)

import { useState } from 'react';
import { TimePicker } from 'react-native-molecules/components/TimePicker';

export default function Example() {
  const [time, setTime] = useState('09:30');

  return (
      <TimePicker.Clock
          time={time}
          inputType="picker"
          onTimeChange={({ time }) => setTime(time)}
      />
  );
}

---

Component reference

TimeField

Inputs & Controls

TimeField

Pure text input that reads / writes the provider time (as a Date) with masking.

Usage

Mount inside a DatePickerProvider (mode="time" or "datetime") for typed time entry.

Highlights

• Formats and masks the provider Date in 12h or 24h display
• Writes back a Date with hours / minutes applied
• No built-in trigger or overlay — compose siblings under the provider

When to use it

• The user should be able to type a time directly.
• A clock surface pairs with a typed input.

Related components

DatePickerProviderTimePickerTimePickerModal

Inherits: TextInputProps

TimePicker

Inputs & Controls

TimePicker

Clock and segmented time-entry surface that can mount anywhere.

Usage

Use it as the reusable time-picking surface inside overlays or inline sections.

Highlights

• Analog clock with draggable hand
• AM/PM toggle and keyboard entry
• Reads from DatePickerProvider when present, or accepts time / onTimeChange directly

When to use it

• You want one shared time surface across multiple presentations.
• A field should not own clock rendering directly.

Related components

TimeFieldTimePickerModal

Prop	Type	Default	Description
timeRequired	string	—	hh:mm format
onTimeChangeRequired	(params: { time: string; focused?: undefined | PossibleClockTypes; }) => any	—	—
is24Hour	boolean | undefined	—	—
inputType	PossibleInputTypes | undefined	—	—
focused	PossibleClockTypes | undefined	—	—
onFocusInput	((type: PossibleClockTypes) => any) | undefined	—	—
isLandscape	boolean | undefined	—	—
style	StyleProp<ViewStyle>	—	—

Defined in react-native-molecules/components/TimePicker

TimePickerModal

Overlay & Menus

TimePickerModal

Presentation shell for mounting time picker content in a modal.

Usage

Wrap TimePicker or any custom time UI when you want modal presentation.

Highlights

• Context-aware open state
• Thin Portal + Modal wrapper

When to use it

• Time selection should open in a focused overlay.
• You want modal presentation without coupling it to a specific field.

Related components

TimePickerTimeFieldModal

Prop	Type	Default	Description
is24Hour	boolean | undefined	—	—
label	string | undefined	—	—
uppercase	boolean | undefined	—	—
cancelLabel	string | undefined	—	—
confirmLabel	string | undefined	—	—
time	string | undefined	—	—
onConfirmRequired	(time: string) => any	—	—
keyboardIcon	string | undefined	—	—
clockIcon	string | undefined	—	—
isLandscape	boolean | undefined	—	—

Defined in react-native-molecules/components/TimePickerModal