# @ovok/native/picker-sheet

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

Wheel pickers and the bottom picker sheet.

Import from `@ovok/native/picker-sheet`.

## Components [#components]

### PickerSheet [#pickersheet]

```ts
const PickerSheet: NamedExoticComponent<PickerSheetProps & RefAttributes<BottomSheetModal>>;
```

Bottom sheet modal that sizes itself to its content; the ref is the underlying modal.

***

### WheelPicker [#wheelpicker]

```ts
const WheelPicker: MemoExoticComponent<(__namedParameters) => Element>;
```

Vertical snapping wheel for choosing one option from a list.

***

### ValueWheelPicker() [#valuewheelpicker]

```ts
function ValueWheelPicker<T>(__namedParameters): Element;
```

Wheel picker over typed option values.

#### Type Parameters [#type-parameters]

| Type Parameter |
| ------ |
| <a id="type-parameter-t-2"></a> `T` |

#### Parameters [#parameters]

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | [`ValueWheelPickerProps`](#valuewheelpickerprops)\<`T`\> |

#### Returns [#returns]

`Element`

## Interfaces [#interfaces]

### WheelPickerProps [#wheelpickerprops]

Props for `WheelPicker`.

#### Properties [#properties]

| Property | Type | Description |
| ------ | ------ | ------ |
| <a id="property-accessibilitydecrementlabel"></a> `accessibilityDecrementLabel?` | `string` | Accessibility label for the decrement action. |
| <a id="property-accessibilityhint"></a> `accessibilityHint?` | `string` | Accessibility hint for the picker. |
| <a id="property-accessibilityincrementlabel"></a> `accessibilityIncrementLabel?` | `string` | Accessibility label for the increment action. |
| <a id="property-accessibilitylabel"></a> `accessibilityLabel?` | `string` | Accessibility label for the picker. |
| <a id="property-containerprops"></a> `containerProps?` | `Omit`\<`ViewProps`, `"style"`\> | Extra props passed to the container view. |
| <a id="property-containerstyle"></a> `containerStyle?` | `StyleProp`\<`ViewStyle`\> | Style for the outer container. |
| <a id="property-decelerationrate"></a> `decelerationRate?` | `number` \| `"normal"` \| `"fast"` | Scroll deceleration rate; defaults to `"fast"`. |
| <a id="property-itemheight"></a> `itemHeight?` | `number` | Height of one row; defaults to 40. |
| <a id="property-itemstyle"></a> `itemStyle?` | `StyleProp`\<`ViewStyle`\> | Style for each option row. |
| <a id="property-itemtextstyle"></a> `itemTextStyle?` | `StyleProp`\<`TextStyle`\> | Style for each option's text. |
| <a id="property-nestedscrollenabled"></a> `nestedScrollEnabled?` | `boolean` | Whether nested scrolling is enabled on Android; defaults to `true`. |
| <a id="property-onchange"></a> `onChange` | (`index`) => `void` | Called with the new index when the user settles on an option. |
| <a id="property-options"></a> `options` | `string`[] | Option labels, in display order. |
| <a id="property-selectedindex"></a> `selectedIndex` | `number` | Index of the selected option. |
| <a id="property-selectedindicatorstyle"></a> `selectedIndicatorStyle?` | `StyleProp`\<`ViewStyle`\> | Style for the highlight behind the selected row. |
| <a id="property-visibleitems"></a> `visibleItems?` | `number` | Number of rows visible at once; defaults to 5. |

## Type Aliases [#type-aliases]

### ValueWheelPickerProps [#valuewheelpickerprops]

```ts
type ValueWheelPickerProps<T> = Omit<WheelPickerProps, "options" | "selectedIndex" | "onChange"> & object;
```

Props for `ValueWheelPicker`; also accepts `WheelPickerProps` except `options`, `selectedIndex` and `onChange`.

#### Type Parameters [#type-parameters-1]

| Type Parameter |
| ------ |
| <a id="type-parameter-t"></a> `T` |

#### Type Declaration [#type-declaration]

| Name | Type | Description |
| ------ | ------ | ------ |
| `defaultIndex?` | `number` | Selects a display-only option when `value` is unset. It is not reported through `onChange` until the person manipulates the picker. |
| `getOptionKey()?` | (`value`) => `string` | Supplies value equality for non-primitive option values. |
| `onChange()` | (`value`) => `void` | Called with the chosen option's value once the user settles on it. |
| `options` | readonly [`WheelPickerOption`](#wheelpickeroption)\<`T`\>[] | Options in display order. |
| `value?` | `T` \| `null` | Currently selected value. |

***

### WheelPickerOption [#wheelpickeroption]

```ts
type WheelPickerOption<T> = object;
```

A wheel option pairing a display label with its value.

#### Type Parameters [#type-parameters-2]

| Type Parameter |
| ------ |
| <a id="type-parameter-t-1"></a> `T` |

#### Properties [#properties-1]

##### label [#label]

```ts
label: string;
```

Text shown for the option.

##### value [#value]

```ts
value: T;
```

Value reported when the option is chosen.