DOCSEARCHbyAlgolia
Submit Docs

react-native-wheel-scrollview-picker

repository·master·Indexed 41 days ago

https://github.com/rheng001/react-native-wheel-scrollview-picker

A pure JavaScript wheel-style scroll picker for React Native, designed for cross-platform compatibility. Version 2.0.9 provides a ScrollPicker component that allows users to select items from a dataSource array of strings or numbers, featuring a programmatic scrollToTargetIndex method via ScrollPickerHandle.

Tokens
2.3K
Snippets
6
Records
7
Agent score
0%

What's inside react-native-wheel-scrollview-picker

  1. Scroll to a target index using ref

    master

    The ScrollPicker component exposes an imperative API via useImperativeHandle. To programmatically scroll to a specific index, create a ref and call the scrollToTargetIndex(index) method.

    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);
    // Use the ref to call the imperative method
    ref.current && ref.current.scrollToTargetIndex(index + 1);
  }

  return (
    <>
      <ScrollPicker
        ref={ref}
        dataSource={dataSource}
        selectedIndex={index}
        onValueChange={onValueChange}
      />
      <Button
        onPress={onNext}
        title="Next one"
      />
    </>
  );
};

  3. Basic usage of ScrollPicker

    master

    To use the picker, import ScrollPicker and provide a dataSource array. You can customize the appearance using props like wrapperHeight, itemHeight, and highlightColor.

    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) => {
          // Custom item rendering logic
        }}
        onValueChange={(data, selectedIndex) => {
          // Handle value change
        }}
        wrapperHeight={180}
        wrapperBackground="#FFFFFF"
        itemHeight={60}
        highlightColor="#d8d8d8"
        highlightBorderWidth={2}
      />
    );
  }
}

  4. ScrollPicker Props Reference

    master

    The following props are available for the ScrollPicker component:

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

  5. Use the ScrollPicker component

    master

    The ScrollPicker component is a wheel-style scrollable picker for React Native. It allows users to select items from a dataSource array of strings or numbers. You can customize the appearance of items using renderItem, itemTextStyle, and activeItemTextStyle, and control the selection highlight via highlightColor and highlightBorderWidth.

    import React, { useRef } from 'react';
import ScrollPicker, { ScrollPickerHandle } from 'react-native-wheel-scrollview-picker';

const MyPicker = () => {
  const pickerRef = useRef<ScrollPickerHandle>(null);
  const data = ['Apple', 'Banana', 'Cherry'];

  const handleValueChange = (value: string | undefined, index: number) => {
    console.log('Selected:', value, 'at index:', index);
  };

  return (
    <ScrollPicker
      ref={pickerRef}
      dataSource={data}
      onValueChange={handleValueChange}
      itemHeight={40}
      highlightColor="#ff0000"
    />
  );
};

  6. Configure ScrollPickerProps

    master

    The ScrollPickerProps<ItemT> interface defines the configuration for the picker. ItemT must be a string or number.

    PropTypeDescription
    dataSourceArray<ItemT>Required. The array of items to display.
    selectedIndexnumberThe initial index to select.
    onValueChange(value: ItemT | undefined, index: number) => voidCallback triggered when the selection changes.
    renderItem(data: ItemT, index: number, isSelected: boolean) => JSX.ElementCustom renderer for each item.
    itemHeightnumberHeight of a single item (defaults to 30).
    wrapperHeightnumberTotal height of the picker container.
    itemTextStyleobjectStyle for non-selected items.
    activeItemTextStyleobjectStyle for the currently selected item.
    highlightColorstringColor of the top and bottom selection borders (defaults to #333).
    highlightBorderWidthnumberWidth of the selection highlight borders.
    wrapperBackgroundstringBackground color of the picker container.
    scrollViewComponentanyCustom ScrollView component to use (e.g., from react-native-gesture-handler).
    styleViewProps["style"]Style for the outer container.

  7. Programmatically scroll to an index using ScrollPickerHandle

    master

    You can control the picker's scroll position externally by using a ref with the ScrollPickerHandle type. This provides the scrollToTargetIndex method.

    import React, { useRef } from 'react';
import ScrollPicker, { ScrollPickerHandle } from 'react-native-wheel-scrollview-picker';

const MyComponent = () => {
  const pickerRef = useRef<ScrollPickerHandle>(null);

  const jumpToIndex = (index: number) => {
    // Scrolls the wheel to the specified index
    pickerRef.current?.scrollToTargetIndex(index);
  };

  return (
    <ScrollPicker
      ref={pickerRef}
      dataSource={['A', 'B', 'C']}
      itemHeight={30}
    />
  );
};