From b482a829ea6e52c0f3c1d1ec82aafaf629b99dc6 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Thu, 20 Nov 2025 11:39:51 +0200
Subject: [PATCH 1/3] fix: add web-specific styles for overlay component
 rendering

---
 src/components/overlay/index.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/overlay/index.tsx b/src/components/overlay/index.tsx
index 737e177b4f..6b627506c1 100644
--- a/src/components/overlay/index.tsx
+++ b/src/components/overlay/index.tsx
@@ -4,6 +4,7 @@ import {StyleSheet, Image, ImageProps, ImageSourcePropType} from 'react-native';
 import {Colors} from '../../style';
 import View from '../view';
 import Assets from '../../assets';
+import Constants from '../../commons/Constants';
 
 const OVERLY_TYPES = {
   VERTICAL: 'vertical',
@@ -85,7 +86,7 @@ class Overlay extends PureComponent<OverlayTypes> {
   };
 
   renderImage = (style: any, source: ImageSourcePropType) => {
-    return <Image style={[styles.container, style]} resizeMode={'stretch'} source={source}/>;
+    return <Image style={[styles.container, Constants.isWeb && styles.containerWeb, style]} resizeMode={'stretch'} source={source}/>;
   };
 
   getImageSource = (type?: OverlayTypeType, intensity?: OverlayTypes['intensity']) => {
@@ -128,6 +129,9 @@ const styles = StyleSheet.create({
     ...StyleSheet.absoluteFillObject,
     width: undefined
   },
+  containerWeb: {
+    width: '100%'
+  },
   top: {
     bottom: undefined,
     height: '75%'

From e56f11721ec8c60b21863d79da32fa741038bfd5 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Thu, 20 Nov 2025 12:00:07 +0200
Subject: [PATCH 2/3] chore: add image overlay demo example

---
 webDemo/package.json |  2 +-
 webDemo/src/App.tsx  | 54 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/webDemo/package.json b/webDemo/package.json
index 91ec72069e..3bc2b69540 100644
--- a/webDemo/package.json
+++ b/webDemo/package.json
@@ -28,7 +28,7 @@
     "react-native-shimmer-placeholder": "^2.0.8",
     "react-native-svg": "15.11.2",
     "react-native-svg-transformer": "1.5.0",
-    "react-native-ui-lib": "8.0.0",
+    "react-native-ui-lib": "8.0.0-snapshot.7447",
     "react-native-web": "^0.18.6",
     "typescript": "^4.4.2"
   },
diff --git a/webDemo/src/App.tsx b/webDemo/src/App.tsx
index 05e2bca5f9..6b1e041055 100644
--- a/webDemo/src/App.tsx
+++ b/webDemo/src/App.tsx
@@ -10,6 +10,7 @@ import Slider from 'react-native-ui-lib/Slider';
 import Stepper from 'react-native-ui-lib/Stepper';
 import Icon from 'react-native-ui-lib/Icon';
 import DateTimePicker from 'react-native-ui-lib/DateTimePicker';
+import UIImage from 'react-native-ui-lib/Image';
 // import FloatingButton from 'react-native-ui-lib/FloatingButton'
 import Chip from 'react-native-ui-lib/Chip';
 import Badge from 'react-native-ui-lib/Badge';
@@ -307,6 +308,59 @@ const itemsToRender: ItemToRender[] = [
     title: 'Image',
     FC: Image
   },
+  {
+    title: 'Image with Overlay',
+    FC: () => {
+      const imageSource = {
+        uri: 'https://images.pexels.com/photos/248412/pexels-photo-248412.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=200'
+      };
+
+      return (
+        <View row spread gap-s2>
+          <View center>
+            <Text marginB-5 text80>Top</Text>
+            <UIImage
+              source={imageSource}
+              width={100}
+              height={100}
+              overlayType={UIImage.overlayTypes.TOP}
+              overlayIntensity={UIImage.overlayIntensityType.MEDIUM}
+            />
+          </View>
+          <View center>
+            <Text marginB-5 text80>Bottom</Text>
+            <UIImage
+              source={imageSource}
+              width={100}
+              height={100}
+              overlayType={UIImage.overlayTypes.BOTTOM}
+              overlayIntensity={UIImage.overlayIntensityType.MEDIUM}
+            />
+          </View>
+          <View center>
+            <Text marginB-5 text80>Vertical</Text>
+            <UIImage
+              source={imageSource}
+              width={100}
+              height={100}
+              overlayType={UIImage.overlayTypes.VERTICAL}
+              overlayIntensity={UIImage.overlayIntensityType.MEDIUM}
+            />
+          </View>
+          <View center>
+            <Text marginB-5 text80>Solid</Text>
+            <UIImage
+              source={imageSource}
+              width={100}
+              height={100}
+              overlayType={UIImage.overlayTypes.SOLID}
+              overlayIntensity={UIImage.overlayIntensityType.MEDIUM}
+            />
+          </View>
+        </View>
+      );
+    }
+  },
   {
     title: 'Progressive Image',
     FC: ProgressiveImage

From 0fe9159263a59dc964fc8f8c0a8b3cdd859bbf57 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Thu, 20 Nov 2025 14:02:00 +0200
Subject: [PATCH 3/3] refactor: simplify overlay component styles for web
 compatibility

---
 src/components/overlay/index.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/overlay/index.tsx b/src/components/overlay/index.tsx
index 6b627506c1..379b107400 100644
--- a/src/components/overlay/index.tsx
+++ b/src/components/overlay/index.tsx
@@ -86,7 +86,7 @@ class Overlay extends PureComponent<OverlayTypes> {
   };
 
   renderImage = (style: any, source: ImageSourcePropType) => {
-    return <Image style={[styles.container, Constants.isWeb && styles.containerWeb, style]} resizeMode={'stretch'} source={source}/>;
+    return <Image style={[styles.container, style]} resizeMode={'stretch'} source={source}/>;
   };
 
   getImageSource = (type?: OverlayTypeType, intensity?: OverlayTypes['intensity']) => {
@@ -127,10 +127,7 @@ class Overlay extends PureComponent<OverlayTypes> {
 const styles = StyleSheet.create({
   container: {
     ...StyleSheet.absoluteFillObject,
-    width: undefined
-  },
-  containerWeb: {
-    width: '100%'
+    width: Constants.isWeb ? '100%' : undefined
   },
   top: {
     bottom: undefined,