react-native-rectangle-doc-scanner 0.66.0 → 0.70.0

package/src/DocScanner.tsx

@@ -1,21 +1,36 @@
 import React, {
-  ComponentType,
   ReactNode,
+  forwardRef,
   useCallback,
+  useImperativeHandle,
   useMemo,
   useRef,
   useState,
 } from 'react';
 import {
-  LayoutChangeEvent,
+  findNodeHandle,
+  NativeModules,
+  requireNativeComponent,
   StyleSheet,
   TouchableOpacity,
   View,
 } from 'react-native';
-import DocumentScanner from 'react-native-document-scanner-plugin';
+import type { NativeSyntheticEvent } from 'react-native';
 import { Overlay } from './utils/overlay';
 import type { Point } from './types';
 
+const MODULE_NAME = 'RNRDocScannerModule';
+const VIEW_NAME = 'RNRDocScannerView';
+
+const NativeDocScannerModule = NativeModules[MODULE_NAME];
+
+if (!NativeDocScannerModule) {
+  const fallbackMessage =
+    `The native module '${MODULE_NAME}' is not linked. Make sure you have run pod install, ` +
+    `synced Gradle, and rebuilt the app after installing 'react-native-rectangle-doc-scanner'.`;
+  throw new Error(fallbackMessage);
+}
+
 type NativeRectangle = {
   topLeft: Point;
   topRight: Point;
@@ -23,43 +38,39 @@ type NativeRectangle = {
   bottomLeft: Point;
 };
 
-type NativeRectangleEvent = {
-  rectangleCoordinates?: NativeRectangle | null;
-  stableCounter?: number;
+type RectangleEvent = {
+  rectangleCoordinates: NativeRectangle | null;
+  stableCounter: number;
+  frameWidth: number;
+  frameHeight: number;
 };
 
-type NativeCaptureResult = {
-  croppedImage?: string;
+type PictureEvent = {
+  croppedImage?: string | null;
   initialImage?: string;
   width?: number;
   height?: number;
 };
 
-type DocumentScannerHandle = {
-  capture: () => Promise<NativeCaptureResult>;
-};
-
-type NativeDocumentScannerProps = {
+type NativeDocScannerProps = {
   style?: object;
-  overlayColor?: string;
   detectionCountBeforeCapture?: number;
+  autoCapture?: boolean;
   enableTorch?: boolean;
-  hideControls?: boolean;
-  useBase64?: boolean;
   quality?: number;
-  onRectangleDetect?: (event: NativeRectangleEvent) => void;
-  onPictureTaken?: (event: NativeCaptureResult) => void;
+  useBase64?: boolean;
+  onRectangleDetect?: (event: NativeSyntheticEvent<RectangleEvent>) => void;
+  onPictureTaken?: (event: NativeSyntheticEvent<PictureEvent>) => void;
+};
+
+type DocScannerHandle = {
+  capture: () => Promise<PictureEvent>;
+  reset: () => void;
 };
 
-const NativeDocumentScanner = DocumentScanner as unknown as ComponentType<
-  NativeDocumentScannerProps & { ref?: React.Ref<DocumentScannerHandle> }
->;
+const NativeDocScanner = requireNativeComponent<NativeDocScannerProps>(VIEW_NAME);
+type NativeDocScannerInstance = React.ElementRef<typeof NativeDocScanner>;
 
-/**
- * Detection configuration is no longer used now that the native
- * implementation handles edge detection. Keeping it for backwards
- * compatibility with existing consumer code.
- */
 export interface DetectionConfig {
   processingWidth?: number;
   cannyLowThreshold?: number;
@@ -87,22 +98,23 @@ interface Props {
 const DEFAULT_OVERLAY_COLOR = '#e7a649';
 const GRID_COLOR_FALLBACK = 'rgba(231, 166, 73, 0.35)';
 
-export const DocScanner: React.FC<Props> = ({
+export const DocScanner = forwardRef<DocScannerHandle, Props>(({
   onCapture,
   overlayColor = DEFAULT_OVERLAY_COLOR,
   autoCapture = true,
   minStableFrames = 8,
   enableTorch = false,
-  quality,
+  quality = 90,
   useBase64 = false,
   children,
   showGrid = true,
   gridColor,
   gridLineWidth = 2,
-}) => {
-  const scannerRef = useRef<DocumentScannerHandle | null>(null);
+}, ref) => {
+  const viewRef = useRef<NativeDocScannerInstance | null>(null);
   const capturingRef = useRef(false);
   const [quad, setQuad] = useState<Point[] | null>(null);
+  const [stable, setStable] = useState(0);
   const [frameSize, setFrameSize] = useState<{ width: number; height: number } | null>(null);
 
   const effectiveGridColor = useMemo(
@@ -110,80 +122,142 @@ export const DocScanner: React.FC<Props> = ({
     [gridColor],
   );
 
-  const handleLayout = useCallback((event: LayoutChangeEvent) => {
-    const { width, height } = event.nativeEvent.layout;
-    if (width > 0 && height > 0) {
-      setFrameSize({ width, height });
+  const ensureViewHandle = useCallback(() => {
+    const nodeHandle = findNodeHandle(viewRef.current);
+    if (!nodeHandle) {
+      throw new Error('Unable to obtain native view handle for DocScanner.');
     }
+    return nodeHandle;
   }, []);
 
-  const handleRectangleDetect = useCallback((event: NativeRectangleEvent) => {
-    const coordinates = event?.rectangleCoordinates;
-
-    if (!coordinates) {
-      setQuad(null);
-      return;
+  const resetNativeStability = useCallback(() => {
+    try {
+      const handle = ensureViewHandle();
+      NativeDocScannerModule.reset(handle);
+    } catch (error) {
+      console.warn('[DocScanner] unable to reset native stability', error);
     }
+  }, [ensureViewHandle]);
 
-    const nextQuad: Point[] = [
-      coordinates.topLeft,
-      coordinates.topRight,
-      coordinates.bottomRight,
-      coordinates.bottomLeft,
-    ];
-
-    setQuad(nextQuad);
-  }, []);
-
-  const handlePictureTaken = useCallback(
-    (event: NativeCaptureResult) => {
+  const emitCaptureResult = useCallback(
+    (payload: PictureEvent) => {
       capturingRef.current = false;
 
-      const path = event?.croppedImage ?? event?.initialImage;
+      const path = payload.croppedImage ?? payload.initialImage;
       if (!path) {
         return;
       }
 
-      const width = event?.width ?? frameSize?.width ?? 0;
-      const height = event?.height ?? frameSize?.height ?? 0;
-
+      const width = payload.width ?? frameSize?.width ?? 0;
+      const height = payload.height ?? frameSize?.height ?? 0;
       onCapture?.({
         path,
         quad,
         width,
         height,
       });
+      setStable(0);
+      resetNativeStability();
+    },
+    [frameSize, onCapture, quad, resetNativeStability],
+  );
+
+  const handleRectangleDetect = useCallback(
+    (event: NativeSyntheticEvent<RectangleEvent>) => {
+      const { rectangleCoordinates, stableCounter, frameWidth, frameHeight } = event.nativeEvent;
+      setStable(stableCounter);
+      setFrameSize({ width: frameWidth, height: frameHeight });
+
+      if (!rectangleCoordinates) {
+        setQuad(null);
+        return;
+      }
+
+      setQuad([
+        rectangleCoordinates.topLeft,
+        rectangleCoordinates.topRight,
+        rectangleCoordinates.bottomRight,
+        rectangleCoordinates.bottomLeft,
+      ]);
+
+      if (autoCapture && stableCounter >= minStableFrames) {
+        triggerCapture();
+      }
+    },
+    [autoCapture, minStableFrames],
+  );
+
+  const handlePictureTaken = useCallback(
+    (event: NativeSyntheticEvent<PictureEvent>) => {
+      emitCaptureResult(event.nativeEvent);
     },
-    [frameSize, onCapture, quad],
+    [emitCaptureResult],
   );
 
+  const captureNative = useCallback((): Promise<PictureEvent> => {
+    if (capturingRef.current) {
+      return Promise.reject(new Error('capture_in_progress'));
+    }
+
+    try {
+      const handle = ensureViewHandle();
+      capturingRef.current = true;
+      return NativeDocScannerModule.capture(handle)
+        .then((result: PictureEvent) => {
+          emitCaptureResult(result);
+          return result;
+        })
+        .catch((error: Error) => {
+          capturingRef.current = false;
+          throw error;
+        });
+    } catch (error) {
+      capturingRef.current = false;
+      return Promise.reject(error);
+    }
+  }, [emitCaptureResult, ensureViewHandle]);
+
+  const triggerCapture = useCallback(() => {
+    if (capturingRef.current) {
+      return;
+    }
+
+    captureNative().catch((error: Error) => {
+      console.warn('[DocScanner] capture failed', error);
+    });
+  }, [captureNative]);
+
   const handleManualCapture = useCallback(() => {
-    if (autoCapture || capturingRef.current || !scannerRef.current) {
+    if (autoCapture) {
       return;
     }
+    captureNative().catch((error: Error) => {
+      console.warn('[DocScanner] manual capture failed', error);
+    });
+  }, [autoCapture, captureNative]);
 
-    capturingRef.current = true;
-    scannerRef.current
-      .capture()
-      .catch((error) => {
-        console.warn('[DocScanner] manual capture failed', error);
-        capturingRef.current = false;
-      });
-  }, [autoCapture]);
+  useImperativeHandle(
+    ref,
+    () => ({
+      capture: captureNative,
+      reset: () => {
+        setStable(0);
+        resetNativeStability();
+      },
+    }),
+    [captureNative, resetNativeStability],
+  );
 
   return (
-    <View style={styles.container} onLayout={handleLayout}>
-      <NativeDocumentScanner
-        ref={(instance) => {
-          scannerRef.current = instance as DocumentScannerHandle | null;
-        }}
+    <View style={styles.container}>
+      <NativeDocScanner
+        ref={viewRef}
         style={StyleSheet.absoluteFill}
-        overlayColor="transparent"
-        detectionCountBeforeCapture={autoCapture ? minStableFrames : 10000}
+        detectionCountBeforeCapture={minStableFrames}
+        autoCapture={autoCapture}
         enableTorch={enableTorch}
-        hideControls
-        useBase64={useBase64}
         quality={quality}
+        useBase64={useBase64}
         onRectangleDetect={handleRectangleDetect}
         onPictureTaken={handlePictureTaken}
       />
@@ -201,11 +275,12 @@ export const DocScanner: React.FC<Props> = ({
       {children}
     </View>
   );
-};
+});
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    backgroundColor: '#000',
   },
   button: {
     position: 'absolute',
@@ -217,3 +292,5 @@ const styles = StyleSheet.create({
     backgroundColor: '#fff',
   },
 });
+
+export type { DocScannerHandle };

package/src/FullDocScanner.tsx

@@ -56,6 +56,9 @@ export interface FullDocScannerProps {
   onClose?: () => void;
   detectionConfig?: DetectionConfig;
   overlayColor?: string;
+  gridColor?: string;
+  gridLineWidth?: number;
+  showGrid?: boolean;
   overlayStrokeColor?: string;
   handlerColor?: string;
   strings?: FullDocScannerStrings;
@@ -71,6 +74,9 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
   onClose,
   detectionConfig,
   overlayColor = '#3170f3',
+  gridColor,
+  gridLineWidth,
+  showGrid,
   overlayStrokeColor = '#3170f3',
   handlerColor = '#3170f3',
   strings,
@@ -83,6 +89,7 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
   const [cropRectangle, setCropRectangle] = useState<Rectangle | null>(null);
   const [imageSize, setImageSize] = useState<{ width: number; height: number } | null>(null);
   const [processing, setProcessing] = useState(false);
+  const resolvedGridColor = gridColor ?? overlayColor;
 
   const mergedStrings = useMemo<Required<FullDocScannerStrings>>(
     () => ({
@@ -239,6 +246,9 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
           <DocScanner
             autoCapture={!manualCapture}
             overlayColor={overlayColor}
+            showGrid={showGrid}
+            gridColor={resolvedGridColor}
+            gridLineWidth={gridLineWidth}
             minStableFrames={minStableFrames ?? 6}
             detectionConfig={detectionConfig}
             onCapture={handleCapture}

package/src/external.d.ts

@@ -1,48 +1,3 @@
-declare module 'react-native-document-scanner-plugin' {
-  import type { ComponentType } from 'react';
-  import type { ViewStyle } from 'react-native';
-
-  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 RectangleEvent = {
-    rectangleCoordinates?: RectangleCoordinates;
-    stableCounter?: number;
-    lastDetectionType?: 'initial' | 'updated' | 'lost';
-  };
-
-  export type CaptureResult = {
-    croppedImage?: string;
-    initialImage?: string;
-    width?: number;
-    height?: number;
-  };
-
-  export type DocumentScannerProps = {
-    ref?: (value: DocumentScannerHandle | null) => void;
-    style?: ViewStyle;
-    overlayColor?: string;
-    detectionCountBeforeCapture?: number;
-    enableTorch?: boolean;
-    hideControls?: boolean;
-    useBase64?: boolean;
-    quality?: number;
-    onRectangleDetect?: (event: RectangleEvent) => void;
-    onPictureTaken?: (result: CaptureResult) => void;
-  };
-
-  export type DocumentScannerHandle = {
-    capture: () => Promise<CaptureResult>;
-  };
-
-  const DocumentScanner: ComponentType<DocumentScannerProps>;
-  export default DocumentScanner;
-}
-
 declare module '@shopify/react-native-skia' {
   import type { ComponentType, ReactNode } from 'react';
   import type { ViewStyle } from 'react-native';
@@ -76,6 +31,18 @@ declare module '@shopify/react-native-skia' {
   export const Path: ComponentType<PathProps>;
 }
 
+declare module 'react-native-rectangle-doc-scanner/RNRDocScannerModule' {
+  export type NativeCaptureResult = {
+    croppedImage?: string | null;
+    initialImage?: string;
+    width?: number;
+    height?: number;
+  };
+
+  export function capture(viewTag: number): Promise<NativeCaptureResult>;
+  export function reset(viewTag: number): void;
+}
+
 declare module 'react-native-perspective-image-cropper' {
   import type { ComponentType } from 'react';
 

package/src/index.ts

@@ -11,7 +11,7 @@ export type {
 
 // Types
 export type { Point, Quad, Rectangle, CapturedDocument } from './types';
-export type { DetectionConfig } from './DocScanner';
+export type { DetectionConfig, DocScannerHandle } from './DocScanner';
 
 // Utilities
 export {

package/src/utils/overlay.tsx

@@ -8,6 +8,23 @@ const lerp = (start: Point, end: Point, t: number): Point => ({
   y: start.y + (end.y - start.y) * t,
 });
 
+const withAlpha = (value: string, alpha: number): string => {
+  const hexMatch = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(value.trim());
+  if (!hexMatch) {
+    return `rgba(231, 166, 73, ${alpha})`;
+  }
+
+  const hex = hexMatch[1];
+  const normalize = hex.length === 3
+    ? hex.split('').map((ch) => ch + ch).join('')
+    : hex;
+
+  const r = parseInt(normalize.slice(0, 2), 16);
+  const g = parseInt(normalize.slice(2, 4), 16);
+  const b = parseInt(normalize.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+
 type OverlayProps = {
   quad: Point[] | null;
   color?: string;
@@ -22,6 +39,14 @@ type OverlayGeometry = {
   gridPaths: ReturnType<typeof Skia.Path.Make>[];
 };
 
+const buildPath = (points: Point[]) => {
+  const path = Skia.Path.Make();
+  path.moveTo(points[0].x, points[0].y);
+  points.slice(1).forEach((p) => path.lineTo(p.x, p.y));
+  path.close();
+  return path;
+};
+
 export const Overlay: React.FC<OverlayProps> = ({
   quad,
   color = '#e7a649',
@@ -31,71 +56,75 @@ export const Overlay: React.FC<OverlayProps> = ({
   gridLineWidth = 2,
 }) => {
   const { width: screenWidth, height: screenHeight } = useWindowDimensions();
+  const fillColor = useMemo(() => withAlpha(color, 0.2), [color]);
 
   const { outlinePath, gridPaths }: OverlayGeometry = useMemo(() => {
-    if (!quad || !frameSize) {
-      if (__DEV__) {
-        console.log('[Overlay] no quad or frameSize', { quad, frameSize });
-      }
-      return { outlinePath: null, gridPaths: [] };
-    }
+    let transformedQuad: Point[] | null = null;
+    let sourceQuad: Point[] | null = null;
+    let sourceFrameSize = frameSize;
 
-    if (__DEV__) {
-      console.log('[Overlay] drawing quad:', quad);
-      console.log('[Overlay] color:', color);
-      console.log('[Overlay] screen dimensions:', screenWidth, 'x', screenHeight);
-      console.log('[Overlay] frame dimensions:', frameSize.width, 'x', frameSize.height);
-    }
-
-    // Check if camera is in landscape mode (width > height) but screen is portrait (height > width)
-    const isFrameLandscape = frameSize.width > frameSize.height;
-    const isScreenPortrait = screenHeight > screenWidth;
-    const needsRotation = isFrameLandscape && isScreenPortrait;
-
-    if (__DEV__) {
-      console.log('[Overlay] needs rotation:', needsRotation);
+    if (quad && frameSize) {
+      sourceQuad = quad;
+    } else {
+      const marginRatio = 0.12;
+      const marginX = screenWidth * marginRatio;
+      const marginY = screenHeight * marginRatio;
+      const maxWidth = screenWidth - marginX * 2;
+      const maxHeight = screenHeight - marginY * 2;
+      const a4Ratio = Math.SQRT2; // ~1.414 height / width
+      let width = maxWidth;
+      let height = width * a4Ratio;
+      if (height > maxHeight) {
+        height = maxHeight;
+        width = height / a4Ratio;
+      }
+      const left = (screenWidth - width) / 2;
+      const top = (screenHeight - height) / 2;
+      transformedQuad = [
+        { x: left, y: top },
+        { x: left + width, y: top },
+        { x: left + width, y: top + height },
+        { x: left, y: top + height },
+      ];
+      sourceFrameSize = null;
     }
 
-    let transformedQuad: Point[];
-
-    if (needsRotation) {
-      // Camera is landscape, screen is portrait - need to rotate 90 degrees
-      // Transform: rotate 90° clockwise and scale
-      // New coordinates: x' = y * (screenWidth / frameHeight), y' = (frameWidth - x) * (screenHeight / frameWidth)
-      const scaleX = screenWidth / frameSize.height;
-      const scaleY = screenHeight / frameSize.width;
-
+    if (sourceQuad && sourceFrameSize) {
       if (__DEV__) {
-        console.log('[Overlay] rotation scale factors:', scaleX, 'x', scaleY);
+        console.log('[Overlay] drawing quad:', sourceQuad);
+        console.log('[Overlay] color:', color);
+        console.log('[Overlay] screen dimensions:', screenWidth, 'x', screenHeight);
+        console.log('[Overlay] frame dimensions:', sourceFrameSize.width, 'x', sourceFrameSize.height);
       }
 
-      transformedQuad = quad.map((p) => ({
-        x: p.y * scaleX,
-        y: (frameSize.width - p.x) * scaleY,
-      }));
-    } else {
-      // Same orientation - just scale
-      const scaleX = screenWidth / frameSize.width;
-      const scaleY = screenHeight / frameSize.height;
-
-      if (__DEV__) {
-        console.log('[Overlay] scale factors:', scaleX, 'x', scaleY);
+      const isFrameLandscape = sourceFrameSize.width > sourceFrameSize.height;
+      const isScreenPortrait = screenHeight > screenWidth;
+      const needsRotation = isFrameLandscape && isScreenPortrait;
+
+      if (needsRotation) {
+        const scaleX = screenWidth / sourceFrameSize.height;
+        const scaleY = screenHeight / sourceFrameSize.width;
+
+        transformedQuad = sourceQuad.map((p) => ({
+          x: p.y * scaleX,
+          y: (sourceFrameSize.width - p.x) * scaleY,
+        }));
+      } else {
+        const scaleX = screenWidth / sourceFrameSize.width;
+        const scaleY = screenHeight / sourceFrameSize.height;
+
+        transformedQuad = sourceQuad.map((p) => ({
+          x: p.x * scaleX,
+          y: p.y * scaleY,
+        }));
       }
-
-      transformedQuad = quad.map((p) => ({
-        x: p.x * scaleX,
-        y: p.y * scaleY,
-      }));
     }
 
-    if (__DEV__) {
-      console.log('[Overlay] transformed quad:', transformedQuad);
+    if (!transformedQuad) {
+      return { outlinePath: null, gridPaths: [] };
     }
 
-    const skPath = Skia.Path.Make();
-    skPath.moveTo(transformedQuad[0].x, transformedQuad[0].y);
-    transformedQuad.slice(1).forEach((p) => skPath.lineTo(p.x, p.y));
-    skPath.close();
+    const skPath = buildPath(transformedQuad);
     const grid: ReturnType<typeof Skia.Path.Make>[] = [];
 
     if (showGrid) {
@@ -122,7 +151,7 @@ export const Overlay: React.FC<OverlayProps> = ({
     }
 
     return { outlinePath: skPath, gridPaths: grid };
-  }, [quad, screenWidth, screenHeight, frameSize, showGrid]);
+  }, [quad, screenWidth, screenHeight, frameSize, showGrid, color]);
 
   if (__DEV__) {
     console.log('[Overlay] rendering Canvas with dimensions:', screenWidth, 'x', screenHeight);
@@ -134,7 +163,7 @@ export const Overlay: React.FC<OverlayProps> = ({
         {outlinePath && (
           <>
             <Path path={outlinePath} color={color} style="stroke" strokeWidth={8} />
-            <Path path={outlinePath} color="rgba(231, 166, 73, 0.2)" style="fill" />
+            <Path path={outlinePath} color={fillColor} style="fill" />
             {gridPaths.map((gridPath, index) => (
               <Path
                 // eslint-disable-next-line react/no-array-index-key