This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 54).

Spacer

A SwiftUI Spacer component for flexible spacing.

iOS

tvOS

GitHub

npm

Changelog

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

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 spacer in HStack

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

SpacerHStackExample.tsx

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.

SpacerVStackExample.tsx

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

Component

`Spacer`

iOS

tvOS

Type: React.Element<SpacerProps>

SpacerProps

`minLength`

iOS

tvOS

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