# PickerSheet

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

The PickerSheet module provides a comprehensive solution for creating bottom sheet-based picker interfaces with smooth wheel picker components. Built on top of [@gorhom/bottom-sheet](https://gorhom.github.io/react-native-bottom-sheet/) and [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/) for optimal performance and fluid animations.

## Overview [#overview]

The PickerSheet system combines the convenience of bottom sheet modals with the smooth, iOS-style wheel picker interactions. Perfect for date selection, option picking, and any scenario requiring user selection from a list of items.

### Key Features [#key-features]

- **Bottom Sheet Integration**: Built on [@gorhom/bottom-sheet](https://gorhom.github.io/react-native-bottom-sheet/) for native-like modal experiences
- **Smooth Wheel Picker**: iOS-style wheel picker with smooth scrolling and visual feedback
- **Animated Interactions**: Uses [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/) for 60fps animations
- **Safe Area Support**: Automatic safe area handling with react-native-safe-area-context
- **Theme Integration**: Built-in support for theme colors and spacing
- **Accessibility**: The primitives forward the props they expose, but do not add a
  complete accessibility model. Add labels, roles, and announcements in the host app.
- **TypeScript Support**: Complete type safety with comprehensive type definitions
- **Performance Optimized**: Efficient rendering with FlatList and optimized animations

`PickerSheet` accepts its content through `children`; it does not expose a general
accessibility or container-props bag. `WheelPicker` exposes `containerProps` for its
outer `View`, while labels, roles, and announcements for the sheet remain host-owned.

## Architecture [#architecture]

The PickerSheet system consists of:

### Core Components [#core-components]

- **[PickerSheet](/native-sdk/guide/components/picker-sheet/picker-sheet/)** - Main bottom sheet container with backdrop and safe area handling
- **[WheelPicker](/native-sdk/guide/components/picker-sheet/wheel-picker/)** - Animated wheel picker with smooth scrolling and visual feedback

## External Dependencies [#external-dependencies]

- [@gorhom/bottom-sheet](https://gorhom.github.io/react-native-bottom-sheet/) - For bottom sheet modal functionality
- [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/) - For smooth animations and scroll handling
- [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) - For safe area handling

## Provider requirement [#provider-requirement]

Mount `BottomSheetModalProvider` directly from `@gorhom/bottom-sheet`
inside `GestureHandlerRootView` before rendering `PickerSheet`. Without that provider,
the modal cannot present correctly.
- [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/) - For scroll gestures in WheelPicker