MasonryGrid

Beta

Masonry-style grid where items fill the shortest column first.

Installation

npm install @xaui/native

Import

import { MasonryGrid, MasonryGridItem, MasonryGridBuilder } from '@xaui/native/view'

Basic Usage

Minimal example showing the component with its default configuration.

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

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

Static Masonry

Items of varying heights placed in masonry columns using MasonryGridItem.

import { MasonryGrid, MasonryGridItem } from '@xaui/native/view'
import { Typography } from '@xaui/native/typography'
import { View } from 'react-native'

export function StaticMasonryExample() {
  return (
    <MasonryGrid columns={2} spacing={8}>
      <MasonryGridItem><View style={{ height: 120, backgroundColor: '#dbeafe', borderRadius: 8 }} /></MasonryGridItem>
      <MasonryGridItem><View style={{ height: 80, backgroundColor: '#dcfce7', borderRadius: 8 }} /></MasonryGridItem>
      <MasonryGridItem><View style={{ height: 160, backgroundColor: '#fef9c3', borderRadius: 8 }} /></MasonryGridItem>
      <MasonryGridItem><View style={{ height: 100, backgroundColor: '#ffe4e6', borderRadius: 8 }} /></MasonryGridItem>
      <MasonryGridItem><View style={{ height: 90, backgroundColor: '#f3e8ff', borderRadius: 8 }} /></MasonryGridItem>
    </MasonryGrid>
  )
}

Dynamic Masonry with MasonryGridBuilder

Render variable-height items from a data array.

import { MasonryGridBuilder } from '@xaui/native/view'
import { Typography } from '@xaui/native/typography'
import { View } from 'react-native'

const photos = [
  { id: '1', height: 130, label: 'Photo A' },
  { id: '2', height: 90, label: 'Photo B' },
  { id: '3', height: 160, label: 'Photo C' },
  { id: '4', height: 110, label: 'Photo D' },
]

export function DynamicMasonryExample() {
  return (
    <MasonryGridBuilder
      data={photos}
      keyExtractor={item => item.id}
      columns={2}
      spacing={8}
      renderItem={item => (
        <View style={{ height: item.height, backgroundColor: '#f1f5f9', borderRadius: 10, justifyContent: 'center', alignItems: 'center' }}>
          <Typography>{item.label}</Typography>
        </View>
      )}
    />
  )
}