https://github.com/uraway/react-native-simple-time-picker
Simple Wrapper Component for @react-native-picker/picker
https://github.com/uraway/react-native-simple-time-picker
android ios picker react react-native timepicker
Last synced: 9 months ago
JSON representation
Simple Wrapper Component for @react-native-picker/picker
- Host: GitHub
- URL: https://github.com/uraway/react-native-simple-time-picker
- Owner: uraway
- License: mit
- Created: 2017-08-31T05:41:58.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2025-03-28T23:03:13.000Z (10 months ago)
- Last Synced: 2025-03-29T00:19:42.200Z (10 months ago)
- Topics: android, ios, picker, react, react-native, timepicker
- Language: TypeScript
- Homepage: https://snack.expo.io/@uraway/react-native-simple-time-picker
- Size: 3.28 MB
- Stars: 36
- Watchers: 2
- Forks: 23
- Open Issues: 39
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
| iOS | Android |
| --- | --- |
| 
| 
|
Simple wrapper component on [@react-native-picker/picker](https://www.npmjs.com/package/@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
```tsx
import React from 'react';
import {TimePicker, ValueMap} from 'react-native-simple-time-picker';
const YourApp = () => {
const [value, setValue] = useState({
hours: 1,
minutes: 0,
seconds: 0,
});
const handleChange = (newValue: ValueMap) => {
setValue(newValue);
};
return ;
};
```
## 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