react-native-wheel-scrollview-picker

A pure js picker for React Native

> - Original repository by @veizz: react-native-picker-scrollview.
> - Fork by @yasemincidem who added the real cross platform behavior and datepicker react-native-wheel-scroll-picker.
> - This is the third fork of repository, since it seems that @yasemincidem is no longer supporting react-native-wheel-scroll-picker.

---

Table of Contents

1. Features
2. Installation
3. Usage
- Example
4. Props
5. License

Installation

``sh
yarn add react-native-wheel-scrollview-picker


or


npm install react-native-wheel-scrollview-picker --save
`

Usage

`jsx
import React, { Component } from "react";
import ScrollPicker from "react-native-wheel-scrollview-picker";

export default class SimpleExample extends Component {
render() {
return (
dataSource={["1", "2", "3", "4", "5", "6"]}
selectedIndex={1}
renderItem={(data, index) => {
//
}}
onValueChange={(data, selectedIndex) => {
//
}}
wrapperHeight={180}
wrapperBackground="#FFFFFF"
itemHeight={60}
highlightColor="#d8d8d8"
highlightBorderWidth={2}
/>
);
}
}
`

Props

| Props | Description | Type | Default |
| -------------------- | :---------------------------: | :----: | --------: |
| dataSource | Data of the picker | Array | |
| selectedIndex | selected index of the item | number | 1 |
| wrapperHeight | height of the picker | number | |
| wrapperBackground | picker background | string | '#FFF' |
| itemHeight | height of each item | number | |
| highlightColor | color of the indicator line | number | "#d8d8d8" |
| highlightBorderWidth | width of the indicator | string | 1 |
| activeItemTextStyle | Active Item Text object style | object | |
| itemTextStyle | Item Text object style | object | |

Extra

If you want to scroll to target index, you need the instance function, and that is exposed some functions to parent components by using useImperativeHandle ,you can use it。

`jsx
import React from "react";
import { Button } from 'react-native';
import ScrollPicker from "react-native-wheel-scrollview-picker";

const dataSource = ["1", "2", "3", "4", "5", "6"]
export const Demo = () => {
const ref = React.useRef();
const [index, setIndex] = React.useState(0);
const onValueChange = (data, selectedIndex) => {
setIndex(selectedIndex);
};

const onNext = () => {
if (index === dataSource.length - 1) return;
setIndex(index + 1);
ref.current && ref.current.scrollToTargetIndex(index + 1);
}
return (
ref={ref}
dataSource={dataSource}
selectedIndex={index}
/>
onPress={onNext}
title="Next one"
/>
);
};
``

Author

- Richard Heng

License

MIT