Row

Beta

Horizontal flex layout with configurable alignment and spacing.

Installation

npm install @xaui/native

Import

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

Basic Usage

Minimal example showing the component with its default configuration.

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

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

Basic row

Horizontal layout with a gap between items.

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

export function BasicRowExample() {
  return (
    <Row gap={12} crossAxisAlignment="center">
      <View style={{ width: 48, height: 48, backgroundColor: '#6366f1', borderRadius: 24 }} />
      <View style={{ flex: 1, height: 16, backgroundColor: '#e2e8f0', borderRadius: 8 }} />
    </Row>
  )
}

Spaced row

Items pushed to opposite ends.

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

export function SpacedRowExample() {
  return (
    <Row mainAxisAlignment="spaceBetween" crossAxisAlignment="center">
      <View style={{ width: 80, height: 32, backgroundColor: '#0ea5e9', borderRadius: 6 }} />
      <View style={{ width: 80, height: 32, backgroundColor: '#f43f5e', borderRadius: 6 }} />
    </Row>
  )
}