Reference version

ControlGroup

A SwiftUI ControlGroup component for grouping interactive controls.

iOS
tvOS
Bundled version:
55.0.1

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.

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

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';

Component

ControlGroup

iOS
tvOS

Type: React.Element<ControlGroupProps>

ControlGroupProps

children

iOS
tvOS 17.0+
Type: ReactNode

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

label

iOS 16.0+
tvOS 17.0+
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.0+
tvOS 17.0+
Optional • Type: SFSymbols7_0

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