This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

For cross-platform usage, see the universal Spacer — it renders the appropriate native component per platform.

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

Installation

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.

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