related-ui-components 1.6.0 → 1.6.1

package/src/components/ScratchCard/ScratchCard.tsx

@@ -1,4 +1,9 @@
-import React, { useRef, useState } from "react";
+import React, {
+  useRef,
+  useState,
+  useEffect,
+  useCallback, // Import useCallback
+} from "react";
 import {
   Canvas,
   Group,
@@ -7,11 +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,
@@ -19,15 +26,21 @@ import {
   ViewStyle,
   StyleSheet,
   ImageRequireSource,
-  NativeTouchEvent,
+  LogBox, // Optional: for ignoring specific logs if needed
 } from "react-native";
+// Import runOnJS and useSharedValue
+import { runOnJS, useSharedValue } from "react-native-reanimated";
+import { Gesture, GestureDetector } 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;
@@ -35,15 +48,15 @@ type ScratchCardProps = {
   textFont?: ImageRequireSource;
   textFontSize?: number;
   textFontColor?: string;
-  onScratched?: () => void;
+  onScratched?: () => void; 
 };
 
 const ScratchCard: React.FC<ScratchCardProps> = ({
   style,
   children,
-  image = null,
+  image,
   brushStrokeWidth = 50,
-  revealThreshold = 0.8,
+  revealThreshold = 0.8, 
   width = 300,
   height = 300,
   backgroundColor = "#CCCCCC",
@@ -53,112 +66,162 @@ 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 [_, setRefresh] = useState(0);
+  const [isLayoutReady, setLayoutReady] = useState(false);
+
+  const isThresholdReached = useSharedValue(false);
 
-  const path = useRef(Skia.Path.Make());
-  const lastKnownY = useRef<number | null>(null);
+  const path = useSharedValue<SkPath>(Skia.Path.Make());
 
-  //Check scratch progress
-  const checkScratchProgress = () => {
-    const bounds = path.current.getBounds();
-    const scratchedArea = bounds.height * bounds.width;
-    const totalArea = areaWidth * areaHeight;
+  useEffect(() => {
+    path.value = Skia.Path.Make(); 
+    isThresholdReached.value = false
+    setScratched(false); 
+  }, [areaWidth, areaHeight]);
 
-    if (scratchedArea / totalArea > revealThreshold && !isScratched) {
-      setScratched(true);
-      if (onScratched) {
-        onScratched();
+  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]);
 
-  //Handle path movement on canvas
-  const handleMove = (nativeEvent: NativeTouchEvent) => {
-    let { locationX, locationY } = nativeEvent;
+  const revealCardOnJS = useCallback(() => {
+    setScratched(true);
+    onScratched?.(); 
+  }, [onScratched]); 
 
-    if (
-      lastKnownY.current != null &&
-      nativeEvent.locationY - lastKnownY.current > 50
-    ) {
-      return;
-    }
+  const pan = Gesture.Pan()
+    .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;
+        }
 
-    path.current.lineTo(locationX, locationY);
-    lastKnownY.current = locationY;
+        const scratchedArea = bounds.width * bounds.height;
+        const totalArea = areaWidth * areaHeight;
 
-    setRefresh((prev) => prev + 1);
-    checkScratchProgress();
-  };
+        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]);
+
+  const canRenderCanvas = isLayoutReady && areaWidth > 0 && areaHeight > 0;
 
   return (
     <View
-      onLayout={(e) => {
-        setSize([e.nativeEvent.layout.width, e.nativeEvent.layout.height]);
-      }}
+      onLayout={handleLayout}
       style={[styles.container, style, { width, height }]}
     >
       <View style={styles.content}>{children}</View>
 
-      {!isScratched && (
-        <Canvas
-          style={styles.canvas}
-          onTouchStart={({ nativeEvent }) => {
-            path.current.moveTo(nativeEvent.locationX, nativeEvent.locationY);
-            setRefresh((prev) => prev + 1);
-          }}
-          onTouchMove={({ nativeEvent }) => handleMove(nativeEvent)}
-          onTouchEnd={() => (lastKnownY.current = null)}
-        >
-          <Mask
-            mode="luminance"
-            mask={
-              <Group>
-                <Rect x={0} y={0} width={1000} height={1000} color="white" />
-                <Path
-                  path={path.current}
-                  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
+      {!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}
-                />
-                <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>
+              ) : (
+                <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>
   );
@@ -168,8 +231,6 @@ const styles = StyleSheet.create({
   container: {
     position: "relative",
     overflow: "hidden",
-    width: "100%",
-    height: "100%",
   },
   content: {
     position: "absolute",
@@ -177,6 +238,7 @@ const styles = StyleSheet.create({
     left: 0,
     width: "100%",
     height: "100%",
+    zIndex: 1, 
   },
   canvas: {
     position: "absolute",
@@ -184,7 +246,8 @@ const styles = StyleSheet.create({
     left: 0,
     width: "100%",
     height: "100%",
+    zIndex: 2,
   },
 });
 
-export default ScratchCard;
+export default ScratchCard;

package/src/index.ts

@@ -1,10 +1,10 @@
-// import { registerRootComponent } from 'expo';
-// import "react-native-reanimated";
+import { registerRootComponent } from 'expo';
+import "react-native-reanimated";
 
 
-// import App from "./app";
+import App from "./app";
 
-// registerRootComponent(App);
+registerRootComponent(App);
 
 export * from "./theme"
 export * from "./components";