ControlGroup

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>
  );
}

An open menu with an Add, Favorite, and Share icon row above an Other Action entry

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

CommonViewModifierProps

Modifiers

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

Expo UI lets you put any of the 89 modifiers for any view on ControlGroup, but not all of them do something here.

74 change what you see on ControlGroup.
2 have no visible effect on ControlGroup.
13 work only in one place, such as a widget or a Grid.

Modifier	Why nothing happens
`layoutPriority`	It has an effect only when the view shares an axis with other views in a stack.
`zIndex`	It changes the order of views that cover each other in the same parent, and ControlGroup does not stack its children.

Only in some places

These modifiers work only in a widget, in a Grid, in a Namespace or in a parent that asks for them.

Modifier	Where it works
`activityBackgroundTint`	Works only in a Live Activity. It has no effect in the app.
`alignmentGuide`	Has an effect only when the parent, such as a `VStack` or `ZStack`, aligns its children by the same guide.
`containerBackground`	Works only in a widget, or in a navigation container when you use a `navigation` placement.
`glassEffectId`	Works only on a view that also has `glassEffect`, in a `GlassEffectContainer` and a `Namespace`.
`gridCellAnchor` iOS 16+	Works only on a cell of a `Grid`. `Grid` is in `@expo/ui/swift-ui`, but it has no Expo docs page.
`gridCellColumns`	Works only on a view in a `Grid.Row`. `Grid` is in `@expo/ui/swift-ui`, but it has no Expo docs page.
`gridCellUnsizedAxes`	Works only on a view in a `Grid`. `Grid` is in `@expo/ui/swift-ui`, but it has no Expo docs page.
`gridColumnAlignment` iOS 16+	Works only on a view in a `Grid.Row`. `Grid` is in `@expo/ui/swift-ui`, but it has no Expo docs page.
`invalidatableContent` iOS 17+	Has an effect only when a parent view uses `redacted` with the `invalidated` reason.
`matchedGeometryEffect`	Works only in a `Namespace`. Give two views the same `id` and change between them with an animation.
`privacySensitive`	Has an effect only when a parent view uses `redacted` with the `privacy` reason.
`unredacted`	Has an effect only in a parent view that uses `redacted`.
`widgetURL`	Works only in a widget. It has no effect in the app.

Sources

The original Expo docs for this page:

ControlGroup (SwiftUI) (source-of-truth/versions/v57.0.0/sdk/ui/swift-ui/controlgroup.md)