Column

Beta

Vertical flex layout with configurable alignment and spacing.

Installation

npm install @xaui/native

Import

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

Basic Usage

Minimal example showing the component with its default configuration.

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

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

Basic column

Vertical stack with a gap between items.

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

export function BasicColumnExample() {
  return (
    <Column gap={12} crossAxisAlignment="stretch">
      <View style={{ height: 48, backgroundColor: '#6366f1', borderRadius: 8 }} />
      <View style={{ height: 48, backgroundColor: '#8b5cf6', borderRadius: 8 }} />
      <View style={{ height: 48, backgroundColor: '#a855f7', borderRadius: 8 }} />
    </Column>
  )
}

Centered column

Children centered both horizontally and vertically.

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

export function CenteredColumnExample() {
  return (
    <Column mainAxisAlignment="center" crossAxisAlignment="center" gap={16}>
      <View style={{ width: 80, height: 80, backgroundColor: '#0ea5e9', borderRadius: 40 }} />
      <View style={{ width: 120, height: 16, backgroundColor: '#e2e8f0', borderRadius: 8 }} />
    </Column>
  )
}