Skip to content

Commit 5712f22

Browse files
karahanharunnkarahanharunn
authored
Merge branch 'main' into moo/moo-2083/location-permission-request-main
2 parents 8665850 + 3cf60ce commit 5712f22

File tree

6 files changed

+55
-190
lines changed

6 files changed

+55
-190
lines changed

‎packages/pluggableWidgets/image-native/CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
66

77
## [Unreleased]
88

9+
### Changed
10+
11+
- We fixed image enlargement issue on Android.
12+
913
## [3.0.2] - 2025-12-15
1014

1115
- Updated react-native-svg to v15.12.1. This addresses compatibility issues with React Native 0.78 and later versions.

‎packages/pluggableWidgets/image-native/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "image-native",
33
"widgetName": "Image",
4-
"version": "3.0.2",
4+
"version": "3.0.3",
55
"description": "Display an image and enlarge it on click",
66
"copyright": "© Mendix Technology BV 2022. All rights reserved.",
77
"license": "Apache-2.0",

‎packages/pluggableWidgets/image-native/src/components/ImageComponents.tsx‎

Lines changed: 11 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { Dispatch, SetStateAction, FunctionComponent, useState, Fragment, useCallback } from "react";
2-
import { Modal, Pressable, LayoutChangeEvent, View, ImageStyle } from "react-native";
1+
import { Dispatch, SetStateAction, FunctionComponent, useState, Fragment, useCallback, useMemo } from "react";
2+
import { Modal, Pressable, LayoutChangeEvent, View, ImageStyle, useWindowDimensions } from "react-native";
33
import { SvgUri } from "react-native-svg";
44
import { extractStyles } from "@mendix/pluggable-widgets-tools";
55
import { OnClickTypeEnum } from "../../typings/ImageProps";
6-
import { CustomImageObjectProps, onLayoutSetDimensions } from "../utils/imageUtils";
6+
import { CustomImageObjectProps, onLayoutSetDimensions, getScaledDimensions } from "../utils/imageUtils";
77
import { DimensionsType, ImageIconSVG } from "./ImageIconSVG";
88
import { DefaultImageStyle } from "../ui/Styles.js";
99
import { DynamicValue } from "mendix";
@@ -209,7 +209,6 @@ export const ImageSmall: FunctionComponent<ImageSmallProps> = props => {
209209
};
210210

