From 1fd9cbe05fc3962374fa3990c95e905cd450ed94 Mon Sep 17 00:00:00 2001
From: Saurabh Chavan <saurabh.chavan@mendix.com>
Date: Wed, 16 Sep 2026 16:10:55 +0530
Subject: [PATCH 1/4] fix: fixed data not rendered issue for gallery widget

---
 .../gallery-native/CHANGELOG.md               |   2 +
 .../gallery-native/package.json               |   2 +-
 .../gallery-native/src/components/Gallery.tsx |  56 ++++++++-
 .../__snapshots__/Gallery.spec.tsx.snap       | 114 +++++++++++++++++-
 .../gallery-native/src/package.xml            |   2 +-
 5 files changed, 164 insertions(+), 12 deletions(-)

diff --git a/packages/pluggableWidgets/gallery-native/CHANGELOG.md b/packages/pluggableWidgets/gallery-native/CHANGELOG.md
index 18940f590..1ee503bbf 100644
--- a/packages/pluggableWidgets/gallery-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/gallery-native/CHANGELOG.md
@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+-   We've fixed an issue where Gallery widget does not display data.
+
 ## [2.1.0] - 2026-4-10
 
 ### Changed
diff --git a/packages/pluggableWidgets/gallery-native/package.json b/packages/pluggableWidgets/gallery-native/package.json
index 57b21044d..af527cd31 100644
--- a/packages/pluggableWidgets/gallery-native/package.json
+++ b/packages/pluggableWidgets/gallery-native/package.json
@@ -1,7 +1,7 @@
 {
   "name": "gallery-native",
   "widgetName": "Gallery",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "A flexible gallery widget that renders columns, rows and layouts.",
   "copyright": "© Mendix Technology BV 2022. All rights reserved.",
   "license": "Apache-2.0",
diff --git a/packages/pluggableWidgets/gallery-native/src/components/Gallery.tsx b/packages/pluggableWidgets/gallery-native/src/components/Gallery.tsx
index 956a1cfc1..d4f2e3274 100644
--- a/packages/pluggableWidgets/gallery-native/src/components/Gallery.tsx
+++ b/packages/pluggableWidgets/gallery-native/src/components/Gallery.tsx
@@ -1,5 +1,14 @@
-import { ReactElement, ReactNode, useCallback, useMemo } from "react";
-import { Text, Pressable, View, ViewProps, Platform, TouchableOpacity, useWindowDimensions } from "react-native";
+import { ReactElement, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+    LayoutChangeEvent,
+    Text,
+    Pressable,
+    View,
+    ViewProps,
+    Platform,
+    TouchableOpacity,
+    useWindowDimensions
+} from "react-native";
 import { ObjectItem, DynamicValue } from "mendix";
 import DeviceInfo from "react-native-device-info";
 import { GalleryStyle } from "../ui/Styles";
@@ -35,6 +44,13 @@ export const Gallery = <T extends ObjectItem>(props: GalleryProps<T>): ReactElem
     const lastItemId = props.items?.[props.items.length - 1]?.id;
     const { name, style, itemRenderer } = props;
     const { width } = useWindowDimensions();
+    // FlashList requires a non-zero height to render items (it's virtualized and needs viewport dimensions).
+    // When the parent provides height (e.g. via flex), we use flex: 1. When it doesn't (e.g. a Container
+    // widget with no flex/height), flex: 1 resolves to 0 and nothing renders. In that case, we fall back
+    // to minHeight based on FlashList's reported content size. This matches the ListView widget's approach.
+    const wrapperRef = useRef<View>(null);
+    const [contentHeight, setContentHeight] = useState(0);
+    const [layoutDecision, setLayoutDecision] = useState<"minHeight" | "flex" | null>(null);
 
     const onEndReached = (): void => {
         if (props.pagination === "virtualScrolling" && props.hasMoreItems) {
@@ -137,8 +153,39 @@ export const Gallery = <T extends ObjectItem>(props: GalleryProps<T>): ReactElem
         [props.style.emptyPlaceholder, props.emptyPlaceholder]
     );
 
+    const handleWrapperLayout = useCallback(
+        (event: LayoutChangeEvent) => {
+            const { height } = event.nativeEvent.layout;
+            if (height > 0 && layoutDecision === null) {
+                setLayoutDecision("flex");
+            }
+        },
+        [layoutDecision]
+    );
+
+    useEffect(() => {
+        if (contentHeight > 0 && layoutDecision === null && wrapperRef.current) {
+            wrapperRef.current.measure((_x, _y, _width, height) => {
+                setLayoutDecision(height > 0 ? "flex" : "minHeight");
+            });
+        }
+    }, [contentHeight, layoutDecision]);
+
+    const containerStyle = isScrollDirectionVertical
+        ? layoutDecision === "minHeight"
+            ? [{ minHeight: Math.max(contentHeight, 1) }, props.style.container]
+            : [{ flex: 1 }, props.style.container]
+        : props.style.container;
+
+    const listStyle = isScrollDirectionVertical ? [{ flex: 1 }, props.style.list] : props.style.list;
+
     return (
-        <View testID={`${name}`} style={props.style.container}>
+        <View
+            testID={`${name}`}
+            style={containerStyle}
+            ref={wrapperRef}
+            onLayout={isScrollDirectionVertical ? handleWrapperLayout : undefined}
+        >
             {props.filters ? <View>{props.filters}</View> : null}
             <FlashList
                 {...(isScrollDirectionVertical && props.pullDown ? { onRefresh: props.pullDown } : {})}
@@ -157,8 +204,9 @@ export const Gallery = <T extends ObjectItem>(props: GalleryProps<T>): ReactElem
                 onEndReachedThreshold={0.6}
                 scrollEventThrottle={50}
                 renderItem={renderItem}
-                style={props.style.list}
+                style={listStyle}
                 testID={`${name}-list`}
+                onContentSizeChange={isScrollDirectionVertical ? (_w, h) => setContentHeight(h) : undefined}
             />
         </View>
     );
diff --git a/packages/pluggableWidgets/gallery-native/src/components/__tests__/__snapshots__/Gallery.spec.tsx.snap b/packages/pluggableWidgets/gallery-native/src/components/__tests__/__snapshots__/Gallery.spec.tsx.snap
index 8665fd92e..633141b5b 100644
--- a/packages/pluggableWidgets/gallery-native/src/components/__tests__/__snapshots__/Gallery.spec.tsx.snap
+++ b/packages/pluggableWidgets/gallery-native/src/components/__tests__/__snapshots__/Gallery.spec.tsx.snap
@@ -2,7 +2,15 @@
 
 exports[`Gallery rendering rendering with load more button it shouldn't render the paging button if hasn't more item 1`] = `
 <View
-  style={{}}
+  onLayout={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      {},
+    ]
+  }
   testID="gallery-test"
 >
   <View
@@ -14,9 +22,18 @@ exports[`Gallery rendering rendering with load more button it shouldn't render t
     horizontal={false}
     keyExtractor={[Function]}
     numColumns={2}
+    onContentSizeChange={[Function]}
     onEndReached={[Function]}
     onEndReachedThreshold={0.6}
     scrollEventThrottle={50}
+    style={
+      [
+        {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
     testID="gallery-test-list"
   >
     <View>
@@ -178,7 +195,15 @@ exports[`Gallery rendering rendering with load more button it shouldn't render t
 
 exports[`Gallery rendering rendering with load more button renders correctly 1`] = `
 <View
-  style={{}}
+  onLayout={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      {},
+    ]
+  }
   testID="gallery-test"
 >
   <View
@@ -190,9 +215,18 @@ exports[`Gallery rendering rendering with load more button renders correctly 1`]
     horizontal={false}
     keyExtractor={[Function]}
     numColumns={2}
+    onContentSizeChange={[Function]}
     onEndReached={[Function]}
     onEndReachedThreshold={0.6}
     scrollEventThrottle={50}
+    style={
+      [
+        {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
     testID="gallery-test-list"
   >
     <View>
@@ -399,7 +433,15 @@ exports[`Gallery rendering rendering with load more button renders correctly 1`]
 
 exports[`Gallery rendering rendering with load more button renders correctly with custom paging button title 1`] = `
 <View
-  style={{}}
+  onLayout={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      {},
+    ]
+  }
   testID="gallery-test"
 >
   <View
@@ -411,9 +453,18 @@ exports[`Gallery rendering rendering with load more button renders correctly wit
     horizontal={false}
     keyExtractor={[Function]}
     numColumns={2}
+    onContentSizeChange={[Function]}
     onEndReached={[Function]}
     onEndReachedThreshold={0.6}
     scrollEventThrottle={50}
+    style={
+      [
+        {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
     testID="gallery-test-list"
   >
     <View>
@@ -620,7 +671,15 @@ exports[`Gallery rendering rendering with load more button renders correctly wit
 
 exports[`Gallery rendering renders correctly 1`] = `
 <View
-  style={{}}
+  onLayout={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      {},
+    ]
+  }
   testID="gallery-test"
 >
   <View
@@ -632,9 +691,18 @@ exports[`Gallery rendering renders correctly 1`] = `
     horizontal={false}
     keyExtractor={[Function]}
     numColumns={2}
+    onContentSizeChange={[Function]}
     onEndReached={[Function]}
     onEndReachedThreshold={0.6}
     scrollEventThrottle={50}
+    style={
+      [
+        {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
     testID="gallery-test-list"
   >
     <View>
@@ -1016,7 +1084,15 @@ exports[`Gallery rendering renders correctly horizontal 1`] = `
 
 exports[`Gallery rendering renders correctly with empty list and custom placeholder 1`] = `
 <View
-  style={{}}
+  onLayout={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      {},
+    ]
+  }
   testID="gallery-test"
 >
   <View
@@ -1028,10 +1104,19 @@ exports[`Gallery rendering renders correctly with empty list and custom placehol
     horizontal={false}
     keyExtractor={[Function]}
     numColumns={2}
+    onContentSizeChange={[Function]}
     onEndReached={[Function]}
     onEndReachedThreshold={0.6}
     refreshing={false}
     scrollEventThrottle={50}
+    style={
+      [
+        {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
     testID="gallery-test-list"
   >
     <View>
@@ -1045,7 +1130,15 @@ exports[`Gallery rendering renders correctly with empty list and custom placehol
 
 exports[`Gallery rendering renders correctly with filter 1`] = `
 <View
-  style={{}}
+  onLayout={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      {},
+    ]
+  }
   testID="gallery-test"
 >
   <View>
@@ -1060,9 +1153,18 @@ exports[`Gallery rendering renders correctly with filter 1`] = `
     horizontal={false}
     keyExtractor={[Function]}
     numColumns={2}
+    onContentSizeChange={[Function]}
     onEndReached={[Function]}
     onEndReachedThreshold={0.6}
     scrollEventThrottle={50}
+    style={
+      [
+        {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
     testID="gallery-test-list"
   >
     <View>
diff --git a/packages/pluggableWidgets/gallery-native/src/package.xml b/packages/pluggableWidgets/gallery-native/src/package.xml
index 131f3fb0a..96b25783b 100644
--- a/packages/pluggableWidgets/gallery-native/src/package.xml
+++ b/packages/pluggableWidgets/gallery-native/src/package.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="Gallery" version="2.1.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Gallery" version="2.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="Gallery.xml" />
         </widgetFiles>

From c179e3bec48835f21d45e19812dbefdc9da32c14 Mon Sep 17 00:00:00 2001
From: Saurabh Chavan <saurabh.chavan@mendix.com>
Date: Thu, 17 Sep 2026 18:08:39 +0530
Subject: [PATCH 2/4] fix: added logic to calculate height of flashlist

---
 .../gallery-native/src/components/Gallery.tsx | 65 ++++++++++---------
 1 file changed, 33 insertions(+), 32 deletions(-)

diff --git a/packages/pluggableWidgets/gallery-native/src/components/Gallery.tsx b/packages/pluggableWidgets/gallery-native/src/components/Gallery.tsx
index d4f2e3274..54c2de07c 100644
--- a/packages/pluggableWidgets/gallery-native/src/components/Gallery.tsx
+++ b/packages/pluggableWidgets/gallery-native/src/components/Gallery.tsx
@@ -47,8 +47,8 @@ export const Gallery = <T extends ObjectItem>(props: GalleryProps<T>): ReactElem
     // FlashList requires a non-zero height to render items (it's virtualized and needs viewport dimensions).
     // When the parent provides height (e.g. via flex), we use flex: 1. When it doesn't (e.g. a Container
     // widget with no flex/height), flex: 1 resolves to 0 and nothing renders. In that case, we fall back
-    // to minHeight based on FlashList's reported content size. This matches the ListView widget's approach.
-    const wrapperRef = useRef<View>(null);
+    // to minHeight based on FlashList's reported content size. We measure the FlashList area specifically so we get the height of the list area, not the entire Gallery (which may include filters and padding).
+    const listAreaRef = useRef<View>(null);
     const [contentHeight, setContentHeight] = useState(0);
     const [layoutDecision, setLayoutDecision] = useState<"minHeight" | "flex" | null>(null);
 
@@ -153,7 +153,7 @@ export const Gallery = <T extends ObjectItem>(props: GalleryProps<T>): ReactElem
         [props.style.emptyPlaceholder, props.emptyPlaceholder]
     );
 
-    const handleWrapperLayout = useCallback(
+    const handleListAreaLayout = useCallback(
         (event: LayoutChangeEvent) => {
             const { height } = event.nativeEvent.layout;
             if (height > 0 && layoutDecision === null) {
@@ -164,8 +164,8 @@ export const Gallery = <T extends ObjectItem>(props: GalleryProps<T>): ReactElem
     );
 
     useEffect(() => {
-        if (contentHeight > 0 && layoutDecision === null && wrapperRef.current) {
-            wrapperRef.current.measure((_x, _y, _width, height) => {
+        if (contentHeight > 0 && layoutDecision === null && listAreaRef.current) {
+            listAreaRef.current.measure((_x, _y, _width, height) => {
                 setLayoutDecision(height > 0 ? "flex" : "minHeight");
             });
         }
@@ -180,34 +180,35 @@ export const Gallery = <T extends ObjectItem>(props: GalleryProps<T>): ReactElem
     const listStyle = isScrollDirectionVertical ? [{ flex: 1 }, props.style.list] : props.style.list;
 
     return (
-        <View
-            testID={`${name}`}
-            style={containerStyle}
-            ref={wrapperRef}
-            onLayout={isScrollDirectionVertical ? handleWrapperLayout : undefined}
-        >
+        <View testID={`${name}`} style={containerStyle}>
             {props.filters ? <View>{props.filters}</View> : null}
-            <FlashList
-                {...(isScrollDirectionVertical && props.pullDown ? { onRefresh: props.pullDown } : {})}
-                {...(isScrollDirectionVertical ? { numColumns } : {})}
-                ListFooterComponent={loadMoreButton}
-                ListFooterComponentStyle={{
-                    ...props.style.loadMoreButtonContainer,
-                    ...(isScrollDirectionVertical ? { marginTop: 8 } : { marginStart: 8 })
-                }}
-                refreshing={props.pullDownIsExecuting}
-                data={props.items}
-                horizontal={!isScrollDirectionVertical}
-                keyExtractor={item => item.id}
-                ListEmptyComponent={renderEmptyPlaceholder}
-                onEndReached={onEndReached}
-                onEndReachedThreshold={0.6}
-                scrollEventThrottle={50}
-                renderItem={renderItem}
-                style={listStyle}
-                testID={`${name}-list`}
-                onContentSizeChange={isScrollDirectionVertical ? (_w, h) => setContentHeight(h) : undefined}
-            />
+            <View
+                ref={listAreaRef}
+                style={isScrollDirectionVertical ? { flex: 1 } : undefined}
+                onLayout={isScrollDirectionVertical ? handleListAreaLayout : undefined}
+            >
+                <FlashList
+                    {...(isScrollDirectionVertical && props.pullDown ? { onRefresh: props.pullDown } : {})}
+                    {...(isScrollDirectionVertical ? { numColumns } : {})}
+                    ListFooterComponent={loadMoreButton}
+                    ListFooterComponentStyle={{
+                        ...props.style.loadMoreButtonContainer,
+                        ...(isScrollDirectionVertical ? { marginTop: 8 } : { marginStart: 8 })
+                    }}
+                    refreshing={props.pullDownIsExecuting}
+                    data={props.items}
+                    horizontal={!isScrollDirectionVertical}
+                    keyExtractor={item => item.id}
+                    ListEmptyComponent={renderEmptyPlaceholder}
+                    onEndReached={onEndReached}
+                    onEndReachedThreshold={0.6}
+                    scrollEventThrottle={50}
+                    renderItem={renderItem}
+                    style={listStyle}
+                    testID={`${name}-list`}
+                    onContentSizeChange={isScrollDirectionVertical ? (_w, h) => setContentHeight(h) : undefined}
+                />
+            </View>
         </View>
     );
 };

From d977b87ec7c392377d70bbaa64b2f12b9541ca9d Mon Sep 17 00:00:00 2001
From: Saurabh Chavan <saurabh.chavan@mendix.com>
Date: Thu, 17 Sep 2026 18:17:05 +0530
Subject: [PATCH 3/4] fix: unit testcases snapshot updated

---
 .../__snapshots__/Gallery.spec.tsx.snap       | 1926 +++++++++--------
 1 file changed, 988 insertions(+), 938 deletions(-)

diff --git a/packages/pluggableWidgets/gallery-native/src/components/__tests__/__snapshots__/Gallery.spec.tsx.snap b/packages/pluggableWidgets/gallery-native/src/components/__tests__/__snapshots__/Gallery.spec.tsx.snap
index 633141b5b..aa845444f 100644
--- a/packages/pluggableWidgets/gallery-native/src/components/__tests__/__snapshots__/Gallery.spec.tsx.snap
+++ b/packages/pluggableWidgets/gallery-native/src/components/__tests__/__snapshots__/Gallery.spec.tsx.snap
@@ -2,7 +2,6 @@
 
 exports[`Gallery rendering rendering with load more button it shouldn't render the paging button if hasn't more item 1`] = `
 <View
-  onLayout={[Function]}
   style={
     [
       {
@@ -14,178 +13,187 @@ exports[`Gallery rendering rendering with load more button it shouldn't render t
   testID="gallery-test"
 >
   <View
-    ListFooterComponentStyle={
+    onLayout={[Function]}
+    style={
       {
-        "marginTop": 8,
+        "flex": 1,
       }
     }
-    horizontal={false}
-    keyExtractor={[Function]}
-    numColumns={2}
-    onContentSizeChange={[Function]}
-    onEndReached={[Function]}
-    onEndReachedThreshold={0.6}
-    scrollEventThrottle={50}
-    style={
-      [
-        {
-          "flex": 1,
-        },
-        undefined,
-      ]
-    }
-    testID="gallery-test-list"
   >
-    <View>
-      <View
-        testID="gallery-test-list-item-11"
-      >
+    <View
+      ListFooterComponentStyle={
+        {
+          "marginTop": 8,
+        }
+      }
+      horizontal={false}
+      keyExtractor={[Function]}
+      numColumns={2}
+      onContentSizeChange={[Function]}
+      onEndReached={[Function]}
+      onEndReachedThreshold={0.6}
+      scrollEventThrottle={50}
+      style={
+        [
+          {
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+      testID="gallery-test-list"
+    >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              undefined,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-11"
         >
-          11
+          <View
+            style={
+              [
+                undefined,
+                undefined,
+                false,
+              ]
+            }
+          >
+            11
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-22"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-22"
         >
-          22
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            22
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-33"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-33"
         >
-          33
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            33
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-44"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-44"
         >
-          44
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            44
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-55"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-55"
         >
-          55
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            55
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-66"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-66"
         >
-          66
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            66
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-77"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-77"
         >
-          77
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            77
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-88"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-88"
         >
-          88
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            88
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-99"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              undefined,
-            ]
-          }
+          testID="gallery-test-list-item-99"
         >
-          99
+          <View
+            style={
+              [
+                undefined,
+                false,
+                undefined,
+              ]
+            }
+          >
+            99
+          </View>
         </View>
       </View>
     </View>
@@ -195,7 +203,6 @@ exports[`Gallery rendering rendering with load more button it shouldn't render t
 
 exports[`Gallery rendering rendering with load more button renders correctly 1`] = `
 <View
-  onLayout={[Function]}
   style={
     [
       {
@@ -207,225 +214,234 @@ exports[`Gallery rendering rendering with load more button renders correctly 1`]
   testID="gallery-test"
 >
   <View
-    ListFooterComponentStyle={
+    onLayout={[Function]}
+    style={
       {
-        "marginTop": 8,
+        "flex": 1,
       }
     }
-    horizontal={false}
-    keyExtractor={[Function]}
-    numColumns={2}
-    onContentSizeChange={[Function]}
-    onEndReached={[Function]}
-    onEndReachedThreshold={0.6}
-    scrollEventThrottle={50}
-    style={
-      [
-        {
-          "flex": 1,
-        },
-        undefined,
-      ]
-    }
-    testID="gallery-test-list"
   >
-    <View>
-      <View
-        testID="gallery-test-list-item-11"
-      >
+    <View
+      ListFooterComponentStyle={
+        {
+          "marginTop": 8,
+        }
+      }
+      horizontal={false}
+      keyExtractor={[Function]}
+      numColumns={2}
+      onContentSizeChange={[Function]}
+      onEndReached={[Function]}
+      onEndReachedThreshold={0.6}
+      scrollEventThrottle={50}
+      style={
+        [
+          {
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+      testID="gallery-test-list"
+    >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              undefined,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-11"
         >
-          11
+          <View
+            style={
+              [
+                undefined,
+                undefined,
+                false,
+              ]
+            }
+          >
+            11
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-22"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-22"
         >
-          22
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            22
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-33"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-33"
         >
-          33
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            33
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-44"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-44"
         >
-          44
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            44
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-55"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-55"
         >
-          55
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            55
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-66"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-66"
         >
-          66
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            66
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-77"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-77"
         >
-          77
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            77
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-88"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-88"
         >
-          88
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            88
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-99"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              undefined,
-            ]
-          }
+          testID="gallery-test-list-item-99"
         >
-          99
+          <View
+            style={
+              [
+                undefined,
+                false,
+                undefined,
+              ]
+            }
+          >
+            99
+          </View>
         </View>
       </View>
-    </View>
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
         }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
         }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      nativeBackgroundAndroid={
-        {
-          "borderless": false,
-          "color": 855638016,
-          "rippleRadius": undefined,
-          "type": "RippleAndroid",
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        nativeBackgroundAndroid={
+          {
+            "borderless": false,
+            "color": 855638016,
+            "rippleRadius": undefined,
+            "type": "RippleAndroid",
+          }
         }
-      }
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={{}}
-      testID="gallery-test-pagination-button"
-    >
-      <Text>
-        Load more
-      </Text>
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={{}}
+        testID="gallery-test-pagination-button"
+      >
+        <Text>
+          Load more
+        </Text>
+      </View>
     </View>
   </View>
 </View>
@@ -433,7 +449,6 @@ exports[`Gallery rendering rendering with load more button renders correctly 1`]
 
 exports[`Gallery rendering rendering with load more button renders correctly with custom paging button title 1`] = `
 <View
-  onLayout={[Function]}
   style={
     [
       {
@@ -445,225 +460,234 @@ exports[`Gallery rendering rendering with load more button renders correctly wit
   testID="gallery-test"
 >
   <View
-    ListFooterComponentStyle={
+    onLayout={[Function]}
+    style={
       {
-        "marginTop": 8,
+        "flex": 1,
       }
     }
-    horizontal={false}
-    keyExtractor={[Function]}
-    numColumns={2}
-    onContentSizeChange={[Function]}
-    onEndReached={[Function]}
-    onEndReachedThreshold={0.6}
-    scrollEventThrottle={50}
-    style={
-      [
-        {
-          "flex": 1,
-        },
-        undefined,
-      ]
-    }
-    testID="gallery-test-list"
   >
-    <View>
-      <View
-        testID="gallery-test-list-item-11"
-      >
+    <View
+      ListFooterComponentStyle={
+        {
+          "marginTop": 8,
+        }
+      }
+      horizontal={false}
+      keyExtractor={[Function]}
+      numColumns={2}
+      onContentSizeChange={[Function]}
+      onEndReached={[Function]}
+      onEndReachedThreshold={0.6}
+      scrollEventThrottle={50}
+      style={
+        [
+          {
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+      testID="gallery-test-list"
+    >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              undefined,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-11"
         >
-          11
+          <View
+            style={
+              [
+                undefined,
+                undefined,
+                false,
+              ]
+            }
+          >
+            11
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-22"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-22"
         >
-          22
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            22
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-33"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-33"
         >
-          33
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            33
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-44"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-44"
         >
-          44
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            44
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-55"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-55"
         >
-          55
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            55
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-66"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-66"
         >
-          66
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            66
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-77"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-77"
         >
-          77
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            77
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-88"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-88"
         >
-          88
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            88
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-99"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              undefined,
-            ]
-          }
+          testID="gallery-test-list-item-99"
         >
-          99
+          <View
+            style={
+              [
+                undefined,
+                false,
+                undefined,
+              ]
+            }
+          >
+            99
+          </View>
         </View>
       </View>
-    </View>
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
         }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
         }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      nativeBackgroundAndroid={
-        {
-          "borderless": false,
-          "color": 855638016,
-          "rippleRadius": undefined,
-          "type": "RippleAndroid",
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        nativeBackgroundAndroid={
+          {
+            "borderless": false,
+            "color": 855638016,
+            "rippleRadius": undefined,
+            "type": "RippleAndroid",
+          }
         }
-      }
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={{}}
-      testID="gallery-test-pagination-button"
-    >
-      <Text>
-        Show more
-      </Text>
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={{}}
+        testID="gallery-test-pagination-button"
+      >
+        <Text>
+          Show more
+        </Text>
+      </View>
     </View>
   </View>
 </View>
@@ -671,7 +695,6 @@ exports[`Gallery rendering rendering with load more button renders correctly wit
 
 exports[`Gallery rendering renders correctly 1`] = `
 <View
-  onLayout={[Function]}
   style={
     [
       {
@@ -683,178 +706,187 @@ exports[`Gallery rendering renders correctly 1`] = `
   testID="gallery-test"
 >
   <View
-    ListFooterComponentStyle={
+    onLayout={[Function]}
+    style={
       {
-        "marginTop": 8,
+        "flex": 1,
       }
     }
-    horizontal={false}
-    keyExtractor={[Function]}
-    numColumns={2}
-    onContentSizeChange={[Function]}
-    onEndReached={[Function]}
-    onEndReachedThreshold={0.6}
-    scrollEventThrottle={50}
-    style={
-      [
-        {
-          "flex": 1,
-        },
-        undefined,
-      ]
-    }
-    testID="gallery-test-list"
   >
-    <View>
-      <View
-        testID="gallery-test-list-item-11"
-      >
+    <View
+      ListFooterComponentStyle={
+        {
+          "marginTop": 8,
+        }
+      }
+      horizontal={false}
+      keyExtractor={[Function]}
+      numColumns={2}
+      onContentSizeChange={[Function]}
+      onEndReached={[Function]}
+      onEndReachedThreshold={0.6}
+      scrollEventThrottle={50}
+      style={
+        [
+          {
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+      testID="gallery-test-list"
+    >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              undefined,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-11"
         >
-          11
+          <View
+            style={
+              [
+                undefined,
+                undefined,
+                false,
+              ]
+            }
+          >
+            11
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-22"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-22"
         >
-          22
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            22
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-33"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-33"
         >
-          33
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            33
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-44"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-44"
         >
-          44
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            44
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-55"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-55"
         >
-          55
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            55
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-66"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-66"
         >
-          66
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            66
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-77"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-77"
         >
-          77
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            77
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-88"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-88"
         >
-          88
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            88
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-99"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              undefined,
-            ]
-          }
+          testID="gallery-test-list-item-99"
         >
-          99
+          <View
+            style={
+              [
+                undefined,
+                false,
+                undefined,
+              ]
+            }
+          >
+            99
+          </View>
         </View>
       </View>
     </View>
@@ -867,214 +899,216 @@ exports[`Gallery rendering renders correctly horizontal 1`] = `
   style={{}}
   testID="gallery-test"
 >
-  <View
-    ListFooterComponentStyle={
-      {
-        "marginStart": 8,
-      }
-    }
-    horizontal={true}
-    keyExtractor={[Function]}
-    onEndReached={[Function]}
-    onEndReachedThreshold={0.6}
-    scrollEventThrottle={50}
-    testID="gallery-test-list"
-  >
-    <View>
-      <View
-        style={
-          {
-            "width": 750,
-          }
+  <View>
+    <View
+      ListFooterComponentStyle={
+        {
+          "marginStart": 8,
         }
-        testID="gallery-test-list-item-11"
-      >
+      }
+      horizontal={true}
+      keyExtractor={[Function]}
+      onEndReached={[Function]}
+      onEndReachedThreshold={0.6}
+      scrollEventThrottle={50}
+      testID="gallery-test-list"
+    >
+      <View>
         <View
           style={
-            [
-              undefined,
-              undefined,
-              false,
-            ]
+            {
+              "width": 750,
+            }
           }
+          testID="gallery-test-list-item-11"
         >
-          11
+          <View
+            style={
+              [
+                undefined,
+                undefined,
+                false,
+              ]
+            }
+          >
+            11
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        style={
-          {
-            "width": 750,
-          }
-        }
-        testID="gallery-test-list-item-22"
-      >
+      <View>
         <View
           style={
-            [
-              undefined,
-              false,
-              false,
-            ]
+            {
+              "width": 750,
+            }
           }
+          testID="gallery-test-list-item-22"
         >
-          22
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            22
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        style={
-          {
-            "width": 750,
-          }
-        }
-        testID="gallery-test-list-item-33"
-      >
+      <View>
         <View
           style={
-            [
-              undefined,
-              false,
-              false,
-            ]
+            {
+              "width": 750,
+            }
           }
+          testID="gallery-test-list-item-33"
         >
-          33
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            33
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        style={
-          {
-            "width": 750,
-          }
-        }
-        testID="gallery-test-list-item-44"
-      >
+      <View>
         <View
           style={
-            [
-              undefined,
-              false,
-              false,
-            ]
+            {
+              "width": 750,
+            }
           }
+          testID="gallery-test-list-item-44"
         >
-          44
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            44
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        style={
-          {
-            "width": 750,
-          }
-        }
-        testID="gallery-test-list-item-55"
-      >
+      <View>
         <View
           style={
-            [
-              undefined,
-              false,
-              false,
-            ]
+            {
+              "width": 750,
+            }
           }
+          testID="gallery-test-list-item-55"
         >
-          55
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            55
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        style={
-          {
-            "width": 750,
-          }
-        }
-        testID="gallery-test-list-item-66"
-      >
+      <View>
         <View
           style={
-            [
-              undefined,
-              false,
-              false,
-            ]
+            {
+              "width": 750,
+            }
           }
+          testID="gallery-test-list-item-66"
         >
-          66
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            66
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        style={
-          {
-            "width": 750,
-          }
-        }
-        testID="gallery-test-list-item-77"
-      >
+      <View>
         <View
           style={
-            [
-              undefined,
-              false,
-              false,
-            ]
+            {
+              "width": 750,
+            }
           }
+          testID="gallery-test-list-item-77"
         >
-          77
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            77
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        style={
-          {
-            "width": 750,
-          }
-        }
-        testID="gallery-test-list-item-88"
-      >
+      <View>
         <View
           style={
-            [
-              undefined,
-              false,
-              false,
-            ]
+            {
+              "width": 750,
+            }
           }
+          testID="gallery-test-list-item-88"
         >
-          88
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            88
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        style={
-          {
-            "width": 750,
-          }
-        }
-        testID="gallery-test-list-item-99"
-      >
+      <View>
         <View
           style={
-            [
-              undefined,
-              false,
-              undefined,
-            ]
+            {
+              "width": 750,
+            }
           }
+          testID="gallery-test-list-item-99"
         >
-          99
+          <View
+            style={
+              [
+                undefined,
+                false,
+                undefined,
+              ]
+            }
+          >
+            99
+          </View>
         </View>
       </View>
     </View>
@@ -1084,7 +1118,6 @@ exports[`Gallery rendering renders correctly horizontal 1`] = `
 
 exports[`Gallery rendering renders correctly with empty list and custom placeholder 1`] = `
 <View
-  onLayout={[Function]}
   style={
     [
       {
@@ -1096,33 +1129,42 @@ exports[`Gallery rendering renders correctly with empty list and custom placehol
   testID="gallery-test"
 >
   <View
-    ListFooterComponentStyle={
+    onLayout={[Function]}
+    style={
       {
-        "marginTop": 8,
+        "flex": 1,
       }
     }
-    horizontal={false}
-    keyExtractor={[Function]}
-    numColumns={2}
-    onContentSizeChange={[Function]}
-    onEndReached={[Function]}
-    onEndReachedThreshold={0.6}
-    refreshing={false}
-    scrollEventThrottle={50}
-    style={
-      [
-        {
-          "flex": 1,
-        },
-        undefined,
-      ]
-    }
-    testID="gallery-test-list"
   >
-    <View>
-      <Text>
-        Empty list...
-      </Text>
+    <View
+      ListFooterComponentStyle={
+        {
+          "marginTop": 8,
+        }
+      }
+      horizontal={false}
+      keyExtractor={[Function]}
+      numColumns={2}
+      onContentSizeChange={[Function]}
+      onEndReached={[Function]}
+      onEndReachedThreshold={0.6}
+      refreshing={false}
+      scrollEventThrottle={50}
+      style={
+        [
+          {
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+      testID="gallery-test-list"
+    >
+      <View>
+        <Text>
+          Empty list...
+        </Text>
+      </View>
     </View>
   </View>
 </View>
@@ -1130,7 +1172,6 @@ exports[`Gallery rendering renders correctly with empty list and custom placehol
 
 exports[`Gallery rendering renders correctly with filter 1`] = `
 <View
-  onLayout={[Function]}
   style={
     [
       {
@@ -1145,178 +1186,187 @@ exports[`Gallery rendering renders correctly with filter 1`] = `
     <TextInput />
   </View>
   <View
-    ListFooterComponentStyle={
+    onLayout={[Function]}
+    style={
       {
-        "marginTop": 8,
+        "flex": 1,
       }
     }
-    horizontal={false}
-    keyExtractor={[Function]}
-    numColumns={2}
-    onContentSizeChange={[Function]}
-    onEndReached={[Function]}
-    onEndReachedThreshold={0.6}
-    scrollEventThrottle={50}
-    style={
-      [
-        {
-          "flex": 1,
-        },
-        undefined,
-      ]
-    }
-    testID="gallery-test-list"
   >
-    <View>
-      <View
-        testID="gallery-test-list-item-11"
-      >
+    <View
+      ListFooterComponentStyle={
+        {
+          "marginTop": 8,
+        }
+      }
+      horizontal={false}
+      keyExtractor={[Function]}
+      numColumns={2}
+      onContentSizeChange={[Function]}
+      onEndReached={[Function]}
+      onEndReachedThreshold={0.6}
+      scrollEventThrottle={50}
+      style={
+        [
+          {
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+      testID="gallery-test-list"
+    >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              undefined,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-11"
         >
-          11
+          <View
+            style={
+              [
+                undefined,
+                undefined,
+                false,
+              ]
+            }
+          >
+            11
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-22"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-22"
         >
-          22
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            22
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-33"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-33"
         >
-          33
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            33
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-44"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-44"
         >
-          44
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            44
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-55"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-55"
         >
-          55
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            55
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-66"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-66"
         >
-          66
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            66
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-77"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-77"
         >
-          77
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            77
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-88"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              false,
-            ]
-          }
+          testID="gallery-test-list-item-88"
         >
-          88
+          <View
+            style={
+              [
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            88
+          </View>
         </View>
       </View>
-    </View>
-    <View>
-      <View
-        testID="gallery-test-list-item-99"
-      >
+      <View>
         <View
-          style={
-            [
-              undefined,
-              false,
-              undefined,
-            ]
-          }
+          testID="gallery-test-list-item-99"
         >
-          99
+          <View
+            style={
+              [
+                undefined,
+                false,
+                undefined,
+              ]
+            }
+          >
+            99
+          </View>
         </View>
       </View>
     </View>

From 58ed45b76a3e789de9de3a1c93954bc13ecf7b7a Mon Sep 17 00:00:00 2001
From: Saurabh Chavan <saurabh.chavan@mendix.com>
Date: Thu, 17 Sep 2026 18:25:27 +0530
Subject: [PATCH 4/4] fix: update widget version

---
 packages/pluggableWidgets/gallery-native/package.json    | 2 +-
 packages/pluggableWidgets/gallery-native/src/package.xml | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/pluggableWidgets/gallery-native/package.json b/packages/pluggableWidgets/gallery-native/package.json
index af527cd31..5360338e4 100644
--- a/packages/pluggableWidgets/gallery-native/package.json
+++ b/packages/pluggableWidgets/gallery-native/package.json
@@ -1,7 +1,7 @@
 {
   "name": "gallery-native",
   "widgetName": "Gallery",
-  "version": "2.2.0",
+  "version": "2.1.1",
   "description": "A flexible gallery widget that renders columns, rows and layouts.",
   "copyright": "© Mendix Technology BV 2022. All rights reserved.",
   "license": "Apache-2.0",
diff --git a/packages/pluggableWidgets/gallery-native/src/package.xml b/packages/pluggableWidgets/gallery-native/src/package.xml
index 96b25783b..cc5b9921c 100644
--- a/packages/pluggableWidgets/gallery-native/src/package.xml
+++ b/packages/pluggableWidgets/gallery-native/src/package.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="Gallery" version="2.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Gallery" version="2.1.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="Gallery.xml" />
         </widgetFiles>