From 77579a7d9e9c39b7cd1231227944815225bb8cf0 Mon Sep 17 00:00:00 2001 From: Yogendra Shelke Date: Mon, 19 Jan 2026 17:11:36 +0530 Subject: [PATCH] fix(image-native): improve image enlargement dimensions handling --- .../image-native/CHANGELOG.md | 4 + .../image-native/package.json | 2 +- .../src/components/ImageComponents.tsx | 32 +-- .../__snapshots__/Image.spec.tsx.snap | 190 +++--------------- .../image-native/src/package.xml | 2 +- .../image-native/src/utils/imageUtils.ts | 15 +- 6 files changed, 55 insertions(+), 190 deletions(-) diff --git a/packages/pluggableWidgets/image-native/CHANGELOG.md b/packages/pluggableWidgets/image-native/CHANGELOG.md index 200b137ba..cf80f12b7 100644 --- a/packages/pluggableWidgets/image-native/CHANGELOG.md +++ b/packages/pluggableWidgets/image-native/CHANGELOG.md @@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## [Unreleased] +### Changed + +- We fixed image enlargement issue on Android. + ## [3.0.2] - 2025-12-15 - Updated react-native-svg to v15.12.1. This addresses compatibility issues with React Native 0.78 and later versions. diff --git a/packages/pluggableWidgets/image-native/package.json b/packages/pluggableWidgets/image-native/package.json index 9f60ddcab..c2021be62 100644 --- a/packages/pluggableWidgets/image-native/package.json +++ b/packages/pluggableWidgets/image-native/package.json @@ -1,7 +1,7 @@ { "name": "image-native", "widgetName": "Image", - "version": "3.0.2", + "version": "3.0.3", "description": "Display an image and enlarge it on click", "copyright": "© Mendix Technology BV 2022. All rights reserved.", "license": "Apache-2.0", diff --git a/packages/pluggableWidgets/image-native/src/components/ImageComponents.tsx b/packages/pluggableWidgets/image-native/src/components/ImageComponents.tsx index 2a10bdb3d..42ad4690d 100644 --- a/packages/pluggableWidgets/image-native/src/components/ImageComponents.tsx +++ b/packages/pluggableWidgets/image-native/src/components/ImageComponents.tsx @@ -1,9 +1,9 @@ -import { Dispatch, SetStateAction, FunctionComponent, useState, Fragment, useCallback } from "react"; -import { Modal, Pressable, LayoutChangeEvent, View, ImageStyle } from "react-native"; +import { Dispatch, SetStateAction, FunctionComponent, useState, Fragment, useCallback, useMemo } from "react"; +import { Modal, Pressable, LayoutChangeEvent, View, ImageStyle, useWindowDimensions } from "react-native"; import { SvgUri } from "react-native-svg"; import { extractStyles } from "@mendix/pluggable-widgets-tools"; import { OnClickTypeEnum } from "../../typings/ImageProps"; -import { CustomImageObjectProps, onLayoutSetDimensions } from "../utils/imageUtils"; +import { CustomImageObjectProps, onLayoutSetDimensions, getScaledDimensions } from "../utils/imageUtils"; import { DimensionsType, ImageIconSVG } from "./ImageIconSVG"; import { DefaultImageStyle } from "../ui/Styles.js"; import { DynamicValue } from "mendix"; @@ -209,7 +209,6 @@ export const ImageSmall: FunctionComponent = props => { }; export const ImageEnlarged: FunctionComponent = props => { - const [dimensions, setDimensions] = useState(); const { visible, setEnlarged, @@ -222,12 +221,11 @@ export const ImageEnlarged: FunctionComponent = props => { screenReaderHint } = props; const [svgProps] = extractStyles(styles.image as ImageStyle, ["width", "height"]); - const onLayoutSetDimensionsCallback = useCallback( - ({ nativeEvent: { layout } }: LayoutChangeEvent) => { - onLayoutSetDimensions(layout.width, layout.height, setDimensions, initialDimensions); - }, - [initialDimensions] - ); + + const { width, height } = useWindowDimensions(); + const dimensions = useMemo(() => { + return getScaledDimensions(width, height, initialDimensions); + }, [width, height, initialDimensions]); return visible && initialDimensions?.width && initialDimensions?.height ? ( = props => { setEnlarged(false)} - onLayout={ - source.type !== "icon" && - ((!dimensions?.width && !svgProps?.width) || (!dimensions?.height && !svgProps?.height)) - ? onLayoutSetDimensionsCallback - : undefined - } style={styles.backdrop} > - = props => { initialDimensions={initialDimensions} styles={styles.image} /> - + ) : null; diff --git a/packages/pluggableWidgets/image-native/src/components/__tests__/__snapshots__/Image.spec.tsx.snap b/packages/pluggableWidgets/image-native/src/components/__tests__/__snapshots__/Image.spec.tsx.snap index be4182086..a3b2b08ad 100644 --- a/packages/pluggableWidgets/image-native/src/components/__tests__/__snapshots__/Image.spec.tsx.snap +++ b/packages/pluggableWidgets/image-native/src/components/__tests__/__snapshots__/Image.spec.tsx.snap @@ -391,49 +391,21 @@ exports[`Widget Dynamic Image SVG renders the structure inside a modal 1`] = ` testID="Image1$ImageEnlargedPressable" > @@ -1258,8 +1202,8 @@ exports[`Widget Dynamic Image renders the structure inside a modal 1`] = ` "aspectRatio": 2, }, { - "height": 1111, - "width": 2222, + "height": 375, + "width": 750, }, { "flexGrow": 1, @@ -1793,39 +1737,11 @@ exports[`Widget Icon type: image/staticImage renders the structure inside a moda testID="Image1$ImageEnlargedPressable" > @@ -1840,8 +1756,8 @@ exports[`Widget Icon type: image/staticImage renders the structure inside a moda "aspectRatio": 2, }, { - "height": 1111, - "width": 2222, + "height": 375, + "width": 750, }, { "flexGrow": 1, @@ -2588,35 +2504,7 @@ exports[`Widget Static Image SVG renders the structure inside a modal 1`] = ` testID="Image1$ImageEnlargedPressable" > @@ -3467,8 +3327,8 @@ exports[`Widget Static Image renders the structure inside a modal 1`] = ` "aspectRatio": 2, }, { - "height": 1111, - "width": 2222, + "height": 375, + "width": 750, }, { "flexGrow": 1, diff --git a/packages/pluggableWidgets/image-native/src/package.xml b/packages/pluggableWidgets/image-native/src/package.xml index a948f16ff..b7f602382 100644 --- a/packages/pluggableWidgets/image-native/src/package.xml +++ b/packages/pluggableWidgets/image-native/src/package.xml @@ -1,6 +1,6 @@ - + diff --git a/packages/pluggableWidgets/image-native/src/utils/imageUtils.ts b/packages/pluggableWidgets/image-native/src/utils/imageUtils.ts index 8484f8fda..98833c18a 100644 --- a/packages/pluggableWidgets/image-native/src/utils/imageUtils.ts +++ b/packages/pluggableWidgets/image-native/src/utils/imageUtils.ts @@ -149,6 +149,17 @@ export function onLayoutSetDimensions( setDimensions: Dispatch>, initialDimensions?: DimensionsType ): void { + const optimumDimensions = getScaledDimensions(width, height, initialDimensions); + if (optimumDimensions) { + setDimensions(optimumDimensions); + } +} + +export function getScaledDimensions( + width: number, + height: number, + initialDimensions?: DimensionsType +): DimensionsType | undefined { if (initialDimensions?.width && initialDimensions?.height) { let newWidth; let newHeight; @@ -167,9 +178,9 @@ export function onLayoutSetDimensions( newHeight = heightScale < 1 ? initialDimensions.height * heightScale : initialDimensions.height; } - setDimensions({ + return { width: newWidth, height: newHeight - }); + }; } }