# WheelPicker

Canonical page: https://docs.ovok.com/native-sdk/guide/components/picker-sheet/wheel-picker

iOS-style wheel picker component with smooth scrolling, visual feedback animations, and performance optimizations. Built with [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/) and optimized FlatList for 60fps performance.

## Quick Example [#quick-example]

```tsx
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;
```

## Props [#props]

Every prop, with its type and description, is listed in the [`@ovok/native/picker-sheet` API reference](/native-sdk/reference/picker-sheet).

## Component Behavior [#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

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`.

## Styling [#styling]

### Theme Colors Used [#theme-colors-used]

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

## Related Components [#related-components]

- [PickerSheet](/native-sdk/guide/components/picker-sheet/picker-sheet/) - Bottom sheet container for WheelPicker

## External Dependencies [#external-dependencies]

- [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/) - For smooth animations and scroll handling
- [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/) - For scroll gestures