react-native-simple-time-picker
Version:
<!-- prettier-ignore --> | iOS | Android | | --- | --- | | <img src="./screenshots/iOS.png" width="300" /> | <img src="./screenshots/Android.png" width="300" /> |
66 lines (52 loc) • 3.89 kB
Markdown
<!-- prettier-ignore -->
| iOS | Android |
| --- | --- |
| <img src="./screenshots/iOS.png" width="300" /> | <img src="./screenshots/Android.png" width="300" /> |
Simple wrapper component on [@react-native-picker/picker](https://www.npmjs.com/package/@react-native-picker/picker).
```
npm install react-native-simple-time-picker @react-native-picker/picker
npx pod-install
expo install react-native-simple-time-picker @react-native-picker/picker
```
```tsx
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} />;
};
```
<!-- prettier-ignore -->
| 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 |
https://snack.expo.io/@uraway/react-native-simple-time-picker
MIT