TimePicker

The TimePicker suite mirrors the DatePicker API for time selection, offering consistent wheel-based time picking across multiple presentation styles.

Components

Component	Description
`TimePicker`	Core time picker with hour/minute/period columns
`TimePickerCard`	Inline card with confirm/cancel actions
`TimePickerModal`	Full-screen modal presentation
`TimePickerDialog`	Alert-style dialog presentation
`TimePickerInput`	Pressable input field that opens a modal

Usage

import { useState } from 'react';
import { TimePickerInput } from '@masumdev/rn-ui';

export function TimePickerExample() {
  const [time, setTime] = useState<Date | undefined>();

  return (
    <TimePickerInput
      title="SET TIME"
      placeholder="Select time"
      value={time}
      onChange={setTime}
    />
  );
}

Props API

Prop	Type	Default	Description
`value`	`Date \| undefined`	—	Selected time value.
`onChange`	`(time: Date) => void`	—	Callback when time is confirmed.
`placeholder`	`string`	—	Placeholder text when no time selected.
`title`	`string`	—	Title shown in the modal header.
`use24Hour`	`boolean`	`false`	Use 24-hour format instead of AM/PM.
`minuteInterval`	`number`	`1`	Minute step interval (1, 5, 10, 15, 30).
`disabled`	`boolean`	`false`	Disable the input.

Utilities

import { formatTime } from '@masumdev/rn-ui';

// Format a Date to display string
formatTime(new Date(), { use24Hour: false }); // "2:30 PM"