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 a 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>
  )
}

String Dimensions and Full Width

Use string dimensions and fullWidth for responsive sizing.

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

export function SizedBoxResponsiveExample() {
  return (
    <SizedBox fullWidth height="40%">
      <View style={{ flex: 1, backgroundColor: '#e0e7ff', borderRadius: 8 }} />
    </SizedBox>
  )
}