https://github.com/pinguinjkeke/react-native-wheel-datepicker
Android & iOS iOS-style Picker & DatePicker Components for ReactNative
https://github.com/pinguinjkeke/react-native-wheel-datepicker
android crossplatform date-picker ios picker react-native wheel
Last synced: 9 months ago
JSON representation
Android & iOS iOS-style Picker & DatePicker Components for ReactNative
- Host: GitHub
- URL: https://github.com/pinguinjkeke/react-native-wheel-datepicker
- Owner: pinguinjkeke
- Created: 2017-10-14T11:33:57.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2022-07-07T07:12:17.000Z (about 4 years ago)
- Last Synced: 2025-04-09T16:19:48.931Z (over 1 year ago)
- Topics: android, crossplatform, date-picker, ios, picker, react-native, wheel
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-native-wheel-datepicker
- Size: 667 KB
- Stars: 82
- Watchers: 5
- Forks: 78
- Open Issues: 29
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-native-wheel-datepicker
A iOS style picker and datepicker components for ReactNative.
- Original repository by @lesliesam: [react-native-wheel-picker](https://github.com/lesliesam/react-native-wheel-picker).
- Fork by @wusuopu who added the real cross platform behavior and datepicker [react-native-wheel-picker](https://github.com/wusuopu/react-native-wheel-picker).
This is the third fork of repository and its targeted to support and maintain current code. I asked github team to make it my own as is all pull requests goes directly to @lesliesam original repository but it seems to be no longer maintained.
## Introduction
Cross platform Picker component for React-native.
Since picker is originally supported by iOS while Android only supports a ugly Spinner component. If you want to have the same user behaviour, you can use this.
The android component is based on [wheel-picker](https://github.com/AigeStudio/WheelPicker) which runs super fast and smoothly. It also supports curved effect which make it exactly the same looking and feel as the ios picker.
## How to use
Run command
For apps using RN 0.32 or higher, please run
```
npm i react-native-wheel-datepicker --save
```
For apps using RN 0.31 or less, please run
```
npm install --save --save-exact react-native-wheel-datepicker@1.9.0
```
Configration:
```
react-native link react-native-wheel-datepicker
```
## Ingegration with CustomDatePickerIOS
By default, package provides default DatePickerIOS on the iOS side to simplify usage on both platforms.
You can install [react-native-custom-datepicker-ios](https://github.com/pinguinjkeke/react-native-custom-datepicker-ios) package
if you need textColor functionality on IOS platform.
Just install:
```
npm i react-native-custom-datepicker-ios
// or
yarn add react-native-custom-datepicker-ios
```
link dependencies:
```
react-native link react-native-custom-datepicker-ios
```
And register CustomDatePickerIOS inside react-native-wheel-datepicker package.
```js
import { registerCustomDatePickerIOS } from 'react-native-wheel-datepicker';
import CustomDatePickerIOS from 'react-native-custom-datepicker-ios';
registerCustomDatePickerIOS(CustomDatePickerIOS);
```
Then you can use textColored components for both platforms inside render function!
```jsx
import { DatePicker } from 'react-native-wheel-datepicker';
// ...
render() {
return (
)
}
```
## Example code
```jsx
import { Picker, DatePicker } from 'react-native-wheel-datepicker';
// use DatePicker
// use Picker
this.setState({ value })}
/>
```