From 75ac2487c1f137cedc2e8aee63d22f2b61ed43ee 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/3] 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 084fca7ea..a4bc6326a 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 4bc4481f1bc2ab3c4e85d5faf082ae3d39b5987f 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/3] 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 f596cdef6..1ba872cf9 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.3.0",
+  "version": "2.3.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 e2ef06d92..a8777e9fb 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.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="BackgroundImage" version="2.3.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="BackgroundImage.xml" />
         </widgetFiles>

From 5c6217cae311209391d4ccf19a2086ab568a1878 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/3] 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 a4bc6326a..b4e45e51a 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: {}
 };