Spacer

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

Android

GitHub

npm

Changelog

Bundled version:

~55.0.0

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

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';

Component

`Spacer`

Android

Type: React.Element<SpacerProps>

A spacer component that fills available space. Use with the weight() modifier to create flexible spacing in Row or Column layouts.

Example

<Row>
  <Text>Left</Text>
  <Spacer modifiers={[weight(1)]} />
  <Text>Right</Text>
</Row>

SpacerProps

`modifiers`

Android

Optional • Type: ExpoModifier[]

Modifiers for the component. Use weight() modifier to make the spacer flexible.