related-ui-components 1.6.1 → 1.6.3

package/lib/typescript/module/components/ScratchCard/ScratchCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScratchCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/ScratchCard/ScratchCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAKN,MAAM,OAAO,CAAC;AAiBf,OAAO,EACL,SAAS,EAET,SAAS,EAET,kBAAkB,EAEnB,MAAM,cAAc,CAAC;AAQtB,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAEF,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA8K3C,CAAC;AAyBF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ScratchCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/ScratchCard/ScratchCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAKN,MAAM,OAAO,CAAC;AAiBf,OAAO,EACL,SAAS,EAET,SAAS,EAET,kBAAkB,EAEnB,MAAM,cAAc,CAAC;AAYtB,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAEF,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAwL3C,CAAC;AAyBF,eAAe,WAAW,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "related-ui-components",
   "main": "./src/index.ts",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "scripts": {
     "start": "expo start",
     "reset-project": "node ./scripts/reset-project.js",

package/src/app.tsx

@@ -7,6 +7,7 @@ import {
   ScrollView,
   FlatList,
   Alert,
+  Modal, // Import Modal
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import { RelatedProvider, useTheme } from "./theme";
@@ -15,212 +16,91 @@ import {
   Filters,
   Popup,
   RedemptionOption,
-  ScratchCard,
+  ScratchCard, // Your component
   ScratchCardContent,
   UnlockRewards,
 } from "./components";
 import { SafeAreaView } from "react-native-safe-area-context";
-import SelectAmount from "./components/SelectAmount/SelectAmount";
-import Slider from "@react-native-community/slider";
-import SummaryBar from "./components/TravelBooking/SummaryBar";
-import NumericStepper from "./components/NumericStepper/NumericStepper";
-import FlightSummaryBar from "./components/TravelBooking/FlightSummary";
-import HotelSummaryBar from "./components/TravelBooking/HotelSummary";
-import TabSelector from "./components/TravelBooking/TabSelector";
-import FlightForm from "./components/TravelBooking/FlightForm";
-import DateRangePicker from "./components/DateRangePicker/DateRangePicker";
-import HotelForm from "./components/TravelBooking/HotelForm";
-import CarRentalForm from "./components/TravelBooking/CarRentalForm";
-import TravelBooking from "./components/TravelBooking/TravelBooking";
-import { GestureHandlerRootView } from "react-native-gesture-handler";
-// import BRANDS from "./constants/BRANDS";
+// ... other imports
+import { GestureHandlerRootView } from "react-native-gesture-handler"; // Ensure import
 
 export default function App() {
   const { theme } = useTheme();
-  const [filtersVisible, setFiltersVisible] = useState(false);
-  const [mode, setMode] = useState<"flight" | "hotel">("flight");
+  // ... other state and constants
 
-  // Define some sort options for the filter
-  const sortOptions = [
-    { id: 1, name: "Price: Low to High", value: "price_asc" },
-    { id: 2, name: "Price: High to Low", value: "price_desc" },
-    { id: 3, name: "Newest", value: "newest" },
-  ];
-
-  const iconSize = 24;
-  const iconColor = theme.onSurface;
-
-  const redemptionOption = [
-    {
-      icon: (
-        <Ionicons name="bag-handle-outline" size={iconSize} color={iconColor} />
-      ),
-      key: "redemptionOptions.onlineShopping", // Use translation key
-      orientation: "horizontal",
-      width: 150,
-    },
-    {
-      icon: (
-        <Ionicons name="ticket-outline" size={iconSize} color={iconColor} />
-      ),
-      key: "redemptionOptions.eVouchers", // Use translation key
-      width: 105,
-    },
-    {
-      icon: <Ionicons name="cash-outline" size={iconSize} color={iconColor} />,
-      key: "redemptionOptions.cashback", // Use translation key
-      width: 105,
-    },
-    {
-      icon: <Ionicons name="heart-outline" size={iconSize} color={iconColor} />,
-      key: "redemptionOptions.donate", // Use translation key
-      width: 87,
-    },
-    {
-      icon: (
-        <Ionicons name="airplane-outline" size={iconSize} color={iconColor} />
-      ),
-      key: "redemptionOptions.travel", // Use translation key
-      width: 87,
-    },
-    {
-      icon: (
-        <Ionicons
-          name="swap-horizontal-outline"
-          size={iconSize}
-          color={iconColor}
-        />
-      ),
-      key: "redemptionOptions.pointsExchange", // Use translation key
-      width: 87,
-    },
-    {
-      icon: <Ionicons name="send-outline" size={iconSize} color={iconColor} />,
-      key: "redemptionOptions.transferPoints", // Use translation key
-      width: 87,
-    },
-  ];
-
-  const redemptionOptions = redemptionOption.map((item) => ({
-    ...item,
-    text: "Online shopping",
-  }));
-  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
-
-  const rewardsData = [
-    {
-      icon: <Ionicons name="water-outline" size={24} color={theme.helper} />,
-      activeIcon: <Ionicons name="water" size={24} color={theme.primary} />,
-      title: "Aqua Guardian",
-      description:
-        "Maintain water usage below the community average for a month.",
-      isActive: false,
-      status: "0/1",
-      statusBackgroundColor: theme.disabled,
-      statusTextColor: theme.text,
-    },
-    {
-      icon: <Ionicons name="build-outline" size={24} color={theme.helper} />,
-      activeIcon: <Ionicons name="build" size={24} color={theme.secondary} />,
-      title: "Leak Detective",
-      description: "Successfully report and fix a water leak on your property.",
-      isActive: true,
-      status: "1/1",
-      statusBackgroundColor: theme.primary,
-      statusTextColor: theme.secondary,
-    },
-    {
-      icon: <Ionicons name="leaf-outline" size={24} color={theme.helper} />,
-      activeIcon: <Ionicons name="leaf" size={24} color={theme.primary} />,
-      title: "Eco-Warrior",
-      description:
-        "Implement a rainwater harvesting system or greywater recycling.",
-      isActive: false,
-      status: "0/1",
-      statusBackgroundColor: theme.disabled,
-      statusTextColor: theme.text,
-    },
-    {
-      icon: <Ionicons name="leaf-outline" size={24} color={theme.helper} />,
-      activeIcon: <Ionicons name="leaf" size={24} color={theme.primary} />,
-      title: "Eco-Warrior",
-      description:
-        "Implement a rainwater harvesting system or greywater recycling.",
-      isActive: false,
-      status: "0/1",
-      statusBackgroundColor: theme.disabled,
-      statusTextColor: theme.text,
-    },
-    {
-      icon: <Ionicons name="leaf-outline" size={24} color={theme.helper} />,
-      activeIcon: <Ionicons name="leaf" size={24} color={theme.primary} />,
-      title: "Eco-Warrior",
-      description:
-        "Implement a rainwater harvesting system or greywater recycling.",
-      isActive: false,
-      status: "0/1",
-      statusBackgroundColor: theme.disabled,
-      statusTextColor: theme.text,
-    },
-    {
-      icon: <Ionicons name="leaf-outline" size={24} color={theme.helper} />,
-      activeIcon: <Ionicons name="leaf" size={24} color={theme.primary} />,
-      title: "Eco-Warrior",
-      description:
-        "Implement a rainwater harvesting system or greywater recycling.",
-      isActive: false,
-      status: "0/1",
-      statusBackgroundColor: theme.disabled,
-      statusTextColor: theme.text,
-    },
-    {
-      icon: <Ionicons name="leaf-outline" size={24} color={theme.helper} />,
-      activeIcon: <Ionicons name="leaf" size={24} color={theme.primary} />,
-      title: "Eco-Warrior",
-      description:
-        "Implement a rainwater harvesting system or greywater recycling.",
-      isActive: false,
-      status: "0/1",
-      statusBackgroundColor: theme.disabled,
-      statusTextColor: theme.text,
-    },
-  ];
+  // State to control modal visibility
+  const [isScratchModalVisible, setScratchModalVisible] = useState(false); // Example state
 
   return (
-    <GestureHandlerRootView>
+    // Root view for the main app
+    <GestureHandlerRootView style={{ flex: 1 }}>
       <RelatedProvider>
         <SafeAreaView
-          style={{ padding: 10, flex: 1, backgroundColor: theme.background }}
+          style={{ flex: 1, padding: 10, backgroundColor: theme.background }}
         >
-          <ScratchCard 
-  backgroundColor="#8A2BE2"
-  text="Scratch to reveal your prize!"
-  textFontColor="#FFFFFF"
-  textFontSize={18}
-  width={300}
-  height={150}
-  // 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>
-    {/* <UnlockRewards
-      title="Your Rewards"
-      description="Complete tasks to unlock special benefits"
-      rewards={rewardsData}
-      // onClose={handleClose}
-      showCloseIcon={true}
-      closeIconVariant="nested"
-      topBackgroundHeight={200}
-      customCloseIcon={<Ionicons name="close-circle" size={28} color={theme.primary} />}
-    /> */}
-    {/* <Popup title="TEST" content="TEST" visible onClose={()=>{}} backgroundImage={require("@/assets/images/namshi-banner.png")} containerStyle={{height: 300}}></Popup> */}
+          {/* Example Button to open the modal */}
+          <TouchableOpacity
+            onPress={() => setScratchModalVisible(true)}
+            style={styles.testButton}
+          >
+            <Text style={styles.buttonText}>Show Scratch Card Modal</Text>
+          </TouchableOpacity>
+
+          {/* --- The Modal --- */}
+          <Modal
+            visible={isScratchModalVisible}
+            onRequestClose={() => setScratchModalVisible(false)} // Allow closing
+            transparent={true} // Example: make it transparent
+            animationType="slide" // Example animation
+          >
+            {/* Root view specifically for the modal's content */}
+            <GestureHandlerRootView style={styles.modalRootView}>
+              {/* Optional: Add a background overlay */}
+              <View style={styles.modalOverlay}>
+                {/* Center the card or position as needed */}
+                <View style={styles.modalContentContainer}>
+                  <ScratchCard
+                    backgroundColor="#8A2BE2"
+                    text="Scratch to reveal your prize!"
+                    textFontColor="#FFFFFF"
+                    textFontSize={18}
+                    width={300}
+                    height={150}
+                    onScratched={() => {
+                      Alert.alert("Congratulations!", "You won a prize!");
+                      // Optionally close modal after scratching
+                      // setTimeout(() => setScratchModalVisible(false), 500);
+                    }}
+                  >
+                    <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>
+
+                  {/* Button to close the modal */}
+                  <TouchableOpacity
+                    onPress={() => setScratchModalVisible(false)}
+                    style={styles.closeButton}
+                  >
+                    <Text style={styles.buttonText}>Close</Text>
+                  </TouchableOpacity>
+                </View>
+              </View>
+            </GestureHandlerRootView>
+          </Modal>
+
+          {/* Other app content can go here */}
         </SafeAreaView>
       </RelatedProvider>
     </GestureHandlerRootView>
@@ -228,17 +108,14 @@ export default function App() {
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "black",
-    padding: 10,
-  },
+  // ... your existing styles
   testButton: {
     backgroundColor: "#4a90e2",
     paddingVertical: 12,
     paddingHorizontal: 30,
     borderRadius: 8,
     marginBottom: 20,
+    alignSelf: "center",
   },
   buttonText: {
     color: "#FFFFFF",
@@ -246,4 +123,28 @@ const styles = StyleSheet.create({
     fontWeight: "bold",
     textAlign: "center",
   },
+  // Styles for the Modal
+  modalRootView: {
+    flex: 1, // Important for the root view to take up space
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.5)", // Semi-transparent background
+    justifyContent: "center", // Center content vertically
+    alignItems: "center", // Center content horizontally
+  },
+  modalContentContainer: {
+    // Optional: Add padding or background to the content area if needed
+    // backgroundColor: 'white',
+    // padding: 20,
+    // borderRadius: 10,
+    alignItems: "center", // Center items like the close button
+  },
+  closeButton: {
+    marginTop: 20,
+    backgroundColor: "#d9534f",
+    paddingVertical: 10,
+    paddingHorizontal: 25,
+    borderRadius: 8,
+  },
 });

package/src/components/ScratchCard/ScratchCard.tsx

@@ -30,7 +30,11 @@ import {
 } from "react-native";
 // Import runOnJS and useSharedValue
 import { runOnJS, useSharedValue } from "react-native-reanimated";
-import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import {
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+} from "react-native-gesture-handler";
 
 // Ignore specific warning if it appears, related to path mutation - use cautiously
 // LogBox.ignoreLogs(['Skia: SkPath.Make()']);
@@ -48,7 +52,7 @@ type ScratchCardProps = {
   textFont?: ImageRequireSource;
   textFontSize?: number;
   textFontColor?: string;
-  onScratched?: () => void; 
+  onScratched?: () => void;
 };
 
 const ScratchCard: React.FC<ScratchCardProps> = ({
@@ -56,7 +60,7 @@ const ScratchCard: React.FC<ScratchCardProps> = ({
   children,
   image,
   brushStrokeWidth = 50,
-  revealThreshold = 0.8, 
+  revealThreshold = 0.8,
   width = 300,
   height = 300,
   backgroundColor = "#CCCCCC",
@@ -78,29 +82,32 @@ const ScratchCard: React.FC<ScratchCardProps> = ({
   const path = useSharedValue<SkPath>(Skia.Path.Make());
 
   useEffect(() => {
-    path.value = Skia.Path.Make(); 
-    isThresholdReached.value = false
-    setScratched(false); 
+    path.value = Skia.Path.Make();
+    isThresholdReached.value = false;
+    setScratched(false);
   }, [areaWidth, areaHeight]);
 
-  const handleLayout = useCallback((event: any) => {
-    const { width: newWidth, height: newHeight } = event.nativeEvent.layout;
-    if (newWidth > 0 && newHeight > 0) {
-      if (newWidth !== areaWidth || newHeight !== areaHeight) {
-        setSize([newWidth, newHeight]);
-      }
-      if (!isLayoutReady) {
-        setLayoutReady(true);
+  const handleLayout = useCallback(
+    (event: any) => {
+      const { width: newWidth, height: newHeight } = event.nativeEvent.layout;
+      if (newWidth > 0 && newHeight > 0) {
+        if (newWidth !== areaWidth || newHeight !== areaHeight) {
+          setSize([newWidth, newHeight]);
+        }
+        if (!isLayoutReady) {
+          setLayoutReady(true);
+        }
+      } else {
+        setLayoutReady(false);
       }
-    } else {
-      setLayoutReady(false);
-    }
-  }, [areaWidth, areaHeight, isLayoutReady]);
+    },
+    [areaWidth, areaHeight, isLayoutReady]
+  );
 
   const revealCardOnJS = useCallback(() => {
     setScratched(true);
-    onScratched?.(); 
-  }, [onScratched]); 
+    onScratched?.();
+  }, [onScratched]);
 
   const pan = Gesture.Pan()
     .averageTouches(true)
@@ -144,14 +151,19 @@ const ScratchCard: React.FC<ScratchCardProps> = ({
       } catch (error) {
         console.error("ScratchCard: Error in onChange (UI Thread):", error);
       }
-    })
+    });
 
   const textMetrics = React.useMemo(() => {
     if (loadedFont && text && areaWidth > 0 && areaHeight > 0) {
       const metrics = loadedFont.measureText(text);
       const textX = areaWidth / 2 - metrics.width / 2;
       const textY = areaHeight / 2 + metrics.height / 3;
-      return { x: textX, y: textY, width: metrics.width, height: metrics.height };
+      return {
+        x: textX,
+        y: textY,
+        width: metrics.width,
+        height: metrics.height,
+      };
     }
     return null;
   }, [loadedFont, text, areaWidth, areaHeight]);
@@ -159,71 +171,73 @@ const ScratchCard: React.FC<ScratchCardProps> = ({
   const canRenderCanvas = isLayoutReady && areaWidth > 0 && areaHeight > 0;
 
   return (
-    <View
-      onLayout={handleLayout}
-      style={[styles.container, style, { width, height }]}
-    >
-      <View style={styles.content}>{children}</View>
-
-      {!isScratched && canRenderCanvas && (
-        <GestureDetector gesture={pan}>
-          <Canvas style={styles.canvas}>
-            <Mask
-              mode="luminance"
-              mask={
-                <Group>
-                  <Rect
-                    x={0}
-                    y={0}
-                    width={areaWidth}
-                    height={areaHeight}
-                    color="white"
-                  />
-                  <Path
-                    path={path}
-                    color="black"
-                    style="stroke"
-                    strokeJoin="round"
-                    strokeCap="round"
-                    strokeWidth={brushStrokeWidth}
-                  />
-                </Group>
-              }
-            >
-              {loadedImg ? (
-                <Image
-                  image={loadedImg}
-                  fit="cover"
-                  x={0}
-                  y={0}
-                  width={areaWidth}
-                  height={areaHeight}
-                />
-              ) : (
-                <Group>
-                  <Rect
+    <GestureHandlerRootView>
+      <View
+        onLayout={handleLayout}
+        style={[styles.container, style, { width, height }]}
+      >
+        <View style={styles.content}>{children}</View>
+
+        {!isScratched && canRenderCanvas && (
+          <GestureDetector gesture={pan}>
+            <Canvas style={styles.canvas}>
+              <Mask
+                mode="luminance"
+                mask={
+                  <Group>
+                    <Rect
+                      x={0}
+                      y={0}
+                      width={areaWidth}
+                      height={areaHeight}
+                      color="white"
+                    />
+                    <Path
+                      path={path}
+                      color="black"
+                      style="stroke"
+                      strokeJoin="round"
+                      strokeCap="round"
+                      strokeWidth={brushStrokeWidth}
+                    />
+                  </Group>
+                }
+              >
+                {loadedImg ? (
+                  <Image
+                    image={loadedImg}
+                    fit="cover"
                     x={0}
                     y={0}
                     width={areaWidth}
                     height={areaHeight}
-                    color={backgroundColor}
                   />
-                  {loadedFont && textMetrics && text ? (
-                    <Text
-                      x={textMetrics.x}
-                      y={textMetrics.y}
-                      text={text}
-                      color={textFontColor}
-                      font={loadedFont}
+                ) : (
+                  <Group>
+                    <Rect
+                      x={0}
+                      y={0}
+                      width={areaWidth}
+                      height={areaHeight}
+                      color={backgroundColor}
                     />
-                  ) : null}
-                </Group>
-              )}
-            </Mask>
-          </Canvas>
-        </GestureDetector>
-      )}
-    </View>
+                    {loadedFont && textMetrics && text ? (
+                      <Text
+                        x={textMetrics.x}
+                        y={textMetrics.y}
+                        text={text}
+                        color={textFontColor}
+                        font={loadedFont}
+                      />
+                    ) : null}
+                  </Group>
+                )}
+              </Mask>
+            </Canvas>
+          </GestureDetector>
+        )}
+      </View>
+    </GestureHandlerRootView>
   );
 };
 
@@ -238,7 +252,7 @@ const styles = StyleSheet.create({
     left: 0,
     width: "100%",
     height: "100%",
-    zIndex: 1, 
+    zIndex: 1,
   },
   canvas: {
     position: "absolute",