Masonry List

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

PropertyDescription
Component Name To alter the name of the component. The name is reflected in the Components tree. Defaults to List.
Number of columnsDefine 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 RenderHow many items to render in the initial batch
End Reached Threshold

Triggers

TriggerDescription
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

1920

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.