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: 19 days 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 (about 7 years ago)
• Default Branch: master
• Last Pushed: 2022-07-07T07:12:17.000Z (over 2 years ago)
• Last Synced: 2024-10-12T09:06:10.736Z (about 1 month 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: 80
• Watchers: 6
• Forks: 79
• Open Issues: 30
• 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.

![](screenshots/ios1.png)

![](screenshots/ios2.png)

![](screenshots/android.png)

## 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 [email protected]

```

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 })}

/>

```