[MOO-1847] Upgrade react-native-fast-image (#317)

Author: YogendraShelke

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 have migrated from react-native-fast-image to @d11/react-native-fast-image for new architecture compatibility.
+
 ## [3.0.0] - 2024-12-3
 
 ### Changed

packages/pluggableWidgets/image-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "image-native",
   "widgetName": "Image",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Display an image and enlarge it on click",
   "copyright": "© Mendix Technology BV 2022. All rights reserved.",
   "license": "Apache-2.0",
@@ -22,9 +22,9 @@
     "test": "pluggable-widgets-tools test:unit:native"
   },
   "dependencies": {
+    "@d11/react-native-fast-image": "8.11.1",
     "@mendix/piw-native-utils-internal": "*",
     "@mendix/piw-utils-internal": "*",
-    "react-native-fast-image": "8.3.2",
     "react-native-svg": "15.7.1",
     "react-native-vector-icons": "10.2.0"
   },

packages/pluggableWidgets/image-native/src/components/ImageIconSVG.tsx

@@ -1,7 +1,7 @@
 import { createElement, FunctionComponent, Fragment, useCallback } from "react";
 import { View } from "react-native";
 import { SvgUri, SvgXml } from "react-native-svg";
-import FastImageComponent, { Source } from "react-native-fast-image";
+import FastImageComponent, { Source } from "@d11/react-native-fast-image";
 import { extractStyles } from "@mendix/pluggable-widgets-tools";
 import { CustomImageProps, GlyphIcon } from "../utils/imageUtils";
 import { GlyphIcon as GlyphIconComponent } from "./fonts/font";

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

@@ -35,6 +35,47 @@ jest.mock("react-native/Libraries/Image/Image", () => {
     };
 });
 
+jest.mock("@d11/react-native-fast-image", () => {
+    const React = jest.requireActual("react") as typeof import("react");
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const { resolveAssetSource } = require("react-native/Libraries/Image/Image");
+    const FastImage = ({
+        testID,
+        style,
+        source: originalSource,
+        resizeMode
+    }: {
+        testID: string;
+        style: any;
+        source: any;
+        resizeMode: string;
+    }): any => {
+        let source = originalSource;
+        try {
+            if (typeof originalSource === "number") {
+                const asset = resolveAssetSource(originalSource);
+                source = asset ? { height: asset.height, width: asset.width } : { height: 0, width: 0 };
+            } else if (originalSource?.uri) {
+                // Dynamic image: use fixed dimensions to match stored snapshots
+                source = { height: 1111, width: 2222 };
+            }
+        } catch (_) {
+            source = { height: 0, width: 0 };
+        }
+        return React.createElement(
+            "View",
+            { style: [{ overflow: "hidden" }, Array.isArray(style) ? style : [style]] },
+            React.createElement("FastImageView", {
+                testID,
+                style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 },
+                source,
+                resizeMode
+            })
+        );
+    };
+    return { __esModule: true, default: FastImage };
+});
+
 const onLayoutEventData = {
     nativeEvent: {
         layout: {

packages/pluggableWidgets/image-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="Image" version="3.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Image" version="3.0.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="Image.xml" />
         </widgetFiles>

patches/@mendix+pluggable-widgets-tools+10.21.1.patch

@@ -77,6 +77,19 @@ index 2d0b5bfac7f1a1482bc1a222cba3e52b0339cc79..a3f0e368d76d294a5f7cd85886fe5ce0
  }
 
  function getModuleName(modulePath) {
+diff --git a/configs/rollup.config.native.mjs b/configs/rollup.config.native.mjs
+index 682cf9fc4259a1f431e7cc3b17a319fdb072929e..5be03c770f8247637223f78738c3cdecae4d3d92 100644
+--- a/configs/rollup.config.native.mjs
++++ b/configs/rollup.config.native.mjs
+@@ -62,7 +62,7 @@ const nativeExternal = [
+     /^react($|\/)/,
+     /^react-native-gesture-handler($|\/)/,
+     /^react-native-reanimated($|\/)/,
+-    /^react-native-fast-image($|\/)/,
++    /^@d11\/react-native-fast-image($|\/)/,
+     /^react-native-svg($|\/)/,
+     /^react-native-vector-icons($|\/)/,
+     /^@?react-navigation($|\/)/,
 diff --git a/test-config/jest.native.config.js b/test-config/jest.native.config.js
 index 72e3c51473b7566ca9d8b224b35334099ce615db..7e0949aa5d50d288d848117a804fd691422aefde 100644
 --- a/test-config/jest.native.config.js