fix: resolve image rendering issue in Online Synchronization mode on Android

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]
 
+### Fixed
+
+-   We fixed an issue that caused images from entities to not render on Android in Online Synchronization mode
+
 ## [3.1.1] - 2026-6-10
 
 ### Changed

packages/pluggableWidgets/image-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "image-native",
   "widgetName": "Image",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "description": "Display an image and enlarge it on click",
   "copyright": "© Mendix Technology BV 2022. All rights reserved.",
   "license": "Apache-2.0",

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

@@ -1,5 +1,5 @@
 import { FunctionComponent, Fragment, useCallback } from "react";
-import { View } from "react-native";
+import { ImageURISource, Platform, View } from "react-native";
 import { SvgUri, SvgXml } from "react-native-svg";
 import FastImageComponent, { Source } from "@d11/react-native-fast-image";
 import { extractStyles } from "@mendix/pluggable-widgets-tools";
@@ -64,11 +64,19 @@ export const ImageIconSVG: FunctionComponent<ImageIconSVGProps> = props => {
     );
 
     if (image && (type === "staticImage" || type === "dynamicImage")) {
+        // FastImage's Glide/OkHttp client on Android can be initialized before the app wires up
+        // its cookie-decrypting network interceptor, causing remote (online document) images to
+        // fail to load with 401s. RN's own Image component always picks up the interceptor, so
+        // fall back to it for remote urls on Android.
+        const uri = typeof image === "object" ? (image as ImageURISource)?.uri : undefined;
+        const useFallback = Platform.OS === "android" && typeof uri === "string" && /^https?:\/\//i.test(uri);
+
         return (
             <FastImageComponent
                 testID={`${name}$Image`} // Broken because of https://github.com/DylanVann/react-native-fast-image/issues/221
                 source={image as Source | number}
                 resizeMode={resizeMode || "contain"}
+                fallback={useFallback}
                 style={[
                     initialDimensions?.aspectRatio ? { aspectRatio: +initialDimensions.aspectRatio?.toFixed(2) } : {},
                     width && height ? { width, height } : {},

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

packages/pluggableWidgets/image-native/src/utils/imageUtils.ts

@@ -31,6 +31,12 @@ function getBundledAssetSource(value: NativeImage | Readonly<ImageURISource | st
     return undefined;
 }
 
+function toAndroidUri(uri: string): string {
+    // Online images are served by the Mendix runtime as http(s) URLs and must be requested as
+    // such so cookies are attached; only local file paths need the file:/// scheme prepended.
+    return Platform.OS === "android" && !/^https?:\/\//i.test(uri) ? `file:///${uri}` : uri;
+}
+
 export async function convertImageProps(
     datasource: DatasourceEnum,
     imageIcon: DynamicValue<NativeIcon> | undefined,
@@ -74,14 +80,14 @@ export async function convertImageProps(
             } else if (typeof imageValue === "object" && imageValue?.uri && imageValue?.name?.endsWith(".svg")) {
                 return {
                     type: "dynamicSVG", // Dynamic image SVG
-                    image: (Platform.OS === "android" ? "file:///" : "") + imageValue.uri
+                    image: toAndroidUri(imageValue.uri as string)
                 };
             } else if (typeof imageValue === "object" && imageValue?.uri) {
                 return {
                     type: "dynamicImage", // Dynamic image
                     image: {
                         ...imageValue,
-                        uri: (Platform.OS === "android" ? "file:///" : "") + imageValue.uri
+                        uri: toAndroidUri(imageValue.uri as string)
                     }
                 };
             }