related-ui-components 2.8.3 → 2.8.5

package/lib/module/app.js

@@ -4,11 +4,10 @@ import React, { useState } from "react";
 import { SafeAreaView, StyleSheet, StatusBar } from "react-native";
 import CarouselCardStack from "./components/CarouselCardStack/CarouselCardStack.js"; // Adjust path as needed
 import { GestureHandlerRootView } from "react-native-gesture-handler";
-import { RedemptionOption } from "./components/index.js";
+import { SelaDealCard } from "./components/index.js";
 import { lightTheme, RelatedProvider, useTheme } from "./theme/index.js";
 import { BottomSheetStackProvider } from "./contexts/index.js";
 import { SafeAreaProvider } from "react-native-safe-area-context";
-import { Ionicons } from "@expo/vector-icons";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const DUMMY_DATA = Array.from({
   length: 10
@@ -49,13 +48,18 @@ const App = () => {
                 // onActiveIndexChange={(index) => {
                 //   console.log("Active item index:", index);
                 // }}
-              }), /*#__PURE__*/_jsx(RedemptionOption, {
-                text: "hello",
-                orientation: "horizontal",
-                icon: /*#__PURE__*/_jsx(Ionicons, {
-                  name: "accessibility",
-                  size: 24
-                })
+              }), /*#__PURE__*/_jsx(SelaDealCard, {
+                variant: "horizontal",
+                width: 300,
+                height: 300,
+                label: "discount",
+                description: "HELLO",
+                providerName: "Riva Club",
+                price: "100",
+                lockOverlay: true
+                // grayscaleIntensity={80}
+                ,
+                backgroundImage: require("./assets/images/namshi-banner.png")
               })]
             })]
           })

