Spacer

Beta

Flexible spacer that fills available space inside a Row or Column.

Installation

npm install @xaui/native

Import

import { Spacer } from '@xaui/native/view'

Basic Usage

Minimal example showing the component with its default configuration.

import { Spacer } from '@xaui/native/view'

export function Example() {
  return <Spacer />
}

Push Items Apart

Place a Spacer between items to push them to opposite ends.

import { Row, Spacer } from '@xaui/native/view'
import { Typography } from '@xaui/native/typography'

export function SpacerExample() {
  return (
    <Row fullWidth>
      <Typography>Left</Typography>
      <Spacer />
      <Typography>Right</Typography>
    </Row>
  )
}

Weighted Spacing

Use flex to distribute space unevenly.

import { Row, Spacer } from '@xaui/native/view'
import { Typography } from '@xaui/native/typography'

export function WeightedSpacerExample() {
  return (
    <Row fullWidth>
      <Typography>Start</Typography>
      <Spacer flex={2} />
      <Typography>Middle</Typography>
      <Spacer flex={1} />
      <Typography>End</Typography>
    </Row>
  )
}