211211
export const ImageEnlarged: FunctionComponent<ImageEnlargedProps> = props => {
212-
const [dimensions, setDimensions] = useState<DimensionsType>();
213212
const {
214213
visible,
215214
setEnlarged,
@@ -222,12 +221,11 @@ export const ImageEnlarged: FunctionComponent<ImageEnlargedProps> = props => {
222221
screenReaderHint
223222
} = props;
224223
const [svgProps] = extractStyles(styles.image as ImageStyle, ["width", "height"]);
225-
const onLayoutSetDimensionsCallback = useCallback(
226-
({ nativeEvent: { layout } }: LayoutChangeEvent) => {
227-
onLayoutSetDimensions(layout.width, layout.height, setDimensions, initialDimensions);
228-
},
229-
[initialDimensions]
230-
);
224+
225+
const { width, height } = useWindowDimensions();
226+
const dimensions = useMemo(() => {
227+
return getScaledDimensions(width, height, initialDimensions);
228+
}, [width, height, initialDimensions]);
231229

232230
return visible && initialDimensions?.width && initialDimensions?.height ? (
233231
<Modal
@@ -251,19 +249,11 @@ export const ImageEnlarged: FunctionComponent<ImageEnlargedProps> = props => {
251249
<Pressable
252250
testID={`${name}$ImageEnlargedPressable`}
253251
onPress={() => setEnlarged(false)}
254-
onLayout={
255-
source.type !== "icon" &&
256-
((!dimensions?.width && !svgProps?.width) || (!dimensions?.height && !svgProps?.height))
257-
? onLayoutSetDimensionsCallback
258-
: undefined
259-
}
260252
style={styles.backdrop}
261253
>
262-
<Pressable
263-
onPress={null}
254+
<View
255+
pointerEvents="none"
264256
style={{
265-
// The child (FastImage) needs "flexGrow: 1" so images on Android are not blurry.
266-
// Therefore we explicitly have to set width / height here to prevent the image from taking up the whole screen, which in turn prevents the user from closing the modal (bc parent Pressable will not be clickable).
267257
width: (svgProps?.width ?? dimensions?.width) as number,
268258
height: (svgProps?.height ?? dimensions?.height) as number
269259
}}
@@ -276,7 +266,7 @@ export const ImageEnlarged: FunctionComponent<ImageEnlargedProps> = props => {
276266
initialDimensions={initialDimensions}
277267
styles={styles.image}
278268
/>
279-
</Pressable>
269+
</View>
280270
</Pressable>
281271
</Modal>
282272
) : null;

‎packages/pluggableWidgets/image-native/src/components/__tests__/__snapshots__/Image.spec.tsx.snap‎

Lines changed: 25 additions & 165 deletions
Original file line numberDiff line numberDiff line change
@@ -391,49 +391,21 @@ exports[`Widget Dynamic Image SVG renders the structure inside a modal 1`] = `
391391
testID="Image1$ImageEnlargedPressable"
392392
>
393393
<View
394-
accessibilityState={
395-
{
396-
"busy": undefined,
397-
"checked": undefined,
398-
"disabled": undefined,
399-
"expanded": undefined,
400-
"selected": undefined,
401-
}
402-
}
403-
accessibilityValue={
404-
{
405-
"max": undefined,
406-
"min": undefined,
407-
"now": undefined,
408-
"text": undefined,
409-
}
410-
}
411-
accessible={true}
412-
collapsable={false}
413-
focusable={true}
414-
onBlur={[Function]}
415-
onClick={[Function]}
416-
onFocus={[Function]}
417-
onResponderGrant={[Function]}
418-
onResponderMove={[Function]}
419-
onResponderRelease={[Function]}
420-
onResponderTerminate={[Function]}
421-
onResponderTerminationRequest={[Function]}
422-
onStartShouldSetResponder={[Function]}
394+
pointerEvents="none"
423395
style={
424396
{
425-
"height": 9999,
426-
"width": 9999,
397+
"height": 750,
398+
"width": 750,
427399
}
428400
}
429401
>
430402
<RNSVGSvgViewAndroid
431403
align="xMidYMid"
432-
bbHeight={9999}
433-
bbWidth={9999}
404+
bbHeight={750}
405+
bbWidth={750}
434406
color="#000"
435407
focusable={false}
436-
height={9999}
408+
height={750}
437409
id="Layer_1"
438410
meetOrSlice={0}
439411
minX={0}
@@ -458,8 +430,8 @@ exports[`Widget Dynamic Image SVG renders the structure inside a modal 1`] = `
458430
],
459431
{
460432
"flex": 0,
461-
"height": 9999,
462-
"width": 9999,
433+
"height": 750,
434+
"width": 750,
463435
},
464436
]
465437
}
@@ -468,7 +440,7 @@ exports[`Widget Dynamic Image SVG renders the structure inside a modal 1`] = `
468440
vbHeight={9999}
469441
vbWidth={9999}
470442
version={1.1}
471-
width={9999}
443+
width={750}
472444
x="0px"
473445
xmlSpace="preserve"
474446
xmlns="http://www.w3.org/2000/svg"
@@ -1211,39 +1183,11 @@ exports[`Widget Dynamic Image renders the structure inside a modal 1`] = `
12111183
testID="Image1$ImageEnlargedPressable"
12121184
>
12131185
<View
1214-
accessibilityState={
1215-
{
1216-
"busy": undefined,
1217-
"checked": undefined,
1218-
"disabled": undefined,
1219-
"expanded": undefined,
1220-
"selected": undefined,
1221-
}
1222-
}
1223-
accessibilityValue={
1224-
{
1225-
"max": undefined,
1226-
"min": undefined,
1227-
"now": undefined,
1228-
"text": undefined,
1229-
}
1230-
}
1231-
accessible={true}
1232-
collapsable={false}
1233-
focusable={true}
1234-
onBlur={[Function]}
1235-
onClick={[Function]}
1236-
onFocus={[Function]}
1237-
onResponderGrant={[Function]}
1238-
onResponderMove={[Function]}
1239-
onResponderRelease={[Function]}
1240-
onResponderTerminate={[Function]}
1241-
onResponderTerminationRequest={[Function]}
1242-
onStartShouldSetResponder={[Function]}
1186+
pointerEvents="none"
12431187
style={
12441188
{
1245-
"height": 1111,
1246-
"width": 2222,
1189+
"height": 375,
1190+
"width": 750,
12471191
}
12481192
}
12491193
>
@@ -1258,8 +1202,8 @@ exports[`Widget Dynamic Image renders the structure inside a modal 1`] = `
12581202
"aspectRatio": 2,
12591203
},
12601204
{
1261-
"height": 1111,
1262-
"width": 2222,
1205+
"height": 375,
1206+
"width": 750,
12631207
},
12641208
{
12651209
"flexGrow": 1,
@@ -1793,39 +1737,11 @@ exports[`Widget Icon type: image/staticImage renders the structure inside a moda
17931737
testID="Image1$ImageEnlargedPressable"
17941738
>
17951739
<View
1796-
accessibilityState={
1797-
{
1798-
"busy": undefined,
1799-
"checked": undefined,
1800-
"disabled": undefined,
1801-
"expanded": undefined,
1802-
"selected": undefined,
1803-
}
1804-
}
1805-
accessibilityValue={
1806-
{
1807-
"max": undefined,
1808-
"min": undefined,
1809-
"now": undefined,
1810-
"text": undefined,
1811-
}
1812-
}
1813-
accessible={true}
1814-
collapsable={false}
1815-
focusable={true}
1816-
onBlur={[Function]}
1817-
onClick={[Function]}
1818-
onFocus={[Function]}
1819-
onResponderGrant={[Function]}
1820-
onResponderMove={[Function]}
1821-
onResponderRelease={[Function]}
1822-
onResponderTerminate={[Function]}
1823-
onResponderTerminationRequest={[Function]}
1824-
onStartShouldSetResponder={[Function]}
1740+
pointerEvents="none"
18251741
style={
18261742
{
1827-
"height": 1111,
1828-
"width": 2222,
1743+
"height": 375,
1744+
"width": 750,
18291745
}
18301746
}
18311747
>
@@ -1840,8 +1756,8 @@ exports[`Widget Icon type: image/staticImage renders the structure inside a moda
18401756
"aspectRatio": 2,
18411757
},
18421758
{
1843-
"height": 1111,
1844-
"width": 2222,
1759+
"height": 375,
1760+
"width": 750,
18451761
},
18461762
{
18471763
"flexGrow": 1,
@@ -2588,35 +2504,7 @@ exports[`Widget Static Image SVG renders the structure inside a modal 1`] = `
25882504
testID="Image1$ImageEnlargedPressable"
25892505
>
25902506
<View
2591-
accessibilityState={
2592-
{
2593-
"busy": undefined,
2594-
"checked": undefined,
2595-
"disabled": undefined,
2596-
"expanded": undefined,
2597-
"selected": undefined,
2598-
}
2599-
}
2600-
accessibilityValue={
2601-
{
2602-
"max": undefined,
2603-
"min": undefined,
2604-
"now": undefined,
2605-
"text": undefined,
2606-
}
2607-
}
2608-
accessible={true}
2609-
collapsable={false}
2610-
focusable={true}
2611-
onBlur={[Function]}
2612-
onClick={[Function]}
2613-
onFocus={[Function]}
2614-
onResponderGrant={[Function]}
2615-
onResponderMove={[Function]}
2616-
onResponderRelease={[Function]}
2617-
onResponderTerminate={[Function]}
2618-
onResponderTerminationRequest={[Function]}
2619-
onStartShouldSetResponder={[Function]}
2507+
pointerEvents="none"
26202508
style={
26212509
{
26222510
"height": 15,
@@ -3420,39 +3308,11 @@ exports[`Widget Static Image renders the structure inside a modal 1`] = `
34203308
testID="Image1$ImageEnlargedPressable"
34213309
>
34223310
<View
3423-
accessibilityState={
3424-
{
3425-
"busy": undefined,
3426-
"checked": undefined,
3427-
"disabled": undefined,
3428-
"expanded": undefined,
3429-
"selected": undefined,
3430-
}
3431-
}
3432-
accessibilityValue={
3433-
{
3434-
"max": undefined,
3435-
"min": undefined,
3436-
"now": undefined,
3437-
"text": undefined,
3438-
}
3439-
}
3440-
accessible={true}
3441-
collapsable={false}
3442-
focusable={true}
3443-
onBlur={[Function]}
3444-
onClick={[Function]}
3445-
onFocus={[Function]}
3446-
onResponderGrant={[Function]}
3447-
onResponderMove={[Function]}
3448-
onResponderRelease={[Function]}
3449-
onResponderTerminate={[Function]}
3450-
onResponderTerminationRequest={[Function]}
3451-
onStartShouldSetResponder={[Function]}
3311+
pointerEvents="none"
34523312
style={
34533313
{
3454-
"height": 1111,
3455-
"width": 2222,
3314+
"height": 375,
3315+
"width": 750,
34563316
}
34573317
}
34583318
>
@@ -3467,8 +3327,8 @@ exports[`Widget Static Image renders the structure inside a modal 1`] = `
34673327
"aspectRatio": 2,
34683328
},
34693329
{
3470-
"height": 1111,
3471-
"width": 2222,
3330+
"height": 375,
3331+
"width": 750,
34723332
},
34733333
{
34743334
"flexGrow": 1,

‎packages/pluggableWidgets/image-native/src/package.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<?xml version="1.0" encoding="utf-8" ?>
22
<package xmlns="http://www.mendix.com/package/1.0/">
3-
<clientModule name="Image" version="3.0.2" xmlns="http://www.mendix.com/clientModule/1.0/">
3+
<clientModule name="Image" version="3.0.3" xmlns="http://www.mendix.com/clientModule/1.0/">
44
<widgetFiles>
55
<widgetFile path="Image.xml" />
66
</widgetFiles>

0 commit comments

Comments
 (0)