react-native-best-wheel-datepicker

KO | EN

gitlite — search

#javascript #react #ai #golang #machine-learning #docker #nodejs #cli #kubernetes #awesome-list #vue #ios #mcp #open-source

react-native-best-wheel-datepicker

(★ 8)

Fixed wheel date picker for Android and IOS

react-native-best-wheel-datepicker Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# react-native-best-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.

![](https://raw.githubusercontent.com/abbasmoosavi/react-native-best-wheel-datepicker/master/screenshots/ios1.png)
![](https://raw.githubusercontent.com/abbasmoosavi/react-native-best-wheel-datepicker/master/screenshots/ios2.png)

![](https://raw.githubusercontent.com/abbasmoosavi/react-native-best-wheel-datepicker/master/screenshots/android.png)

## How to use

Run command

For apps using RN 0.32 or higher, please run

```
npm i react-native-best-wheel-datepicker --save
```

For apps using RN 0.31 or less, please run

```
npm install --save --save-exact react-native-best-wheel-datepicker
```

Configration:

```
react-native link react-native-best-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-best-wheel-datepicker package.
```js
import { registerCustomDatePickerIOS } from 'react-native-best-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-best-wheel-datepicker';

// ...
render() {
  return (
    <DatePicker
      mode="date"
      textColor="green"
    />
  )
}
```

## Example code

```jsx
import { Picker, DatePicker } from 'react-native-best-wheel-datepicker';

// use DatePicker
<DatePicker
  mode="date"
/>

// use Picker
<Picker
  style={{ flex: 1 }}
  selectedValue={1}
  pickerData={[1, 2, 3, 4, 5, 6]}
  onValueChange={value => this.setState({ value })}
/>
```

react-native-best-wheel-datepicker

react-native-best-wheel-datepicker Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

react-native-best-wheel-datepicker

react-native-best-wheel-datepicker Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README