package/lib/module/app.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","SafeAreaView","StyleSheet","StatusBar","CarouselCardStack","GestureHandlerRootView","RedemptionOption","lightTheme","RelatedProvider","useTheme","BottomSheetStackProvider","SafeAreaProvider","Ionicons","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DUMMY_DATA","Array","from","length","_","i","id","image","title","App","theme","departureDate","setDepartureDate","undefined","returnDate","setReturnDate","progress","setProgress","handleAnimate","newProgress","Math","floor","random","children","style","flex","barStyle","styles","appContainer","data","text","orientation","icon","name","size","create","backgroundColor","justifyContent","alignItems"],"sourceRoot":"..\\..\\src","sources":["app.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAeC,QAAQ,QAAQ,OAAO;AAClD,SAASC,YAAY,EAAEC,UAAU,EAAEC,SAAS,QAAkC,cAAc;AAC5F,OAAOC,iBAAiB,MAAM,qDAAkD,CAAC,CAAC;AAClF,SAASC,sBAAsB,QAAQ,8BAA8B;AACrE,SASEC,gBAAgB,QAEX,uBAAc;AACrB,SAAoBC,UAAU,EAAEC,eAAe,EAAEC,QAAQ,QAAQ,kBAAS;AAG1E,SAASC,wBAAwB,QAAQ,qBAAY;AACrD,SAASC,gBAAgB,QAAQ,gCAAgC;AACjE,SAASC,QAAQ,QAAQ,oBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAG9C,MAAMC,UAAU,GAAGC,KAAK,CAACC,IAAI,CAAC;EAAEC,MAAM,EAAE;AAAG,CAAC,EAAE,CAACC,CAAC,EAAEC,CAAC,MAAM;EACvDC,EAAE,EAAE,SAASD,CAAC,GAAG,CAAC,EAAE;EACpB;EACAE,KAAK,EAAE,2CAA2C;EAClDC,KAAK,EAAE,UAAUH,CAAC,GAAG,CAAC;AACxB,CAAC,CAAC,CAAC;AAEH,MAAMI,GAAG,GAAGA,CAAA,KAAM;EAChB,MAAM;IAAEC;EAAM,CAAC,GAAGpB,QAAQ,CAAC,CAAC;EAE5B,MAAM,CAACqB,aAAa,EAAEC,gBAAgB,CAAC,GAAG/B,QAAQ,CAChDgC,SACF,CAAC;EACD,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGlC,QAAQ,CAAqBgC,SAAS,CAAC;EAE3E,MAAM,CAACG,QAAQ,EAAEC,WAAW,CAAC,GAAGpC,QAAQ,CAAC,EAAE,CAAC;EAC5C,MAAMqC,aAAa,GAAGA,CAAA,KAAM;IAC1B;IACA,MAAMC,WAAW,GAAGC,IAAI,CAACC,KAAK,CAACD,IAAI,CAACE,MAAM,CAAC,CAAC,GAAG,GAAG,CAAC;IACnDL,WAAW,CAACE,WAAW,CAAC;EAC1B,CAAC;EAED,oBACExB,IAAA,CAAAI,SAAA;IAAAwB,QAAA,eACE5B,IAAA,CAACH,gBAAgB;MAAA+B,QAAA,eACf5B,IAAA,CAACT,sBAAsB;QAACsC,KAAK,EAAE;UAAEC,IAAI,EAAE;QAAE,CAAE;QAAAF,QAAA,eACzC5B,IAAA,CAACN,eAAe;UAACqB,KAAK,EAAEtB,UAAW;UAAAmC,QAAA,eACjC1B,KAAA,CAACN,wBAAwB;YAAAgC,QAAA,gBACvB5B,IAAA,CAACX,SAAS;cAAC0C,QAAQ,EAAC;YAAe,CAAE,CAAC,eACtC7B,KAAA,CAACf,YAAY;cAAC0C,KAAK,EAAEG,MAAM,CAACC,YAAa;cAAAL,QAAA,gBACvC5B,IAAA,CAACV,iBAAiB;gBAChB4C,IAAI,EAAE7B;gBACN;gBACA;gBACA;gBACA;cAAA,CACD,CAAC,eAMNL,IAAA,CAACR,gBAAgB;gBAAC2C,IAAI,EAAC,OAAO;gBAACC,WAAW,EAAC,YAAY;gBAACC,IAAI,eAAErC,IAAA,CAACF,QAAQ;kBAACwC,IAAI,EAAC,eAAe;kBAACC,IAAI,EAAE;gBAAG,CAAW;cAAE,CAAmB,CAAC;YAAA,CAoEvH,CAAC;UAAA,CACS;QAAC,CACZ;MAAC,CACI;IAAC,CACT;EAAC,CACnB,CAAC;AAEP,CAAC;AAED,MAAMP,MAAM,GAAG5C,UAAU,CAACoD,MAAM,CAAC;EAC/BP,YAAY,EAAE;IACZH,IAAI,EAAE,CAAC;IACPW,eAAe,EAAE,MAAM;IACvBC,cAAc,EAAE,QAAQ;IAAE;IAC1BC,UAAU,EAAC;EACb;AACF,CAAC,CAAC;AAEF,eAAe7B,GAAG","ignoreList":[]}
+{"version":3,"names":["React","useState","SafeAreaView","StyleSheet","StatusBar","CarouselCardStack","GestureHandlerRootView","SelaDealCard","lightTheme","RelatedProvider","useTheme","BottomSheetStackProvider","SafeAreaProvider","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DUMMY_DATA","Array","from","length","_","i","id","image","title","App","theme","departureDate","setDepartureDate","undefined","returnDate","setReturnDate","progress","setProgress","handleAnimate","newProgress","Math","floor","random","children","style","flex","barStyle","styles","appContainer","data","variant","width","height","label","description","providerName","price","lockOverlay","backgroundImage","require","create","backgroundColor","justifyContent","alignItems"],"sourceRoot":"..\\..\\src","sources":["app.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Card/Card.js

@@ -4,6 +4,7 @@ import React from "react";
 import { View, TouchableOpacity, StyleSheet, ImageBackground } from "react-native";
 import { useTheme } from "../../theme/ThemeContext.js";
 import { LinearGradient } from "expo-linear-gradient";
+import { Grayscale } from "react-native-color-matrix-image-filters";
 import { jsx as _jsx } from "react/jsx-runtime";
 const Card = ({
   children,
@@ -38,19 +39,21 @@ const Card = ({
   }];
   const renderCardContent = () => {
     if (backgroundImage) {
-      return /*#__PURE__*/_jsx(ImageBackground, {
-        source: backgroundImage.source,
-        style: [styles.backgroundImage, backgroundImage.style],
-        imageStyle: [{
-          borderRadius
-        }, backgroundImage.imageStyle],
-        resizeMode: backgroundImage.resizeMode || "cover",
-        blurRadius: backgroundImage.blurRadius,
-        children: /*#__PURE__*/_jsx(View, {
-          style: [styles.imageContentContainer, {
-            opacity: backgroundImage.opacity !== undefined ? backgroundImage.opacity : 1
-          }],
-          children: children
+      return /*#__PURE__*/_jsx(Grayscale, {
+        children: /*#__PURE__*/_jsx(ImageBackground, {
+          source: backgroundImage.source,
+          style: [styles.backgroundImage, backgroundImage.style],
+          imageStyle: [{
+            borderRadius
+          }, backgroundImage.imageStyle],
+          resizeMode: backgroundImage.resizeMode || "cover",
+          blurRadius: backgroundImage.blurRadius,
+          children: /*#__PURE__*/_jsx(View, {
+            style: [styles.imageContentContainer, {
+              opacity: backgroundImage.opacity !== undefined ? backgroundImage.opacity : 1
+            }],
+            children: children
+          })
         })
       });
     } else if (gradient) {

package/lib/module/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","TouchableOpacity","StyleSheet","ImageBackground","useTheme","LinearGradient","jsx","_jsx","Card","children","style","onPress","disabled","elevation","testID","variant","backgroundColor","borderColor","borderRadius","backgroundImage","gradient","theme","getCardStyle","baseStyle","background","cardStyle","styles","card","opacity","renderCardContent","source","imageStyle","resizeMode","blurRadius","imageContentContainer","undefined","colors","start","end","activeOpacity","accessibilityRole","accessibilityLabel","create","flexDirection","display","width","height","flex","justifyContent","alignItems"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Card/Card.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","View","TouchableOpacity","StyleSheet","ImageBackground","useTheme","LinearGradient","Grayscale","jsx","_jsx","Card","children","style","onPress","disabled","elevation","testID","variant","backgroundColor","borderColor","borderRadius","backgroundImage","gradient","theme","getCardStyle","baseStyle","background","cardStyle","styles","card","opacity","renderCardContent","source","imageStyle","resizeMode","blurRadius","imageContentContainer","undefined","colors","start","end","activeOpacity","accessibilityRole","accessibilityLabel","create","flexDirection","display","width","height","flex","justifyContent","alignItems"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Card/Card.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Card/templates/SelaDealCard.js

@@ -31,7 +31,9 @@ const SelaDealCard = ({
   darkOverlayEnabled = true,
   darkOverlayColor = "rgba(0, 0, 0, 0.3)",
   lockOverlay = false,
-  priceContainerBlur
+  lockIcon,
+  priceContainerBlur,
+  grayscaleIntensity = 0
 }) => {
   const {
     theme,
@@ -73,7 +75,10 @@ const SelaDealCard = ({
     }, style],
     backgroundImage: {
       source: backgroundImage,
-      resizeMode: "cover"
+      resizeMode: "cover",
+      style: {
+        filter: `grayscale(${grayscaleIntensity}%)`
+      }
     },
     children: [darkOverlayEnabled && /*#__PURE__*/_jsx(View, {
       style: [StyleSheet.absoluteFill, {
@@ -84,7 +89,9 @@ const SelaDealCard = ({
     }), /*#__PURE__*/_jsx(LockOverlay, {
       visible: lockOverlay,
       contentPosition: isRTL ? "top-left" : "top-right",
-      iconSize: 24,
+      icon: lockIcon
+      // iconSize={24}  
+      ,
       text: "",
       overlayOpacity: 0.4
     }), /*#__PURE__*/_jsxs(View, {

package/lib/module/components/Card/templates/SelaDealCard.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useState","View","StyleSheet","Image","Card","useTheme","LockOverlay","BlurView","ThemedText","Text","jsx","_jsx","jsxs","_jsxs","SelaDealCard","variant","backgroundImage","label","labelStyle","labelContainerStyle","providerName","providerNameStyle","description","descriptionStyle","price","priceStyle","priceContainerStyle","onPress","style","width","height","isRTL","propIsRTL","borderRadius","darkOverlayEnabled","darkOverlayColor","lockOverlay","priceContainerBlur","theme","themeIsRTL","undefined","styles","getStyles","dynamicHeight","setDynamicHeight","uri","getSize","imgWidth","imgHeight","aspectRatio","finalLabelContainerStyle","labelContainerBase","finalLabelStyle","labelTextBase","finalPriceContainerStyle","priceContainerBase","priceContainerHorizontal","priceContainerVertical","finalPriceStyle","priceTextBase","providerTextStyle","providerNameBase","color","onSurface","descriptionTextStyle","descriptionBase","cardBase","source","resizeMode","children","absoluteFill","backgroundColor","visible","contentPosition","iconSize","text","overlayOpacity","overlayContainer","topSection","bottomContentHorizontal","textBlockHorizontal","bottomContentVertical","textBlockVertical","experimentalBlurMethod","intensity","tint","primary","create","overflow","position","flex","padding","justifyContent","flexDirection","paddingVertical","paddingHorizontal","background","fontWeight","fontSize","onBackground","marginBottom","secondary","helper","onPrimary","alignItems","marginRight","alignSelf"],"sourceRoot":"..\\..\\..\\..\\..\\src","sources":["components/Card/templates/SelaDealCard.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useState","View","StyleSheet","Image","Card","useTheme","LockOverlay","BlurView","ThemedText","Text","jsx","_jsx","jsxs","_jsxs","SelaDealCard","variant","backgroundImage","label","labelStyle","labelContainerStyle","providerName","providerNameStyle","description","descriptionStyle","price","priceStyle","priceContainerStyle","onPress","style","width","height","isRTL","propIsRTL","borderRadius","darkOverlayEnabled","darkOverlayColor","lockOverlay","lockIcon","priceContainerBlur","grayscaleIntensity","theme","themeIsRTL","undefined","styles","getStyles","dynamicHeight","setDynamicHeight","uri","getSize","imgWidth","imgHeight","aspectRatio","finalLabelContainerStyle","labelContainerBase","finalLabelStyle","labelTextBase","finalPriceContainerStyle","priceContainerBase","priceContainerHorizontal","priceContainerVertical","finalPriceStyle","priceTextBase","providerTextStyle","providerNameBase","color","onSurface","descriptionTextStyle","descriptionBase","cardBase","source","resizeMode","filter","children","absoluteFill","backgroundColor","visible","contentPosition","icon","text","overlayOpacity","overlayContainer","topSection","bottomContentHorizontal","textBlockHorizontal","bottomContentVertical","textBlockVertical","experimentalBlurMethod","intensity","tint","primary","create","overflow","position","flex","padding","justifyContent","flexDirection","paddingVertical","paddingHorizontal","background","fontWeight","fontSize","onBackground","marginBottom","secondary","helper","onPrimary","alignItems","marginRight","alignSelf"],"sourceRoot":"..\\..\\..\\..\\..\\src","sources":["components/Card/templates/SelaDealCard.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/LockOverlay/LockOverlay.js

@@ -1,11 +1,8 @@
 "use strict";
 
 import React from "react";
-import { View, Text, StyleSheet, TouchableOpacity
-
-// Import StyleProp for better type safety
-} from "react-native";
-import { Ionicons } from "@expo/vector-icons"; // Assuming you have this installed
+import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const LockOverlay = ({
   visible = true,
@@ -14,97 +11,91 @@ const LockOverlay = ({
   iconStyle,
   textStyle,
   text = "Unlock",
-  // Default text, but can be null or empty
-  iconName = "lock-closed",
-  iconSize = 50,
-  iconColor = "white",
+  icon,
   overlayOpacity = 0.7,
   contentPosition = "center",
   contentPadding = 20,
-  // Default padding for edge positions
+  grayscale = false,
   ...touchableProps
 }) => {
   if (!visible) return null;
-  const overlayStyles = [styles.overlayBase, {
-    backgroundColor: `rgba(0, 0, 0, ${overlayOpacity})`
-  }];
-
-  // Apply positioning styles to the main overlay container
+  const contentPositionStyle = {};
   switch (contentPosition) {
     case "top-center":
-      overlayStyles.push({
-        justifyContent: "flex-start",
-        alignItems: "center",
-        paddingTop: contentPadding
-      });
+      contentPositionStyle.justifyContent = "flex-start";
+      contentPositionStyle.alignItems = "center";
+      contentPositionStyle.paddingTop = contentPadding;
       break;
     case "top-left":
-      overlayStyles.push({
-        justifyContent: "flex-start",
-        alignItems: "flex-start",
-        paddingTop: contentPadding,
-        paddingLeft: contentPadding
-      });
+      contentPositionStyle.justifyContent = "flex-start";
+      contentPositionStyle.alignItems = "flex-start";
+      contentPositionStyle.paddingTop = contentPadding;
+      contentPositionStyle.paddingLeft = contentPadding;
       break;
     case "top-right":
-      overlayStyles.push({
-        justifyContent: "flex-start",
-        alignItems: "flex-end",
-        paddingTop: contentPadding,
-        paddingRight: contentPadding
-      });
+      contentPositionStyle.justifyContent = "flex-start";
+      contentPositionStyle.alignItems = "flex-end";
+      contentPositionStyle.paddingTop = contentPadding;
+      contentPositionStyle.paddingRight = contentPadding;
       break;
     case "center":
     default:
-      overlayStyles.push({
-        justifyContent: "center",
-        alignItems: "center"
-      });
+      contentPositionStyle.justifyContent = "center";
+      contentPositionStyle.alignItems = "center";
       break;
   }
-  overlayStyles.push(containerStyle); // Apply user-provided containerStyle last
-
-  return /*#__PURE__*/_jsx(TouchableOpacity, {
-    style: overlayStyles,
+  return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    style: [styles.wrapper, containerStyle],
     activeOpacity: 0.8,
     ...touchableProps,
-    children: /*#__PURE__*/_jsxs(View, {
-      style: [styles.contentContainerBase, contentContainerStyle],
-      children: [/*#__PURE__*/_jsx(Ionicons, {
-        name: iconName // Cast to any if Ionicons types are too strict for dynamic names
-        ,
-        size: iconSize,
-        color: iconColor,
-        style: iconStyle
-      }), text && text.trim() !== "" && /*#__PURE__*/_jsx(Text, {
-        style: [styles.textBase, {
-          color: iconColor
-        }, textStyle],
-        children: text
-      })]
-    })
+    children: [grayscale && /*#__PURE__*/_jsx(View, {
+      style: styles.grayscaleLayer
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.darkTintLayer, {
+        backgroundColor: `rgba(0, 0, 0, ${overlayOpacity})`
+      }]
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.contentContainer, contentPositionStyle],
+      children: /*#__PURE__*/_jsxs(View, {
+        style: [styles.content, contentContainerStyle],
+        children: [icon || /*#__PURE__*/_jsx(Ionicons, {
+          name: "lock-closed",
+          size: 30,
+          color: "white",
+          style: iconStyle
+        }), text && text.trim() !== "" && /*#__PURE__*/_jsx(Text, {
+          style: [styles.textBase, textStyle],
+          children: text
+        })]
+      })
+    })]
   });
 };
 const styles = StyleSheet.create({
-  overlayBase: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    zIndex: 999 // Ensure it's on top
+  wrapper: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 999
+  },
+  grayscaleLayer: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "white",
+    opacity: 0.4 // Adjust this value to control the grayscale intensity
+  },
+  darkTintLayer: {
+    ...StyleSheet.absoluteFillObject
+  },
+  contentContainer: {
+    ...StyleSheet.absoluteFillObject
   },
-  contentContainerBase: {
-    // This container ensures icon and text (if present) are aligned relative to each other
-    alignItems: "center" // Center text under the icon by default
+  content: {
+    alignItems: "center"
   },
   textBase: {
     fontSize: 18,
-    // Adjusted default size slightly
     fontWeight: "bold",
     marginTop: 10,
-    // Adjusted default margin
-    textAlign: "center"
+    textAlign: "center",
+    color: "white" // Default text color to white for better visibility
   }
 });
 export default LockOverlay;

package/lib/module/components/LockOverlay/LockOverlay.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","Text","StyleSheet","TouchableOpacity","Ionicons","jsx","_jsx","jsxs","_jsxs","LockOverlay","visible","containerStyle","contentContainerStyle","iconStyle","textStyle","text","iconName","iconSize","iconColor","overlayOpacity","contentPosition","contentPadding","touchableProps","overlayStyles","styles","overlayBase","backgroundColor","push","justifyContent","alignItems","paddingTop","paddingLeft","paddingRight","style","activeOpacity","children","contentContainerBase","name","size","color","trim","textBase","create","position","top","left","right","bottom","zIndex","fontSize","fontWeight","marginTop","textAlign"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/LockOverlay/LockOverlay.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SACEC,IAAI,EACJC,IAAI,EACJC,UAAU,EAGVC;;AAEW;AAAA,OACN,cAAc;AAErB,SAASC,QAAQ,QAAQ,oBAAoB,CAAC,CAAC;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAiB/C,MAAMC,WAAuC,GAAGA,CAAC;EAC/CC,OAAO,GAAG,IAAI;EACdC,cAAc;EACdC,qBAAqB;EACrBC,SAAS;EACTC,SAAS;EACTC,IAAI,GAAG,QAAQ;EAAE;EACjBC,QAAQ,GAAG,aAAa;EACxBC,QAAQ,GAAG,EAAE;EACbC,SAAS,GAAG,OAAO;EACnBC,cAAc,GAAG,GAAG;EACpBC,eAAe,GAAG,QAAQ;EAC1BC,cAAc,GAAG,EAAE;EAAE;EACrB,GAAGC;AACL,CAAC,KAAK;EACJ,IAAI,CAACZ,OAAO,EAAE,OAAO,IAAI;EAEzB,MAAMa,aAAmC,GAAG,CAC1CC,MAAM,CAACC,WAAW,EAClB;IAAEC,eAAe,EAAE,iBAAiBP,cAAc;EAAI,CAAC,CACxD;;EAED;EACA,QAAQC,eAAe;IACrB,KAAK,YAAY;MACfG,aAAa,CAACI,IAAI,CAAC;QACjBC,cAAc,EAAE,YAAY;QAC5BC,UAAU,EAAE,QAAQ;QACpBC,UAAU,EAAET;MACd,CAAC,CAAC;MACF;IACF,KAAK,UAAU;MACbE,aAAa,CAACI,IAAI,CAAC;QACjBC,cAAc,EAAE,YAAY;QAC5BC,UAAU,EAAE,YAAY;QACxBC,UAAU,EAAET,cAAc;QAC1BU,WAAW,EAAEV;MACf,CAAC,CAAC;MACF;IACF,KAAK,WAAW;MACdE,aAAa,CAACI,IAAI,CAAC;QACjBC,cAAc,EAAE,YAAY;QAC5BC,UAAU,EAAE,UAAU;QACtBC,UAAU,EAAET,cAAc;QAC1BW,YAAY,EAAEX;MAChB,CAAC,CAAC;MACF;IACF,KAAK,QAAQ;IACb;MACEE,aAAa,CAACI,IAAI,CAAC;QACjBC,cAAc,EAAE,QAAQ;QACxBC,UAAU,EAAE;MACd,CAAC,CAAC;MACF;EACJ;EAEAN,aAAa,CAACI,IAAI,CAAChB,cAAc,CAAC,CAAC,CAAC;;EAEpC,oBACEL,IAAA,CAACH,gBAAgB;IACf8B,KAAK,EAAEV,aAAc;IACrBW,aAAa,EAAE,GAAI;IAAA,GACfZ,cAAc;IAAAa,QAAA,eAElB3B,KAAA,CAACR,IAAI;MAACiC,KAAK,EAAE,CAACT,MAAM,CAACY,oBAAoB,EAAExB,qBAAqB,CAAE;MAAAuB,QAAA,gBAChE7B,IAAA,CAACF,QAAQ;QACPiC,IAAI,EAAErB,QAAgB,CAAC;QAAA;QACvBsB,IAAI,EAAErB,QAAS;QACfsB,KAAK,EAAErB,SAAU;QACjBe,KAAK,EAAEpB;MAAU,CAClB,CAAC,EAEDE,IAAI,IAAIA,IAAI,CAACyB,IAAI,CAAC,CAAC,KAAK,EAAE,iBACzBlC,IAAA,CAACL,IAAI;QAACgC,KAAK,EAAE,CAACT,MAAM,CAACiB,QAAQ,EAAE;UAAEF,KAAK,EAAErB;QAAU,CAAC,EAAEJ,SAAS,CAAE;QAAAqB,QAAA,EAC7DpB;MAAI,CACD,CACP;IAAA,CACG;EAAC,CACS,CAAC;AAEvB,CAAC;AAED,MAAMS,MAAM,GAAGtB,UAAU,CAACwC,MAAM,CAAC;EAC/BjB,WAAW,EAAE;IACXkB,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE,CAAC;IACTC,MAAM,EAAE,GAAG,CAAE;EACf,CAAC;EACDZ,oBAAoB,EAAE;IACpB;IACAP,UAAU,EAAE,QAAQ,CAAE;EACxB,CAAC;EACDY,QAAQ,EAAE;IACRQ,QAAQ,EAAE,EAAE;IAAE;IACdC,UAAU,EAAE,MAAM;IAClBC,SAAS,EAAE,EAAE;IAAE;IACfC,SAAS,EAAE;EACb;AACF,CAAC,CAAC;AAEF,eAAe3C,WAAW","ignoreList":[]}
+{"version":3,"names":["React","View","Text","StyleSheet","TouchableOpacity","Ionicons","jsx","_jsx","jsxs","_jsxs","LockOverlay","visible","containerStyle","contentContainerStyle","iconStyle","textStyle","text","icon","overlayOpacity","contentPosition","contentPadding","grayscale","touchableProps","contentPositionStyle","justifyContent","alignItems","paddingTop","paddingLeft","paddingRight","style","styles","wrapper","activeOpacity","children","grayscaleLayer","darkTintLayer","backgroundColor","contentContainer","content","name","size","color","trim","textBase","create","absoluteFillObject","zIndex","opacity","fontSize","fontWeight","marginTop","textAlign"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/LockOverlay/LockOverlay.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/src/app.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../src/app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AA+BnD,QAAA,MAAM,GAAG,yBA8GR,CAAC;AAWF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../src/app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AA+BnD,QAAA,MAAM,GAAG,yBAyGR,CAAC;AAWF,eAAe,GAAG,CAAC"}

package/lib/typescript/src/components/Card/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIpC,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAqG7B,CAAC;AAyBF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAKpC,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAmG7B,CAAC;AAyBF,eAAe,IAAI,CAAC"}

package/lib/typescript/src/components/Card/templates/SelaDealCard.d.ts

@@ -28,6 +28,8 @@ interface SelaDealCardProps {
     darkOverlayEnabled?: boolean;
     darkOverlayColor?: string;
     lockOverlay?: boolean;
+    grayscaleIntensity?: number;
+    lockIcon?: React.ReactNode;
 }
 declare const SelaDealCard: React.FC<SelaDealCardProps>;
 export default SelaDealCard;

package/lib/typescript/src/components/Card/templates/SelaDealCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelaDealCard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Card/templates/SelaDealCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAEL,SAAS,EACT,SAAS,EAET,SAAS,EACT,cAAc,EAGd,cAAc,EACf,MAAM,cAAc,CAAC;AAQtB,UAAU,iBAAiB;IACzB,OAAO,EAAE,YAAY,GAAG,UAAU,CAAC;IACnC,eAAe,EAAE,cAAc,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAuL7C,CAAC;AAsEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SelaDealCard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Card/templates/SelaDealCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAEL,SAAS,EACT,SAAS,EAET,SAAS,EACT,cAAc,EAGd,cAAc,EACf,MAAM,cAAc,CAAC;AAQtB,UAAU,iBAAiB;IACzB,OAAO,EAAE,YAAY,GAAG,UAAU,CAAC;IACnC,eAAe,EAAE,cAAc,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA2L7C,CAAC;AAsEF,eAAe,YAAY,CAAC"}

package/lib/typescript/src/components/LockOverlay/LockOverlay.d.ts

@@ -7,12 +7,15 @@ interface LockOverlayProps extends TouchableOpacityProps {
     iconStyle?: StyleProp<TextStyle>;
     textStyle?: StyleProp<TextStyle>;
     text?: string | null;
-    iconName?: string;
-    iconSize?: number;
-    iconColor?: string;
+    icon?: React.ReactNode;
     overlayOpacity?: number;
     contentPosition?: "center" | "top-center" | "top-left" | "top-right";
     contentPadding?: number;
+    /**
+     * If true, adds a white layer to desaturate the background, creating a grayscale effect.
+     * @default false
+     */
+    grayscale?: boolean;
 }
 declare const LockOverlay: React.FC<LockOverlayProps>;
 export default LockOverlay;

package/lib/typescript/src/components/LockOverlay/LockOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LockOverlay.d.ts","sourceRoot":"","sources":["../../../../../src/components/LockOverlay/LockOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAIL,SAAS,EACT,SAAS,EAET,qBAAqB,EACrB,SAAS,EACV,MAAM,cAAc,CAAC;AAItB,UAAU,gBAAiB,SAAQ,qBAAqB;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7C,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,QAAQ,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;IACrE,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgF3C,CAAC;AAuBF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"LockOverlay.d.ts","sourceRoot":"","sources":["../../../../../src/components/LockOverlay/LockOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAIL,SAAS,EACT,SAAS,EAET,qBAAqB,EACrB,SAAS,EACV,MAAM,cAAc,CAAC;AAItB,UAAU,gBAAiB,SAAQ,qBAAqB;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7C,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,QAAQ,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;IACrE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA8E3C,CAAC;AA8BF,eAAe,WAAW,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "related-ui-components",
-  "version": "2.8.3",
+  "version": "2.8.5",
   "main": "./src/index.ts",
   "scripts": {
     "start": "expo start",
@@ -31,9 +31,9 @@
     "react-native-gesture-handler": "~2.24.0",
     "react-native-picker-select": "^9.3.1",
     "react-native-qrcode-svg": "^6.3.15",
-    "react-native-reanimated": "^3.18.0",
     "react-native-safe-area-context": ">=5.0.0",
-    "react-native-svg": "15.11.2"
+    "react-native-svg": "15.11.2",
+    "react-native-color-matrix-image-filters": "^7.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
@@ -77,6 +77,7 @@
     "lib/"
   ],
   "dependencies": {
-    "@shopify/flash-list": "^1.8.3"
+    "@shopify/flash-list": "^1.8.3",
+    "react-native-reanimated": "^3.17.4"
   }
 }

package/src/app.tsx

@@ -64,7 +64,7 @@ const App = () => {
               lineCap="round"
               textFont={""}
             /> */}
-            <RedemptionOption text="hello" orientation="horizontal" icon={<Ionicons name="accessibility" size={24}></Ionicons>}></RedemptionOption>
+                {/* <RedemptionOption text="hello" orientation="horizontal" icon={<Ionicons name="accessibility" size={24}></Ionicons>}></RedemptionOption> */}
                 {/* <DateRangePicker
               onDatesChange={(t) => {
                 setDepartureDate(t.departure);
@@ -114,7 +114,7 @@ const App = () => {
                   inputContainerStyle={{ height: 55 }}
                 ></PhoneInput> */}
 
-                {/* <SelaDealCard
+                <SelaDealCard
                   variant="horizontal"
                   width={300}
                   height={300}
@@ -122,16 +122,11 @@ const App = () => {
                   description="HELLO"
                   providerName="Riva Club"
                   price="100"
+                  lockOverlay
+                  // grayscaleIntensity={80}
                   backgroundImage={require("./assets/images/namshi-banner.png")}
                 ></SelaDealCard>
-                <RedemptionOption
-                  textContainerStyle={{ flex: 1 }}
-                  // containerStyle={{ flex: 1, alignItems: "center" }}
-                  text="hola"
-                  textStyle={{ fontSize: 20 }}
-                  icon={<Ionicons name="accessibility"></Ionicons>}
-                  orientation="horizontal"
-                ></RedemptionOption> */}
+     
               </SafeAreaView>
             </BottomSheetStackProvider>
           </RelatedProvider>

package/src/components/Card/Card.tsx

@@ -9,6 +9,7 @@ import {
 import { CardProps } from "./types";
 import { useTheme } from "../../theme/ThemeContext";
 import { LinearGradient } from "expo-linear-gradient";
+import { Grayscale } from "react-native-color-matrix-image-filters";
 
 const Card: React.FC<CardProps> = ({
   children,
@@ -48,27 +49,29 @@ const Card: React.FC<CardProps> = ({
   const renderCardContent = () => {
     if (backgroundImage) {
       return (
-        <ImageBackground
-          source={backgroundImage.source}
-          style={[styles.backgroundImage, backgroundImage.style]}
-          imageStyle={[{ borderRadius }, backgroundImage.imageStyle]}
-          resizeMode={backgroundImage.resizeMode || "cover"}
-          blurRadius={backgroundImage.blurRadius}
-        >
-          <View
-            style={[
-              styles.imageContentContainer,
-              {
-                opacity:
-                  backgroundImage.opacity !== undefined
-                    ? backgroundImage.opacity
-                    : 1,
-              },
-            ]}
+        <Grayscale>
+          <ImageBackground
+            source={backgroundImage.source}
+            style={[styles.backgroundImage, backgroundImage.style]}
+            imageStyle={[{ borderRadius }, backgroundImage.imageStyle]}
+            resizeMode={backgroundImage.resizeMode || "cover"}
+            blurRadius={backgroundImage.blurRadius}
           >
-            {children}
-          </View>
-        </ImageBackground>
+            <View
+              style={[
+                styles.imageContentContainer,
+                {
+                  opacity:
+                    backgroundImage.opacity !== undefined
+                      ? backgroundImage.opacity
+                      : 1,
+                },
+              ]}
+            >
+              {children}
+            </View>
+          </ImageBackground>
+          </Grayscale>
       );
     } else if (gradient) {
       return (
@@ -76,11 +79,7 @@ const Card: React.FC<CardProps> = ({
           colors={gradient.colors as any}
           start={gradient.start}
           end={gradient.end}
-          style={[
-            styles.gradient,
-            { borderRadius },
-            gradient.style,
-          ]}
+          style={[styles.gradient, { borderRadius }, gradient.style]}
         >
           {children}
         </LinearGradient>

package/src/components/Card/templates/SelaDealCard.tsx

@@ -45,6 +45,8 @@ interface SelaDealCardProps {
   darkOverlayEnabled?: boolean; // New prop
   darkOverlayColor?: string; // New prop for custom overlay color
   lockOverlay?: boolean;
+  grayscaleIntensity?: number;
+  lockIcon?: React.ReactNode;
 }
 
 const SelaDealCard: React.FC<SelaDealCardProps> = ({
@@ -69,7 +71,9 @@ const SelaDealCard: React.FC<SelaDealCardProps> = ({
   darkOverlayEnabled = true,
   darkOverlayColor = "rgba(0, 0, 0, 0.3)",
   lockOverlay = false,
+  lockIcon,
   priceContainerBlur,
+  grayscaleIntensity = 0
 }) => {
   const { theme, isRTL: themeIsRTL } = useTheme();
   const isRTL = propIsRTL !== undefined ? propIsRTL : themeIsRTL;
@@ -143,6 +147,7 @@ const SelaDealCard: React.FC<SelaDealCardProps> = ({
       backgroundImage={{
         source: backgroundImage,
         resizeMode: "cover",
+        style:{filter: `grayscale(${grayscaleIntensity}%)`}
       }}
     >
       {darkOverlayEnabled && (
@@ -158,7 +163,8 @@ const SelaDealCard: React.FC<SelaDealCardProps> = ({
       <LockOverlay
         visible={lockOverlay}
         contentPosition={isRTL ? "top-left" : "top-right"}
-        iconSize={24}
+        icon={lockIcon}
+        // iconSize={24}  
         text={""}
         overlayOpacity={0.4}
       />
@@ -244,7 +250,7 @@ const getStyles = (theme: ThemeType, isRTL: boolean) =>
       justifyContent: "space-between",
     },
     topSection: {
-      flexDirection:"row"
+      flexDirection:"row",
     },
     labelContainerBase: {
       paddingVertical: 6,

package/src/components/LockOverlay/LockOverlay.tsx

@@ -7,24 +7,27 @@ import {
   TextStyle,
   TouchableOpacity,
   TouchableOpacityProps,
-  StyleProp, // Import StyleProp for better type safety
+  StyleProp,
 } from "react-native";
 
-import { Ionicons } from "@expo/vector-icons"; // Assuming you have this installed
+import { Ionicons } from "@expo/vector-icons";
 
 interface LockOverlayProps extends TouchableOpacityProps {
   visible?: boolean;
-  containerStyle?: StyleProp<ViewStyle>; // Style for the main TouchableOpacity overlay
-  contentContainerStyle?: StyleProp<ViewStyle>; // Style for the inner View wrapping icon and text
-  iconStyle?: StyleProp<TextStyle>; // Ionicons style prop is TextStyle
+  containerStyle?: StyleProp<ViewStyle>;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  iconStyle?: StyleProp<TextStyle>;
   textStyle?: StyleProp<TextStyle>;
-  text?: string | null; // Text is now optional, null explicitly hides it
-  iconName?: string; // Allow customizing the icon
-  iconSize?: number;
-  iconColor?: string;
+  text?: string | null;
+  icon?: React.ReactNode;
   overlayOpacity?: number;
   contentPosition?: "center" | "top-center" | "top-left" | "top-right";
-  contentPadding?: number; // Padding from edges for top-left/top-right/top-center
+  contentPadding?: number;
+  /**
+   * If true, adds a white layer to desaturate the background, creating a grayscale effect.
+   * @default false
+   */
+  grayscale?: boolean;
 }
 
 const LockOverlay: React.FC<LockOverlayProps> = ({
@@ -33,100 +36,105 @@ const LockOverlay: React.FC<LockOverlayProps> = ({
   contentContainerStyle,
   iconStyle,
   textStyle,
-  text = "Unlock", // Default text, but can be null or empty
-  iconName = "lock-closed",
-  iconSize = 50,
-  iconColor = "white",
+  text = "Unlock",
+  icon,
   overlayOpacity = 0.7,
   contentPosition = "center",
-  contentPadding = 20, // Default padding for edge positions
+  contentPadding = 20,
+  grayscale = false,
   ...touchableProps
 }) => {
   if (!visible) return null;
 
-  const overlayStyles: StyleProp<ViewStyle> = [
-    styles.overlayBase,
-    { backgroundColor: `rgba(0, 0, 0, ${overlayOpacity})` },
-  ];
-
-  // Apply positioning styles to the main overlay container
+  const contentPositionStyle: StyleProp<ViewStyle> = {};
   switch (contentPosition) {
     case "top-center":
-      overlayStyles.push({
-        justifyContent: "flex-start",
-        alignItems: "center",
-        paddingTop: contentPadding,
-      });
+      contentPositionStyle.justifyContent = "flex-start";
+      contentPositionStyle.alignItems = "center";
+      contentPositionStyle.paddingTop = contentPadding;
       break;
     case "top-left":
-      overlayStyles.push({
-        justifyContent: "flex-start",
-        alignItems: "flex-start",
-        paddingTop: contentPadding,
-        paddingLeft: contentPadding,
-      });
+      contentPositionStyle.justifyContent = "flex-start";
+      contentPositionStyle.alignItems = "flex-start";
+      contentPositionStyle.paddingTop = contentPadding;
+      contentPositionStyle.paddingLeft = contentPadding;
       break;
     case "top-right":
-      overlayStyles.push({
-        justifyContent: "flex-start",
-        alignItems: "flex-end",
-        paddingTop: contentPadding,
-        paddingRight: contentPadding,
-      });
+      contentPositionStyle.justifyContent = "flex-start";
+      contentPositionStyle.alignItems = "flex-end";
+      contentPositionStyle.paddingTop = contentPadding;
+      contentPositionStyle.paddingRight = contentPadding;
       break;
     case "center":
     default:
-      overlayStyles.push({
-        justifyContent: "center",
-        alignItems: "center",
-      });
+      contentPositionStyle.justifyContent = "center";
+      contentPositionStyle.alignItems = "center";
       break;
   }
 
-  overlayStyles.push(containerStyle); // Apply user-provided containerStyle last
-
   return (
     <TouchableOpacity
-      style={overlayStyles}
+      style={[styles.wrapper, containerStyle]}
       activeOpacity={0.8}
       {...touchableProps}
     >
-      <View style={[styles.contentContainerBase, contentContainerStyle]}>
-        <Ionicons
-          name={iconName as any} // Cast to any if Ionicons types are too strict for dynamic names
-          size={iconSize}
-          color={iconColor}
-          style={iconStyle}
-        />
-        {/* Conditionally render text if it's a non-empty string */}
-        {text && text.trim() !== "" && (
-          <Text style={[styles.textBase, { color: iconColor }, textStyle]}>
-            {text}
-          </Text>
-        )}
+      {/* This layer desaturates the background image */}
+      {grayscale && <View style={styles.grayscaleLayer} />}
+
+      {/* This is the original dark tint layer */}
+      <View
+        style={[
+          styles.darkTintLayer,
+          { backgroundColor: `rgba(0, 0, 0, ${overlayOpacity})` },
+        ]}
+      />
+
+      {/* This layer holds the actual content (icon and text) */}
+      <View style={[styles.contentContainer, contentPositionStyle]}>
+        <View style={[styles.content, contentContainerStyle]}>
+          {icon || (
+            <Ionicons
+              name={"lock-closed"}
+              size={30}
+              color={"white"}
+              style={iconStyle}
+            />
+          )}
+
+          {text && text.trim() !== "" && (
+            <Text style={[styles.textBase, textStyle]}>{text}</Text>
+          )}
+        </View>
       </View>
     </TouchableOpacity>
   );
 };
 
 const styles = StyleSheet.create({
-  overlayBase: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    zIndex: 999, // Ensure it's on top
+  wrapper: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 999,
+  },
+  grayscaleLayer: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "white",
+    opacity: 0.4, // Adjust this value to control the grayscale intensity
+  },
+  darkTintLayer: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  contentContainer: {
+    ...StyleSheet.absoluteFillObject,
   },
-  contentContainerBase: {
-    // This container ensures icon and text (if present) are aligned relative to each other
-    alignItems: "center", // Center text under the icon by default
+  content: {
+    alignItems: "center",
   },
   textBase: {
-    fontSize: 18, // Adjusted default size slightly
+    fontSize: 18,
     fontWeight: "bold",
-    marginTop: 10, // Adjusted default margin
+    marginTop: 10,
     textAlign: "center",
+    color: "white", // Default text color to white for better visibility
   },
 });