[MOO-2184] Migrate to FlashList

packages/pluggableWidgets/gallery-native/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+-   We migrated from using the native FlatList to @shopify/flash-list.
+
 ## [2.0.2] - 2025-10-17
 
 ### Fixed

packages/pluggableWidgets/gallery-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gallery-native",
   "widgetName": "Gallery",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "A flexible gallery widget that renders columns, rows and layouts.",
   "copyright": "© Mendix Technology BV 2022. All rights reserved.",
   "license": "Apache-2.0",
@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@mendix/piw-utils-internal": "*",
+    "@shopify/flash-list": "2.2.2",
     "react-native-device-info": "14.0.4"
   },
   "devDependencies": {

packages/pluggableWidgets/gallery-native/src/Gallery.tsx

@@ -49,6 +49,7 @@ export const Gallery = (props: GalleryProps<GalleryStyle>): ReactElement => {
                 }),
                 {}
             ),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         [props.filterList, viewStateFilters.current]
     );
 

packages/pluggableWidgets/gallery-native/src/__mocks__/@shopify/flash-list.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { View } from "react-native";
+
+// Mock FlashList - render items directly without using FlatList
+export const FlashList = React.forwardRef((props: any) => {
+    const {
+        data = [],
+        renderItem,
+        ListEmptyComponent,
+        ListFooterComponent,
+        ListHeaderComponent,
+        onRefresh,
+        ...rest
+    } = props;
+
+    // simulate the refreshControl structure returned by real FlashList
+    const refreshControl = onRefresh ? { props: { onRefresh } } : undefined;
+
+    const renderItems = (): any => {
+        if (!data || data.length === 0) {
+            return ListEmptyComponent;
+        }
+
+        return data.map((item: any, index: number) => (
+            <View key={item.id || index}>{renderItem?.({ item, index })}</View>
+        ));
+    };
+
+    return (
+        <View {...rest} refreshControl={refreshControl}>
+            {ListHeaderComponent}
+            {renderItems()}
+            {ListFooterComponent}
+        </View>
+    );
+});
+
+FlashList.displayName = "FlashList";

packages/pluggableWidgets/gallery-native/src/components/Gallery.tsx

@@ -1,11 +1,12 @@
-import { ReactElement, ReactNode, useCallback } from "react";
-import { Text, FlatList, Pressable, View, ViewProps, Platform, TouchableOpacity } from "react-native";
+import { ReactElement, ReactNode, useCallback, useMemo } from "react";
+import { Text, Pressable, View, ViewProps, Platform, TouchableOpacity } from "react-native";
 import { ObjectItem, DynamicValue } from "mendix";
 import DeviceInfo from "react-native-device-info";
 import { GalleryStyle } from "../ui/Styles";
 import { PaginationEnum, ScrollDirectionEnum } from "../../typings/GalleryProps";
 import { isAvailable } from "@mendix/piw-utils-internal";
 import { extractStyles } from "@mendix/pluggable-widgets-tools";
+import { FlashList } from "@shopify/flash-list";
 
 const DEFAULT_RIPPLE_COLOR = "rgba(0, 0, 0, 0.2)";
 
@@ -79,7 +80,7 @@ export const Gallery = <T extends ObjectItem>(props: GalleryProps<T>): ReactElem
         ]
     );
 
-    const loadMoreButton = (): ReactElement | null => {
+    const loadMoreButton = useMemo((): ReactElement | null => {
         const renderButton = (
             <Text style={props.style.loadMoreButtonCaption}>
                 {props.loadMoreButtonCaption && isAvailable(props.loadMoreButtonCaption)
@@ -118,16 +119,29 @@ export const Gallery = <T extends ObjectItem>(props: GalleryProps<T>): ReactElem
                 <TouchableOpacity {...buttonProps}>{renderButton}</TouchableOpacity>
             )
         ) : null;
-    };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        props.style.loadMoreButtonCaption,
+        props.loadMoreButtonCaption,
+        props.style.loadMoreButtonPressableContainer,
+        name,
+        props.pagination,
+        props.hasMoreItems,
+        props.loadMoreItems
+    ]);
 
-    const renderEmptyPlaceholder = (): ReactElement => (
-        <View style={props.style.emptyPlaceholder}>{props.emptyPlaceholder}</View>
+    const renderEmptyPlaceholder = useMemo(
+        (): ReactElement => <View style={props.style.emptyPlaceholder}>{props.emptyPlaceholder}</View>,
+        [props.style.emptyPlaceholder, props.emptyPlaceholder]
     );
 
     return (
-        <View testID={`${name}`} style={props.style.container}>
+        <View
+            testID={`${name}`}
+            style={[props.style.container, !isScrollDirectionVertical && { flexDirection: "row" }]}
+        >
             {props.filters ? <View>{props.filters}</View> : null}
-            <FlatList
+            <FlashList
                 {...(isScrollDirectionVertical && props.pullDown ? { onRefresh: props.pullDown } : {})}
                 {...(isScrollDirectionVertical ? { numColumns } : {})}
                 ListFooterComponent={loadMoreButton}

packages/pluggableWidgets/gallery-native/src/components/__tests__/Gallery.spec.tsx

@@ -7,6 +7,7 @@ import { render, fireEvent, act } from "@testing-library/react-native";
 import { Gallery, GalleryProps } from "../Gallery";
 
 jest.mock("react-native-device-info", () => ({ isTablet: jest.fn().mockReturnValue(false) }));
+jest.mock("@shopify/flash-list"); // Mocking FlashList API because it causes issues with the test renderer
 
 const itemWrapperFunction =
     ({ onClick }: { onClick?: () => void }): GalleryProps<ObjectItem>["itemRenderer"] =>