Spacer

Expo UI Spacer matches the official SwiftUI Spacer API and expands to fill available space in a stack.

Usage

Basic spacer in HStack

Use Spacer to push content to opposite ends of a horizontal stack.

import { Host, HStack, Text, Spacer } from '@expo/ui/swift-ui';

export default function SpacerHStackExample() {
  return (
    <Host style={{ flex: 1 }}>
      <HStack>
        <Text>Left</Text>
        <Spacer />
        <Text>Right</Text>
      </HStack>
    </Host>
  );
}

The word Left at the leading edge and Right at the trailing edge of the same row

Basic spacer in VStack

Use Spacer to push content to opposite ends of a vertical stack.

import { Host, VStack, Text, Spacer } from '@expo/ui/swift-ui';

export default function SpacerVStackExample() {
  return (
    <Host style={{ flex: 1 }}>
      <VStack>
        <Text>Top</Text>
        <Spacer />
        <Text>Bottom</Text>
      </VStack>
    </Host>
  );
}

The word Top at the upper edge and Bottom at the lower edge of the same column

API

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

Component

`Spacer`

Type: React.Element<SpacerProps>

SpacerProps

`minLength`

Optional • Type: number

The minimum length of the spacer. This is the minimum amount of space that the spacer will take up.

Inherited props

CommonViewModifierProps

Modifiers

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

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

18 change what you see on Spacer.
1 work, but not in the way that you may expect.
58 have no visible effect on Spacer.
13 work only in one place, such as a widget or a Grid.

Best modifiers for Spacer

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

layoutPriority

Also works on Spacer

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

Needs care on Spacer

These modifiers work on Spacer, but not in the way that you may expect.

Modifier	What to know
`frame`	Use `minWidth` or `minHeight` to give the spacer a smallest size. A fixed size stops it from growing.

No visible effect on Spacer

Spacer 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 Spacer takes no child views.
`allowsTightening`	It changes only text, and Spacer shows no text.
`background`	It paints in the area of the view, and Spacer draws nothing that you can see.
`backgroundOverlay`	It paints in the area of the view, and Spacer draws nothing that you can see.
`blur`	It changes how the view is drawn, and Spacer draws nothing that you can see.
`bold`	It changes only text and SF Symbols, and Spacer shows neither.
`border`	It changes how the view is drawn, and Spacer draws nothing that you can see.
`brightness`	It changes how the view is drawn, and Spacer draws nothing that you can see.
`clipped`	It changes how the view is drawn, and Spacer draws nothing that you can see.
`clipShape`	It changes how the view is drawn, and Spacer draws nothing that you can see.
`colorInvert`	It changes how the view is drawn, and Spacer draws nothing that you can see.
`containerShape`	It sets the shape that the child views use for `containerRelativeShape`, and Spacer takes no child views.
`contentShape`	It changes the area that gets touches, and Spacer gets no touches of its own.
`contentTransition` iOS 16+	It changes how text and SF Symbols animate when their content changes, and Spacer shows neither.
`contrast`	It changes how the view is drawn, and Spacer draws nothing that you can see.
`cornerRadius`	It changes how the view is drawn, and Spacer draws nothing that you can see.
`disabled`	It turns off the controls in the view, and Spacer has none.
`dynamicTypeSize`	It changes only text and SF Symbols, and Spacer shows neither.
`font`	It changes only text and SF Symbols, and Spacer shows neither.
`foregroundColor`	It changes how the view is drawn, and Spacer draws nothing that you can see.
`foregroundStyle`	It changes how the view is drawn, and Spacer draws nothing that you can see.
`geometryGroup` iOS 17+	It works on the child views that you give the component, and Spacer takes none.
`glassEffect`	It paints in the area of the view, and Spacer draws nothing that you can see.
`grayscale`	It changes how the view is drawn, and Spacer draws nothing that you can see.
`hidden`	It hides what the view draws, and Spacer draws nothing that you can see.
`hueRotation`	It changes how the view is drawn, and Spacer draws nothing that you can see.
`imageScale`	It changes only SF Symbols, and Spacer shows none.
`italic`	It changes only text, and Spacer shows no text.
`kerning`	It changes only text, and Spacer shows no text.
`lineHeight` iOS 26+	It changes only text, and Spacer shows no text.
`lineLimit`	It changes only text, and Spacer shows no text.
`lineSpacing`	It changes only text, and Spacer shows no text.
`luminanceToAlpha`	It changes how the view is drawn, and Spacer draws nothing that you can see.
`mask`	It changes how the view is drawn, and Spacer draws nothing that you can see.
`minimumScaleFactor`	It changes only text, and Spacer shows no text.
`monospacedDigit`	It changes only text, and Spacer shows no text.
`multilineTextAlignment`	It changes only text, and Spacer shows no text.
`offset`	It changes how the view is drawn, and Spacer draws nothing that you can see.
`onAppear`	In SDK 57, Spacer does not send modifier events to JavaScript, so the handler does not run.
`onDisappear`	In SDK 57, Spacer does not send modifier events to JavaScript, so the handler does not run.
`onGeometryChange`	In SDK 57, Spacer does not send modifier events to JavaScript, so the handler does not run.
`onLongPressGesture`	In SDK 57, Spacer does not send modifier events to JavaScript, so the handler does not run.
`onTapGesture`	In SDK 57, Spacer does not send modifier events to JavaScript, so the handler does not run.
`opacity`	It changes how the view is drawn, and Spacer draws nothing that you can see.
`overlay`	It paints in the area of the view, and Spacer draws nothing that you can see.
`redacted`	It changes how the view is drawn, and Spacer draws nothing that you can see.
`rotation3DEffect`	It changes how the view is drawn, and Spacer draws nothing that you can see.
`rotationEffect`	It changes how the view is drawn, and Spacer draws nothing that you can see.
`saturation`	It changes how the view is drawn, and Spacer draws nothing that you can see.
`scaleEffect`	It changes how the view is drawn, and Spacer draws nothing that you can see.
`shadow`	It changes how the view is drawn, and Spacer draws nothing that you can see.
`strikethrough`	It changes only text, and Spacer shows no text.
`strokeBorder`	It changes how the view is drawn, and Spacer draws nothing that you can see.
`textCase`	It changes only text, and Spacer shows no text.
`tint`	It changes the accent colour of controls and SF Symbols, and Spacer shows neither.
`truncationMode`	It changes only text, and Spacer shows no text.
`underline`	It changes only text, and Spacer shows no text.
`zIndex`	It changes the order of views that cover each other in the same parent, and Spacer 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:

Spacer (SwiftUI) (source-of-truth/versions/v57.0.0/sdk/ui/swift-ui/spacer.md)
Spacer (Universal) (source-of-truth/versions/v57.0.0/sdk/ui/universal/spacer.md)

On this page