Docs
BlogChangelogStar Us on GitHub
HomeGuidesEASReferenceLearn

Reference version

ArchiveExpo SnackDiscord and ForumsNewsletter

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

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

Spacer

A layout spacer that produces empty space between siblings.

Android
iOS
Web
Included in Expo Go

GitHub

npm

Changelog

A layout spacer that produces empty space between siblings inside a Row or Column. Use size for a fixed gap, or flexible to fill the remaining main-axis space.

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

Fixed-size spacer

FixedSpacerExample.tsx
import { Host, Column, Text, Spacer } from '@expo/ui';

export default function FixedSpacerExample() {
  return (
    <Host matchContents>
      <Column>
        <Text>Top</Text>
        <Spacer size={32} />
        <Text>Bottom</Text>
      </Column>
    </Host>
  );
}

Flexible spacer

A flexible spacer fills the remaining space along its parent's main axis, pushing the surrounding content to opposite ends.

FlexibleSpacerExample.tsx
import { Host, Row, Text, Spacer } from '@expo/ui';

export default function FlexibleSpacerExample() {
  return (
    <Host style={{ flex: 1 }}>
      <Row>
        <Text>Leading</Text>
        <Spacer flexible />
        <Text>Trailing</Text>
      </Row>
    </Host>
  );
}

API

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

Component

Spacer

Android
iOS
Web

Type: React.Element<SpacerProps>

A layout spacer that produces empty space between siblings in a Row or Column.

Props for the Spacer component.

A Spacer produces empty space between siblings in a Row or Column. Use size for a fixed amount of space, or flexible to fill the remaining space along the parent's main axis.

SpacerProps

disabled

Android
iOS
Web
Optional • Type: boolean

Whether the component is disabled. Disabled components do not respond to user interaction.

flexible

Android
iOS
Web
Optional • Type: boolean • Default: false

When true, the spacer expands to fill the available space along the parent's main axis, pushing sibling content to the opposite end.

hidden

Android
iOS
Web
Optional • Type: boolean

Whether the component is hidden.

modifiers

Android
iOS
Optional • Type: ModifierConfig[]

Platform-specific modifier escape hatch. Pass an array of modifier configs from @expo/ui/swift-ui/modifiers or @expo/ui/jetpack-compose/modifiers. A modifier supplied here replaces any modifier of the same type that the component derives from style or other props.

onAppear

Android
iOS
Web
Optional • Type: () => void

Called when the component appears on screen.

onDisappear

Android
iOS
Web
Optional • Type: () => void

Called when the component is removed from screen.

onPress

Android
iOS
Web
Optional • Type: () => void

Called when the component is pressed.

size

Android
iOS
Web
Optional • Type: number

Fixed size in density-independent pixels. Interpreted as width in a horizontal container and as height in a vertical container.

style

Android
iOS
Web
Optional • Type: Pick<ViewStyle, 'padding' | 'paddingHorizontal' | 'paddingVertical' | 'paddingTop' | 'paddingBottom' | 'paddingLeft' | 'paddingRight' | 'backgroundColor' | 'borderRadius' | 'borderWidth' | 'borderColor' | 'opacity' | 'width' | 'height'>

Platform-agnostic style properties. These are translated to SwiftUI modifiers on iOS and Jetpack Compose modifiers on Android.

testID

Android
iOS
Web
Optional • Type: string

Identifier used to locate the component in end-to-end tests.