WheelPicker

iOS-style wheel picker component with smooth scrolling, visual feedback animations, and performance optimizations. Built with react-native-reanimated and optimized FlatList for 60fps performance.

Quick Example

import { WheelPicker, useAppTheme } from "@ovok/native";
import React from "react";

const options = ["Small", "Medium", "Large", "Extra Large"];

const WheelPickerExample = () => {
  const theme = useAppTheme();
  const [selectedIndex, setSelectedIndex] = React.useState(0);

  return (
    <WheelPicker
      selectedIndex={selectedIndex}
      options={options}
      onChange={setSelectedIndex}
      itemHeight={50}
      visibleItems={5}
      selectedIndicatorStyle={{
        backgroundColor: theme.colors.primaryContainer,
      }}
    />
  );
};

export default WheelPickerExample;

Props

Prop	Type	Required	Default	Description
selectedIndex	number	✓	-	Currently selected item index
options	string[]	✓	-	Array of options to display
onChange	(index: number) => void	✓	-	Callback when selection changes
selectedIndicatorStyle	StyleProp<ViewStyle>	-	-	Style for the selection indicator overlay
itemTextStyle	StyleProp<TextStyle>	-	-	Style for individual item text
itemStyle	StyleProp<ViewStyle>	-	-	Style for individual item containers
itemHeight	number	-	40	Height of each item in pixels
containerStyle	StyleProp<ViewStyle>	-	-	Style for the picker container
containerProps	Omit<ViewProps, "style">	-	-	Additional props for the container View
visibleItems	number	-	5	Number of visible items (should be odd for best results)
decelerationRate	"normal" | "fast" | number	-	"fast"	Scroll deceleration rate

Component Behavior

The WheelPicker component:

1. Smooth Scrolling: Uses animated FlatList with optimized scroll handling
2. Visual Feedback: Items scale and fade based on distance from center
3. Snap to Position: Automatically snaps to the nearest item on scroll end
4. Performance Optimized: Efficient rendering with proper item layout calculations
5. Gesture Handling: Supports both scrolling and momentum-based selection3

Styling

Theme Colors Used

• theme.colors.surfaceVariant - Default selection indicator background
• theme.borderRadius(2) - Default border radius for selection indicator

Related Components

• PickerSheet - Bottom sheet container for WheelPicker

External Dependencies

• react-native-reanimated - For smooth animations and scroll handling
• react-native-gesture-handler - For scroll gestures