related-ui-components 2.0.2 → 2.0.4

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

@@ -1,59 +1,110 @@
 "use strict";
 
-import React from 'react';
-import { Text, StyleSheet, TouchableOpacity } from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const LockOverlay = ({
   visible = true,
   containerStyle,
+  contentContainerStyle,
   iconStyle,
   textStyle,
-  text = 'Unlock',
+  text = "Unlock",
+  // Default text, but can be null or empty
+  iconName = "lock-closed",
   iconSize = 50,
-  iconColor = 'white',
+  iconColor = "white",
   overlayOpacity = 0.7,
-  contentVerticalAlign = "center",
+  contentPosition = "center",
+  contentPadding = 20,
+  // Default padding for edge positions
   ...touchableProps
 }) => {
   if (!visible) return null;
-  return /*#__PURE__*/_jsxs(TouchableOpacity, {
-    style: [styles.overlay, {
-      backgroundColor: `rgba(0, 0, 0, ${overlayOpacity})`
-    }, contentVerticalAlign == "top" && {
-      justifyContent: "flex-start",
-      paddingTop: 50
-    }, containerStyle],
+  const overlayStyles = [styles.overlayBase, {
+    backgroundColor: `rgba(0, 0, 0, ${overlayOpacity})`
+  }];
+
+  // Apply positioning styles to the main overlay container
+  switch (contentPosition) {
+    case "top-center":
+      overlayStyles.push({
+        justifyContent: "flex-start",
+        alignItems: "center",
+        paddingTop: contentPadding
+      });
+      break;
+    case "top-left":
+      overlayStyles.push({
+        justifyContent: "flex-start",
+        alignItems: "flex-start",
+        paddingTop: contentPadding,
+        paddingLeft: contentPadding
+      });
+      break;
+    case "top-right":
+      overlayStyles.push({
+        justifyContent: "flex-start",
+        alignItems: "flex-end",
+        paddingTop: contentPadding,
+        paddingRight: contentPadding
+      });
+      break;
+    case "center":
+    default:
+      overlayStyles.push({
+        justifyContent: "center",
+        alignItems: "center"
+      });
+      break;
+  }
+  overlayStyles.push(containerStyle); // Apply user-provided containerStyle last
+
+  return /*#__PURE__*/_jsx(TouchableOpacity, {
+    style: overlayStyles,
     activeOpacity: 0.8,
     ...touchableProps,
-    children: [/*#__PURE__*/_jsx(Ionicons, {
-      name: "lock-closed",
-      size: iconSize,
-      color: iconColor
-      // style={iconStyle}
-    }), /*#__PURE__*/_jsx(Text, {
-      style: [styles.text, {
-        color: iconColor
-      }, textStyle],
-      children: text
-    })]
+    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
+      })]
+    })
   });
 };
 const styles = StyleSheet.create({
-  overlay: {
-    position: 'absolute',
+  overlayBase: {
+    position: "absolute",
     top: 0,
     left: 0,
     right: 0,
     bottom: 0,
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 999
+    zIndex: 999 // Ensure it's on top
+  },
+  contentContainerBase: {
+    // This container ensures icon and text (if present) are aligned relative to each other
+    alignItems: "center" // Center text under the icon by default
   },
-  text: {
-    fontSize: 20,
-    fontWeight: 'bold',
-    marginTop: 12
+  textBase: {
+    fontSize: 18,
+    // Adjusted default size slightly
+    fontWeight: "bold",
+    marginTop: 10,
+    // Adjusted default margin
+    textAlign: "center"
   }
 });
 export default LockOverlay;

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

@@ -1 +1 @@
-{"version":3,"names":["React","Text","StyleSheet","TouchableOpacity","Ionicons","jsx","_jsx","jsxs","_jsxs","LockOverlay","visible","containerStyle","iconStyle","textStyle","text","iconSize","iconColor","overlayOpacity","contentVerticalAlign","touchableProps","style","styles","overlay","backgroundColor","justifyContent","paddingTop","activeOpacity","children","name","size","color","create","position","top","left","right","bottom","alignItems","zIndex","fontSize","fontWeight","marginTop"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/LockOverlay/LockOverlay.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAEEC,IAAI,EACJC,UAAU,EAGVC,gBAAgB,QAEX,cAAc;AAErB,SAASC,QAAQ,QAAQ,oBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAc9C,MAAMC,WAAuC,GAAGA,CAAC;EAC/CC,OAAO,GAAG,IAAI;EACdC,cAAc;EACdC,SAAS;EACTC,SAAS;EACTC,IAAI,GAAG,QAAQ;EACfC,QAAQ,GAAG,EAAE;EACbC,SAAS,GAAG,OAAO;EACnBC,cAAc,GAAG,GAAG;EACpBC,oBAAoB,GAAG,QAAQ;EAC/B,GAAGC;AACL,CAAC,KAAK;EACJ,IAAI,CAACT,OAAO,EAAE,OAAO,IAAI;EAEzB,oBACEF,KAAA,CAACL,gBAAgB;IACfiB,KAAK,EAAE,CACLC,MAAM,CAACC,OAAO,EACd;MAAEC,eAAe,EAAE,iBAAiBN,cAAc;IAAI,CAAC,EACvDC,oBAAoB,IAAI,KAAK,IAAI;MAACM,cAAc,EAAC,YAAY;MAAEC,UAAU,EAAE;IAAE,CAAC,EAC9Ed,cAAc,CACd;IACFe,aAAa,EAAE,GAAI;IAAA,GACfP,cAAc;IAAAQ,QAAA,gBAElBrB,IAAA,CAACF,QAAQ;MACPwB,IAAI,EAAC,aAAa;MAClBC,IAAI,EAAEd,QAAS;MACfe,KAAK,EAAEd;MACP;IAAA,CACD,CAAC,eACFV,IAAA,CAACL,IAAI;MAACmB,KAAK,EAAE,CAACC,MAAM,CAACP,IAAI,EAAE;QAAEgB,KAAK,EAAEd;MAAU,CAAC,EAAEH,SAAS,CAAE;MAAAc,QAAA,EACzDb;IAAI,CACD,CAAC;EAAA,CACS,CAAC;AAEvB,CAAC;AAED,MAAMO,MAAM,GAAGnB,UAAU,CAAC6B,MAAM,CAAC;EAC/BT,OAAO,EAAE;IACPU,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE,CAAC;IACTZ,cAAc,EAAE,QAAQ;IACxBa,UAAU,EAAE,QAAQ;IACpBC,MAAM,EAAE;EACV,CAAC;EACDxB,IAAI,EAAE;IACJyB,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,MAAM;IAClBC,SAAS,EAAE;EACb;AACF,CAAC,CAAC;AAEF,eAAehC,WAAW","ignoreList":[]}
+{"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":"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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,KAAmB,MAAM,OAAO,CAAC;AAgBxC,QAAA,MAAM,QAAQ,yBA8Gb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../src/app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,QAAA,MAAM,QAAQ,yBAwBb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -24,6 +24,9 @@ interface SelaDealCardProps {
     labelTextColor?: string;
     priceBackgroundColor?: string;
     priceTextColor?: string;
+    darkOverlayEnabled?: boolean;
+    darkOverlayColor?: string;
+    lockOverlay?: boolean;
 }
 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":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,mBAAmB,EACnB,SAAS,EACT,SAAS,EAGT,SAAS,EACT,cAAc,EAEf,MAAM,cAAc,CAAC;AAItB,UAAU,iBAAiB;IACzB,OAAO,EAAE,YAAY,GAAG,UAAU,CAAC;IACnC,eAAe,EAAE,mBAAmB,CAAC;IACrC,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,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA0K7C,CAAC;AA0EF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SelaDealCard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Card/templates/SelaDealCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACH,mBAAmB,EACnB,SAAS,EACT,SAAS,EAGT,SAAS,EACT,cAAc,EAEjB,MAAM,cAAc,CAAC;AAMtB,UAAU,iBAAiB;IACvB,OAAO,EAAE,YAAY,GAAG,UAAU,CAAC;IACnC,eAAe,EAAE,mBAAmB,CAAC;IACrC,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,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,CAAA;CACxB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsJ7C,CAAC;AAmEF,eAAe,YAAY,CAAC"}

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

@@ -1,15 +1,18 @@
-import React from 'react';
-import { ViewStyle, TextStyle, TouchableOpacityProps } from 'react-native';
+import React from "react";
+import { ViewStyle, TextStyle, TouchableOpacityProps, StyleProp } from "react-native";
 interface LockOverlayProps extends TouchableOpacityProps {
     visible?: boolean;
-    containerStyle?: ViewStyle;
-    iconStyle?: ViewStyle;
-    textStyle?: TextStyle;
-    text?: string;
+    containerStyle?: StyleProp<ViewStyle>;
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    iconStyle?: StyleProp<TextStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    text?: string | null;
+    iconName?: string;
     iconSize?: number;
     iconColor?: string;
     overlayOpacity?: number;
-    contentVerticalAlign?: 'center' | 'top';
+    contentPosition?: "center" | "top-center" | "top-left" | "top-right";
+    contentPadding?: number;
 }
 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,EACtB,MAAM,cAAc,CAAC;AAItB,UAAU,gBAAiB,SAAQ,qBAAqB;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAG,QAAQ,GAAG,KAAK,CAAA;CACzC;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAoC3C,CAAC;AAoBF,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,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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "related-ui-components",
-  "version": "2.0.2",
-  "main": "./lib\\module\\index.js",
+  "version": "2.0.4",
+  "main": "./src/index.ts",
   "scripts": {
     "start": "expo start",
     "android": "expo start --android",

package/src/app.tsx

@@ -1,127 +1,30 @@
 import React, { useState } from "react";
-import { View, Button, Text } from "react-native";
-import {
-  FilterResult,
-  Filters,
-  Popup,
-  ScratchCard,
-  ScratchCardContent,
-  UnlockRewards,
-} from "./components";
-import BRANDS from "./constants/BRANDS";
-import { Ionicons } from "@expo/vector-icons";
-import { RelatedProvider, useTheme } from "./theme";
-import RedeemedVoucherSheet from "./components/RedeemedVoucher/RedeemedVoucherSheet";
-import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { SafeAreaView, Text } from "react-native";
+import { SelaDealCard } from "./components";
+import { RelatedProvider } from "./theme";
 
 const MyScreen = () => {
-  const [isFilterVisible, setIsFilterVisible] = useState(false);
-
-  const { theme } = useTheme();
-
-  const handleApplyFilters = (result: FilterResult) => {
-    console.log("Filters applied:", result);
-    // Process filter results...
-  };
-
-  const rewardsData = [
-    {
-      icon: (
-        <Ionicons name="briefcase-outline" size={30} color={theme.primary} />
-      ),
-      activeIcon: (
-        <Ionicons name="briefcase-outline" size={30} color={theme.onPrimary} />
-      ),
-      title: "Aqua Guardian",
-      description:
-        "Maintain water usage below the community average for a month.",
-      isActive: false,
-      status: "0/1",
-      statusBackgroundColor: "#FFCDD2",
-      statusTextColor: "#D32F2F",
-    },
-    {
-      icon: <Ionicons name="heart-outline" size={30} color={theme.primary} />,
-      activeIcon: (
-        <Ionicons name="heart-outline" size={30} color={theme.onPrimary} />
-      ),
-      title: "Wellness Warrior",
-      description: "Complete 30 days of healthy hydration tracking.",
-      isActive: true,
-      status: "15/30",
-      statusBackgroundColor: "#C8E6C9",
-      statusTextColor: "#388E3C",
-    },
-    {
-      icon: <Ionicons name="airplane-outline" size={24} color={theme.helper} />,
-      activeIcon: (
-        <Ionicons name="airplane-outline" size={24} color={theme.primary} />
-      ),
-      title: "Eco Traveler",
-      description: "Log 5 trips where you chose sustainable travel options.",
-      isActive: false,
-      status: "2/5",
-      statusBackgroundColor: theme.disabled,
-      statusTextColor: theme.text,
-    },
-    {
-      icon: <Ionicons name="school-outline" size={24} color={theme.helper} />,
-      activeIcon: (
-        <Ionicons name="school-outline" size={24} color={theme.primary} />
-      ),
-      title: "Knowledge Seeker",
-      description: "Complete all water conservation learning modules.",
-      isActive: false,
-      status: "3/5",
-      statusBackgroundColor: theme.disabled,
-      statusTextColor: theme.text,
-    },
-    {
-      icon: <Ionicons name="settings-outline" size={24} color={theme.helper} />,
-      activeIcon: (
-        <Ionicons name="settings-outline" size={24} color={theme.primary} />
-      ),
-      title: "Smart Saver",
-      description: "Set up and use all water-saving features in the app.",
-      isActive: true,
-      status: "4/4",
-      statusBackgroundColor: theme.primary,
-      statusTextColor: theme.background,
-    },
-  ];
-
   return (
     <>
-      <GestureHandlerRootView>
-        <RelatedProvider>
-        <Popup visible={true} onClose={()=>{}}>
-        <ScratchCard
-          backgroundColor="#8A2BE2"
-          text="Scratch to reveal your prize!"
-          textFontColor="#FFFFFF"
-          textFontSize={18}
-          // textFont={require("@/assets/fonts/SpaceMono-Regular.ttf")}
-          width={300}
-          height={150}
-          gradient={{
-            colors: ["#ff0000", "#00ff00", "#0000ff"],
-            start: { x: 0, y: 0 },
-            end: { x: 300, y: 300 },
-          }}
-          onScratched={() => alert("Congratulations! You won a prize!")}
-        >
-          <ScratchCardContent style={{ backgroundColor: "#FFD700" }}>
-            <Text style={{ fontSize: 24, fontWeight: "bold", color: "#000" }}>
-              50% OFF COUPON
-            </Text>
-            <Text style={{ marginTop: 8, color: "#333" }}>
-              Use code: SCRATCH50
-            </Text>
-          </ScratchCardContent>
-        </ScratchCard>
-        </Popup>
-        </RelatedProvider>
-      </GestureHandlerRootView>
+      <RelatedProvider>
+        <SafeAreaView style={{ padding: 50 }}>
+          <SelaDealCard
+            variant="horizontal"
+            isRTL
+            backgroundImage={require("./assets/images/namshi-banner.png")} // Your image for the horizontal card
+            label="Offer"
+            lockOverlay
+            providerName="Altanfeethi"
+            providerNameStyle={{ color: 'yellow' }} // Specific style for provider name
+            description="1 Year Membership"
+            descriptionStyle={{ color: 'white' }}
+            price="20,000 pts"
+            onPress={() => console.log("Horizontal Sela Card Pressed")}
+            width={320} // Example width
+            height={180} // Example height
+          />
+        </SafeAreaView>
+      </RelatedProvider>
     </>
   );
 };

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

@@ -225,7 +225,7 @@ const DealCardWithBackgroundImage: React.FC<DealCardProps> = ({
       <LockOverlay
         visible={overlayVisible}
         containerStyle={overlayStyle}
-        contentVerticalAlign={overlayCover == "background" ? "top" : "center"}
+        contentPosition={overlayCover == "background" ? "center" : "top-center"}
         onPress={onOverlayPress}
       />
       <CardHeader