From 5428507bb5bd1b46e9299da314514a4d090b6cf5 Mon Sep 17 00:00:00 2001
From: Saurabh Chavan <saurabh.chavan@mendix.com>
Date: Mon, 7 Sep 2026 17:33:51 +0530
Subject: [PATCH 1/5] fix: background native image and snapshot update

---
 .../BackgroundImage.spec.tsx.snap             | 43 ++++++++++++++++---
 .../background-image-native/src/ui/Styles.ts  |  6 ++-
 2 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/packages/pluggableWidgets/background-image-native/src/__tests__/__snapshots__/BackgroundImage.spec.tsx.snap b/packages/pluggableWidgets/background-image-native/src/__tests__/__snapshots__/BackgroundImage.spec.tsx.snap
index e6703e7f2..d4ff20a14 100644
--- a/packages/pluggableWidgets/background-image-native/src/__tests__/__snapshots__/BackgroundImage.spec.tsx.snap
+++ b/packages/pluggableWidgets/background-image-native/src/__tests__/__snapshots__/BackgroundImage.spec.tsx.snap
@@ -2,7 +2,13 @@
 
 exports[`BackgroundImage renders content only when image is unavailable 1`] = `
 <View
-  style={{}}
+  style={
+    {
+      "flexBasis": "auto",
+      "flexGrow": 1,
+      "flexShrink": 1,
+    }
+  }
   testID="backgroundImageTest"
 >
   <Image
@@ -44,6 +50,9 @@ exports[`BackgroundImage renders with custom styles 1`] = `
 <View
   style={
     {
+      "flexBasis": "auto",
+      "flexGrow": 1,
+      "flexShrink": 1,
       "height": "80%",
     }
   }
@@ -85,7 +94,13 @@ exports[`BackgroundImage renders with custom styles 1`] = `
 
 exports[`BackgroundImage renders with default styles 1`] = `
 <View
-  style={{}}
+  style={
+    {
+      "flexBasis": "auto",
+      "flexGrow": 1,
+      "flexShrink": 1,
+    }
+  }
   testID="backgroundImageTest"
 >
   <Image
@@ -121,7 +136,13 @@ exports[`BackgroundImage renders with default styles 1`] = `
 
 exports[`BackgroundImage renders without content 1`] = `
 <View
-  style={{}}
+  style={
+    {
+      "flexBasis": "auto",
+      "flexGrow": 1,
+      "flexShrink": 1,
+    }
+  }
   testID="backgroundImageTest"
 >
   <Image
@@ -154,7 +175,13 @@ exports[`BackgroundImage renders without content 1`] = `
 
 exports[`BackgroundImage use correct opacity when image opacity is out of range 1`] = `
 <View
-  style={{}}
+  style={
+    {
+      "flexBasis": "auto",
+      "flexGrow": 1,
+      "flexShrink": 1,
+    }
+  }
   testID="backgroundImageTest"
 >
   <Image
