expo-horizontal-picker

A performant horizontal picker component for React Native and Expo apps.

• Smooth Horizontal Scrolling
  Optimized with react-native-reanimated for buttery-smooth, performant scroll animations.

• Snapping Behavior
  Automatically snaps to the closest item to give users a precise and polished interaction.

• Fully Customizable
  Style any part of the picker — container, text, selected item styles — to fit your design system.

• Initial Index Support
  Set the starting index to highlight a default item.

• Built-in Haptic Feedback Support
  Easily integrate with expo-haptics to give subtle tactile feedback when items change.

• TypeScript Support
  Fully typed API for a better developer experience.

• Works with Expo and Bare React Native
  Supports both managed and bare workflows out of the box.

📦 Installation

1. Install the package

This package requires react-native-reanimated to work:

npm install expo-horizontal-picker react-native-reanimated

Make sure to follow the additional setup instructions for Reanimated in the official docs.

2. (Optional) Install expo-haptics for haptic feedback

npm install expo-haptics

If you want to enable haptic feedback on item change, pass the onHapticFeedback prop and handle it using Expo Haptics:

🎬 Demo

import * as Haptics from 'expo-haptics';
import { HorizontalPicker } from 'expo-horizontal-picker';
import { SafeAreaView } from 'react-native';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <View>
        <HorizontalPicker
          items={Array.from({ length: 100 }, (_, i) => ({
            label: `${i + 1}`,
            value: i + 1,
          }))}
          initialIndex={49}
          visibleItemCount={7}
          onHapticFeedback={() => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)}
        />

        <HorizontalPicker
          items={Array.from({ length: 20 }, (_, i) => ({
            label: `${i + 1}k`,
            value: i + 1,
          }))}
          initialIndex={9}
          visibleItemCount={5}
          selectedItemTextStyle={{ color: 'orange', fontSize: 24 }}
          onHapticFeedback={() => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Rigid)}
        />

        <HorizontalPicker
          items={Array.from({ length: 24 }, (_, i) => ({
            label: `${i + 1}h`,
            value: i + 1,
          }))}
          initialIndex={11}
          visibleItemCount={3}
          itemTextStyle={{ fontSize: 20 }}
          selectedItemTextStyle={{ fontSize: 40 }}
          onHapticFeedback={() => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy)}
        />

        <HorizontalPicker
          items={Array.from({ length: 5 }, (_, i) => ({
            label: `${(i + 1) * 10000}`,
            value: (i + 1) * 10000,
          }))}
          initialIndex={2}
          visibleItemCount={1}
          itemTextStyle={{ fontSize: 60 }}
          selectedItemTextStyle={{ fontSize: 60 }}
          onHapticFeedback={() => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy)}
        />
      </View>
    </SafeAreaView>
  );
}

const styles = {
  container: {
    flex: 1,
    backgroundColor: '#eee',
  },
};

🧩 Props

Prop	Type	Default	Description
items	PickerOption[]	–	Array of options to display. Each option is an object with label and value.
initialIndex	number	0	Index of the item initially selected.
visibleItemCount	number	7	Number of items visible on screen at once.
onChange	(value: string | number, index: number) => void	–	Callback triggered when the selected item changes.
onHapticFeedback	() => void	–	Optional callback for haptic feedback when selection changes.
containerStyle	AnimatedScrollViewProps['style']	–	Style applied to the scroll container.
itemContainerStyle	StyleProp<ViewStyle>	–	Style applied to each item container.
itemTextStyle	StyleProp<TextStyle>	–	Style for unselected item text.
selectedItemTextStyle	StyleProp<TextStyle>	–	Style for selected item text.
...props	AnimatedScrollViewProps	–	Additional props passed to Animated.ScrollView.