react-native-rectangle-doc-scanner 0.63.0 → 0.65.0

package/src/external.d.ts

@@ -1,78 +1,46 @@
-declare module 'react-native-vision-camera' {
+declare module 'react-native-document-scanner-plugin' {
   import type { ComponentType } from 'react';
   import type { ViewStyle } from 'react-native';
 
-  export type CameraDevice = {
-    id: string;
-    name: string;
-  } | null;
-
-  export type Frame = {
-    width: number;
-    height: number;
+  export type RectangleCoordinates = {
+    topLeft: { x: number; y: number };
+    topRight: { x: number; y: number };
+    bottomRight: { x: number; y: number };
+    bottomLeft: { x: number; y: number };
   };
 
-  export type TakePhotoOptions = {
-    qualityPrioritization?: 'balanced' | 'quality' | 'speed';
+  export type RectangleEvent = {
+    rectangleCoordinates?: RectangleCoordinates;
+    stableCounter?: number;
+    lastDetectionType?: 'initial' | 'updated' | 'lost';
   };
 
-  export type CameraRef = {
-    takePhoto: (options?: TakePhotoOptions) => Promise<{
-      path: string;
-    }>;
+  export type CaptureResult = {
+    croppedImage?: string;
+    initialImage?: string;
+    width?: number;
+    height?: number;
   };
 
-  export type CameraProps = {
-    ref?: (value: CameraRef | null) => void;
+  export type DocumentScannerProps = {
+    ref?: (value: DocumentScannerHandle | null) => void;
     style?: ViewStyle;
-    device: CameraDevice;
-    isActive?: boolean;
-    photo?: boolean;
-    frameProcessor?: (frame: Frame) => void;
-    frameProcessorFps?: number;
-  };
-
-  export const Camera: ComponentType<CameraProps>;
-  export function useCameraDevice(position?: 'back' | 'front'): CameraDevice;
-  export function useCameraPermission(): {
-    hasPermission: boolean;
-    requestPermission: () => Promise<void>;
-  };
-  export function useFrameProcessor(
-    processor: (frame: Frame) => void,
-    deps?: ReadonlyArray<unknown>
-  ): (frame: Frame) => void;
-}
-
-declare module 'react-native-reanimated' {
-  export function runOnJS<T extends (...args: any[]) => any>(fn: T): T;
-}
-
-declare module 'vision-camera-resize-plugin' {
-  import type { Frame } from 'react-native-vision-camera';
-
-  type ResizeOptions = {
-    dataType: 'uint8';
-    pixelFormat: 'bgr';
-    scale: {
-      width: number;
-      height: number;
-    };
+    overlayColor?: string;
+    detectionCountBeforeCapture?: number;
+    enableTorch?: boolean;
+    hideControls?: boolean;
+    useBase64?: boolean;
+    quality?: number;
+    onRectangleDetect?: (event: RectangleEvent) => void;
+    onPictureTaken?: (result: CaptureResult) => void;
   };
 
-  export function useResizePlugin(): {
-    resize: (frame: Frame, options: ResizeOptions) => ArrayBuffer;
+  export type DocumentScannerHandle = {
+    capture: () => Promise<CaptureResult>;
   };
-}
 
-declare module 'react-native-fast-opencv' {
-  export const OpenCV: any;
-  export const ColorConversionCodes: any;
-  export const MorphTypes: any;
-  export const MorphShapes: any;
-  export const RetrievalModes: any;
-  export const ContourApproximationModes: any;
-  export const ObjectType: any;
+  const DocumentScanner: ComponentType<DocumentScannerProps>;
+  export default DocumentScanner;
 }
 
 declare module '@shopify/react-native-skia' {

package/src/index.ts

@@ -20,4 +20,3 @@ export {
   scaleCoordinates,
   scaleRectangle,
 } from './utils/coordinate';
-export { DocumentDetector } from './utils/documentDetection';

package/src/utils/overlay.tsx

@@ -3,21 +3,41 @@ import { View, StyleSheet, useWindowDimensions } from 'react-native';
 import { Canvas, Path, Skia } from '@shopify/react-native-skia';
 import type { Point } from '../types';
 
+const lerp = (start: Point, end: Point, t: number): Point => ({
+  x: start.x + (end.x - start.x) * t,
+  y: start.y + (end.y - start.y) * t,
+});
+
 type OverlayProps = {
   quad: Point[] | null;
   color?: string;
   frameSize: { width: number; height: number } | null;
+  showGrid?: boolean;
+  gridColor?: string;
+  gridLineWidth?: number;
+};
+
+type OverlayGeometry = {
+  outlinePath: ReturnType<typeof Skia.Path.Make> | null;
+  gridPaths: ReturnType<typeof Skia.Path.Make>[];
 };
 
-export const Overlay: React.FC<OverlayProps> = ({ quad, color = '#e7a649', frameSize }) => {
+export const Overlay: React.FC<OverlayProps> = ({
+  quad,
+  color = '#e7a649',
+  frameSize,
+  showGrid = true,
+  gridColor = 'rgba(231, 166, 73, 0.35)',
+  gridLineWidth = 2,
+}) => {
   const { width: screenWidth, height: screenHeight } = useWindowDimensions();
 
-  const path = useMemo(() => {
+  const { outlinePath, gridPaths }: OverlayGeometry = useMemo(() => {
     if (!quad || !frameSize) {
       if (__DEV__) {
         console.log('[Overlay] no quad or frameSize', { quad, frameSize });
       }
-      return null;
+      return { outlinePath: null, gridPaths: [] };
     }
 
     if (__DEV__) {
@@ -76,8 +96,33 @@ export const Overlay: React.FC<OverlayProps> = ({ quad, color = '#e7a649', frame
     skPath.moveTo(transformedQuad[0].x, transformedQuad[0].y);
     transformedQuad.slice(1).forEach((p) => skPath.lineTo(p.x, p.y));
     skPath.close();
-    return skPath;
-  }, [quad, color, screenWidth, screenHeight, frameSize]);
+    const grid: ReturnType<typeof Skia.Path.Make>[] = [];
+
+    if (showGrid) {
+      const [topLeft, topRight, bottomRight, bottomLeft] = transformedQuad;
+      const steps = [1 / 3, 2 / 3];
+
+      steps.forEach((t) => {
+        const start = lerp(topLeft, topRight, t);
+        const end = lerp(bottomLeft, bottomRight, t);
+        const verticalPath = Skia.Path.Make();
+        verticalPath.moveTo(start.x, start.y);
+        verticalPath.lineTo(end.x, end.y);
+        grid.push(verticalPath);
+      });
+
+      steps.forEach((t) => {
+        const start = lerp(topLeft, bottomLeft, t);
+        const end = lerp(topRight, bottomRight, t);
+        const horizontalPath = Skia.Path.Make();
+        horizontalPath.moveTo(start.x, start.y);
+        horizontalPath.lineTo(end.x, end.y);
+        grid.push(horizontalPath);
+      });
+    }
+
+    return { outlinePath: skPath, gridPaths: grid };
+  }, [quad, screenWidth, screenHeight, frameSize, showGrid]);
 
   if (__DEV__) {
     console.log('[Overlay] rendering Canvas with dimensions:', screenWidth, 'x', screenHeight);
@@ -86,10 +131,20 @@ export const Overlay: React.FC<OverlayProps> = ({ quad, color = '#e7a649', frame
   return (
     <View style={styles.container} pointerEvents="none">
       <Canvas style={{ width: screenWidth, height: screenHeight }}>
-        {path && (
+        {outlinePath && (
           <>
-            <Path path={path} color={color} style="stroke" strokeWidth={8} />
-            <Path path={path} color="rgba(231, 166, 73, 0.2)" style="fill" />
+            <Path path={outlinePath} color={color} style="stroke" strokeWidth={8} />
+            <Path path={outlinePath} color="rgba(231, 166, 73, 0.2)" style="fill" />
+            {gridPaths.map((gridPath, index) => (
+              <Path
+                // eslint-disable-next-line react/no-array-index-key
+                key={`grid-${index}`}
+                path={gridPath}
+                color={gridColor}
+                style="stroke"
+                strokeWidth={gridLineWidth}
+              />
+            ))}
           </>
         )}
       </Canvas>

package/src/utils/documentDetection.ts

@@ -1,278 +0,0 @@
-import {
-  OpenCV,
-  ColorConversionCodes,
-  MorphShapes,
-  MorphTypes,
-  RetrievalModes,
-  ContourApproximationModes,
-} from 'react-native-fast-opencv';
-import type { Point } from '../types';
-
-type MatLike = { release?: () => void } | null | undefined;
-
-type Size = { width: number; height: number };
-
-type Quad = [Point, Point, Point, Point];
-
-const OUTPUT_SIZE: Size = { width: 800, height: 600 };
-const MIN_AREA = 1000;
-const GAUSSIAN_KERNEL: Size = { width: 5, height: 5 };
-const MORPH_KERNEL: Size = { width: 3, height: 3 };
-const ADAPTIVE_THRESH_GAUSSIAN_C = 1;
-const THRESH_BINARY = 0;
-
-const safeRelease = (mat: MatLike) => {
-  if (mat && typeof mat.release === 'function') {
-    mat.release();
-  }
-};
-
-const normalizePoint = (value: unknown): Point | null => {
-  if (!value) {
-    return null;
-  }
-
-  if (Array.isArray(value) && value.length >= 2) {
-    const [x, y] = value;
-    const px = Number(x);
-    const py = Number(y);
-    return Number.isFinite(px) && Number.isFinite(py) ? { x: px, y: py } : null;
-  }
-
-  if (typeof value === 'object') {
-    const maybePoint = value as { x?: unknown; y?: unknown };
-    const px = Number(maybePoint.x);
-    const py = Number(maybePoint.y);
-    return Number.isFinite(px) && Number.isFinite(py) ? { x: px, y: py } : null;
-  }
-
-  return null;
-};
-
-const toPointArray = (value: unknown): Point[] | null => {
-  if (!value) {
-    return null;
-  }
-
-  if (Array.isArray(value)) {
-    const points = value.map(normalizePoint).filter((point): point is Point => point !== null);
-    return points.length === value.length ? points : null;
-  }
-
-  if (typeof value === 'object') {
-    const mat = value as { data32F?: number[]; data64F?: number[]; data32S?: number[] };
-    const data = mat.data32F ?? mat.data64F ?? mat.data32S;
-    if (!data || data.length < 8) {
-      return null;
-    }
-
-    const points: Point[] = [];
-    for (let i = 0; i + 1 < data.length; i += 2) {
-      const x = data[i];
-      const y = data[i + 1];
-      if (Number.isFinite(x) && Number.isFinite(y)) {
-        points.push({ x, y });
-      }
-    }
-
-    return points.length >= 4 ? points.slice(0, 4) : null;
-  }
-
-  return null;
-};
-
-const ensureQuad = (points: Point[] | null): Quad | null => {
-  if (!points || points.length < 4) {
-    return null;
-  }
-
-  const quad: Quad = [points[0], points[1], points[2], points[3]];
-  for (const point of quad) {
-    if (typeof point.x !== 'number' || typeof point.y !== 'number') {
-      return null;
-    }
-  }
-
-  return quad;
-};
-
-/**
- * Provides document detection utilities using react-native-fast-opencv.
- */
-export class DocumentDetector {
-  private static initialized = false;
-
-  /** Initialize OpenCV runtime once */
-  static async initialize(): Promise<void> {
-    if (!DocumentDetector.initialized) {
-      await OpenCV.initialize();
-      DocumentDetector.initialized = true;
-    }
-  }
-
-  /** Find document contours and return the largest quadrilateral */
-  static async findDocumentContours(imagePath: string): Promise<Quad | null> {
-    await DocumentDetector.initialize();
-
-    let image: MatLike;
-    let gray: MatLike;
-    let blurred: MatLike;
-    let thresh: MatLike;
-    let morphed: MatLike;
-    let kernel: MatLike;
-
-    try {
-      image = OpenCV.imread(imagePath);
-      gray = OpenCV.cvtColor(image, ColorConversionCodes.COLOR_BGR2GRAY);
-      blurred = OpenCV.GaussianBlur(gray, GAUSSIAN_KERNEL, 0);
-
-      thresh = OpenCV.adaptiveThreshold(
-        blurred,
-        255,
-        ADAPTIVE_THRESH_GAUSSIAN_C,
-        THRESH_BINARY,
-        11,
-        2,
-      );
-
-      kernel = OpenCV.getStructuringElement(MorphShapes.MORPH_RECT, MORPH_KERNEL);
-      morphed = OpenCV.morphologyEx(thresh, MorphTypes.MORPH_CLOSE, kernel);
-
-      const contours = OpenCV.findContours(
-        morphed,
-        RetrievalModes.RETR_EXTERNAL,
-        ContourApproximationModes.CHAIN_APPROX_SIMPLE,
-      );
-
-      let largestQuad: Quad | null = null;
-      let maxArea = 0;
-
-      for (const contour of contours) {
-        const area = OpenCV.contourArea(contour);
-        if (area <= maxArea || area <= MIN_AREA) {
-          continue;
-        }
-
-        const perimeter = OpenCV.arcLength(contour, true);
-        const approx = OpenCV.approxPolyDP(contour, 0.02 * perimeter, true);
-        const points = ensureQuad(toPointArray(approx));
-
-        safeRelease(approx as MatLike);
-
-        if (!points) {
-          continue;
-        }
-
-        maxArea = area;
-        largestQuad = points;
-      }
-
-      return largestQuad;
-    } catch (error) {
-      if (__DEV__) {
-        console.error('[DocumentDetector] findDocumentContours error', error);
-      }
-      return null;
-    } finally {
-      safeRelease(kernel);
-      safeRelease(morphed);
-      safeRelease(thresh);
-      safeRelease(blurred);
-      safeRelease(gray);
-      safeRelease(image);
-    }
-  }
-
-  /** Apply a perspective transform using detected corners */
-  static async perspectiveTransform(
-    imagePath: string,
-    corners: Quad,
-    outputSize: Size = OUTPUT_SIZE,
-  ): Promise<string | null> {
-    await DocumentDetector.initialize();
-
-    let image: MatLike;
-    let srcPoints: MatLike;
-    let dstPoints: MatLike;
-    let transformMatrix: MatLike;
-    let warped: MatLike;
-
-    try {
-      image = OpenCV.imread(imagePath);
-
-      srcPoints = OpenCV.matFromArray(4, 1, OpenCV.CV_32FC2, [
-        corners[0].x,
-        corners[0].y,
-        corners[1].x,
-        corners[1].y,
-        corners[2].x,
-        corners[2].y,
-        corners[3].x,
-        corners[3].y,
-      ]);
-
-      dstPoints = OpenCV.matFromArray(4, 1, OpenCV.CV_32FC2, [
-        0,
-        0,
-        outputSize.width,
-        0,
-        outputSize.width,
-        outputSize.height,
-        0,
-        outputSize.height,
-      ]);
-
-      transformMatrix = OpenCV.getPerspectiveTransform(srcPoints, dstPoints);
-
-      warped = OpenCV.warpPerspective(image, transformMatrix, outputSize);
-
-      const outputPath = imagePath.replace(/\.jpg$/i, '_normalized.jpg');
-      OpenCV.imwrite(outputPath, warped);
-
-      return outputPath;
-    } catch (error) {
-      if (__DEV__) {
-        console.error('[DocumentDetector] perspectiveTransform error', error);
-      }
-      return null;
-    } finally {
-      safeRelease(warped);
-      safeRelease(transformMatrix);
-      safeRelease(dstPoints);
-      safeRelease(srcPoints);
-      safeRelease(image);
-    }
-  }
-
-  /** Detect document and apply normalization */
-  static async detectAndNormalize(imagePath: string, outputSize?: Size): Promise<string | null> {
-    try {
-      const corners = await DocumentDetector.findDocumentContours(imagePath);
-      if (!corners) {
-        if (__DEV__) {
-          console.log('[DocumentDetector] No document detected');
-        }
-        return null;
-      }
-
-      return DocumentDetector.perspectiveTransform(imagePath, corners, outputSize ?? OUTPUT_SIZE);
-    } catch (error) {
-      if (__DEV__) {
-        console.error('[DocumentDetector] detectAndNormalize error', error);
-      }
-      return null;
-    }
-  }
-
-  /** Only detect document corners without transforming */
-  static async getDocumentBounds(imagePath: string): Promise<Quad | null> {
-    try {
-      return DocumentDetector.findDocumentContours(imagePath);
-    } catch (error) {
-      if (__DEV__) {
-        console.error('[DocumentDetector] getDocumentBounds error', error);
-      }
-      return null;
-    }
-  }
-}

package/src/worklets-core.d.ts

@@ -1,8 +0,0 @@
-import type { DependencyList } from 'react';
-
-declare module 'react-native-worklets-core' {
-  export function useRunOnJS<T extends (...args: any[]) => any>(
-    callback: T,
-    deps: DependencyList
-  ): (...args: Parameters<T>) => void;
-}