ControlGroup

A SwiftUI ControlGroup component for grouping interactive controls.

iOS

tvOS

Included in Expo Go

Recommended version:

~56.0.26

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.

An open Menu showing a ControlGroup row of Add, Favorite, Share icon buttons above Rename and Delete entries

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

Installation

Terminal

- npx expo install @expo/ui

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun expo install @expo/ui

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

Usage

Basic control group

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

BasicControlGroupExample.tsx

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

export default function BasicControlGroupExample() {
  return (
    <Host matchContents>
      <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';

No API data file found, sorry!