react-native-rectangle-doc-scanner 0.1.0

package/README.md

@@ -0,0 +1,46 @@
+# React Native Rectangle Doc Scanner
+
+VisionCamera + Fast-OpenCV powered document scanner template built for React Native. You can install it as a reusable module, extend the detection pipeline, and publish to npm out of the box.
+
+## Features
+- Real-time quad detection using `react-native-fast-opencv`
+- Frame processor worklet executed on the UI thread via `react-native-vision-camera`
+- Resize plugin to keep frame processing fast on lower-end devices
+- Skia overlay for visualizing detected document contours
+- Stability tracker for auto-capture once the document is steady
+
+## Installation
+Install the template as a package and make sure the peer dependencies already exist in your app:
+
+```sh
+yarn add react-native-rectangle-doc-scanner
+```
+
+## Usage
+```tsx
+import React from 'react';
+import { View } from 'react-native';
+import { DocScanner } from 'react-native-rectangle-doc-scanner';
+
+export const ScanScreen = () => (
+  <View style={{ flex: 1 }}>
+    <DocScanner
+      onCapture={({ path, quad }) => {
+        console.log('Document captured at', path, quad);
+      }}
+      overlayColor="#ff8800"
+      autoCapture
+      minStableFrames={8}
+    />
+  </View>
+);
+```
+
+## Build
+```sh
+yarn build
+```
+Generates the `dist/` output via TypeScript.
+
+## License
+MIT

package/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  presets: ['module:@react-native/babel-preset'],
+  plugins: [
+    ['react-native-worklets-core/plugin'],
+    'react-native-reanimated/plugin'
+  ],
+};

package/dist/DocScanner.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { Point } from './types';
+interface Props {
+    onCapture?: (photo: {
+        path: string;
+        quad: Point[] | null;
+    }) => void;
+    overlayColor?: string;
+    autoCapture?: boolean;
+    minStableFrames?: number;
+}
+export declare const DocScanner: React.FC<Props>;
+export {};

package/dist/DocScanner.js

