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

Picker

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

Android

GitHub

npm

Changelog

Expo UI Picker matches the official Jetpack Compose Segmented Button and Radio Button APIs and supports segmented and radio picker variants.

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.

Usage

Segmented picker

Use the variant="segmented" prop to display a segmented button group.

SegmentedPickerExample.tsx

import { useState } from 'react';
import { Host, Picker } from '@expo/ui/jetpack-compose';

export default function SegmentedPickerExample() {
  const [selectedIndex, setSelectedIndex] = useState(0);

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

Radio picker

Use the variant="radio" prop to display a list of radio buttons.

RadioPickerExample.tsx

import { useState } from 'react';
import { Host, Picker } from '@expo/ui/jetpack-compose';

export default function RadioPickerExample() {
  const [selectedIndex, setSelectedIndex] = useState(0);

  return (
    <Host matchContents>
      <Picker
        options={['Small', 'Medium', 'Large']}
        selectedIndex={selectedIndex}
        onOptionSelected={({ nativeEvent: { index } }) => {
          setSelectedIndex(index);
        }}
        variant="radio"
      />
    </Host>
  );
}

Picker with custom color

Use the color prop to customize the picker's accent color.

CustomColorPickerExample.tsx

import { useState } from 'react';
import { Host, Picker } from '@expo/ui/jetpack-compose';

export default function CustomColorPickerExample() {
  const [selectedIndex, setSelectedIndex] = useState(0);

  return (
    <Host matchContents>
      <Picker
        options={['Option A', 'Option B', 'Option C']}
        selectedIndex={selectedIndex}
        onOptionSelected={({ nativeEvent: { index } }) => {
          setSelectedIndex(index);
        }}
        variant="segmented"
        color="#6200EE"
      />
    </Host>
  );
}

API

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

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: ColorValue

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

`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)	`ColorValue`	-
activeContainerColor(optional)	`ColorValue`	-
activeContentColor(optional)	`ColorValue`	-
disabledActiveBorderColor(optional)	`ColorValue`	-
disabledActiveContainerColor(optional)	`ColorValue`	-
disabledActiveContentColor(optional)	`ColorValue`	-
disabledInactiveBorderColor(optional)	`ColorValue`	-
disabledInactiveContainerColor(optional)	`ColorValue`	-
disabledInactiveContentColor(optional)	`ColorValue`	-
inactiveBorderColor(optional)	`ColorValue`	-
inactiveContainerColor(optional)	`ColorValue`	-
inactiveContentColor(optional)	`ColorValue`	-