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.

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`	-