react-native-12hours-timepicker

Time picker for US time standart

Installation

Using NPM:

$ npm i react-native-12hours-timepicker

Using Yarn:

$ yarn add react-native-12hours-timepicker

Usage

import { TimePicker, AnalogClock12 } from 'react-native-12hours-timepicker'

<TimePicker
  topPadding={0}
  dayPeriods={{'11:00 – 14:00': 'red'}} // max hour 24:00
  value={'13:00'} // 24 hours format
  onChange={(v) => onTimeChange(v)}
  clockWidth={272}
  periodSeparator="–"
  title="Select time"
  clockNumberShift={50}
/>

<AnalogClock12
  topPadding={0}
  // onHourSelect run when Gesture.Pan.**onBegin**() and Gesture.Pan.**onUpdate**()
  // hour in range from 0 to 11
  onHourSelect={(hour: number, minutes: number) => onTimeChanged(hour, minutes)}
  value={'13:00'} // 24 hours format
  periods={{'07:00 – 09:00': 'red'}} // max hour 12:00
  // onTimeSelectEnd run when Gesture.Pan.**onFinalize**()
  // hour in range from 0 to 11
  onTimeSelectEnd={(hour: number, minutes: number) => onTimeSelectEnd(hour, minutes)}
  width={272}
  periodSeparator="–"
  clockNumberShift={50}
/>

Options

TimePicker

| Props | Type | Data | Default | | --- | --- | --- | --- | | title | String | Time picker title | 'Select time' | | topPadding | Number | Status bar height for pan responder if work custom safe-area-view, such as react-native-safe-area-context | 0 | | clockWidth | Number | Default width for analog clock | 272 | | value | String | Value in 24 hours format | '00:00' | | dayPeriods | { period: color } | Period in 24 hours format and color for this period, { '11:00 – 14:00': '#FFA98D' } | {} | | onChange | (string): void | Return value in 24 hours format, '14:00' | - | | periodSeparator | String | Periods keys separator | '–' | | clockNumberShift | Number | Offset of the number of hours from the outer point | 50 | | clockBorderColor | String | Clock border color | '#F7F7F7' | | hourDotFillColor | String | Clock hour dot fill color | '#EBEBEB' | | hourDotBorderColor | String | Clock hour dot border color | '#F7F7F7' | | style | StyleProp | Styles for main container | - | | timeContainerStyle | StyleProp | Styles for numeric timer container | - | | titleStyle | StyleProp | Styles for title | - | | timeStyle | StyleProp | Styles for numeric timer text | - | | switcherStyle | StyleProp | Styles for meridiem switcher container | - | | clockFaceNumberStyle | StyleProp | Styles for number literal on clock face | - | | switcherTextStyle | StyleProp | Styles for meridiem switcher text | - |

AnalogClock12

| Props | Type | Data | Default | | --- | --- | --- | --- | | style | StyleProp | Styles for clock container | - | | clockFaceNumberStyle | StyleProp | Styles for number literal on clock face | - | | width | Number | Clock width | 272 | | topPadding | Number | Status bar height for pan responder if work custom safe-area-view, such as react-native-safe-area-context | 0 | | value | String | Value in 24 hours format | '00:00' | | periodSeparator | String | Periods keys separator | '–' | | clockBorderColor | String | Clock border color | '#F7F7F7' | | hourDotFillColor | String | Clock hour dot fill color | '#EBEBEB' | | hourDotBorderColor | String | Clock hour dot border color | '#F7F7F7' | | clockNumberShift | Number | Offset of the number of hours from the outer point | 50 | | periods | Period in 24 hours format and color for this period, but max time 12:00, { '09:00 – 12:00': '#FFA98D' } | {} | | onHourSelect | (hour: number, minutes: number) => void | Run when Gesture.Pan handled onBegin and onUpdate. Hour in range from 0 to 11 | - | | onTimeSelectEnd | (hour: number, minutes: number) => void | run when Gesture.Pan handled onFinalize. Hour in range from 0 to 11 | - |

Authors

• Ilya Gomza