@@ -0,0 +1,143 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DocScanner = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_vision_camera_1 = require("react-native-vision-camera");
+const vision_camera_resize_plugin_1 = require("vision-camera-resize-plugin");
+const react_native_reanimated_1 = require("react-native-reanimated");
+const react_native_fast_opencv_1 = require("react-native-fast-opencv");
+const overlay_1 = require("./utils/overlay");
+const stability_1 = require("./utils/stability");
+const DocScanner = ({ onCapture, overlayColor = '#e7a649', autoCapture = true, minStableFrames = 8, }) => {
+    const device = (0, react_native_vision_camera_1.useCameraDevice)('back');
+    const { hasPermission, requestPermission } = (0, react_native_vision_camera_1.useCameraPermission)();
+    const { resize } = (0, vision_camera_resize_plugin_1.useResizePlugin)();
+    const camera = (0, react_1.useRef)(null);
+    const handleCameraRef = (0, react_1.useCallback)((ref) => {
+        camera.current = ref;
+    }, []);
+    const [quad, setQuad] = (0, react_1.useState)(null);
+    const [stable, setStable] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        requestPermission();
+    }, [requestPermission]);
+    const frameProcessor = (0, react_native_vision_camera_1.useFrameProcessor)((frame) => {
+        'worklet';
+        const ratio = 480 / frame.width;
+        const w = Math.floor(frame.width * ratio);
+        const h = Math.floor(frame.height * ratio);
+        const resized = resize(frame, {
+            dataType: 'uint8',
+            pixelFormat: 'bgr',
+            scale: { width: w, height: h },
+        });
+        const mat = react_native_fast_opencv_1.OpenCV.frameBufferToMat(h, w, 3, resized);
+        react_native_fast_opencv_1.OpenCV.invoke('cvtColor', mat, mat, react_native_fast_opencv_1.ColorConversionCodes.COLOR_BGR2GRAY);
+        const kernel = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.Size, 4, 4);
+        const element = react_native_fast_opencv_1.OpenCV.invoke('getStructuringElement', react_native_fast_opencv_1.MorphShapes.MORPH_RECT, kernel);
+        react_native_fast_opencv_1.OpenCV.invoke('morphologyEx', mat, mat, react_native_fast_opencv_1.MorphTypes.MORPH_OPEN, element);
+        react_native_fast_opencv_1.OpenCV.invoke('GaussianBlur', mat, mat, kernel, 0);
+        react_native_fast_opencv_1.OpenCV.invoke('Canny', mat, mat, 75, 100);
+        const contours = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.PointVectorOfVectors);
+        react_native_fast_opencv_1.OpenCV.invoke('findContours', mat, contours, react_native_fast_opencv_1.RetrievalModes.RETR_LIST, react_native_fast_opencv_1.ContourApproximationModes.CHAIN_APPROX_SIMPLE);
+        let best = null;
+        let maxArea = 0;
+        const arr = react_native_fast_opencv_1.OpenCV.toJSValue(contours).array;
+        for (let i = 0; i < arr.length; i++) {
+            const c = react_native_fast_opencv_1.OpenCV.copyObjectFromVector(contours, i);
+            const { value: area } = react_native_fast_opencv_1.OpenCV.invoke('contourArea', c, false);
+            if (area < w * h * 0.1) {
+                continue;
+            }
+            const { value: peri } = react_native_fast_opencv_1.OpenCV.invoke('arcLength', c, true);
+            const approx = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.PointVector);
+            react_native_fast_opencv_1.OpenCV.invoke('approxPolyDP', c, approx, 0.02 * peri, true);
+            const size = react_native_fast_opencv_1.OpenCV.invokeWithOutParam('size', approx);
+            const { value: convex } = react_native_fast_opencv_1.OpenCV.invoke('isContourConvex', approx);
+            if (convex && size === 4 && area > maxArea) {
+                const pts = [];
+                for (let j = 0; j < 4; j++) {
+                    const p = react_native_fast_opencv_1.OpenCV.invoke('atPoint', approx, j, 0);
+                    pts.push({ x: p.x / ratio, y: p.y / ratio });
+                }
+                best = pts;
+                maxArea = area;
+            }
+        }
+        react_native_fast_opencv_1.OpenCV.clearBuffers();
+        (0, react_native_reanimated_1.runOnJS)(setQuad)(best);
+    }, [resize]);
+    (0, react_1.useEffect)(() => {
+        const s = (0, stability_1.checkStability)(quad);
+        setStable(s);
+    }, [quad]);
+    (0, react_1.useEffect)(() => {
+        const capture = async () => {
+            if (autoCapture && quad && stable >= minStableFrames && camera.current) {
+                const photo = await camera.current.takePhoto({ qualityPrioritization: 'quality' });
+                onCapture?.({ path: photo.path, quad });
+                setStable(0);
+            }
+        };
+        capture();
+    }, [autoCapture, minStableFrames, onCapture, quad, stable]);
+    if (!device || !hasPermission) {
+        return null;
+    }
+    return (react_1.default.createElement(react_native_1.View, { style: { flex: 1 } },
+        react_1.default.createElement(react_native_vision_camera_1.Camera, { ref: handleCameraRef, style: react_native_1.StyleSheet.absoluteFillObject, device: device, isActive: true, photo: true, frameProcessor: frameProcessor, frameProcessorFps: 15 }),
+        react_1.default.createElement(overlay_1.Overlay, { quad: quad, color: overlayColor }),
+        !autoCapture && (react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.button, onPress: async () => {
+                if (!camera.current) {
+                    return;
+                }
+                const photo = await camera.current.takePhoto({ qualityPrioritization: 'quality' });
+                onCapture?.({ path: photo.path, quad });
+            } }))));
+};
+exports.DocScanner = DocScanner;
+const styles = react_native_1.StyleSheet.create({
+    button: {
+        position: 'absolute',
+        bottom: 40,
+        alignSelf: 'center',
+        width: 70,
+        height: 70,
+        borderRadius: 35,
+        backgroundColor: '#fff',
+    },
+});

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './DocScanner';

