react-native-rectangle-doc-scanner 3.23.0 → 3.26.0

package/dist/utils/overlay.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import type { Rectangle } from '../types';
 export interface ScannerOverlayProps {
-    /** 자동 캡처 중임을 표시할 때 true로 설정합니다. */
     active: boolean;
     color?: string;
     lineWidth?: number;

package/dist/utils/overlay.js

@@ -36,59 +36,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScannerOverlay = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
-const react_native_skia_1 = require("@shopify/react-native-skia");
-const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
-const withAlpha = (inputColor, alpha) => {
-    const parsed = (0, react_native_1.processColor)(inputColor);
-    const normalized = typeof parsed === 'number' ? parsed >>> 0 : null;
-    if (normalized == null) {
-        return inputColor;
-    }
-    const r = (normalized >> 16) & 0xff;
-    const g = (normalized >> 8) & 0xff;
-    const b = normalized & 0xff;
-    const clampedAlpha = clamp(alpha, 0, 1);
-    return `rgba(${r}, ${g}, ${b}, ${clampedAlpha})`;
-};
-const createPolygonPath = (polygon) => {
-    if (!polygon) {
-        return null;
-    }
-    const path = react_native_skia_1.Skia.Path.Make();
-    path.moveTo(polygon.topLeft.x, polygon.topLeft.y);
-    path.lineTo(polygon.topRight.x, polygon.topRight.y);
-    path.lineTo(polygon.bottomRight.x, polygon.bottomRight.y);
-    path.lineTo(polygon.bottomLeft.x, polygon.bottomLeft.y);
-    path.close();
-    return path;
-};
-const interpolate = (a, b, t) => ({
-    x: a.x + (b.x - a.x) * t,
-    y: a.y + (b.y - a.y) * t,
-});
-const createLinePath = (start, end) => {
-    const path = react_native_skia_1.Skia.Path.Make();
-    path.moveTo(start.x, start.y);
-    path.lineTo(end.x, end.y);
-    return path;
-};
-const createGridPaths = (polygon) => {
-    if (!polygon) {
-        return [];
-    }
-    const lines = [];
-    const steps = [1 / 3, 2 / 3];
-    steps.forEach((t) => {
-        const horizontalStart = interpolate(polygon.topLeft, polygon.bottomLeft, t);
-        const horizontalEnd = interpolate(polygon.topRight, polygon.bottomRight, t);
-        lines.push(createLinePath(horizontalStart, horizontalEnd));
-        const verticalStart = interpolate(polygon.topLeft, polygon.topRight, t);
-        const verticalEnd = interpolate(polygon.bottomLeft, polygon.bottomRight, t);
-        lines.push(createLinePath(verticalStart, verticalEnd));
-    });
-    return lines;
-};
-const getPolygonMetrics = (polygon) => {
+let SvgModule = null;
+try {
+    // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
+    SvgModule = require('react-native-svg');
+}
+catch (error) {
+    SvgModule = null;
+}
+const SCAN_DURATION_MS = 2200;
+const GRID_STEPS = [1 / 3, 2 / 3];
+const calculateMetrics = (polygon) => {
     const minX = Math.min(polygon.topLeft.x, polygon.bottomLeft.x, polygon.topRight.x, polygon.bottomRight.x);
     const maxX = Math.max(polygon.topLeft.x, polygon.bottomLeft.x, polygon.topRight.x, polygon.bottomRight.x);
     const minY = Math.min(polygon.topLeft.y, polygon.topRight.y, polygon.bottomLeft.y, polygon.bottomRight.y);
@@ -103,66 +61,120 @@ const getPolygonMetrics = (polygon) => {
         centerX: minX + (maxX - minX) / 2,
     };
 };
-const SCAN_DURATION_MS = 2200;
+const createPointsString = (polygon) => [
+    `${polygon.topLeft.x},${polygon.topLeft.y}`,
+    `${polygon.topRight.x},${polygon.topRight.y}`,
+    `${polygon.bottomRight.x},${polygon.bottomRight.y}`,
+    `${polygon.bottomLeft.x},${polygon.bottomLeft.y}`,
+].join(' ');
+const interpolatePoint = (a, b, t) => ({
+    x: a.x + (b.x - a.x) * t,
+    y: a.y + (b.y - a.y) * t,
+});
+const createGridLines = (polygon) => GRID_STEPS.flatMap((step) => {
+    const horizontalStart = interpolatePoint(polygon.topLeft, polygon.bottomLeft, step);
+    const horizontalEnd = interpolatePoint(polygon.topRight, polygon.bottomRight, step);
+    const verticalStart = interpolatePoint(polygon.topLeft, polygon.topRight, step);
+    const verticalEnd = interpolatePoint(polygon.bottomLeft, polygon.bottomRight, step);
+    return [
+        { x1: horizontalStart.x, y1: horizontalStart.y, x2: horizontalEnd.x, y2: horizontalEnd.y },
+        { x1: verticalStart.x, y1: verticalStart.y, x2: verticalEnd.x, y2: verticalEnd.y },
+    ];
+});
 const ScannerOverlay = ({ active, color = '#0b7ef4', lineWidth = react_native_1.StyleSheet.hairlineWidth, polygon, }) => {
-    const path = (0, react_1.useMemo)(() => createPolygonPath(polygon ?? null), [polygon]);
-    const gridPaths = (0, react_1.useMemo)(() => createGridPaths(polygon ?? null), [polygon]);
-    const metrics = (0, react_1.useMemo)(() => (polygon ? getPolygonMetrics(polygon) : null), [polygon]);
-    const gradientStart = (0, react_native_skia_1.useValue)((0, react_native_skia_1.vec)(0, 0));
-    const gradientEnd = (0, react_native_skia_1.useValue)((0, react_native_skia_1.vec)(0, 0));
-    const gradientColors = (0, react_native_skia_1.useValue)([
-        react_native_skia_1.Skia.Color(withAlpha(color, 0)),
-        react_native_skia_1.Skia.Color(withAlpha(color, 0.85)),
-        react_native_skia_1.Skia.Color(withAlpha(color, 0)),
-    ]);
-    const gradientPositions = (0, react_native_skia_1.useValue)([0, 0.5, 1]);
-    (0, react_1.useEffect)(() => {
-        if (!metrics) {
-            return;
+    const scanProgress = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const fallbackBase = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const metrics = (0, react_1.useMemo)(() => (polygon ? calculateMetrics(polygon) : null), [polygon]);
+    const scanBarHeight = (0, react_1.useMemo)(() => {
+        if (!metrics)
+            return 0;
+        return Math.max(metrics.height * 0.2, 16);
+    }, [metrics]);
+    const scanTranslate = (0, react_1.useMemo)(() => {
+        if (!metrics || scanBarHeight === 0) {
+            return null;
         }
-        let frame = null;
-        const transparentColor = react_native_skia_1.Skia.Color(withAlpha(color, 0));
-        const highlightColor = react_native_skia_1.Skia.Color(withAlpha(color, 0.9));
-        const bandSize = Math.max(metrics.height * 0.25, 20);
-        const animate = () => {
-            const now = Date.now() % SCAN_DURATION_MS;
-            const progress = now / SCAN_DURATION_MS;
-            const travel = metrics.height + bandSize * 2;
-            const start = metrics.minY - bandSize + travel * progress;
-            const end = start + bandSize;
-            const clampedStart = clamp(start, metrics.minY, metrics.maxY);
-            const clampedEnd = clamp(end, metrics.minY, metrics.maxY);
-            gradientStart.current = (0, react_native_skia_1.vec)(metrics.centerX, clampedStart);
-            gradientEnd.current = (0, react_native_skia_1.vec)(metrics.centerX, clampedEnd <= clampedStart ? clampedStart + 1 : clampedEnd);
-            gradientColors.current = [transparentColor, highlightColor, transparentColor];
-            frame = requestAnimationFrame(animate);
-        };
-        gradientStart.current = (0, react_native_skia_1.vec)(metrics.centerX, metrics.minY);
-        gradientEnd.current = (0, react_native_skia_1.vec)(metrics.centerX, metrics.maxY);
-        if (active) {
-            animate();
-        }
-        else {
-            gradientColors.current = [transparentColor, transparentColor, transparentColor];
+        return scanProgress.interpolate({
+            inputRange: [0, 1],
+            outputRange: [metrics.minY, Math.max(metrics.minY, metrics.maxY - scanBarHeight)],
+        });
+    }, [metrics, scanBarHeight, scanProgress]);
+    (0, react_1.useEffect)(() => {
+        if (!active || !metrics || metrics.height <= 1) {
+            scanProgress.stopAnimation();
+            scanProgress.setValue(0);
+            return undefined;
         }
+        const loop = react_native_1.Animated.loop(react_native_1.Animated.sequence([
+            react_native_1.Animated.timing(scanProgress, {
+                toValue: 1,
+                duration: SCAN_DURATION_MS,
+                easing: react_native_1.Easing.inOut(react_native_1.Easing.quad),
+                useNativeDriver: false,
+            }),
+            react_native_1.Animated.timing(scanProgress, {
+                toValue: 0,
+                duration: SCAN_DURATION_MS,
+                easing: react_native_1.Easing.inOut(react_native_1.Easing.quad),
+                useNativeDriver: false,
+            }),
+        ]));
+        loop.start();
         return () => {
-            if (frame !== null) {
-                cancelAnimationFrame(frame);
-            }
+            loop.stop();
         };
-    }, [active, color, gradientColors, gradientEnd, gradientStart, metrics]);
-    if (!polygon || !path || !metrics) {
+    }, [active, metrics, scanProgress]);
+    if (!polygon || !metrics || metrics.width <= 0 || metrics.height <= 0) {
         return null;
     }
-    const strokeColor = withAlpha(color, 0.9);
-    const fillColor = withAlpha(color, 0.18);
-    const gridColor = withAlpha(color, 0.35);
-    return (react_1.default.createElement(react_native_1.View, { pointerEvents: "none", style: react_native_1.StyleSheet.absoluteFillObject },
-        react_1.default.createElement(react_native_skia_1.Canvas, { style: react_native_1.StyleSheet.absoluteFillObject },
-            react_1.default.createElement(react_native_skia_1.Path, { path: path, color: fillColor, style: "fill" }),
-            gridPaths.map((gridPath, index) => (react_1.default.createElement(react_native_skia_1.Path, { key: `grid-${index}`, path: gridPath, color: gridColor, style: "stroke", strokeWidth: lineWidth }))),
-            react_1.default.createElement(react_native_skia_1.Path, { path: path, color: strokeColor, style: "stroke", strokeWidth: lineWidth }),
-            react_1.default.createElement(react_native_skia_1.Path, { path: path },
-                react_1.default.createElement(react_native_skia_1.LinearGradient, { start: gradientStart, end: gradientEnd, colors: gradientColors, positions: gradientPositions })))));
+    if (SvgModule) {
+        const { default: Svg, Polygon, Line, Defs, LinearGradient, Stop, Rect } = SvgModule;
+        const AnimatedRect = react_native_1.Animated.createAnimatedComponent(Rect);
+        const gridLines = createGridLines(polygon);
+        const points = createPointsString(polygon);
+        return (react_1.default.createElement(react_native_1.View, { pointerEvents: "none", style: react_native_1.StyleSheet.absoluteFill },
+            react_1.default.createElement(Svg, { style: react_native_1.StyleSheet.absoluteFill },
+                react_1.default.createElement(Polygon, { points: points, fill: color, opacity: 0.15 }),
+                gridLines.map((line, index) => (react_1.default.createElement(Line, { key: `grid-${index}`, x1: line.x1, y1: line.y1, x2: line.x2, y2: line.y2, stroke: color, strokeWidth: lineWidth, opacity: 0.5 }))),
+                react_1.default.createElement(Polygon, { points: points, stroke: color, strokeWidth: lineWidth, fill: "none" }),
+                react_1.default.createElement(Defs, null,
+                    react_1.default.createElement(LinearGradient, { id: "scanGradient", x1: "0", y1: "0", x2: "0", y2: "1" },
+                        react_1.default.createElement(Stop, { offset: "0%", stopColor: "rgba(255,255,255,0)" }),
+                        react_1.default.createElement(Stop, { offset: "50%", stopColor: color, stopOpacity: 0.8 }),
+                        react_1.default.createElement(Stop, { offset: "100%", stopColor: "rgba(255,255,255,0)" }))),
+                active && scanTranslate && (react_1.default.createElement(AnimatedRect, { x: metrics.minX, width: metrics.width, height: scanBarHeight, fill: "url(#scanGradient)", y: scanTranslate })))));
+    }
+    // Fallback rendering without react-native-svg
+    const relativeTranslate = scanTranslate != null ? react_native_1.Animated.subtract(scanTranslate, metrics.minY) : fallbackBase;
+    return (react_1.default.createElement(react_native_1.View, { pointerEvents: "none", style: react_native_1.StyleSheet.absoluteFill },
+        react_1.default.createElement(react_native_1.View, { style: [
+                styles.fallbackBox,
+                {
+                    left: metrics.minX,
+                    top: metrics.minY,
+                    width: metrics.width,
+                    height: metrics.height,
+                    borderColor: color,
+                    borderWidth: lineWidth,
+                },
+            ] }, active && (react_1.default.createElement(react_native_1.Animated.View, { style: [
+                styles.fallbackScanBar,
+                {
+                    backgroundColor: color,
+                    height: scanBarHeight,
+                    transform: [{ translateY: relativeTranslate }],
+                },
+            ] })))));
 };
 exports.ScannerOverlay = ScannerOverlay;
+const styles = react_native_1.StyleSheet.create({
+    fallbackBox: {
+        position: 'absolute',
+        backgroundColor: 'rgba(11, 126, 244, 0.1)',
+        overflow: 'hidden',
+    },
+    fallbackScanBar: {
+        width: '100%',
+        opacity: 0.4,
+    },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-rectangle-doc-scanner",
-  "version": "3.23.0",
+  "version": "3.26.0",
   "description": "Native-backed document scanner for React Native with customizable overlays.",
   "license": "MIT",
   "main": "dist/index.js",
@@ -30,10 +30,10 @@
     "*.json"
   ],
   "peerDependencies": {
-    "@shopify/react-native-skia": "*",
     "react": "*",
     "react-native": "*",
-    "react-native-perspective-image-cropper": "*"
+    "react-native-perspective-image-cropper": "*",
+    "react-native-svg": "*"
   },
   "devDependencies": {
     "@types/react": "^18.2.41",

package/src/external.d.ts

@@ -1,55 +1,3 @@
-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;
-    };
-    Color: (color: string | number) => number;
-  };
-
-  export type CanvasProps = {
-    style?: ViewStyle;
-    children?: ReactNode;
-  };
-
-  export const Canvas: ComponentType<CanvasProps>;
-
-  export type PathProps = {
-    path: SkPath;
-    style?: 'stroke' | 'fill';
-    strokeWidth?: number;
-    color?: string;
-    children?: ReactNode;
-  };
-
-  export const Path: ComponentType<PathProps>;
-
-  export type SkiaValue<T> = {
-    current: T;
-  };
-
-  export const useValue: <T>(initialValue: T) => SkiaValue<T>;
-
-  export const vec: (x: number, y: number) => { x: number; y: number };
-
-  export type LinearGradientProps = {
-    start: SkiaValue<{ x: number; y: number }> | { x: number; y: number };
-    end: SkiaValue<{ x: number; y: number }> | { x: number; y: number };
-    colors: SkiaValue<number[]> | number[];
-    positions?: SkiaValue<number[]> | number[];
-  };
-
-  export const LinearGradient: ComponentType<LinearGradientProps>;
-}
-
 declare module 'react-native-perspective-image-cropper' {
   import type { ComponentType } from 'react';
 
@@ -135,3 +83,65 @@ declare module 'react-native-document-scanner' {
     capture(): Promise<DocumentScannerResult>;
   }
 }
+
+declare module 'react-native-svg' {
+  import type { ComponentType, ReactNode } from 'react';
+
+  export type SvgProps = {
+    children?: ReactNode;
+    style?: any;
+    width?: number | string;
+    height?: number | string;
+    viewBox?: string;
+  };
+
+  export type PolygonProps = {
+    points: string;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    opacity?: number;
+  };
+
+  export type LineProps = {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    stroke?: string;
+    strokeWidth?: number;
+    opacity?: number;
+  };
+
+  export type RectProps = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    fill?: string;
+  };
+
+  export type StopProps = {
+    offset: string;
+    stopColor: string;
+    stopOpacity?: number;
+  };
+
+  export type LinearGradientProps = {
+    id: string;
+    x1?: string;
+    y1?: string;
+    x2?: string;
+    y2?: string;
+    children?: ReactNode;
+  };
+
+  declare const Svg: ComponentType<SvgProps>;
+  export default Svg;
+  export const Polygon: ComponentType<PolygonProps>;
+  export const Line: ComponentType<LineProps>;
+  export const Rect: ComponentType<RectProps>;
+  export const Defs: ComponentType<{ children?: ReactNode }>;
+  export const LinearGradient: ComponentType<LinearGradientProps>;
+  export const Stop: ComponentType<StopProps>;
+}

package/src/utils/overlay.tsx

@@ -1,94 +1,54 @@
-import React, { useEffect, useMemo } from 'react';
-import { View, processColor, StyleSheet } from 'react-native';
-import {
-  Canvas,
-  LinearGradient,
-  Path,
-  Skia,
-  SkPath,
-  useValue,
-  vec,
-} from '@shopify/react-native-skia';
-import type { Point, Rectangle } from '../types';
+import React, { useEffect, useMemo, useRef } from 'react';
+import { Animated, Easing, StyleSheet, View } from 'react-native';
+import type { Rectangle } from '../types';
 
-export interface ScannerOverlayProps {
-  /** 자동 캡처 중임을 표시할 때 true로 설정합니다. */
-  active: boolean;
-  color?: string;
-  lineWidth?: number;
-  polygon?: Rectangle | null;
-}
-
-const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(max, value));
-
-const withAlpha = (inputColor: string, alpha: number): string => {
-  const parsed = processColor(inputColor);
-  const normalized = typeof parsed === 'number' ? parsed >>> 0 : null;
-
-  if (normalized == null) {
-    return inputColor;
-  }
-
-  const r = (normalized >> 16) & 0xff;
-  const g = (normalized >> 8) & 0xff;
-  const b = normalized & 0xff;
-  const clampedAlpha = clamp(alpha, 0, 1);
-
-  return `rgba(${r}, ${g}, ${b}, ${clampedAlpha})`;
-};
-
-const createPolygonPath = (polygon: Rectangle | null): SkPath | null => {
-  if (!polygon) {
-    return null;
-  }
-
-  const path = Skia.Path.Make();
-  path.moveTo(polygon.topLeft.x, polygon.topLeft.y);
-  path.lineTo(polygon.topRight.x, polygon.topRight.y);
-  path.lineTo(polygon.bottomRight.x, polygon.bottomRight.y);
-  path.lineTo(polygon.bottomLeft.x, polygon.bottomLeft.y);
-  path.close();
-  return path;
-};
-
-const interpolate = (a: Point, b: Point, t: number): Point => ({
-  x: a.x + (b.x - a.x) * t,
-  y: a.y + (b.y - a.y) * t,
-});
+let SvgModule: typeof import('react-native-svg') | null = null;
 
-const createLinePath = (start: Point, end: Point): SkPath => {
-  const path = Skia.Path.Make();
-  path.moveTo(start.x, start.y);
-  path.lineTo(end.x, end.y);
-  return path;
-};
-
-const createGridPaths = (polygon: Rectangle | null): SkPath[] => {
-  if (!polygon) {
-    return [];
-  }
-
-  const lines: SkPath[] = [];
-  const steps = [1 / 3, 2 / 3];
-
-  steps.forEach((t) => {
-    const horizontalStart = interpolate(polygon.topLeft, polygon.bottomLeft, t);
-    const horizontalEnd = interpolate(polygon.topRight, polygon.bottomRight, t);
-    lines.push(createLinePath(horizontalStart, horizontalEnd));
-
-    const verticalStart = interpolate(polygon.topLeft, polygon.topRight, t);
-    const verticalEnd = interpolate(polygon.bottomLeft, polygon.bottomRight, t);
-    lines.push(createLinePath(verticalStart, verticalEnd));
-  });
+try {
+  // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
+  SvgModule = require('react-native-svg');
+} catch (error) {
+  SvgModule = null;
+}
 
-  return lines;
+const SCAN_DURATION_MS = 2200;
+const GRID_STEPS = [1 / 3, 2 / 3];
+
+type PolygonMetrics = {
+  minX: number;
+  maxX: number;
+  minY: number;
+  maxY: number;
+  width: number;
+  height: number;
+  centerX: number;
 };
 
-const getPolygonMetrics = (polygon: Rectangle) => {
-  const minX = Math.min(polygon.topLeft.x, polygon.bottomLeft.x, polygon.topRight.x, polygon.bottomRight.x);
-  const maxX = Math.max(polygon.topLeft.x, polygon.bottomLeft.x, polygon.topRight.x, polygon.bottomRight.x);
-  const minY = Math.min(polygon.topLeft.y, polygon.topRight.y, polygon.bottomLeft.y, polygon.bottomRight.y);
-  const maxY = Math.max(polygon.topLeft.y, polygon.topRight.y, polygon.bottomLeft.y, polygon.bottomRight.y);
+const calculateMetrics = (polygon: Rectangle): PolygonMetrics => {
+  const minX = Math.min(
+    polygon.topLeft.x,
+    polygon.bottomLeft.x,
+    polygon.topRight.x,
+    polygon.bottomRight.x,
+  );
+  const maxX = Math.max(
+    polygon.topLeft.x,
+    polygon.bottomLeft.x,
+    polygon.topRight.x,
+    polygon.bottomRight.x,
+  );
+  const minY = Math.min(
+    polygon.topLeft.y,
+    polygon.topRight.y,
+    polygon.bottomLeft.y,
+    polygon.bottomRight.y,
+  );
+  const maxY = Math.max(
+    polygon.topLeft.y,
+    polygon.topRight.y,
+    polygon.bottomLeft.y,
+    polygon.bottomRight.y,
+  );
 
   return {
     minX,
@@ -101,7 +61,38 @@ const getPolygonMetrics = (polygon: Rectangle) => {
   };
 };
 
-const SCAN_DURATION_MS = 2200;
+const createPointsString = (polygon: Rectangle): string =>
+  [
+    `${polygon.topLeft.x},${polygon.topLeft.y}`,
+    `${polygon.topRight.x},${polygon.topRight.y}`,
+    `${polygon.bottomRight.x},${polygon.bottomRight.y}`,
+    `${polygon.bottomLeft.x},${polygon.bottomLeft.y}`,
+  ].join(' ');
+
+const interpolatePoint = (a: { x: number; y: number }, b: { x: number; y: number }, t: number) => ({
+  x: a.x + (b.x - a.x) * t,
+  y: a.y + (b.y - a.y) * t,
+});
+
+const createGridLines = (polygon: Rectangle) =>
+  GRID_STEPS.flatMap((step) => {
+    const horizontalStart = interpolatePoint(polygon.topLeft, polygon.bottomLeft, step);
+    const horizontalEnd = interpolatePoint(polygon.topRight, polygon.bottomRight, step);
+    const verticalStart = interpolatePoint(polygon.topLeft, polygon.topRight, step);
+    const verticalEnd = interpolatePoint(polygon.bottomLeft, polygon.bottomRight, step);
+
+    return [
+      { x1: horizontalStart.x, y1: horizontalStart.y, x2: horizontalEnd.x, y2: horizontalEnd.y },
+      { x1: verticalStart.x, y1: verticalStart.y, x2: verticalEnd.x, y2: verticalEnd.y },
+    ];
+  });
+
+export interface ScannerOverlayProps {
+  active: boolean;
+  color?: string;
+  lineWidth?: number;
+  polygon?: Rectangle | null;
+}
 
 export const ScannerOverlay: React.FC<ScannerOverlayProps> = ({
   active,
@@ -109,90 +100,150 @@ export const ScannerOverlay: React.FC<ScannerOverlayProps> = ({
   lineWidth = StyleSheet.hairlineWidth,
   polygon,
 }) => {
-  const path = useMemo(() => createPolygonPath(polygon ?? null), [polygon]);
-  const gridPaths = useMemo(() => createGridPaths(polygon ?? null), [polygon]);
-  const metrics = useMemo(() => (polygon ? getPolygonMetrics(polygon) : null), [polygon]);
-
-  const gradientStart = useValue(vec(0, 0));
-  const gradientEnd = useValue(vec(0, 0));
-  const gradientColors = useValue<number[]>([
-    Skia.Color(withAlpha(color, 0)),
-    Skia.Color(withAlpha(color, 0.85)),
-    Skia.Color(withAlpha(color, 0)),
-  ]);
-  const gradientPositions = useValue<number[]>([0, 0.5, 1]);
+  const scanProgress = useRef(new Animated.Value(0)).current;
+  const fallbackBase = useRef(new Animated.Value(0)).current;
 
-  useEffect(() => {
-    if (!metrics) {
-      return;
-    }
+  const metrics = useMemo(() => (polygon ? calculateMetrics(polygon) : null), [polygon]);
 
-    let frame: number | null = null;
-    const transparentColor = Skia.Color(withAlpha(color, 0));
-    const highlightColor = Skia.Color(withAlpha(color, 0.9));
-    const bandSize = Math.max(metrics.height * 0.25, 20);
-
-    const animate = () => {
-      const now = Date.now() % SCAN_DURATION_MS;
-      const progress = now / SCAN_DURATION_MS;
-      const travel = metrics.height + bandSize * 2;
-      const start = metrics.minY - bandSize + travel * progress;
-      const end = start + bandSize;
-
-      const clampedStart = clamp(start, metrics.minY, metrics.maxY);
-      const clampedEnd = clamp(end, metrics.minY, metrics.maxY);
-
-      gradientStart.current = vec(metrics.centerX, clampedStart);
-      gradientEnd.current = vec(
-        metrics.centerX,
-        clampedEnd <= clampedStart ? clampedStart + 1 : clampedEnd,
-      );
-      gradientColors.current = [transparentColor, highlightColor, transparentColor];
-
-      frame = requestAnimationFrame(animate);
-    };
+  const scanBarHeight = useMemo(() => {
+    if (!metrics) return 0;
+    return Math.max(metrics.height * 0.2, 16);
+  }, [metrics]);
 
-    gradientStart.current = vec(metrics.centerX, metrics.minY);
-    gradientEnd.current = vec(metrics.centerX, metrics.maxY);
+  const scanTranslate = useMemo(() => {
+    if (!metrics || scanBarHeight === 0) {
+      return null;
+    }
+
+    return scanProgress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [metrics.minY, Math.max(metrics.minY, metrics.maxY - scanBarHeight)],
+    });
+  }, [metrics, scanBarHeight, scanProgress]);
 
-    if (active) {
-      animate();
-    } else {
-      gradientColors.current = [transparentColor, transparentColor, transparentColor];
+  useEffect(() => {
+    if (!active || !metrics || metrics.height <= 1) {
+      scanProgress.stopAnimation();
+      scanProgress.setValue(0);
+      return undefined;
     }
 
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(scanProgress, {
+          toValue: 1,
+          duration: SCAN_DURATION_MS,
+          easing: Easing.inOut(Easing.quad),
+          useNativeDriver: false,
+        }),
+        Animated.timing(scanProgress, {
+          toValue: 0,
+          duration: SCAN_DURATION_MS,
+          easing: Easing.inOut(Easing.quad),
+          useNativeDriver: false,
+        }),
+      ]),
+    );
+
+    loop.start();
     return () => {
-      if (frame !== null) {
-        cancelAnimationFrame(frame);
-      }
+      loop.stop();
     };
-  }, [active, color, gradientColors, gradientEnd, gradientStart, metrics]);
+  }, [active, metrics, scanProgress]);
 
-  if (!polygon || !path || !metrics) {
+  if (!polygon || !metrics || metrics.width <= 0 || metrics.height <= 0) {
     return null;
   }
 
-  const strokeColor = withAlpha(color, 0.9);
-  const fillColor = withAlpha(color, 0.18);
-  const gridColor = withAlpha(color, 0.35);
+  if (SvgModule) {
+    const { default: Svg, Polygon, Line, Defs, LinearGradient, Stop, Rect } = SvgModule;
+    const AnimatedRect = Animated.createAnimatedComponent(Rect);
+
+    const gridLines = createGridLines(polygon);
+    const points = createPointsString(polygon);
+
+    return (
+      <View pointerEvents="none" style={StyleSheet.absoluteFill}>
+        <Svg style={StyleSheet.absoluteFill}>
+          <Polygon points={points} fill={color} opacity={0.15} />
+          {gridLines.map((line, index) => (
+            <Line
+              key={`grid-${index}`}
+              x1={line.x1}
+              y1={line.y1}
+              x2={line.x2}
+              y2={line.y2}
+              stroke={color}
+              strokeWidth={lineWidth}
+              opacity={0.5}
+            />
+          ))}
+          <Polygon points={points} stroke={color} strokeWidth={lineWidth} fill="none" />
+          <Defs>
+            <LinearGradient id="scanGradient" x1="0" y1="0" x2="0" y2="1">
+              <Stop offset="0%" stopColor="rgba(255,255,255,0)" />
+              <Stop offset="50%" stopColor={color} stopOpacity={0.8} />
+              <Stop offset="100%" stopColor="rgba(255,255,255,0)" />
+            </LinearGradient>
+          </Defs>
+          {active && scanTranslate && (
+            <AnimatedRect
+              x={metrics.minX}
+              width={metrics.width}
+              height={scanBarHeight}
+              fill="url(#scanGradient)"
+              y={scanTranslate}
+            />
+          )}
+        </Svg>
+      </View>
+    );
+  }
+
+  // Fallback rendering without react-native-svg
+  const relativeTranslate =
+    scanTranslate != null ? Animated.subtract(scanTranslate, metrics.minY) : fallbackBase;
 
   return (
-    <View pointerEvents="none" style={StyleSheet.absoluteFillObject}>
-      <Canvas style={StyleSheet.absoluteFillObject}>
-        <Path path={path} color={fillColor} style="fill" />
-        {gridPaths.map((gridPath, index) => (
-          <Path key={`grid-${index}`} path={gridPath} color={gridColor} style="stroke" strokeWidth={lineWidth} />
-        ))}
-        <Path path={path} color={strokeColor} style="stroke" strokeWidth={lineWidth} />
-        <Path path={path}>
-          <LinearGradient
-            start={gradientStart}
-            end={gradientEnd}
-            colors={gradientColors}
-            positions={gradientPositions}
+    <View pointerEvents="none" style={StyleSheet.absoluteFill}>
+      <View
+        style={[
+          styles.fallbackBox,
+          {
+            left: metrics.minX,
+            top: metrics.minY,
+            width: metrics.width,
+            height: metrics.height,
+            borderColor: color,
+            borderWidth: lineWidth,
+          },
+        ]}
+      >
+        {active && (
+          <Animated.View
+            style={[
+              styles.fallbackScanBar,
+              {
+                backgroundColor: color,
+                height: scanBarHeight,
+                transform: [{ translateY: relativeTranslate }],
+              },
+            ]}
           />
-        </Path>
-      </Canvas>
+        )}
+      </View>
     </View>
   );
 };
+
+const styles = StyleSheet.create({
+  fallbackBox: {
+    position: 'absolute',
+    backgroundColor: 'rgba(11, 126, 244, 0.1)',
+    overflow: 'hidden',
+  },
+  fallbackScanBar: {
+    width: '100%',
+    opacity: 0.4,
+  },
+});