AccessoryWidgetBackground

A SwiftUI adaptive background view that provides a standard appearance based on the widget's environment.

Expo UI AccessoryWidgetBackground matches the official SwiftUI AccessoryWidgetBackground API and creates an adaptive background view that provides a standard appearance based on the widget's environment.

Usage

import {
  AccessoryWidgetBackground,
  VStack,
  Text,
  ZStack,
} from '@expo/ui/swift-ui';

export default function BasicAccessoryWidgetBackground() {
  return (
    <ZStack>
      <AccessoryWidgetBackground />
      <VStack>
        <Text>MON</Text>
      </VStack>
    </ZStack>
  );
}

API

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

Component

`AccessoryWidgetBackground`

Type: React.Element<AccessoryWidgetBackgroundProps>

AccessoryWidgetBackgroundProps

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 AccessoryWidgetBackground, but not all of them do something here.

45 change what you see on AccessoryWidgetBackground.
31 have no visible effect on AccessoryWidgetBackground.
13 work only in one place, such as a widget or a Grid.

Best modifiers for AccessoryWidgetBackground

These modifiers are the ones that you use most with AccessoryWidgetBackground.

Also works on AccessoryWidgetBackground

AccessoryWidgetBackground takes these modifiers too, and each one works in the usual way.

No visible effect on AccessoryWidgetBackground

AccessoryWidgetBackground accepts these modifiers, but you see no change. They do not give an error.

Modifier	Why nothing happens
`accessibilityElement`	It joins the child views into one accessibility element, and AccessoryWidgetBackground takes no child views.
`allowsTightening`	It changes only text, and AccessoryWidgetBackground shows no text.
`bold`	It changes only text and SF Symbols, and AccessoryWidgetBackground shows neither.
`containerShape`	It sets the shape that the child views use for `containerRelativeShape`, and AccessoryWidgetBackground takes no child views.
`contentShape`	It changes the area that gets touches, and AccessoryWidgetBackground gets no touches of its own.
`contentTransition` iOS 16+	It changes how text and SF Symbols animate when their content changes, and AccessoryWidgetBackground shows neither.
`disabled`	It turns off the controls in the view, and AccessoryWidgetBackground has none.
`dynamicTypeSize`	It changes only text and SF Symbols, and AccessoryWidgetBackground shows neither.
`font`	It changes only text and SF Symbols, and AccessoryWidgetBackground shows neither.
`geometryGroup` iOS 17+	It works on the child views that you give the component, and AccessoryWidgetBackground takes none.
`imageScale`	It changes only SF Symbols, and AccessoryWidgetBackground shows none.
`italic`	It changes only text, and AccessoryWidgetBackground shows no text.
`kerning`	It changes only text, and AccessoryWidgetBackground shows no text.
`layoutPriority`	It has an effect only when the view shares an axis with other views in a stack.
`lineHeight` iOS 26+	It changes only text, and AccessoryWidgetBackground shows no text.
`lineLimit`	It changes only text, and AccessoryWidgetBackground shows no text.
`lineSpacing`	It changes only text, and AccessoryWidgetBackground shows no text.
`minimumScaleFactor`	It changes only text, and AccessoryWidgetBackground shows no text.
`monospacedDigit`	It changes only text, and AccessoryWidgetBackground shows no text.
`multilineTextAlignment`	It changes only text, and AccessoryWidgetBackground shows no text.
`onAppear`	In SDK 57, AccessoryWidgetBackground does not send modifier events to JavaScript, so the handler does not run.
`onDisappear`	In SDK 57, AccessoryWidgetBackground does not send modifier events to JavaScript, so the handler does not run.
`onGeometryChange`	In SDK 57, AccessoryWidgetBackground does not send modifier events to JavaScript, so the handler does not run.
`onLongPressGesture`	In SDK 57, AccessoryWidgetBackground does not send modifier events to JavaScript, so the handler does not run.
`onTapGesture`	In SDK 57, AccessoryWidgetBackground does not send modifier events to JavaScript, so the handler does not run.
`strikethrough`	It changes only text, and AccessoryWidgetBackground shows no text.
`textCase`	It changes only text, and AccessoryWidgetBackground shows no text.
`tint`	It changes the accent colour of controls and SF Symbols, and AccessoryWidgetBackground shows neither.
`truncationMode`	It changes only text, and AccessoryWidgetBackground shows no text.
`underline`	It changes only text, and AccessoryWidgetBackground shows no text.
`zIndex`	It changes the order of views that cover each other in the same parent, and AccessoryWidgetBackground 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:

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