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

Align children side by side with a gap.

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

export function BasicRowExample() {
  return (
    <Row spacing={16}>
      <Typography>Left</Typography>
      <Typography>Center</Typography>
      <Typography>Right</Typography>
    </Row>
  )
}

Space Between

Push items to the edges with space-between.

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

export function SpaceBetweenExample() {
  return (
    <Row mainAxisAlignment="space-between" fullWidth>
      <Button variant="flat">Cancel</Button>
      <Button>Confirm</Button>
    </Row>
  )
}

Vertically Centered

Center children on the cross (vertical) axis.

import { Row } from '@xaui/native/view'
import { Avatar } from '@xaui/native/avatar'
import { Typography } from '@xaui/native/typography'

export function VerticalCenterExample() {
  return (
    <Row crossAxisAlignment="center" spacing={12}>
      <Avatar name="Jane Doe" size="sm" />
      <Typography style={{ fontWeight: 'bold' }}>Jane Doe</Typography>
    </Row>
  )
}