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 ExampleCopy Anchor Link

import { WheelPicker } from "@ovok/native/picker-sheet";
import { 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;

PropsCopy Anchor Link

Every prop, with its type and description, is listed in the @ovok/native/picker-sheet API reference.

Component BehaviorCopy Anchor Link

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

The option shown in the center selection indicator is the option identified by selectedIndex. Scrolling calls onChange with that same option's zero-based index, including when options contains fewer values than visibleItems.

StylingCopy Anchor Link

Theme Colors UsedCopy Anchor Link

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

Related ComponentsCopy Anchor Link

• PickerSheet - Bottom sheet container for WheelPicker

External DependenciesCopy Anchor Link

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