SegmentedControl

A SegmentedControl component with an API compatible with @react-native-segmented-control/segmented-control. It uses Jetpack Compose SingleChoiceSegmentedButtonRow on Android and SwiftUI Picker with segmented style on iOS.

Under the hood this component wraps the platform-specific @expo/ui primitives:

• iOS: SwiftUI Picker with pickerStyle('segmented')

If you need lower-level control (custom modifiers, styles, or layouts), use those primitives directly.

Migrating from @react-native-segmented-control/segmented-control

• Update the import from import SegmentedControl from '@react-native-segmented-control/segmented-control' to import SegmentedControl from '@expo/ui/community/segmented-control'.
• Image values in the values array are not supported, only strings.
• momentary, backgroundColor, fontStyle, and activeFontStyle props are not supported.
• tintColor only works on Android (sets the active segment container color). On iOS, it has no effect.

Basic usage

import { useState } from 'react';
import SegmentedControl from '@expo/ui/community/segmented-control';

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

  return (
    <SegmentedControl
      values={['One', 'Two', 'Three']}
      selectedIndex={selectedIndex}
      onChange={event => {
        setSelectedIndex(event.nativeEvent.selectedSegmentIndex);
      }}
    />
  );
}

API

import SegmentedControl from '@expo/ui/community/segmented-control';

Component

SegmentedControl

Type: React.Element<SegmentedControlProps>

SegmentedControlProps

appearance

Optional • Literal type: string

Overrides the control's appearance irrespective of the system theme.

Acceptable values are: 'light' | 'dark'

enabled

Optional • Type: boolean • Default: true

If false, the user cannot interact with the control.

onChange

Optional • Type: (event: NativeSegmentedControlChangeEvent) => void

Called when the user taps a segment. The event carries nativeEvent.selectedSegmentIndex and nativeEvent.value.

onValueChange

Optional • Type: (value: string) => void

Called when the user taps a segment. Receives the segment's string value.

selectedIndex

Optional • Type: number

The index of the selected segment.

style

Optional • Type: StyleProp<ViewStyle>

testID

Optional • Type: string

values

Optional • Type: string[]

The labels for the control's segment buttons, in order.

Types

NativeSegmentedControlChangeEvent

Shape of the native event passed to onChange. Matches @react-native-segmented-control/segmented-control.

Deprecated: use NativeSegmentedControlChangeEvent

NativeSegmentedControlIOSChangeEvent

Type: NativeSegmentedControlChangeEvent

Shape of the native event passed to onChange. Matches @react-native-segmented-control/segmented-control.