Wrap

Beta

Flex container that wraps children onto multiple lines with configurable spacing and run alignment.

Installation

npm install @xaui/native

Import

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

Basic Usage

Minimal example showing the component with its default configuration.

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

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

Chip list

Tags that wrap onto the next line when they overflow.

import { Wrap } from '@xaui/native/view'
import { Chip } from '@xaui/native/chip'

const tags = ['React', 'TypeScript', 'Flutter', 'UI', 'Mobile', 'Design']

export function ChipListExample() {
  return (
    <Wrap spacing={8} runSpacing={8}>
      {tags.map((tag) => <Chip key={tag} label={tag} />)}
    </Wrap>
  )
}

Centered wrapping row

Items are centered in each run.

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

export function CenteredWrapExample() {
  return (
    <Wrap alignment="center" spacing={12} runSpacing={12}>
      {Array.from({ length: 7 }, (_, i) => (
        <View key={i} style={{ width: 60, height: 60, backgroundColor: '#6366f1', borderRadius: 8 }} />
      ))}
    </Wrap>
  )
}