Masonry Layout
Masonry Layout allows you to create a grid of items with different heights. It is a great way to display a collection of images with different sizes.

FlashList with masonry prop (v2)
In v2, masonry layout is enabled using the masonry
prop on FlashList
.
import React from "react";
import { View, Text } from "react-native";
import { FlashList } from "@shopify/flash-list";
import { DATA } from "./data";
const MyMasonryList = () => {
return (
<FlashList
data={DATA}
masonry
numColumns={2}
renderItem={({ item }) => <Text>{item.title}</Text>}
/>
);
};
With overrideItemLayout
When you want to customize item layout (such as setting different spans), you can use overrideItemLayout
:
import React from "react";
import { View, Text, Image } from "react-native";
import { FlashList } from "@shopify/flash-list";
interface MasonryItem {
id: string;
title: string;
height: number;
span: number; // Number of columns this item should span
imageUrl: string;
}
const MyMasonryList = () => {
return (
<FlashList
data={data}
masonry
numColumns={3}
overrideItemLayout={(layout, item) => {
// Set the span based on the item's span property
layout.span = item.span;
// Note: In v2, size estimates are no longer needed in overrideItemLayout
// The actual height is determined by the rendered component
}}
renderItem={({ item }) => (
<View style={{ backgroundColor: "#f0f0f0", margin: 4 }}>
<Image source={{ uri: item.imageUrl }} style={{ flex: 1 }} />
<Text>{item.title}</Text>
</View>
)}
keyExtractor={(item) => item.id}
/>
);
};
optimizeItemArrangement
prop
optimizeItemArrangement?: boolean;
When enabled with masonry
layout, this will try to reduce differences in column height by modifying item order. Default is true
.
Migration from v1
If you're migrating from v1's MasonryFlashList
, here are the key changes:
- Use
FlashList
withmasonry
prop instead ofMasonryFlashList
overrideItemLayout
no longer needs size estimates - only use it for settinglayout.span
getColumnFlex
is not supported in v2 masonry layout- Item heights are determined by actual rendered component rather than estimates