fix: add web-specific styles for overlay component rendering (#3844)

* fix: add web-specific styles for overlay component rendering

* chore: add image overlay demo example

* refactor: simplify overlay component styles for web compatibility

Author: adids1221

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',
@@ -126,7 +127,7 @@ class Overlay extends PureComponent<OverlayTypes> {
 const styles = StyleSheet.create({
   container: {
     ...StyleSheet.absoluteFillObject,
-    width: undefined
+    width: Constants.isWeb ? '100%' : undefined
   },
   top: {
     bottom: undefined,

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"
   },

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