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:

• Android: Jetpack Compose SegmentedButton
• iOS: SwiftUI Picker with pickerStyle('segmented')

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

Installation

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

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

Types