Center

Beta

Centers children horizontally and vertically within available space.

Installation

npm install @xaui/native

Import

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

Basic Usage

Minimal example showing the component with its default configuration.

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

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

Centered Content

Center an element both vertically and horizontally.

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

export function CenterBasicExample() {
  return (
    <Center style={{ minHeight: 180 }}>
      <Typography>Perfectly centered</Typography>
    </Center>
  )
}

Centered Card

Use custom style to center content in a colored surface.

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

export function CenterCardExample() {
  return (
    <Center style={{ minHeight: 140, backgroundColor: '#e0f2fe', borderRadius: 12 }}>
      <Typography style={{ fontWeight: '600' }}>Centered card content</Typography>
    </Center>
  )
}

Full Width Center

Stretch the centered container to full width with fullWidth.

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

export function CenterFullWidthExample() {
  return (
    <Center fullWidth style={{ minHeight: 120, backgroundColor: '#f1f5f9' }}>
      <Typography>Centered on full width</Typography>
    </Center>
  )
}