package/dist/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DocScanner"), exports);

package/dist/types.d.ts

@@ -0,0 +1,4 @@
+export type Point = {
+    x: number;
+    y: number;
+};

package/dist/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/utils/overlay.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { Point } from '../types';
+type OverlayProps = {
+    quad: Point[] | null;
+    color?: string;
+};
+export declare const Overlay: React.FC<OverlayProps>;
+export {};

package/dist/utils/overlay.js

@@ -0,0 +1,52 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Overlay = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_skia_1 = require("@shopify/react-native-skia");
+const Overlay = ({ quad, color = '#e7a649' }) => {
+    const path = (0, react_1.useMemo)(() => {
+        if (!quad) {
+            return null;
+        }
+        const skPath = react_native_skia_1.Skia.Path.Make();
+        skPath.moveTo(quad[0].x, quad[0].y);
+        quad.slice(1).forEach((p) => skPath.lineTo(p.x, p.y));
+        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 })));
+};
+exports.Overlay = Overlay;

package/dist/utils/stability.d.ts

@@ -0,0 +1,2 @@
+import type { Point } from '../types';
+export declare function checkStability(current: Point[] | null): number;

package/dist/utils/stability.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkStability = checkStability;
+let last = null;
+let stable = 0;
+function checkStability(current) {
+    if (!current) {
+        stable = 0;
+        last = null;
+        return 0;
+    }
+    if (!last) {
+        last = current;
+        stable = 1;
+        return stable;
+    }
+    const diff = Math.hypot(avg(current.map((p) => p.x)) - avg(last.map((p) => p.x)), avg(current.map((p) => p.y)) - avg(last.map((p) => p.y)));
+    if (diff < 10) {
+        stable++;
+    }
+    else {
+        stable = 0;
+    }
+    last = current;
+    return stable;
+}
+const avg = (arr) => arr.reduce((a, b) => a + b, 0) / arr.length;

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "react-native-rectangle-doc-scanner",
+  "version": "0.1.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "prepare": "yarn build"
+  },
+  "peerDependencies": {
+    "@shopify/react-native-skia": "*",
+    "react": "*",
+    "react-native": "*",
+    "react-native-fast-opencv": "*",
+    "react-native-reanimated": "*",
+    "react-native-vision-camera": "*",
+    "react-native-worklets-core": "*",
+    "vision-camera-resize-plugin": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.41",
+    "@types/react-native": "0.73.0",
+    "typescript": "^5.3.3"
+  }
+}

package/src/DocScanner.tsx

