# react-native-wheel-picker-next

> React native cross platform picker.

Latest version **1.0.3** (published 2020-09-08) · 0 weekly downloads

## Install

```sh
npm install react-native-wheel-picker-next
pnpm add react-native-wheel-picker-next
yarn add react-native-wheel-picker-next
bun add react-native-wheel-picker-next
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2020-09-08 |
| First published | 2018-11-14 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 230.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | HTSI |
| Maintainers | huynhtansi |
| Keywords | react-native, picker, wheel |

## Links

- npm: https://www.npmjs.com/package/react-native-wheel-picker-next
- Repository: https://github.com/sunnypoint-vn/react-native-wheel-picker-next
- Issues: https://github.com/sunnypoint-vn/react-native-wheel-picker-next/issues
- npm.io page: https://npm.io/package/react-native-wheel-picker-next

## Recent versions

- 1.0.3 (latest) — 2020-09-08
- 1.0.2 — 2020-08-19
- 1.0.1 — 2019-08-28
- 1.0.0 — 2018-11-14

## README

# ReactNativeWheelPicker

[![NPM Version](https://img.shields.io/github/package-json/v/sunnypoint-vn/react-native-wheel-picker-next.svg?color=green)](https://www.npmjs.com/package/react-native-wheel-picker-next)

[![npm version](http://img.shields.io/npm/dm/react-native-wheel-picker-next.svg?style=flat-square)](https://npmjs.org/package/react-native-wheel-picker-next "View this project on npm")

A simple Wheel Picker for Android based on https://github.com/AigeStudio/WheelPicker
Also you can use multiple pickers, such as DatePicker or TimePicker

## Installation Android
1. `npm install react-native-wheel-picker-android --save`
2. `react-native link react-native-wheel-picker-android`

# Usage

```js

import {WheelPicker, DatePicker, TimePicker} from 'react-native-wheel-picker-android'
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class MyPickers extends Component {
  render() {
    let now = new Date()
    let wheelPickerData = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    return (
      <View style={styles.container}>
        <WheelPicker
           onItemSelected={(event)=>this.onItemSelected(event)}
           isCurved
           data={wheelPickerData}
           style={styles.wheelPicker}/>
         <DatePicker
           initDate={now.toISOString()}
           onDateSelected={(date)=>this.onDateSelected(date)}/>
         <TimePicker
           initDate={now.toISOString()}
           onTimeSelected={(date)=>this.onTimeSelected(date)}/>
      </View>
    );
  }

  onItemSelected(event){
    // do something
  }

  onDateSelected(date){
    // do something
  }

  onTimeSelected(date){
    // do something
  }


}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
  },
  wheelPicker: {
    width:200,
    height: 150
  }
});

module.exports = MyPickers;

```

## Wheel Picker

![](./src/wheelPicker.gif)

```js

import { WheelPicker, DatePicker, TimePicker } from 'react-native-wheel-picker-android'
...

  render() {
    let arr = [1,2,3];
    return (
      <WheelPicker
          onItemSelected={(event)=>{console.log(event)}}
          isCurved
          isCyclic
          data={arr}
          style={{width:300, height: 300}}/>
    );
  }
```

## Props

| Prop  | Default  | Type | Description |
| :------------ |:---------------:| :---------------:| :-----|
| onItemSelected | null | `func` | Callback when user select item {data: 'itemData', position: 'itemPosition'} |
| data | default string array | `array` | Data array (string or number type)  |
| isCurved | false | `bool` | Make Wheel Picker curved |
| isCyclic | false | `bool` | Make Wheel Picker cyclic |
| isAtmospheric | false | `bool` | Design Wheel Picker's items  |
| selectedItemTextColor | grey | `string` | Wheel Picker's selected Item Text Color  |
| itemSpace | 20 | `number` | Wheel Picker's items spacing |
| visibleItemCount | 7 | `number` | Wheel Picker's items max visible count  |
| renderIndicator | false | `bool` | Show Wheel Picker indicator |
| indicatorColor | transparent | `string` | Indicator color  |
| isCurtain | false | `bool` | Wheel Picker curtain  |
| curtainColor | transparent | `string` | Wheel Picker curtain color  |
| itemTextColor | grey | `string` | Wheel Picker's items color  |
| itemTextSize | 20 | `number` |  Wheel Picker's items text size  |
| itemTextFontFamily | null | `string` | Wheel Picker's items text font name  |
| selectedItemPosition | null | `number` | Select current item position |
| backgroundColor | transparent | `string` | Wheel Picker background color  |

### data

An array of options. This should be provided with an __array of strings__ or __array of numbers__.


### onItemSelected(event)

Callback with event in the form `event = { data: 1, position: 0 }`


## Time Picker

![](./src/timePicker.gif)

```js

...

  render() {
    let minutesArray = ['00', '15', '30', '45'];
    let now = new Date();
    return (
      	<TimePicker
	       minutes={minutesArray}
   	     onTimeSelected={(date)=>this.onTimeSelected(date))}
	       initDate={now.toISOString()}/>
    );
  }

  onTimeSelected(date){
    // do something
  }

```

## Props

| Prop  | Default  | Type | Description |
| :------------ |:---------------:| :---------------:| :-----|
| onTimeSelected | null | `func` | Callback when user select time {date: 'selectedTime'} |
| initDate | current date | `ISOString` | Initial selected time  |
| hours | [1, 2, 3, .. 12] | `array` | hours array |
| minutes | ['00', '05' ,'10', .. '55'] | `array` | minutes array |


## Date Picker

![](./src/datePicker.gif)

```js

...

  render() {
  let now = new Date();
    return (
      	<DatePicker
	    initDate={now.toISOString()}
	    onDateSelected={(date)=> this.onDateSelected(date)}/>
    );
  }

  onDateSelected(date){
    // do something
  }

```

## Props

| Prop  | Default  | Type | Description |
| :------------ |:---------------:| :---------------:| :-----|
| onDateSelected | null | `func` | Callback when user select date {date: 'selectedDate'} |
| initDate | current date | `ISOString` | Initial selected date  |
| days | ['Today', 'Wed Dec 28', ...] | `array` | days array |
| hours | [1, 2, 3 .. 12] | `array` | hours array |
| minutes | ['00', '05', '10', .. '55'] | `array` | minutes array |
| format24 | false | `bool` | if true hours format is 24 hours|
| startDate | current date | `ISOString` | The Earlest date |
| daysCount | 365 | `number` | How many days included in Date Picker |

## Questions or suggestions?

Feel free to [open an issue](https://github.com/ElekenAgency/ReactNativeWheelPicker/issues)

---
_Source: https://npm.io/package/react-native-wheel-picker-next · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._