This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 54).

Picker

GitHub

Changelog

npm

A Jetpack Compose Picker component for selecting options from a list.

Android

A picker component that allows users to select from a list of options with different display styles.

Installation

Terminal

- npx expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Radio picker

import { Picker } from '@expo/ui/jetpack-compose';

<Picker
  options={['$', '$$', '$$$', '$$$$']}
  selectedIndex={selectedIndex}
  onOptionSelected={({ nativeEvent: { index } }) => {
    setSelectedIndex(index);
  }}
  variant="radio"
/>

See Official Jetpack Compose documentation for more information.

Segmented picker

import { Picker } from '@expo/ui/jetpack-compose';

<Picker
  options={['$', '$$', '$$$', '$$$$']}
  selectedIndex={selectedIndex}
  onOptionSelected={({ nativeEvent: { index } }) => {
    setSelectedIndex(index);
  }}
  variant="segmented"
/>

See Official Jetpack Compose documentation for more information.

API

Component

`Picker`

Android

Type: React.Element<PickerProps>

Displays a native picker component. Depending on the variant it can be a segmented button, an inline picker, a list of choices or a radio button.

PickerProps

`buttonModifiers`

Android

Optional • Type: ExpoModifier[]

Modifiers for the individual buttons

`color`

Android

Optional • Type: string

Picker color.

`elementColors`

Android

Optional • Type: PickerElementColors

Colors for picker's core elements.

`modifiers`

Android

Optional • Type: ExpoModifier[]

Modifiers for the component

`onOptionSelected`

Android

Optional • Type:

(event: {
  nativeEvent: {
  index: number, 
  label: string
}
}) => void

Callback function that is called when an option is selected.

`options`

Android

Type: string[]

An array of options to be displayed in the picker.

`selectedIndex`

Android

Literal type: union

The index of the currently selected option.

Acceptable values are: number | null

`style`

Android

Optional • Type: StyleProp<ViewStyle>

Optional style to apply to the picker component.

`variant`

Android

Optional • Literal type: string • Default: 'segmented'

The variant of the picker, which determines its appearance and behavior. The 'wheel', 'inline', 'palette' and 'menu' variants are iOS only, the 'radio' variant is Android only. The 'inline' variant can only be used inside sections or lists. The 'palette' variant displays differently inside menus.

Acceptable values are: 'segmented' | 'radio'

Types

`PickerElementColors`

Android

Colors for picker's core elements.

Property	Type	Description
activeBorderColor(optional)	`string`	-
activeContainerColor(optional)	`string`	-
activeContentColor(optional)	`string`	-
disabledActiveBorderColor(optional)	`string`	-
disabledActiveContainerColor(optional)	`string`	-
disabledActiveContentColor(optional)	`string`	-
disabledInactiveBorderColor(optional)	`string`	-
disabledInactiveContainerColor(optional)	`string`	-
disabledInactiveContentColor(optional)	`string`	-
inactiveBorderColor(optional)	`string`	-
inactiveContainerColor(optional)	`string`	-
inactiveContentColor(optional)	`string`	-