Skip to content

yagyesh-bobde/react-native-scrollpicker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

ScrollPicker Demo

Screenshots

iOS Screenshot Android Screenshot Android Screenshot

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.

About

React native scroll picker | React Native wheel picker

Resources

Stars

Watchers

Forks

Packages

No packages published