Container

Stable

Flutter-inspired layout primitive for sizing, spacing, alignment, decoration, and interaction in a single composable component.

Installation

npm install @xaui/native

Import

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

Basic Usage

Minimal example showing the component with its default configuration.

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

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

Shadow Card

Raised card effect using the shadow prop.

import { Container } from '@xaui/native/view'
import { Text } from 'react-native'

export function ShadowCard() {
  return (
    <Container
      color="#ffffff"
      padding={16}
      borderRadius={12}
      shadow={{ offset: { x: 0, y: 4 }, blur: 16, opacity: 0.1 }}
    >
      <Text style={{ fontWeight: '600' }}>Card title</Text>
      <Text style={{ color: '#71717a', marginTop: 4, fontSize: 13 }}>
        Subtle shadow lifts the card off the background.
      </Text>
    </Container>
  )
}

Alignment

Center children using the Flutter-style alignment prop.

import { Container } from '@xaui/native/view'
import { Text } from 'react-native'

export function CenteredContainer() {
  return (
    <Container
      height={160}
      color="#6b21a8"
      borderRadius={12}
      alignment="center"
    >
      <Text style={{ color: '#ffffff', fontWeight: '700', fontSize: 18 }}>
        Centered
      </Text>
    </Container>
  )
}

EdgeInsets Spacing

Fine-grained padding and margin using the EdgeInsets format.

import { Container } from '@xaui/native/view'
import { Text } from 'react-native'

export function SpacingExample() {
  return (
    <Container
      padding={{ horizontal: 20, vertical: 12 }}
      margin={{ top: 8, bottom: 8 }}
      border={{ width: 1, color: '#e4e4e7' }}
      borderRadius={8}
    >
      <Text>Asymmetric spacing via EdgeInsets</Text>
    </Container>
  )
}

Pressable Container

Any press handler automatically switches View to Pressable. No extra wrapper needed.

import { Container } from '@xaui/native/view'
import { Text } from 'react-native'

export function PressableCard() {
  return (
    <Container
      color="#f3e8ff"
      padding={16}
      borderRadius={12}
      shadow={{ offset: { x: 0, y: 2 }, blur: 8, opacity: 0.08 }}
      onPress={() => alert('pressed!')}
    >
      <Text style={{ color: '#6b21a8', fontWeight: '600' }}>Tap me</Text>
    </Container>
  )
}

Per-side Border

Apply borders to specific sides using the directional border format.

import { Container } from '@xaui/native/view'
import { Text } from 'react-native'

export function BorderExample() {
  return (
    <Container
      padding={{ left: 16, vertical: 12 }}
      border={{ left: { width: 3, color: '#6b21a8' } }}
    >
      <Text style={{ fontWeight: '600' }}>Left accent border</Text>
      <Text style={{ color: '#71717a', fontSize: 13, marginTop: 2 }}>
        Only the left side has a border.
      </Text>
    </Container>
  )
}

Flex Layout

Distribute space between containers with the flex prop.

import { Container } from '@xaui/native/view'
import { View, Text } from 'react-native'

export function FlexLayout() {
  return (
    <View style={{ flexDirection: 'row', gap: 8 }}>
      <Container
        flex={1}
        padding={12}
        borderRadius={8}
        border={{ width: 1, color: '#e4e4e7' }}
        alignment="center"
      >
        <Text>1</Text>
      </Container>
      <Container
        flex={2}
        padding={12}
        borderRadius={8}
        color="#f3e8ff"
        alignment="center"
      >
        <Text style={{ color: '#6b21a8' }}>2</Text>
      </Container>
    </View>
  )
}