Building a Masonry List View Widget for Mendix Native Mobile – Part 1
Introduction
In modern mobile applications, the way content is displayed plays a very important role in user experience. When building image-heavy applications such as product galleries, social feeds, portfolio apps, or media listing pages, a standard list or grid layout may not always provide the best visual experience.
This is where Masonry Layout becomes useful.
A masonry layout is a Pinterest-style grid where items are arranged in multiple columns, and each item can have a different height. Instead of forcing all cards into the same row height, the layout allows content to flow naturally. This helps reduce empty spaces and gives a clean, modern, and dynamic look.
In this blog series, we will explore a custom MasonryListView pluggable widget built for Mendix Native Mobile applications.
The widget supports:
-
Multi-column masonry grid
-
Infinite scroll pagination
-
Live search filtering
-
Duplicate item prevention
-
Configurable spacing and layout
-
Offline capability
In Part 1, we will focus on the functional side of the widget, its features, properties, and common use cases.
What Is a Masonry Layout?
A masonry layout is a Pinterest-style grid that arranges content into multiple columns while allowing items to have different heights. Unlike traditional grids, which force every item into the same row structure, masonry layouts utilize available space more efficiently.
This layout style is ideal for:
-
Product catalogs
-
Image galleries
-
Social media feeds
-
Portfolio applications
-
News and media cards
The result is a visually balanced and modern user interface.
What Is the Masonry List View Widget?
MasonryListView is a custom Mendix Native Mobile pluggable widget that displays data items in a Pinterest-style masonry grid layout.
Built on top of the @react-native-seoul/masonry-list library, it is designed specifically for Mendix Native Mobile applications.
The widget allows developers to display dynamic content across multiple columns while supporting varying item heights and advanced features such as pagination and search filtering.
Widget Identity
| Widget Name | Masonry List View |
| Widget ID | mendix.masonrylistview.MasonryListView |
| Package Name | MasonryListView |
| Version | 1.0.0 |
| Platform | Mendix Native Mobile |
| Offline Capable | Yes |
| Entity Context Required | Yes |
| License | Apache-2.0 |
Note: This widget is designed only for Mendix Native Mobile applications and does not support Mendix web pages.
Why Use a Masonry Layout in Mendix Native Mobile Applications?
Traditional grid layouts work well when all cards have similar content. However, in real-world applications:
-
Product images may have different sizes
-
Descriptions may vary in length
-
Cards may contain different amounts of information
-
Images may use different aspect ratios
Using a standard grid often creates empty spaces and uneven layouts.
A masonry layout solves this problem by intelligently arranging items into columns based on available space, resulting in a cleaner and more visually appealing design.
Key Features of the Masonry List View Widget
Multi-Column Masonry Grid
The main feature of the widget is the masonry grid layout.
It displays Mendix data items in multiple columns, allowing each item to maintain its own height while automatically arranging content for optimal screen utilization.
Common use cases include:
-
Product listings
-
Image galleries
-
News cards
-
Portfolio cards
-
Dashboard widgets
Infinite Scroll Pagination
The widget supports infinite scrolling through the onLoadMore action.
When users scroll near the bottom of the list, the widget can automatically trigger a Mendix microflow or nanoflow to load more records.
Benefits include:
-
Improved performance
-
Faster page loading
-
Reduced memory usage
-
Better user experience
Live Search Filtering
The widget supports live search filtering using the searchText property.
When the search value changes:
-
Existing records are cleared
-
Filtered results are loaded
-
Matching records are displayed
-
Pagination is temporarily disabled
This functionality is ideal for searchable product catalogs and image galleries.
Duplicate Item Prevention
Pagination can sometimes return duplicate records.
To prevent this issue, the widget includes a built-in deduplication mechanism that tracks loaded item IDs and prevents duplicate records from being displayed.
Configurable Layout and Spacing
The widget provides configuration options directly in Mendix Studio Pro.
Column Count
Controls the number of columns displayed in the masonry layout.
Default Value: 2
Margin Between Items
Defines spacing around each card. Default Value: 3
Padding Items
Defines outer spacing around the list container. Default Value: 0
Offline Capability
The widget is offline-capable and can be used within Mendix offline-first mobile applications when data is available locally. This makes it suitable for enterprise and field-service applications.
Masonry List View Widget Properties
The widget provides the following configurable properties:
-
data
-
content
-
columnCount
-
marginBetweenItems
-
paddingItems
-
onLoadMore
-
searchText
The most important properties are data, content, onLoadMore, and searchText.
Common Use Cases of the Masonry List View Widget
Product Gallery
One of the most common use cases is a product gallery. Developers can display product images, names, and prices in a visually appealing masonry grid similar to modern shopping applications.
Paginated Feed
The widget is ideal for social media feeds and news applications. Records can be loaded in batches, creating a smooth infinite-scrolling experience.
Searchable Image Gallery
The widget can be combined with a search box to create dynamic image galleries. Users can search by:
-
Product name
-
Category
-
Tag
-
Keyword
The displayed results update automatically.
Masonry List View Widget Behavior Summary
Initial Page Load
Displays the first batch of records while pagination remains active.
User Scrolls Near Bottom
Triggers the onLoadMore action and loads additional records.
User Enters Search Text
Displays filtered results and temporarily disables pagination.
User Clears Search Text
Resets the list and resumes pagination.
Duplicate Records Returned
Duplicate records are automatically ignored.
Benefits of Using a Masonry Layout in Mendix
Using a masonry layout provides several advantages:
-
Better visual presentation
-
Efficient use of screen space
-
Pinterest-style user experience
-
Support for dynamic content heights
-
Improved user engagement
-
Modern mobile application design
Limitations of the Masonry List View Widget
Before implementation, consider the following limitations:
-
Supports only Mendix Native Mobile
-
Does not support Mendix Web
-
Columns have equal width
-
No built-in pull-to-refresh
-
No drag-and-drop reordering
-
Search depends on the data source
-
Pagination is disabled during active searches
Frequently Asked Questions
A Masonry Layout is a Pinterest-style grid that allows items to have different heights while maintaining a multi-column structure.
Yes. The widget supports infinite scrolling through the onLoadMore action.
Conclusion
The Masonry List View Widget provides an effective way to build modern Pinterest-style layouts in Mendix Native Mobile applications. With features such as masonry grid rendering, infinite scrolling, live search filtering, duplicate prevention, configurable spacing, and offline support, it offers a flexible solution for displaying dynamic content.
In Part 2, we will explore the technical implementation, project structure, dependencies, installation steps, and internal working of the Masonry List View Widget.