react-native-rectangle-doc-scanner 0.20.0 → 0.22.0

package/dist/DocScanner.js

@@ -91,11 +91,28 @@ const DocScanner = ({ onCapture, overlayColor = '#e7a649', autoCapture = true, m
     (0, react_1.useEffect)(() => {
         requestPermission();
     }, [requestPermission]);
+    const lastQuadRef = (0, react_1.useRef)(null);
+    const noQuadFramesRef = (0, react_1.useRef)(0);
     const updateQuad = (0, react_native_worklets_core_1.useRunOnJS)((value) => {
         if (__DEV__) {
             console.log('[DocScanner] quad', value);
         }
-        setQuad(value);
+        if (value) {
+            // Found a quad, reset counter and update
+            noQuadFramesRef.current = 0;
+            lastQuadRef.current = value;
+            setQuad(value);
+        }
+        else {
+            // No quad found, keep the last one for a few frames
+            noQuadFramesRef.current += 1;
+            // Keep the last quad for up to 3 frames
+            if (noQuadFramesRef.current > 3) {
+                lastQuadRef.current = null;
+                setQuad(null);
+            }
+            // Otherwise, keep showing the last quad
+        }
     }, []);
     const reportError = (0, react_native_worklets_core_1.useRunOnJS)((step, error) => {
         const message = error instanceof Error ? error.message : `${error}`;

package/dist/utils/overlay.js

@@ -53,6 +53,8 @@ const Overlay = ({ quad, color = '#e7a649' }) => {
         skPath.close();
         return skPath;
     }, [quad]);
-    return (react_1.default.createElement(react_native_skia_1.Canvas, { style: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 } }, path && react_1.default.createElement(react_native_skia_1.Path, { path: path, color: color, style: "stroke", strokeWidth: 4 })));
+    return (react_1.default.createElement(react_native_skia_1.Canvas, { style: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 1000 } }, path && (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_native_skia_1.Path, { path: path, color: color, style: "stroke", strokeWidth: 8 }),
+        react_1.default.createElement(react_native_skia_1.Path, { path: path, color: "rgba(231, 166, 73, 0.2)", style: "fill" })))));
 };
 exports.Overlay = Overlay;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-rectangle-doc-scanner",
-  "version": "0.20.0",
+  "version": "0.22.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": {

package/src/DocScanner.tsx

@@ -96,11 +96,30 @@ export const DocScanner: React.FC<Props> = ({
     requestPermission();
   }, [requestPermission]);
 
+  const lastQuadRef = useRef<Point[] | null>(null);
+  const noQuadFramesRef = useRef(0);
+
   const updateQuad = useRunOnJS((value: Point[] | null) => {
     if (__DEV__) {
       console.log('[DocScanner] quad', value);
     }
-    setQuad(value);
+
+    if (value) {
+      // Found a quad, reset counter and update
+      noQuadFramesRef.current = 0;
+      lastQuadRef.current = value;
+      setQuad(value);
+    } else {
+      // No quad found, keep the last one for a few frames
+      noQuadFramesRef.current += 1;
+
+      // Keep the last quad for up to 3 frames
+      if (noQuadFramesRef.current > 3) {
+        lastQuadRef.current = null;
+        setQuad(null);
+      }
+      // Otherwise, keep showing the last quad
+    }
   }, []);
 
   const reportError = useRunOnJS((step: string, error: unknown) => {

package/src/utils/overlay.tsx

@@ -28,8 +28,13 @@ export const Overlay: React.FC<OverlayProps> = ({ quad, color = '#e7a649' }) =>
   }, [quad]);
 
   return (
-    <Canvas style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
-      {path && <Path path={path} color={color} style="stroke" strokeWidth={4} />}
+    <Canvas style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 1000 }}>
+      {path && (
+        <>
+          <Path path={path} color={color} style="stroke" strokeWidth={8} />
+          <Path path={path} color="rgba(231, 166, 73, 0.2)" style="fill" />
+        </>
+      )}
     </Canvas>
   );
 };