Expo UI and Router for iOS
Components

ControlGroup

A SwiftUI ControlGroup component for grouping interactive controls.

Expo UI ControlGroup matches the official SwiftUI ControlGroup API. When placed inside a Menu, the children are rendered as a compact horizontal row of buttons.

Note: On tvOS, ControlGroup requires tvOS 17.0 or later.

Usage

Basic control group

A control group inside a menu, these render as a horizontal row of icon buttons.

import {
  Host,
  Menu,
  ControlGroup,
  Button,
} from '@expo/ui/swift-ui';

export default function BasicControlGroupExample() {
  return (
    <Host style={{ flex: 1 }}>
      <Menu label="Options" systemImage="ellipsis.circle">
        <ControlGroup>
          <Button
            systemImage="plus"
            label="Add"
            onPress={() => console.log('Add')}
          />
          <Button
            systemImage="star"
            label="Favorite"
            onPress={() => console.log('Favorite')}
          />
          <Button
            systemImage="square.and.arrow.up"
            label="Share"
            onPress={() => console.log('Share')}
          />
        </ControlGroup>
        <Button
          label="Other Action"
          onPress={() => console.log('Other')}
        />
      </Menu>
    </Host>
  );
}

API

import { ControlGroup } from '@expo/ui/swift-ui';

Component

ControlGroup

Type: React.Element<ControlGroupProps>

ControlGroupProps

children

Type: ReactNode

The control group's content. Can contain Button, Toggle, Picker, or other interactive controls.

label

iOS 16+

Optional • Type: ReactNode

The label for the control group. Can be a string for simple text labels, or a Label component for custom label content. When omitted, the control group has no label.

systemImage

iOS 16+

Optional • Type: SFSymbols7_0

An SF Symbol name to display alongside the label. Only used when label is a string.

Inherited props

Modifiers

Use these modifiers in the modifiers prop of the SwiftUI version.

Modifiers for ControlGroup

Modifiers for any view

Sources

The original Expo docs for this page:

On this page