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

yarn add react-native-wheel-scrollview-picker
# or
npm install react-native-wheel-scrollview-picker --save

Usage

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

export default class SimpleExample extends Component {
  render() {
    return (
      <ScrollPicker
        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。

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 (
    <ScrollPicker
      ref={ref}
      dataSource={dataSource}
      selectedIndex={index}
    />
    <Button
      onPress={onNext}
      title="Next one"
    />
  );
};

Author

• Richard Heng

License

MIT