Align

Beta

Aligns a child within available space using named positions or fractional coordinates.

Installation

npm install @xaui/native

Import

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

Basic Usage

Minimal example showing the component with its default configuration.

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

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

Top-right alignment

Child anchored to the top-right corner.

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

export function TopRightExample() {
  return (
    <Align alignment="topRight">
      <View style={{ width: 60, height: 60, backgroundColor: '#6366f1', borderRadius: 8 }} />
    </Align>
  )
}

Centered

Child centered inside available space.

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

export function CenteredExample() {
  return (
    <Align alignment="center">
      <View style={{ width: 80, height: 80, backgroundColor: '#0ea5e9', borderRadius: 40 }} />
    </Align>
  )
}