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.
|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 |
|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
|Optimize Item Arrangement|
|Initial Number to Render||How many items to render in the initial batch|
|End Reached Threshold|
|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.
Updated 5 months ago