From 772e5a23e4197d282c0a19d81b8af682c3dfe45b Mon Sep 17 00:00:00 2001 From: Saurabh Chavan Date: Wed, 16 Sep 2026 16:10:55 +0530 Subject: [PATCH 1/7] 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 7a052fcf5..d7b45c55e 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.2.1] - 2026-6-10 ### Changed diff --git a/packages/pluggableWidgets/gallery-native/package.json b/packages/pluggableWidgets/gallery-native/package.json index 191460789..282da9eb2 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.1", + "version": "2.3.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 99660d44f..ed5d9dabd 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 = (props: GalleryProps): 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(null); + const [contentHeight, setContentHeight] = useState(0); + const [layoutDecision, setLayoutDecision] = useState<"minHeight" | "flex" | null>(null); const onEndReached = (): void => { if (props.pagination === "virtualScrolling" && props.hasMoreItems) { @@ -136,8 +152,39 @@ export const Gallery = (props: GalleryProps): 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 ( - + {props.filters ? {props.filters} : null} (props: GalleryProps): ReactElem onEndReachedThreshold={0.6} scrollEventThrottle={50} renderItem={renderItem} - style={props.style.list} + style={listStyle} testID={`${name}-list`} + onContentSizeChange={isScrollDirectionVertical ? (_w, h) => setContentHeight(h) : undefined} /> ); 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 70a4343a0..11d88e0a2 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`] = ` @@ -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`] = ` @@ -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`] = ` @@ -620,7 +671,15 @@ exports[`Gallery rendering rendering with load more button renders correctly wit exports[`Gallery rendering renders correctly 1`] = ` @@ -1016,7 +1084,15 @@ exports[`Gallery rendering renders correctly horizontal 1`] = ` exports[`Gallery rendering renders correctly with empty list and custom placeholder 1`] = ` @@ -1045,7 +1130,15 @@ exports[`Gallery rendering renders correctly with empty list and custom placehol exports[`Gallery rendering renders correctly with filter 1`] = ` @@ -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" > diff --git a/packages/pluggableWidgets/gallery-native/src/package.xml b/packages/pluggableWidgets/gallery-native/src/package.xml index 83840116c..410357eca 100644 --- a/packages/pluggableWidgets/gallery-native/src/package.xml +++ b/packages/pluggableWidgets/gallery-native/src/package.xml @@ -1,6 +1,6 @@ - + From cc3992a196c7cd0ff872683b32322ab928b772aa Mon Sep 17 00:00:00 2001 From: Saurabh Chavan Date: Thu, 17 Sep 2026 18:08:39 +0530 Subject: [PATCH 2/7] 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 ed5d9dabd..b0a6e070a 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 = (props: GalleryProps): 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(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(null); const [contentHeight, setContentHeight] = useState(0); const [layoutDecision, setLayoutDecision] = useState<"minHeight" | "flex" | null>(null); @@ -152,7 +152,7 @@ export const Gallery = (props: GalleryProps): ReactElem [props.style.emptyPlaceholder, props.emptyPlaceholder] ); - const handleWrapperLayout = useCallback( + const handleListAreaLayout = useCallback( (event: LayoutChangeEvent) => { const { height } = event.nativeEvent.layout; if (height > 0 && layoutDecision === null) { @@ -163,8 +163,8 @@ export const Gallery = (props: GalleryProps): 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"); }); } @@ -179,34 +179,35 @@ export const Gallery = (props: GalleryProps): ReactElem const listStyle = isScrollDirectionVertical ? [{ flex: 1 }, props.style.list] : props.style.list; return ( - + {props.filters ? {props.filters} : null} - 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} - /> + + 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} + /> + ); }; From bb3d4128d8c37833c01c5ec9eb1d496179b6a7ea Mon Sep 17 00:00:00 2001 From: Saurabh Chavan Date: Thu, 17 Sep 2026 18:17:05 +0530 Subject: [PATCH 3/7] 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 11d88e0a2..2547620a5 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`] = ` - - + + - 11 + + 11 + - - - + - 22 + + 22 + - - - + - 33 + + 33 + - - - + - 44 + + 44 + - - - + - 55 + + 55 + - - - + - 66 + + 66 + - - - + - 77 + + 77 + - - - + - 88 + + 88 + - - - + - 99 + + 99 + @@ -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`] = ` - - + + - 11 + + 11 + - - - + - 22 + + 22 + - - - + - 33 + + 33 + - - - + - 44 + + 44 + - - - + - 55 + + 55 + - - - + - 66 + + 66 + - - - + - 77 + + 77 + - - - + - 88 + + 88 + - - - + - 99 + + 99 + - - - - Load more - + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + style={{}} + testID="gallery-test-pagination-button" + > + + Load more + + @@ -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`] = ` - - + + - 11 + + 11 + - - - + - 22 + + 22 + - - - + - 33 + + 33 + - - - + - 44 + + 44 + - - - + - 55 + + 55 + - - - + - 66 + + 66 + - - - + - 77 + + 77 + - - - + - 88 + + 88 + - - - + - 99 + + 99 + - - - - Show more - + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + style={{}} + testID="gallery-test-pagination-button" + > + + Show more + + @@ -671,7 +695,6 @@ exports[`Gallery rendering rendering with load more button renders correctly wit exports[`Gallery rendering renders correctly 1`] = ` - - + + - 11 + + 11 + - - - + - 22 + + 22 + - - - + - 33 + + 33 + - - - + - 44 + + 44 + - - - + - 55 + + 55 + - - - + - 66 + + 66 + - - - + - 77 + + 77 + - - - + - 88 + + 88 + - - - + - 99 + + 99 + @@ -867,214 +899,216 @@ exports[`Gallery rendering renders correctly horizontal 1`] = ` style={{}} testID="gallery-test" > - - - + + } + horizontal={true} + keyExtractor={[Function]} + onEndReached={[Function]} + onEndReachedThreshold={0.6} + scrollEventThrottle={50} + testID="gallery-test-list" + > + - 11 + + 11 + - - - + - 22 + + 22 + - - - + - 33 + + 33 + - - - + - 44 + + 44 + - - - + - 55 + + 55 + - - - + - 66 + + 66 + - - - + - 77 + + 77 + - - - + - 88 + + 88 + - - - + - 99 + + 99 + @@ -1084,7 +1118,6 @@ exports[`Gallery rendering renders correctly horizontal 1`] = ` exports[`Gallery rendering renders correctly with empty list and custom placeholder 1`] = ` - - - Empty list... - + + + + Empty list... + + @@ -1130,7 +1172,6 @@ exports[`Gallery rendering renders correctly with empty list and custom placehol exports[`Gallery rendering renders correctly with filter 1`] = ` - - + + - 11 + + 11 + - - - + - 22 + + 22 + - - - + - 33 + + 33 + - - - + - 44 + + 44 + - - - + - 55 + + 55 + - - - + - 66 + + 66 + - - - + - 77 + + 77 + - - - + - 88 + + 88 + - - - + - 99 + + 99 + From 1d3515e3696edd21b357844c7ed1206ffeea8e0b Mon Sep 17 00:00:00 2001 From: Saurabh Chavan Date: Thu, 17 Sep 2026 18:18:36 +0530 Subject: [PATCH 4/7] fix: update the widget version to patch --- 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 282da9eb2..6ab6f707d 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.3.0", + "version": "2.2.2", "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 410357eca..812f72309 100644 --- a/packages/pluggableWidgets/gallery-native/src/package.xml +++ b/packages/pluggableWidgets/gallery-native/src/package.xml @@ -1,6 +1,6 @@ - + From 6bb3280cc817e06b0f9d7201649a7b11c2d15817 Mon Sep 17 00:00:00 2001 From: Saurabh Chavan Date: Tue, 22 Sep 2026 17:34:53 +0530 Subject: [PATCH 5/7] fix: updated ui when there's no data to render --- .../gallery-native/src/components/Gallery.tsx | 66 ++++++++++--------- .../src/components/__tests__/Gallery.spec.tsx | 4 +- .../__snapshots__/Gallery.spec.tsx.snap | 51 ++------------ 3 files changed, 43 insertions(+), 78 deletions(-) diff --git a/packages/pluggableWidgets/gallery-native/src/components/Gallery.tsx b/packages/pluggableWidgets/gallery-native/src/components/Gallery.tsx index b0a6e070a..009481959 100644 --- a/packages/pluggableWidgets/gallery-native/src/components/Gallery.tsx +++ b/packages/pluggableWidgets/gallery-native/src/components/Gallery.tsx @@ -170,10 +170,14 @@ export const Gallery = (props: GalleryProps): ReactElem } }, [contentHeight, layoutDecision]); + const hasItems = props.items && props.items.length > 0; + const containerStyle = isScrollDirectionVertical - ? layoutDecision === "minHeight" - ? [{ minHeight: Math.max(contentHeight, 1) }, props.style.container] - : [{ flex: 1 }, props.style.container] + ? hasItems + ? layoutDecision === "minHeight" + ? [{ minHeight: Math.max(contentHeight, 1) }, props.style.container] + : [{ flex: 1 }, props.style.container] + : props.style.container : props.style.container; const listStyle = isScrollDirectionVertical ? [{ flex: 1 }, props.style.list] : props.style.list; @@ -181,33 +185,35 @@ export const Gallery = (props: GalleryProps): ReactElem return ( {props.filters ? {props.filters} : null} - - 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} - /> - + {!hasItems && renderEmptyPlaceholder} + {hasItems ? ( + + item.id} + onEndReached={onEndReached} + onEndReachedThreshold={0.6} + scrollEventThrottle={50} + renderItem={renderItem} + style={listStyle} + testID={`${name}-list`} + onContentSizeChange={isScrollDirectionVertical ? (_w, h) => setContentHeight(h) : undefined} + /> + + ) : null} ); }; diff --git a/packages/pluggableWidgets/gallery-native/src/components/__tests__/Gallery.spec.tsx b/packages/pluggableWidgets/gallery-native/src/components/__tests__/Gallery.spec.tsx index ebf9e2346..36eeb3574 100644 --- a/packages/pluggableWidgets/gallery-native/src/components/__tests__/Gallery.spec.tsx +++ b/packages/pluggableWidgets/gallery-native/src/components/__tests__/Gallery.spec.tsx @@ -140,8 +140,8 @@ describe("Gallery", () => { it("it shouldn't triggers the load more items event when item list empty", () => { const gallery = render(); - const galleryList = gallery.getByTestId("gallery-test-list"); - fireEvent(galleryList, "onEndReached"); + const galleryList = gallery.queryByTestId("gallery-test-list"); + expect(galleryList).toBeNull(); expect(defaultProps.loadMoreItems).not.toHaveBeenCalled(); }); 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 2547620a5..98453d716 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 @@ -1118,54 +1118,13 @@ exports[`Gallery rendering renders correctly horizontal 1`] = ` exports[`Gallery rendering renders correctly with empty list and custom placeholder 1`] = ` - - - - - Empty list... - - - + + + Empty list... + `; From 051cdd92743eafd83097aa63c6591c1251bc9887 Mon Sep 17 00:00:00 2001 From: Saurabh Chavan Date: Wed, 23 Sep 2026 16:52:40 +0530 Subject: [PATCH 6/7] fix: added logic for gallery widget to take only the space of content --- .../gallery-native/src/components/Gallery.tsx | 68 ++++++------------- 1 file changed, 21 insertions(+), 47 deletions(-) diff --git a/packages/pluggableWidgets/gallery-native/src/components/Gallery.tsx b/packages/pluggableWidgets/gallery-native/src/components/Gallery.tsx index 009481959..2caa0486e 100644 --- a/packages/pluggableWidgets/gallery-native/src/components/Gallery.tsx +++ b/packages/pluggableWidgets/gallery-native/src/components/Gallery.tsx @@ -1,14 +1,5 @@ -import { ReactElement, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react"; -import { - LayoutChangeEvent, - Text, - Pressable, - View, - ViewProps, - Platform, - TouchableOpacity, - useWindowDimensions -} from "react-native"; +import { ReactElement, ReactNode, useCallback, useMemo, useState } from "react"; +import { 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"; @@ -43,14 +34,10 @@ export const Gallery = (props: GalleryProps): ReactElem const firstItemId = props.items?.[0]?.id; 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. 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(null); + const { width, height: windowHeight } = useWindowDimensions(); + // FlashList is virtualized and only renders items that fit within its own height, so it needs a + // non-zero height. The list area is sized from FlashList's reported content height instead of flex. const [contentHeight, setContentHeight] = useState(0); - const [layoutDecision, setLayoutDecision] = useState<"minHeight" | "flex" | null>(null); const onEndReached = (): void => { if (props.pagination === "virtualScrolling" && props.hasMoreItems) { @@ -152,33 +139,23 @@ export const Gallery = (props: GalleryProps): ReactElem [props.style.emptyPlaceholder, props.emptyPlaceholder] ); - const handleListAreaLayout = useCallback( - (event: LayoutChangeEvent) => { - const { height } = event.nativeEvent.layout; - if (height > 0 && layoutDecision === null) { - setLayoutDecision("flex"); - } - }, - [layoutDecision] - ); - - useEffect(() => { - if (contentHeight > 0 && layoutDecision === null && listAreaRef.current) { - listAreaRef.current.measure((_x, _y, _width, height) => { - setLayoutDecision(height > 0 ? "flex" : "minHeight"); - }); + const onContentSizeChange = useCallback((_width: number, height: number): void => { + if (height > 0) { + setContentHeight(height); } - }, [contentHeight, layoutDecision]); + }, []); const hasItems = props.items && props.items.length > 0; - const containerStyle = isScrollDirectionVertical - ? hasItems - ? layoutDecision === "minHeight" - ? [{ minHeight: Math.max(contentHeight, 1) }, props.style.container] - : [{ flex: 1 }, props.style.container] - : props.style.container - : props.style.container; + // Shrink to the available space when the content is larger, so widgets below the gallery stay visible. + const containerStyle = + isScrollDirectionVertical && hasItems ? [{ flexShrink: 1 }, props.style.container] : props.style.container; + + // The list area is sized by its content, capped at the window height; beyond that FlashList scrolls + // internally. Starting at 1 lets FlashList render its first items and report their content size. + const listAreaStyle = isScrollDirectionVertical + ? { height: Math.min(Math.max(contentHeight, 1), windowHeight), flexShrink: 1 } + : undefined; const listStyle = isScrollDirectionVertical ? [{ flex: 1 }, props.style.list] : props.style.list; @@ -187,11 +164,7 @@ export const Gallery = (props: GalleryProps): ReactElem {props.filters ? {props.filters} : null} {!hasItems && renderEmptyPlaceholder} {hasItems ? ( - + (props: GalleryProps): ReactElem scrollEventThrottle={50} renderItem={renderItem} style={listStyle} + nestedScrollEnabled testID={`${name}-list`} - onContentSizeChange={isScrollDirectionVertical ? (_w, h) => setContentHeight(h) : undefined} + onContentSizeChange={isScrollDirectionVertical ? onContentSizeChange : undefined} /> ) : null} From 99f4775ca020312c4303f2f2eeb4cc692ebafff9 Mon Sep 17 00:00:00 2001 From: Saurabh Chavan Date: Wed, 23 Sep 2026 16:57:07 +0530 Subject: [PATCH 7/7] fix: update gallery snapshot --- .../__snapshots__/Gallery.spec.tsx.snap | 36 +++++++++++-------- 1 file changed, 21 insertions(+), 15 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 98453d716..7fc711bf8 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 @@ -5,7 +5,7 @@ exports[`Gallery rendering rendering with load more button it shouldn't render t style={ [ { - "flex": 1, + "flexShrink": 1, }, {}, ] @@ -13,10 +13,10 @@ exports[`Gallery rendering rendering with load more button it shouldn't render t testID="gallery-test" > @@ -28,6 +28,7 @@ exports[`Gallery rendering rendering with load more button it shouldn't render t } horizontal={false} keyExtractor={[Function]} + nestedScrollEnabled={true} numColumns={2} onContentSizeChange={[Function]} onEndReached={[Function]} @@ -206,7 +207,7 @@ exports[`Gallery rendering rendering with load more button renders correctly 1`] style={ [ { - "flex": 1, + "flexShrink": 1, }, {}, ] @@ -214,10 +215,10 @@ exports[`Gallery rendering rendering with load more button renders correctly 1`] testID="gallery-test" > @@ -229,6 +230,7 @@ exports[`Gallery rendering rendering with load more button renders correctly 1`] } horizontal={false} keyExtractor={[Function]} + nestedScrollEnabled={true} numColumns={2} onContentSizeChange={[Function]} onEndReached={[Function]} @@ -452,7 +454,7 @@ exports[`Gallery rendering rendering with load more button renders correctly wit style={ [ { - "flex": 1, + "flexShrink": 1, }, {}, ] @@ -460,10 +462,10 @@ exports[`Gallery rendering rendering with load more button renders correctly wit testID="gallery-test" > @@ -475,6 +477,7 @@ exports[`Gallery rendering rendering with load more button renders correctly wit } horizontal={false} keyExtractor={[Function]} + nestedScrollEnabled={true} numColumns={2} onContentSizeChange={[Function]} onEndReached={[Function]} @@ -698,7 +701,7 @@ exports[`Gallery rendering renders correctly 1`] = ` style={ [ { - "flex": 1, + "flexShrink": 1, }, {}, ] @@ -706,10 +709,10 @@ exports[`Gallery rendering renders correctly 1`] = ` testID="gallery-test" > @@ -721,6 +724,7 @@ exports[`Gallery rendering renders correctly 1`] = ` } horizontal={false} keyExtractor={[Function]} + nestedScrollEnabled={true} numColumns={2} onContentSizeChange={[Function]} onEndReached={[Function]} @@ -908,6 +912,7 @@ exports[`Gallery rendering renders correctly horizontal 1`] = ` } horizontal={true} keyExtractor={[Function]} + nestedScrollEnabled={true} onEndReached={[Function]} onEndReachedThreshold={0.6} scrollEventThrottle={50} @@ -1134,7 +1139,7 @@ exports[`Gallery rendering renders correctly with filter 1`] = ` style={ [ { - "flex": 1, + "flexShrink": 1, }, {}, ] @@ -1145,10 +1150,10 @@ exports[`Gallery rendering renders correctly with filter 1`] = ` @@ -1160,6 +1165,7 @@ exports[`Gallery rendering renders correctly with filter 1`] = ` } horizontal={false} keyExtractor={[Function]} + nestedScrollEnabled={true} numColumns={2} onContentSizeChange={[Function]} onEndReached={[Function]}