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

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

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.

Modifiers for any view

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