related-ui-components 1.6.2 → 1.6.4

package/src/components/ScratchCard/ScratchCard.tsx

@@ -1,4 +1,9 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, {
+  useRef,
+  useState,
+  useEffect,
+  useCallback, // Import useCallback
+} from "react";
 import {
   Canvas,
   Group,
@@ -7,12 +12,13 @@ import {
   Path,
   Rect,
   Skia,
-  LinearGradient,
-  vec,
   useImage,
   Text,
   useFont,
   notifyChange,
+  SkPath, // Import SkPath type
+  SkFont, // Import SkFont type
+  SkImage, // Import SkImage type
 } from "@shopify/react-native-skia";
 import {
   StyleProp,
@@ -20,17 +26,25 @@ import {
   ViewStyle,
   StyleSheet,
   ImageRequireSource,
-  NativeTouchEvent,
+  LogBox, // Optional: for ignoring specific logs if needed
 } from "react-native";
-import { useDerivedValue, useSharedValue } from "react-native-reanimated";
-import { Gesture, GestureDetector } from "react-native-gesture-handler";
+// Import runOnJS and useSharedValue
+import { runOnJS, useSharedValue } from "react-native-reanimated";
+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()']);
 
 type ScratchCardProps = {
   style?: StyleProp<ViewStyle>;
   image?: ImageRequireSource;
   children?: React.ReactNode;
   brushStrokeWidth?: number;
-  revealThreshold?: number;
+  revealThreshold?: number; // Percentage (0 to 1) - Based on bounding box
   width?: number;
   height?: number;
   backgroundColor?: string;
@@ -44,7 +58,7 @@ type ScratchCardProps = {
 const ScratchCard: React.FC<ScratchCardProps> = ({
   style,
   children,
-  image = null,
+  image,
   brushStrokeWidth = 50,
   revealThreshold = 0.8,
   width = 300,
@@ -56,123 +70,174 @@ const ScratchCard: React.FC<ScratchCardProps> = ({
   textFontSize = 16,
   onScratched,
 }) => {
-  const img = useImage(image);
-  const font = useFont(textFont, textFontSize);
+  const loadedImg = useImage(image);
+  const loadedFont = useFont(textFont, textFontSize);
 
   const [[areaWidth, areaHeight], setSize] = useState([0, 0]);
   const [isScratched, setScratched] = useState(false);
+  const [isLayoutReady, setLayoutReady] = useState(false);
 
-  const path = useSharedValue(Skia.Path.Make().moveTo(0,0));
+  const isThresholdReached = useSharedValue(false);
 
-  //Check scratch progress
-  const checkScratchProgress = () => {
-    const bounds = path.value.getBounds();
-    const scratchedArea = bounds.height * bounds.width;
-    const totalArea = areaWidth * areaHeight;
+  const path = useSharedValue<SkPath>(Skia.Path.Make());
 
-    if (scratchedArea / totalArea > revealThreshold && !isScratched) {
-      setScratched(true);
-      if (onScratched) {
-        onScratched();
+  useEffect(() => {
+    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);
+        }
+      } else {
+        setLayoutReady(false);
       }
-    }
-  };
+    },
+    [areaWidth, areaHeight, isLayoutReady]
+  );
 
-  useEffect(() => {console.log("HI")}, [path])
+  const revealCardOnJS = useCallback(() => {
+    setScratched(true);
+    onScratched?.();
+  }, [onScratched]);
 
   const pan = Gesture.Pan()
-  .averageTouches(true)
-  .maxPointers(1)
-  .onBegin(e => {
-    path.value.moveTo(e.x, e.y);
-    path.value.lineTo(e.x, e.y);
-    notifyChange(path as any);
-  })
-  .onChange(e => {
-    try {
-      // checkScratchProgress();
-      path.value.lineTo(e.x, e.y);
-      notifyChange(path as any);
-      // const bounds = path.value.getBounds();
-      // const scratchedArea = bounds.height * bounds.width;
-      // const totalArea = areaWidth * areaHeight;
-  
-      // if (scratchedArea / totalArea > revealThreshold && !isScratched) {
-      //   console.log("SCRATCHED")
-      //   // setScratched(true);
-      //   // if (onScratched) {
-      //     // onScratched();
-      //   // }
-      // }
-    } catch (error) {
-      console.log(error)
+    .averageTouches(true)
+    .maxPointers(1)
+    .onBegin((e) => {
+      if (!isLayoutReady) return;
+      try {
+        const newPath = path.value.copy();
+        newPath.moveTo(e.x, e.y);
+        newPath.lineTo(e.x + 0.001, e.y + 0.001);
+        path.value = newPath;
+        notifyChange(path as any);
+      } catch (error) {
+        console.error("ScratchCard: Error in onBegin:", error);
+      }
+    })
+    .onChange((e) => {
+      if (!isLayoutReady || isThresholdReached.value) return;
+
+      try {
+        const newPath = path.value.copy();
+        newPath.lineTo(e.x, e.y);
+        path.value = newPath;
+        notifyChange(path as any);
+
+        const bounds = path.value.getBounds();
+
+        if (!bounds || areaWidth <= 0 || areaHeight <= 0) {
+          return;
+        }
+
+        const scratchedArea = bounds.width * bounds.height;
+        const totalArea = areaWidth * areaHeight;
+
+        if (totalArea > 0 && scratchedArea / totalArea > revealThreshold) {
+          if (!isThresholdReached.value) {
+            isThresholdReached.value = true;
+            runOnJS(revealCardOnJS)();
+          }
+        }
+      } 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 null;
+  }, [loadedFont, text, areaWidth, areaHeight]);
 
-    // checkScratchProgress();
-  })
+  const canRenderCanvas = isLayoutReady && areaWidth > 0 && areaHeight > 0;
 
   return (
-    <View
-      onLayout={(e) => {
-        setSize([e.nativeEvent.layout.width, e.nativeEvent.layout.height]);
-      }}
-      style={[styles.container, style, { width, height }]}
-    >
-      <View style={styles.content}>{children}</View>
-
-      {!isScratched && (
-        <GestureDetector gesture={pan}>
-        <Canvas
-          style={styles.canvas}
-        >
-          <Mask
-            mode="luminance"
-            mask={
-              <Group>
-                <Rect x={0} y={0} width={1000} height={1000} color="white" />
-                <Path
-                  path={path}
-                  color="black"
-                  style="stroke"
-                  strokeJoin="round"
-                  strokeCap="round"
-                  strokeWidth={brushStrokeWidth}
-                />
-              </Group>
-            }
-          >
-            {img ? (
-              <Image
-                image={img}
-                fit="cover"
-                x={0}
-                y={0}
-                width={areaWidth}
-                height={areaHeight}
-              />
-            ) : (
-              <Group>
-                <Rect
-                  x={0}
-                  y={0}
-                  width={areaWidth}
-                  height={areaHeight}
-                  color={backgroundColor}
-                />
-                <Text
-                  x={areaWidth / 2 - (font?.measureText(text).width || 0) / 2}
-                  y={areaHeight / 2 + (font?.measureText(text).height || 0) / 2}
-                  text={text}
-                  color={textFontColor}
-                  font={font}
-                />
-              </Group>
-            )}
-          </Mask>
-        </Canvas>
-        </GestureDetector>
-      )}
-    </View>
+    <GestureHandlerRootView style={{justifyContent:"center", alignContent: "center"}}>
+      <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
+                      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}
+                      />
+                    ) : null}
+                  </Group>
+                )}
+              </Mask>
+            </Canvas>
+          </GestureDetector>
+        )}
+      </View>
+    </GestureHandlerRootView>
   );
 };
 
@@ -180,8 +245,6 @@ const styles = StyleSheet.create({
   container: {
     position: "relative",
     overflow: "hidden",
-    width: "100%",
-    height: "100%",
   },
   content: {
     position: "absolute",
@@ -189,6 +252,7 @@ const styles = StyleSheet.create({
     left: 0,
     width: "100%",
     height: "100%",
+    zIndex: 1,
   },
   canvas: {
     position: "absolute",
@@ -196,7 +260,8 @@ const styles = StyleSheet.create({
     left: 0,
     width: "100%",
     height: "100%",
+    zIndex: 2,
   },
 });
 
-export default ScratchCard;
+export default ScratchCard;