Flex

Beta

Generic Flutter-inspired flex container — direction, alignment, gap, wrap, and reversed.

Installation

npm install @xaui/native

Import

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

Basic Usage

Minimal example showing the component with its default configuration.

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

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

Row with space between

Horizontal flex with items spread evenly.

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

export function SpaceBetweenExample() {
  return (
    <Flex direction="horizontal" mainAxisAlignment="spaceBetween" gap={8}>
      <View style={{ width: 60, height: 60, backgroundColor: '#6366f1', borderRadius: 8 }} />
      <View style={{ width: 60, height: 60, backgroundColor: '#8b5cf6', borderRadius: 8 }} />
      <View style={{ width: 60, height: 60, backgroundColor: '#a855f7', borderRadius: 8 }} />
    </Flex>
  )
}

Vertical stack centered

Column direction with centered cross axis.

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

export function VerticalCenterExample() {
  return (
    <Flex direction="vertical" crossAxisAlignment="center" gap={12}>
      <View style={{ width: 120, height: 40, backgroundColor: '#0ea5e9', borderRadius: 8 }} />
      <View style={{ width: 80, height: 40, backgroundColor: '#38bdf8', borderRadius: 8 }} />
    </Flex>
  )
}