React Native ScrollPicker

A smooth and customizable scroll picker component for React Native applications. Perfect for selecting items from a list with a native wheel picker feel.

Demo

Screenshots

Features

• 🎯 Smooth scrolling with snap-to-item behavior
• 🎨 Highly customizable styling
• 📱 Works on both iOS and Android
• 🔧 TypeScript support
• ⚡ Lightweight and performant
• 🎪 Ref support for programmatic control

Installation

npm install react-native-scrollpicker

or

yarn add react-native-scrollpicker

Basic Usage

import React, { useState } from 'react';
import { View } from 'react-native';
import ScrollPicker from 'react-native-scrollpicker';

const MyComponent = () => {
  const [selectedValue, setSelectedValue] = useState('Option 2');
  const data = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'];

  return (
    <View style={{ flex: 1, justifyContent: 'center' }}>
      <ScrollPicker
        dataSource={data}
        selectedIndex={1}
        onValueChange={(value, index) => {
          setSelectedValue(value);
          console.log('Selected:', value, 'at index:', index);
        }}
      />
    </View>
  );
};

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | dataSource | (string \| number)[] | Required | Array of items to display in the picker | | selectedIndex | number | 0 | Index of the initially selected item | | onValueChange | (value, index) => void | undefined | Callback fired when the selected value changes | | itemHeight | number | 40 | Height of each item in pixels | | wrapperHeight | number | itemHeight * 5 | Total height of the picker wrapper | | highlightColor | string | '#007AFF' | Color of the selection highlight border | | highlightBorderWidth | number | 1 | Width of the selection highlight border | | highlightBorderRadius | number | 8 | Border radius of the selection highlight | | highlightWidth | string \| number | '80%' | Width of the highlight view | | itemTextStyle | TextStyle | undefined | Text style for all items | | selectedItemTextStyle | TextStyle | undefined | Text style for the currently selected item | | wrapperStyle | ViewStyle | undefined | Style for the picker wrapper container | | highlightStyle | ViewStyle | undefined | Style for the selection highlight overlay | | showHighlight | boolean | true | Whether to show selection highlight | | snapToItem | boolean | true | Whether to snap to items when scrolling | | animationDuration | number | 300 | Animation duration for programmatic scrolling (ms) |

Ref Methods

You can use a ref to control the picker programmatically:

import React, { useRef } from 'react';
import ScrollPicker, { ScrollPickerHandle } from 'react-native-scrollpicker';

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

  const scrollToIndex = (index: number) => {
    pickerRef.current?.scrollToIndex(index);
  };

  const getCurrentSelection = () => {
    const index = pickerRef.current?.getCurrentIndex();
    const value = pickerRef.current?.getCurrentValue();
    console.log('Current selection:', value, 'at index:', index);
  };

  return (
    <ScrollPicker
      ref={pickerRef}
      dataSource={['A', 'B', 'C', 'D', 'E']}
      // ... other props
    />
  );
};

Available Ref Methods

• scrollToIndex(index: number, animated?: boolean) - Scroll to a specific index
• getCurrentIndex() - Get the currently selected index
• getCurrentValue() - Get the currently selected value

Advanced Examples

Custom Styling

<ScrollPicker
  dataSource={['Small', 'Medium', 'Large', 'Extra Large']}
  itemHeight={50}
  wrapperHeight={250}
  highlightColor="#FF6B6B"
  highlightBorderWidth={2}
  highlightBorderRadius={12}
  itemTextStyle={{
    fontSize: 18,
    color: '#666',
    fontWeight: '300',
  }}
  selectedItemTextStyle={{
    fontSize: 20,
    color: '#FF6B6B',
    fontWeight: '600',
  }}
  wrapperStyle={{
    backgroundColor: '#F8F9FA',
    borderRadius: 16,
  }}
/>

Numbers Picker

const numbers = Array.from({ length: 100 }, (_, i) => i + 1);

<ScrollPicker
  dataSource={numbers}
  selectedIndex={49} // Start at 50
  onValueChange={(value, index) => {
    console.log(`Selected number: ${value}`);
  }}
  itemTextStyle={{
    fontSize: 24,
    fontFamily: 'monospace',
  }}
/>

Disable Snap Behavior

<ScrollPicker
  dataSource={data}
  snapToItem={false}
  showHighlight={false}
  onValueChange={(value, index) => {
    // This will fire continuously during scroll
    console.log('Current item:', value);
  }}
/>

TypeScript Support

This package includes TypeScript definitions. The main types exported are:

• ScrollPickerProps<T> - Props interface for the component
• ScrollPickerHandle - Interface for ref methods
• ScrollPickerItem - Type for picker items (string | number)

License

MIT

Contributing

Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.