The Masonry List component is used as a child of the Fetch component to display a list or grid of items from an API endpoint.

The Masonry List component renders a custom masonry layout for images.
Masonry layout is a method of displaying data in a grid format that adjusts the layout so everything fits together, kinda like bricks. You typically see it with images or cards of varying sizes.
It uses an intelligent algorithm to sort the images evenly as possible according to the index position or fill in as soon as the image is fetched.

Configuration Properties

Property	Description
Component Name	To alter the name of the component. The name is reflected in the Components tree. Defaults to List.
Number of columns	Define the number of columns the list should display. Accepts a number. By default, the value is set to `1`.
Estimated Item Size	A single numeric value that hints FlashList about the approximate size of the items before they're rendered. (read the docs) By default, the value is set to `50`.
Optimize Item Arrangement
Initial Number to Render	How many items to render in the initial batch
End Reached Threshold

Triggers

Trigger	Description
On Refresh	Starts the action when the element is refreshed
On End Reached	Starts the action when the end threshold is reached

📘
Learn how to set and use the Fetch and List component in Fetching Data.

Modifying the Number of Columns

You can modify the Number of Columns property on a List component to add more columns.

Select the Masonry List component in the Components tree.
Go to the Configs tab (second tab) in the Properties Panel.
Specify a value for the property Number of columns.

Masonry List Example

In the example, we are passing the top-level response from the Fetch component to the Masonry List. We have simulated images of different sizes here for demonstration purposes.