# Picker sheets

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

Use the picker-sheet module when users need to choose one value from a bounded set
on a mobile screen. `PickerSheet` provides the sheet surface and `WheelPicker`
provides the wheel-style selection control. Keep the selected value in application
state so it can be validated and saved with the rest of the form.

```tsx
import { BottomSheetModal } from "@gorhom/bottom-sheet";
import { PickerSheet, WheelPicker } from "@ovok/native/picker-sheet";
import * as React from "react";

const pickerRef = React.useRef<BottomSheetModal>(null);
const openPicker = () => pickerRef.current?.present();

<PickerSheet ref={pickerRef}>
  <WheelPicker
    options={options}
    selectedIndex={selectedIndex}
    onChange={setSelectedIndex}
  />
</PickerSheet>
```

Call `openPicker()` from the screen's button handler. Mount the picker under
`BottomSheetModalProvider`, as described in the [app shell guide](/native-sdk/guide/how-to/app-shell).

Use the picker for a small, known set of choices. For long or searchable catalogs,
use a searchable list instead. Install the module's bottom-sheet and animation peer
dependencies and ensure the app root follows the SDK's gesture-handler and Reanimated
setup.

## References [#references]

- [PickerSheet](/native-sdk/guide/components/picker-sheet/picker-sheet/)
- [WheelPicker](/native-sdk/guide/components/picker-sheet/wheel-picker/)
- [Picker sheet component index](/native-sdk/guide/components/picker-sheet/)
- [App shell and native providers](/native-sdk/guide/how-to/app-shell)

## API reference [#api-reference]

Every export of `@ovok/native/picker-sheet`, with signatures, props and types, is in the [`picker-sheet` API reference](/native-sdk/reference/picker-sheet).