A smooth and customizable scroll picker component for React Native applications. Perfect for selecting items from a list with a native wheel picker feel.
- 🎯 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
npm install react-native-scrollpicker
or
yarn add react-native-scrollpicker
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>
);
};
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) |
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
/>
);
};
scrollToIndex(index: number, animated?: boolean)
- Scroll to a specific indexgetCurrentIndex()
- Get the currently selected indexgetCurrentValue()
- Get the currently selected value
<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,
}}
/>
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',
}}
/>
<ScrollPicker
dataSource={data}
snapToItem={false}
showHighlight={false}
onValueChange={(value, index) => {
// This will fire continuously during scroll
console.log('Current item:', value);
}}
/>
This package includes TypeScript definitions. The main types exported are:
ScrollPickerProps<T>
- Props interface for the componentScrollPickerHandle
- Interface for ref methodsScrollPickerItem
- Type for picker items (string | number)
MIT
Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.