ConstrainedBox

Beta

Flutter-inspired box that imposes min/max size constraints on its child — equivalent to ConstrainedBox + BoxConstraints.

Installation

npm install @xaui/native

Import

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

Basic Usage

Minimal example showing the component with its default configuration.

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

export function Example() {
  return (
    <ConstrainedBox>
      {/* children */}
    </ConstrainedBox>
  )
}

Minimum width

Prevent a child from shrinking below a certain width.

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

export function MinWidthExample() {
  return (
    <ConstrainedBox constraints={{ minWidth: 200 }}>
      <View style={{ backgroundColor: '#6b21a8', height: 40, borderRadius: 8 }} />
    </ConstrainedBox>
  )
}

Maximum width

Cap how wide a child can grow — useful for readable text blocks.

import { ConstrainedBox } from '@xaui/native/view'
import { Typography } from '@xaui/native/typography'

export function MaxWidthExample() {
  return (
    <ConstrainedBox constraints={{ maxWidth: 300 }}>
      <Typography>
        This text will wrap instead of stretching across the full screen.
      </Typography>
    </ConstrainedBox>
  )
}

Combined min/max constraints

Bind a child within both lower and upper bounds — Flutter BoxConstraints equivalent.

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

export function CombinedExample() {
  return (
    <ConstrainedBox
      constraints={{
        minWidth: 100,
        maxWidth: 250,
        minHeight: 60,
        maxHeight: 120,
      }}
    >
      <View style={{ flex: 1, backgroundColor: '#0891b2', borderRadius: 8 }} />
    </ConstrainedBox>
  )
}