Skip to main content

Picker sheets

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.

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.

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​