# react-native-12hours-timepicker

> 12 hours analog time picker

Latest version **1.0.15** (published 2023-03-10) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-12hours-timepicker
pnpm add react-native-12hours-timepicker
yarn add react-native-12hours-timepicker
bun add react-native-12hours-timepicker
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.15 |
| Published | 2023-03-10 |
| First published | 2023-03-04 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 35.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | gomzales |
| Maintainers | gomzales |
| Keywords | react, native, react-native, reactnative, react-component, react-native-component, mobile, ios, android, ui, time, picker, timepicker, time-picker, analog, analog-timepicker, analog-time-picker |

## Links

- npm: https://www.npmjs.com/package/react-native-12hours-timepicker
- Repository: https://github.com/illi-homz/react-native-12hours-timepicker
- Homepage: https://github.com/illi-homz/react-native-12hours-timepicker#readme
- Issues: https://github.com/illi-homz/react-native-12hours-timepicker/issues
- npm.io page: https://npm.io/package/react-native-12hours-timepicker

## Dependencies (2)

- [react-native-svg](https://npm.io/package/react-native-svg.md) ^13.8.0
- [react-native-svg-transformer](https://npm.io/package/react-native-svg-transformer.md) ^1.0.0

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.0.15 (latest) — 2023-03-10
- 1.0.14 — 2023-03-10
- 1.0.13 — 2023-03-09
- 1.0.12 — 2023-03-08
- 1.0.11 — 2023-03-08
- 1.0.10 — 2023-03-07
- 1.0.9 — 2023-03-07
- 1.0.8 — 2023-03-07
- 1.0.7 — 2023-03-07
- 1.0.6 — 2023-03-06
- 1.0.5 — 2023-03-06
- 1.0.4 — 2023-03-04
- 1.0.3 — 2023-03-04
- 1.0.1 — 2023-03-04
- 1.0.0 — 2023-03-04

## README

# react-native-12hours-timepicker

### Time picker for US time standart
<br>

<img src="https://github.com/illi-homz/react-native-12hours-timepicker/blob/main/demo/assets/react-native-12hours-timepicker.gif?raw=true" width="250">
<br>

## Installation
Using NPM:
```
$ npm i react-native-12hours-timepicker
```

Using Yarn:
```
$ yarn add react-native-12hours-timepicker
```

## Usage
```javascript
import { TimePicker, AnalogClock12 } from 'react-native-12hours-timepicker'
```


```javascript
<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}
/>
```

```javascript
<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 | - |
<br>

### 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 | - |

<br>

## Authors

- [Ilya Gomza](https://github.com/illi-homz/)

---
_Source: https://npm.io/package/react-native-12hours-timepicker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._