Expanded

Beta

Expands a child to fill available space in a Row or Column, with an optional flex factor.

Installation

npm install @xaui/native

Import

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

Basic Usage

Minimal example showing the component with its default configuration.

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

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

Equal distribution

Two children sharing space equally inside a Row.

import { Row, Expanded } from '@xaui/native/view'
import { View } from 'react-native'

export function EqualShareExample() {
  return (
    <Row>
      <Expanded>
        <View style={{ height: 60, backgroundColor: '#6366f1', borderRadius: 8 }} />
      </Expanded>
      <Expanded>
        <View style={{ height: 60, backgroundColor: '#8b5cf6', borderRadius: 8 }} />
      </Expanded>
    </Row>
  )
}

Weighted distribution

Second child takes twice as much space.

import { Row, Expanded } from '@xaui/native/view'
import { View } from 'react-native'

export function WeightedExample() {
  return (
    <Row gap={8}>
      <Expanded flex={1}>
        <View style={{ height: 60, backgroundColor: '#0ea5e9', borderRadius: 8 }} />
      </Expanded>
      <Expanded flex={2}>
        <View style={{ height: 60, backgroundColor: '#38bdf8', borderRadius: 8 }} />
      </Expanded>
    </Row>
  )
}