@@ -0,0 +1,172 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import { Camera, useCameraDevice, useCameraPermission, useFrameProcessor } from 'react-native-vision-camera';
+import { useResizePlugin } from 'vision-camera-resize-plugin';
+import { runOnJS } from 'react-native-reanimated';
+import {
+  OpenCV,
+  ColorConversionCodes,
+  MorphTypes,
+  MorphShapes,
+  RetrievalModes,
+  ContourApproximationModes,
+  ObjectType,
+} from 'react-native-fast-opencv';
+import { Overlay } from './utils/overlay';
+import { checkStability } from './utils/stability';
+import type { Point } from './types';
+
+type CameraRef = {
+  takePhoto: (options: { qualityPrioritization: 'balanced' | 'quality' | 'speed' }) => Promise<{
+    path: string;
+  }>;
+};
+
+interface Props {
+  onCapture?: (photo: { path: string; quad: Point[] | null }) => void;
+  overlayColor?: string;
+  autoCapture?: boolean;
+  minStableFrames?: number;
+}
+
+export const DocScanner: React.FC<Props> = ({
+  onCapture,
+  overlayColor = '#e7a649',
+  autoCapture = true,
+  minStableFrames = 8,
+}) => {
+  const device = useCameraDevice('back');
+  const { hasPermission, requestPermission } = useCameraPermission();
+  const { resize } = useResizePlugin();
+  const camera = useRef<CameraRef | null>(null);
+  const handleCameraRef = useCallback((ref: CameraRef | null) => {
+    camera.current = ref;
+  }, []);
+  const [quad, setQuad] = useState<Point[] | null>(null);
+  const [stable, setStable] = useState(0);
+
+  useEffect(() => {
+    requestPermission();
+  }, [requestPermission]);
+
+  const frameProcessor = useFrameProcessor((frame) => {
+    'worklet';
+
+    const ratio = 480 / frame.width;
+    const w = Math.floor(frame.width * ratio);
+    const h = Math.floor(frame.height * ratio);
+    const resized = resize(frame, {
+      dataType: 'uint8',
+      pixelFormat: 'bgr',
+      scale: { width: w, height: h },
+    });
+
+    const mat = OpenCV.frameBufferToMat(h, w, 3, resized);
+
+    OpenCV.invoke('cvtColor', mat, mat, ColorConversionCodes.COLOR_BGR2GRAY);
+
+    const kernel = OpenCV.createObject(ObjectType.Size, 4, 4);
+    const element = OpenCV.invoke('getStructuringElement', MorphShapes.MORPH_RECT, kernel);
+    OpenCV.invoke('morphologyEx', mat, mat, MorphTypes.MORPH_OPEN, element);
+
+    OpenCV.invoke('GaussianBlur', mat, mat, kernel, 0);
+    OpenCV.invoke('Canny', mat, mat, 75, 100);
+
+    const contours = OpenCV.createObject(ObjectType.PointVectorOfVectors);
+    OpenCV.invoke('findContours', mat, contours, RetrievalModes.RETR_LIST, ContourApproximationModes.CHAIN_APPROX_SIMPLE);
+
+    let best: Point[] | null = null;
+    let maxArea = 0;
+
+    const arr = OpenCV.toJSValue(contours).array;
+
+    for (let i = 0; i < arr.length; i++) {
+      const c = OpenCV.copyObjectFromVector(contours, i);
+      const { value: area } = OpenCV.invoke('contourArea', c, false);
+
+      if (area < w * h * 0.1) {
+        continue;
+      }
+
+      const { value: peri } = OpenCV.invoke('arcLength', c, true);
+      const approx = OpenCV.createObject(ObjectType.PointVector);
+      OpenCV.invoke('approxPolyDP', c, approx, 0.02 * peri, true);
+      const size = OpenCV.invokeWithOutParam('size', approx);
+      const { value: convex } = OpenCV.invoke('isContourConvex', approx);
+
+      if (convex && size === 4 && area > maxArea) {
+        const pts: Point[] = [];
+        for (let j = 0; j < 4; j++) {
+          const p = OpenCV.invoke('atPoint', approx, j, 0);
+          pts.push({ x: p.x / ratio, y: p.y / ratio });
+        }
+        best = pts;
+        maxArea = area;
+      }
+    }
+
+    OpenCV.clearBuffers();
+    runOnJS(setQuad)(best);
+  }, [resize]);
+
+  useEffect(() => {
+    const s = checkStability(quad);
+    setStable(s);
+  }, [quad]);
+
+  useEffect(() => {
+    const capture = async () => {
+      if (autoCapture && quad && stable >= minStableFrames && camera.current) {
+        const photo = await camera.current.takePhoto({ qualityPrioritization: 'quality' });
+        onCapture?.({ path: photo.path, quad });
+        setStable(0);
+      }
+    };
+
+    capture();
+  }, [autoCapture, minStableFrames, onCapture, quad, stable]);
+
+  if (!device || !hasPermission) {
+    return null;
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <Camera
+        ref={handleCameraRef}
+        style={StyleSheet.absoluteFillObject}
+        device={device}
+        isActive
+        photo
+        frameProcessor={frameProcessor}
+        frameProcessorFps={15}
+      />
+      <Overlay quad={quad} color={overlayColor} />
+      {!autoCapture && (
+        <TouchableOpacity
+          style={styles.button}
+          onPress={async () => {
+            if (!camera.current) {
+              return;
+            }
+
+            const photo = await camera.current.takePhoto({ qualityPrioritization: 'quality' });
+            onCapture?.({ path: photo.path, quad });
+          }}
+        />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    position: 'absolute',
+    bottom: 40,
+    alignSelf: 'center',
+    width: 70,
+    height: 70,
+    borderRadius: 35,
+    backgroundColor: '#fff',
+  },
+});

package/src/external.d.ts

@@ -0,0 +1,109 @@
+declare module 'react-native-vision-camera' {
+  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 TakePhotoOptions = {
+    qualityPrioritization?: 'balanced' | 'quality' | 'speed';
+  };
+
+  export type CameraRef = {
+    takePhoto: (options?: TakePhotoOptions) => Promise<{
+      path: string;
+    }>;
+  };
+
+  export type CameraProps = {
+    ref?: (value: CameraRef | 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;
+    };
+  };
+
+  export function useResizePlugin(): {
+    resize: (frame: Frame, options: ResizeOptions) => ArrayBuffer;
+  };
+}
+
+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;
+}
+
+declare module '@shopify/react-native-skia' {
+  import type { ComponentType, ReactNode } from 'react';
+  import type { ViewStyle } from 'react-native';
+
+  export type SkPath = {
+    moveTo: (x: number, y: number) => void;
+    lineTo: (x: number, y: number) => void;
+    close: () => void;
+  };
+
+  export const Skia: {
+    Path: {
+      Make: () => SkPath;
+    };
+  };
+
+  export type CanvasProps = {
+    style?: ViewStyle;
+    children?: ReactNode;
+  };
+
+  export const Canvas: ComponentType<CanvasProps>;
+
+  export type PathProps = {
+    path: SkPath;
+    style?: 'stroke' | 'fill';
+    strokeWidth?: number;
+    color?: string;
+  };
+
+  export const Path: ComponentType<PathProps>;
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './DocScanner';

package/src/types.ts

@@ -0,0 +1 @@
+export type Point = { x: number; y: number };

package/src/utils/overlay.tsx

@@ -0,0 +1,28 @@
+import React, { useMemo } from 'react';
+import { Canvas, Path, Skia } from '@shopify/react-native-skia';
+import type { Point } from '../types';
+
+type OverlayProps = {
+  quad: Point[] | null;
+  color?: string;
+};
+
+export const Overlay: React.FC<OverlayProps> = ({ quad, color = '#e7a649' }) => {
+  const path = useMemo(() => {
+    if (!quad) {
+      return null;
+    }
+
+    const skPath = Skia.Path.Make();
+    skPath.moveTo(quad[0].x, quad[0].y);
+    quad.slice(1).forEach((p) => skPath.lineTo(p.x, p.y));
+    skPath.close();
+    return skPath;
+  }, [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>
+  );
+};

package/src/utils/stability.ts

@@ -0,0 +1,34 @@
+import type { Point } from '../types';
+
+let last: Point[] | null = null;
+let stable = 0;
+
+export function checkStability(current: Point[] | null): number {
+  if (!current) {
+    stable = 0;
+    last = null;
+    return 0;
+  }
+
+  if (!last) {
+    last = current;
+    stable = 1;
+    return stable;
+  }
+
+  const diff = Math.hypot(
+    avg(current.map((p) => p.x)) - avg(last.map((p) => p.x)),
+    avg(current.map((p) => p.y)) - avg(last.map((p) => p.y))
+  );
+
+  if (diff < 10) {
+    stable++;
+  } else {
+    stable = 0;
+  }
+
+  last = current;
+  return stable;
+}
+
+const avg = (arr: number[]) => arr.reduce((a, b) => a + b, 0) / arr.length;

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "commonjs",
+    "jsx": "react",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "outDir": "dist",
+    "declaration": true
+  },
+  "include": ["src"]
+}