react-native-simple-time-picker

| iOS | Android | | --- | --- | | | |
Simple wrapper component on @react-native-picker/picker.

Install

# React Native
npm install react-native-simple-time-picker @react-native-picker/picker
npx pod-install

# Expo
expo install react-native-simple-time-picker @react-native-picker/picker

Usage

import React from 'react';
import {TimePicker, ValueMap} from 'react-native-simple-time-picker';

const YourApp = () => {
  const [value, setValue] = useState<ValueMap>({
    hours: 1,
    minutes: 0,
    seconds: 0,
  });
  const handleChange = (newValue: ValueMap) => {
    setValue(newValue);
  };
  return <TimePicker value={value} onChange={handleChange} />;
};

Props

| Property | Type | Default | Description | | ---------------- | -------------------------- | ---------------------- | -------------------------------------------------------------------------------------------- | | value | { hours: number, minutes: number, seconds: number, ampm?: 'am' \| 'pm' } | { hours: 0, minutes: 0, seconds: 0 } | Controlled state | | defaultValue | { hours: number, minutes: number, seconds: number, ampm?: 'am' \| 'pm' } | { hours: 0, minutes: 0, seconds: 0 } | Controlled state | | onChange | Function | | Callback function for when values are changed ({ hours: number, minutes: number }) => void | | pickerShows | Array | ["hours", "minutes"] | Pickers to display (e.g. ["hours", "minutes", "seconds"]) | | hoursUnit | String | '' | Hours Unit for label | | minutesUnit | String | '' | Minutes Unit for label | | secondsUnit | String | '' | Seconds Unit for label | | zeroPadding | Boolean | false | Whether to pad numeric labels with zero | | textColor | String | | Color of the picker item's text | | hoursInterval | Integer | 1 | | | minutesInterval | Integer | 1 | | | secondsInterval | Integer | 1 | | | emptyLabel | String | undefined | Enable empty option with this label | | isAmpm | Boolean | false | Whether to display am/pm picker | | ampmLocalization | { am: string, pm: string } | { am: 'am', pm: 'pm' } | Label for am/pm picker items |

Preview

https://snack.expo.io/@uraway/react-native-simple-time-picker

LICENSE

MIT