SizedBox

Beta

Fixed-size container, useful as a spacer with explicit dimensions.

Installation

npm install @xaui/native

Import

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

Basic Usage

Minimal example showing the component with its default configuration.

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

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

Fixed spacer

Use SizedBox as blank space between items.

import { Column, SizedBox } from '@xaui/native/view'
import { Typography } from '@xaui/native/typography'

export function SizedBoxSpacerExample() {
  return (
    <Column>
      <Typography>Section A</Typography>
      <SizedBox height={32} />
      <Typography>Section B</Typography>
    </Column>
  )
}

Fixed-size container

Constrain a child to an exact size.

import { SizedBox } from '@xaui/native/view'
import { View } from 'react-native'

export function FixedContainerExample() {
  return (
    <SizedBox width={80} height={80}>
      <View style={{ flex: 1, backgroundColor: '#4f46e5', borderRadius: 8 }} />
    </SizedBox>
  )
}

Expanded (fill remaining space)

Equivalent to Flutter Expanded — takes all available space in its parent flex container.

import { Row, SizedBox } from '@xaui/native/view'

export function ExpandedExample() {
  return (
    <Row>
      <SizedBox width={48} height={48} />
      <SizedBox expand>
        {/* fills remaining row space */}
      </SizedBox>
    </Row>
  )
}

Shrink (zero size)

Collapses to nothing — Flutter SizedBox.shrink() equivalent.

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

export function ShrinkExample() {
  return <SizedBox shrink />
}