Spacer

A Jetpack Compose Spacer component for adding flexible space between elements.

Android

Recommended version:

~55.0.17

Expo UI Spacer matches the official Jetpack Compose Spacer API and is used to add flexible or fixed-size space between elements in a layout.

Installation

Terminal

- npx expo install @expo/ui

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

Spacer with weight

Use the weight() modifier to make the spacer fill available space proportionally within a Row or Column.

SpacerWeightExample.tsx

import { Host, Row, Spacer, Text } from '@expo/ui/jetpack-compose';
import { fillMaxWidth, weight } from '@expo/ui/jetpack-compose/modifiers';

export default function SpacerWeightExample() {
  return (
    <Host matchContents>
      <Row modifiers={[fillMaxWidth()]}>
        <Text>Left</Text>
        <Spacer modifiers={[weight(1)]} />
        <Text>Right</Text>
      </Row>
    </Host>
  );
}

Spacer with fixed size

Use a height or width modifier to create a spacer with a fixed dimension.

SpacerFixedSizeExample.tsx

import { Host, Column, Spacer, Text } from '@expo/ui/jetpack-compose';
import { height } from '@expo/ui/jetpack-compose/modifiers';

export default function SpacerFixedSizeExample() {
  return (
    <Host matchContents>
      <Column>
        <Text>Above</Text>
        <Spacer modifiers={[height(24)]} />
        <Text>Below (24dp gap)</Text>
      </Column>
    </Host>
  );
}

API

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

No API data file found, sorry!