Flexible

Beta

Like Expanded but with a fit prop — tight fills all allotted space, loose allows the child to be smaller.

Installation

npm install @xaui/native

Import

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

Basic Usage

Minimal example showing the component with its default configuration.

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

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

Loose fit — child can be smaller

Child takes up to its allotted share but shrinks to its content.

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

export function LooseFitExample() {
  return (
    <Row>
      <Flexible flex={1}>
        <View style={{ height: 40, width: 40, backgroundColor: '#6366f1', borderRadius: 8 }} />
      </Flexible>
      <Flexible flex={2}>
        <View style={{ height: 40, width: 80, backgroundColor: '#8b5cf6', borderRadius: 8 }} />
      </Flexible>
    </Row>
  )
}

Tight fit — child fills allotted space

Equivalent to Expanded — child stretches to fill its share.

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

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