FractionallySizedBox

Beta

Sizes its child as a fraction of the parent's dimensions — Flutter FractionallySizedBox equivalent.

Installation

npm install @xaui/native

Import

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

Basic Usage

Minimal example showing the component with its default configuration.

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

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

Half-width box

Child takes 50% of the parent width.

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

export function HalfWidthExample() {
  return (
    <FractionallySizedBox widthFactor={0.5}>
      <View style={{ backgroundColor: '#6b21a8', height: 40, borderRadius: 8 }} />
    </FractionallySizedBox>
  )
}

Centered fraction

50% width, 50% height, centered within the parent.

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

export function CenteredExample() {
  return (
    <FractionallySizedBox
      widthFactor={0.5}
      heightFactor={0.5}
      alignment="center"
    >
      <View style={{ flex: 1, backgroundColor: '#0891b2', borderRadius: 8 }} />
    </FractionallySizedBox>
  )
}