@@ -190,7 +217,13 @@ exports[`BackgroundImage use correct opacity when image opacity is out of range
 
 exports[`BackgroundImage use correct opacity when image opacity is out of range 2`] = `
 <View
-  style={{}}
+  style={
+    {
+      "flexBasis": "auto",
+      "flexGrow": 1,
+      "flexShrink": 1,
+    }
+  }
   testID="backgroundImageTest"
 >
   <Image
diff --git a/packages/pluggableWidgets/background-image-native/src/ui/Styles.ts b/packages/pluggableWidgets/background-image-native/src/ui/Styles.ts
index 1df8e0744..ea76af7a9 100644
--- a/packages/pluggableWidgets/background-image-native/src/ui/Styles.ts
+++ b/packages/pluggableWidgets/background-image-native/src/ui/Styles.ts
@@ -11,6 +11,10 @@ export interface BackgroundImageStyle extends Style {
 }
 
 export const defaultBackgroundImageStyle: BackgroundImageStyle = {
-    container: {},
+    container: {
+        flexGrow: 1,
+        flexShrink: 1,
+        flexBasis: "auto"
+    },
     image: {}
 };

From 4c2a06ed682c4b7c9a1e749a2170f9da0228753e Mon Sep 17 00:00:00 2001
From: Saurabh Chavan <saurabh.chavan@mendix.com>
Date: Mon, 7 Sep 2026 17:38:35 +0530
Subject: [PATCH 2/5] fix: changelog and version update

---
 packages/pluggableWidgets/background-image-native/CHANGELOG.md  | 2 ++
 packages/pluggableWidgets/background-image-native/package.json  | 2 +-
 .../pluggableWidgets/background-image-native/src/package.xml    | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/pluggableWidgets/background-image-native/CHANGELOG.md b/packages/pluggableWidgets/background-image-native/CHANGELOG.md
index a059e2ca9..0bbd8a44b 100644
--- a/packages/pluggableWidgets/background-image-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/background-image-native/CHANGELOG.md
@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+-   Fixed background image widget not visible.
+
 ## [2.2.0] - 2024-12-3
 
 ### Changed
diff --git a/packages/pluggableWidgets/background-image-native/package.json b/packages/pluggableWidgets/background-image-native/package.json
index df6cddc16..0eb01da40 100644
--- a/packages/pluggableWidgets/background-image-native/package.json
+++ b/packages/pluggableWidgets/background-image-native/package.json
@@ -1,7 +1,7 @@
 {
   "name": "background-image-native",
   "widgetName": "BackgroundImage",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
diff --git a/packages/pluggableWidgets/background-image-native/src/package.xml b/packages/pluggableWidgets/background-image-native/src/package.xml
index a894174c6..77a08f551 100644
--- a/packages/pluggableWidgets/background-image-native/src/package.xml
+++ b/packages/pluggableWidgets/background-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="BackgroundImage" version="2.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="BackgroundImage" version="2.2.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="BackgroundImage.xml" />
         </widgetFiles>

From 2f33a165ff1f56ea9923aafdb6ff54200e000d86 Mon Sep 17 00:00:00 2001
From: Saurabh Chavan <saurabh.chavan@mendix.com>
Date: Tue, 8 Sep 2026 12:08:50 +0530
Subject: [PATCH 3/5] fix: updated styles based on content in backgroundImage

---
 .../src/BackgroundImage.tsx                   |  8 +++-
 .../BackgroundImage.spec.tsx.snap             | 48 +++++--------------
 .../background-image-native/src/ui/Styles.ts  |  6 +--
 3 files changed, 20 insertions(+), 42 deletions(-)

diff --git a/packages/pluggableWidgets/background-image-native/src/BackgroundImage.tsx b/packages/pluggableWidgets/background-image-native/src/BackgroundImage.tsx
index 29056c279..15139f725 100644
--- a/packages/pluggableWidgets/background-image-native/src/BackgroundImage.tsx
+++ b/packages/pluggableWidgets/background-image-native/src/BackgroundImage.tsx
@@ -33,8 +33,14 @@ export function BackgroundImage(props: BackgroundImageProps<BackgroundImageStyle
         { opacity, resizeMode }
     ] as StyleProp<SvgImageStyle>;
 
+    // When there's no content, allow container to grow to fill available space
+    // When there's content, size container to content
+    const containerStyle = props.content
+        ? styles.container
+        : [styles.container, { flexGrow: 1, flexShrink: 1, flexBasis: "auto" as const }];
+
     return (
-        <View style={styles.container} testID={name}>
+        <View style={containerStyle} testID={name}>
             <Image source={image.value} style={imageStyle} color={styles.image.svgColor} testID={`${name}$image`} />
             {props.content}
         </View>
diff --git a/packages/pluggableWidgets/background-image-native/src/__tests__/__snapshots__/BackgroundImage.spec.tsx.snap b/packages/pluggableWidgets/background-image-native/src/__tests__/__snapshots__/BackgroundImage.spec.tsx.snap
index d4ff20a14..4aec9f761 100644
--- a/packages/pluggableWidgets/background-image-native/src/__tests__/__snapshots__/BackgroundImage.spec.tsx.snap
+++ b/packages/pluggableWidgets/background-image-native/src/__tests__/__snapshots__/BackgroundImage.spec.tsx.snap
@@ -2,13 +2,7 @@
 
 exports[`BackgroundImage renders content only when image is unavailable 1`] = `
 <View
-  style={
-    {
-      "flexBasis": "auto",
-      "flexGrow": 1,
-      "flexShrink": 1,
-    }
-  }
+  style={{}}
   testID="backgroundImageTest"
 >
   <Image
@@ -50,9 +44,6 @@ exports[`BackgroundImage renders with custom styles 1`] = `
 <View
   style={
     {
-      "flexBasis": "auto",
-      "flexGrow": 1,
-      "flexShrink": 1,
       "height": "80%",
     }
   }
@@ -94,13 +85,7 @@ exports[`BackgroundImage renders with custom styles 1`] = `
 
 exports[`BackgroundImage renders with default styles 1`] = `
 <View
-  style={
-    {
-      "flexBasis": "auto",
-      "flexGrow": 1,
-      "flexShrink": 1,
-    }
-  }
+  style={{}}
   testID="backgroundImageTest"
 >
   <Image
@@ -137,11 +122,14 @@ exports[`BackgroundImage renders with default styles 1`] = `
 exports[`BackgroundImage renders without content 1`] = `
 <View
   style={
-    {
-      "flexBasis": "auto",
-      "flexGrow": 1,
-      "flexShrink": 1,
-    }
+    [
+      {},
+      {
+        "flexBasis": "auto",
+        "flexGrow": 1,
+        "flexShrink": 1,
+      },
+    ]
   }
   testID="backgroundImageTest"
 >
@@ -175,13 +163,7 @@ exports[`BackgroundImage renders without content 1`] = `
 
 exports[`BackgroundImage use correct opacity when image opacity is out of range 1`] = `
 <View
-  style={
-    {
-      "flexBasis": "auto",
-      "flexGrow": 1,
-      "flexShrink": 1,
-    }
-  }
+  style={{}}
   testID="backgroundImageTest"
 >
   <Image
@@ -217,13 +199,7 @@ exports[`BackgroundImage use correct opacity when image opacity is out of range
 
 exports[`BackgroundImage use correct opacity when image opacity is out of range 2`] = `
 <View
-  style={
-    {
-      "flexBasis": "auto",
-      "flexGrow": 1,
-      "flexShrink": 1,
-    }
-  }
+  style={{}}
   testID="backgroundImageTest"
 >
   <Image
diff --git a/packages/pluggableWidgets/background-image-native/src/ui/Styles.ts b/packages/pluggableWidgets/background-image-native/src/ui/Styles.ts
index ea76af7a9..1df8e0744 100644
--- a/packages/pluggableWidgets/background-image-native/src/ui/Styles.ts
+++ b/packages/pluggableWidgets/background-image-native/src/ui/Styles.ts
@@ -11,10 +11,6 @@ export interface BackgroundImageStyle extends Style {
 }
 
 export const defaultBackgroundImageStyle: BackgroundImageStyle = {
-    container: {
-        flexGrow: 1,
-        flexShrink: 1,
-        flexBasis: "auto"
-    },
+    container: {},
     image: {}
 };

From 8d50d43aaed9cbd8e28a0d8569adb69203e8043d Mon Sep 17 00:00:00 2001
From: Saurabh Chavan <saurabh.chavan@mendix.com>
Date: Thu, 10 Sep 2026 16:17:51 +0530
Subject: [PATCH 4/5] fix: pr comments fixed

---
 .../pluggableWidgets/background-image-native/CHANGELOG.md   | 2 +-
 .../background-image-native/src/BackgroundImage.tsx         | 6 ++----
 .../background-image-native/src/ui/Styles.ts                | 2 ++
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/pluggableWidgets/background-image-native/CHANGELOG.md b/packages/pluggableWidgets/background-image-native/CHANGELOG.md
index 0bbd8a44b..7844443e2 100644
--- a/packages/pluggableWidgets/background-image-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/background-image-native/CHANGELOG.md
@@ -6,7 +6,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
--   Fixed background image widget not visible.
+-   Fixed background image widget not visible when there is no content inside it.
 
 ## [2.2.0] - 2024-12-3
 
diff --git a/packages/pluggableWidgets/background-image-native/src/BackgroundImage.tsx b/packages/pluggableWidgets/background-image-native/src/BackgroundImage.tsx
index 15139f725..99774514f 100644
--- a/packages/pluggableWidgets/background-image-native/src/BackgroundImage.tsx
+++ b/packages/pluggableWidgets/background-image-native/src/BackgroundImage.tsx
@@ -4,7 +4,7 @@ import { ValueStatus } from "mendix";
 import { Image, SvgImageStyle } from "mendix/components/native/Image";
 import { flattenStyles } from "@mendix/piw-native-utils-internal";
 
-import { BackgroundImageStyle, defaultBackgroundImageStyle } from "./ui/Styles";
+import { BackgroundImageStyle, defaultBackgroundImageStyle, NO_CONTENT_CONTAINER_STYLE } from "./ui/Styles";
 import { BackgroundImageProps } from "../typings/BackgroundImageProps";
 
 export function BackgroundImage(props: BackgroundImageProps<BackgroundImageStyle>): JSX.Element | null {
@@ -35,9 +35,7 @@ export function BackgroundImage(props: BackgroundImageProps<BackgroundImageStyle
 
     // When there's no content, allow container to grow to fill available space
     // When there's content, size container to content
-    const containerStyle = props.content
-        ? styles.container
-        : [styles.container, { flexGrow: 1, flexShrink: 1, flexBasis: "auto" as const }];
+    const containerStyle = props.content ? styles.container : [NO_CONTENT_CONTAINER_STYLE, styles.container];
 
     return (
         <View style={containerStyle} testID={name}>
diff --git a/packages/pluggableWidgets/background-image-native/src/ui/Styles.ts b/packages/pluggableWidgets/background-image-native/src/ui/Styles.ts
index 1df8e0744..988002cf3 100644
--- a/packages/pluggableWidgets/background-image-native/src/ui/Styles.ts
+++ b/packages/pluggableWidgets/background-image-native/src/ui/Styles.ts
@@ -14,3 +14,5 @@ export const defaultBackgroundImageStyle: BackgroundImageStyle = {
     container: {},
     image: {}
 };
+
+export const NO_CONTENT_CONTAINER_STYLE = { flexGrow: 1, flexShrink: 1, flexBasis: "auto" as const };

From aa3075249cda1eabe5b5ecc0c9ff0c82b8e81cbc Mon Sep 17 00:00:00 2001
From: Saurabh Chavan <saurabh.chavan@mendix.com>
Date: Thu, 10 Sep 2026 16:24:14 +0530
Subject: [PATCH 5/5] fix: unit testcase fix

---
 .../src/__tests__/__snapshots__/BackgroundImage.spec.tsx.snap   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/pluggableWidgets/background-image-native/src/__tests__/__snapshots__/BackgroundImage.spec.tsx.snap b/packages/pluggableWidgets/background-image-native/src/__tests__/__snapshots__/BackgroundImage.spec.tsx.snap
index 4aec9f761..71ee8a560 100644
--- a/packages/pluggableWidgets/background-image-native/src/__tests__/__snapshots__/BackgroundImage.spec.tsx.snap
+++ b/packages/pluggableWidgets/background-image-native/src/__tests__/__snapshots__/BackgroundImage.spec.tsx.snap
@@ -123,12 +123,12 @@ exports[`BackgroundImage renders without content 1`] = `
 <View
   style={
     [
-      {},
       {
         "flexBasis": "auto",
         "flexGrow": 1,
         "flexShrink": 1,
       },
+      {},
     ]
   }
   testID="backgroundImageTest"