@mleonard9/vin-scanner 1.5.0 → 1.5.2

package/src/ScannerChromeOverlay.tsx

@@ -0,0 +1,214 @@
+import React from 'react';
+import {
+  View,
+  Pressable,
+  Text,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+type ScannerChromeOverlayProps = {
+  onBackPress?: () => void;
+  onManualEntryPress?: () => void;
+  onFlashPress?: () => void;
+  isTorchOn?: boolean;
+  backContent?: React.ReactNode;
+  manualEntryContent?: React.ReactNode;
+  flashOnContent?: React.ReactNode;
+  flashOffContent?: React.ReactNode;
+  centerContent?: React.ReactNode;
+  frameSize?: number;
+  cornerColor?: string;
+  topOffset?: number;
+  bottomOffset?: number;
+};
+
+const ActionButton = ({
+  onPress,
+  children,
+  style,
+}: {
+  onPress?: () => void;
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}) => {
+  if (!onPress) {
+    return null;
+  }
+
+  return (
+    <Pressable onPress={onPress} style={[styles.actionButton, style]}>
+      {children}
+    </Pressable>
+  );
+};
+
+export function ScannerChromeOverlay({
+  onBackPress,
+  onManualEntryPress,
+  onFlashPress,
+  isTorchOn = false,
+  backContent,
+  manualEntryContent,
+  flashOnContent,
+  flashOffContent,
+  centerContent,
+  frameSize = 240,
+  cornerColor = 'white',
+  topOffset = 64,
+  bottomOffset = 64,
+}: ScannerChromeOverlayProps) {
+  const halfFrame = frameSize / 2;
+
+  return (
+    <>
+      <View pointerEvents="box-none" style={styles.actionContainer}>
+        <ActionButton
+          onPress={onBackPress}
+          style={[styles.backButton, { top: topOffset }]}
+        >
+          {backContent ?? <Text style={styles.actionText}>Back</Text>}
+        </ActionButton>
+
+        <ActionButton
+          onPress={onManualEntryPress}
+          style={[styles.manualButton, { top: topOffset }]}
+        >
+          {manualEntryContent ?? <Text style={styles.actionText}>VIN</Text>}
+        </ActionButton>
+
+        <ActionButton
+          onPress={onFlashPress}
+          style={[styles.flashButton, { bottom: bottomOffset }]}
+        >
+          {isTorchOn
+            ? (flashOnContent ?? (
+                <Text style={styles.actionText}>Torch Off</Text>
+              ))
+            : (flashOffContent ?? <Text style={styles.actionText}>Torch</Text>)}
+        </ActionButton>
+
+        {centerContent ? (
+          <View style={styles.centerContent}>{centerContent}</View>
+        ) : null}
+      </View>
+
+      <View
+        pointerEvents="none"
+        style={[
+          styles.viewFinderOverlay,
+          {
+            width: frameSize,
+            height: frameSize,
+            marginLeft: -halfFrame,
+            marginTop: -halfFrame,
+          },
+        ]}
+      >
+        <Corner position="topLeft" color={cornerColor} />
+        <Corner position="topRight" color={cornerColor} />
+        <Corner position="bottomLeft" color={cornerColor} />
+        <Corner position="bottomRight" color={cornerColor} />
+      </View>
+    </>
+  );
+}
+
+function Corner({
+  position,
+  color,
+}: {
+  position: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+  color: string;
+}) {
+  const styleMap = {
+    topLeft: styles.cornerTopLeft,
+    topRight: styles.cornerTopRight,
+    bottomLeft: styles.cornerBottomLeft,
+    bottomRight: styles.cornerBottomRight,
+  };
+
+  return <View style={[styleMap[position], { borderColor: color }]} />;
+}
+
+const styles = StyleSheet.create({
+  actionContainer: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 100,
+  },
+  actionButton: {
+    position: 'absolute',
+    zIndex: 101,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 999,
+    backgroundColor: 'rgba(0, 0, 0, 0.45)',
+  },
+  backButton: {
+    left: 24,
+  },
+  manualButton: {
+    right: 24,
+  },
+  flashButton: {
+    left: 24,
+  },
+  actionText: {
+    color: 'white',
+    fontSize: 14,
+    fontWeight: '700',
+  },
+  centerContent: {
+    position: 'absolute',
+    top: 40,
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    zIndex: 101,
+  },
+  viewFinderOverlay: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    borderColor: 'transparent',
+  },
+  cornerTopLeft: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: 20,
+    height: 20,
+    borderTopWidth: 2,
+    borderLeftWidth: 2,
+  },
+  cornerTopRight: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    width: 20,
+    height: 20,
+    borderTopWidth: 2,
+    borderRightWidth: 2,
+  },
+  cornerBottomLeft: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    width: 20,
+    height: 20,
+    borderBottomWidth: 2,
+    borderLeftWidth: 2,
+  },
+  cornerBottomRight: {
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+    width: 20,
+    height: 20,
+    borderBottomWidth: 2,
+    borderRightWidth: 2,
+  },
+});
+
+export default ScannerChromeOverlay;

package/src/TextVinPrompt.tsx

@@ -32,7 +32,7 @@ export function TextVinPrompt({
   onDismiss,
   title = 'VIN detected',
   subtitle,
-  buttonLabel = 'Use VIN',
+  buttonLabel = 'Book It',
   buttonColor = '#0A84FF',
 }: TextVinPromptProps) {
   if (!visible) return null;
@@ -52,8 +52,11 @@ export function TextVinPrompt({
             style={styles.list}
             contentContainerStyle={styles.listContent}
           >
-            {candidates.map((candidate) => (
-              <View key={candidate.value} style={styles.row}>
+            {candidates.map((candidate, index) => (
+              <View
+                key={`${candidate.value}-${index}`}
+                style={[styles.row, index > 0 && styles.rowBorder]}
+              >
                 <Text style={styles.vin} numberOfLines={1}>
                   {candidate.value}
                 </Text>
@@ -81,7 +84,7 @@ export function TextVinPrompt({
 const styles = StyleSheet.create({
   backdrop: {
     flex: 1,
-    backgroundColor: 'rgba(0,0,0,0.55)',
+    backgroundColor: 'rgba(0,0,0,0.4)',
     alignItems: 'center',
     justifyContent: 'center',
     padding: 16,
@@ -89,38 +92,50 @@ const styles = StyleSheet.create({
   sheet: {
     width: '100%',
     maxWidth: 420,
-    backgroundColor: '#0D0D0D',
-    borderRadius: 16,
-    padding: 16,
+    backgroundColor: 'white',
+    borderRadius: 20,
+    paddingVertical: 24,
+    paddingHorizontal: 16,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
   },
   title: {
-    color: 'white',
+    color: '#111827',
     fontSize: 18,
     fontWeight: '700',
-    marginBottom: 12,
+    marginBottom: 8,
   },
   subtitle: {
-    color: '#D1D5DB',
+    color: '#4B5563',
     fontSize: 14,
-    marginBottom: 8,
+    marginBottom: 12,
   },
   list: {
     maxHeight: 220,
   },
   listContent: {
-    gap: 12,
+    paddingBottom: 4,
   },
   row: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    gap: 12,
+    paddingVertical: 10,
+  },
+  rowBorder: {
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: '#E5E7EB',
   },
   vin: {
     flex: 1,
-    color: 'white',
+    color: '#111827',
     fontSize: 16,
+    fontWeight: '700',
     letterSpacing: 1,
+    marginRight: 12,
   },
   button: {
     paddingHorizontal: 14,
@@ -133,13 +148,13 @@ const styles = StyleSheet.create({
     fontWeight: '700',
   },
   dismiss: {
-    marginTop: 12,
+    marginTop: 8,
     alignSelf: 'flex-end',
     paddingHorizontal: 8,
     paddingVertical: 6,
   },
   dismissText: {
-    color: '#9CA3AF',
+    color: '#6B7280',
     fontSize: 14,
   },
 });

package/src/index.tsx

@@ -45,7 +45,9 @@ export const Camera = forwardRef(function Camera(
 
   const handleDetections = useRunOnJS(
     (payload: WorkletPayload) => {
-      const candidates = buildVinCandidates(payload, resolvedOptions);
+      const candidates = buildVinCandidates(payload, resolvedOptions).filter(
+        (c) => c.confidence >= resolvedOptions.detection.minConfidence
+      );
       const barcodeCandidates = candidates.filter(
         (c) => c.source === 'barcode'
       );
@@ -306,8 +308,9 @@ function useTextScanner(
     }
     return createTextRecognitionPlugin({
       language: options.language,
+      validationPattern: options.validationPattern,
     });
-  }, [options.enabled, options.language]);
+  }, [options.enabled, options.language, options.validationPattern]);
 }
 
 export type {
@@ -334,3 +337,4 @@ export { isValidVin } from './vinUtils';
 export { TextVinPrompt } from './TextVinPrompt';
 export { PendingVinBanner } from './PendingVinBanner';
 export { ManualVinInput } from './ManualVinInput';
+export { ScannerChromeOverlay } from './ScannerChromeOverlay';

package/src/scanBarcodes.ts

@@ -40,15 +40,6 @@ const KNOWN_FORMATS: BarcodeFormat[] = [
 ];
 
 type NativeBarcodeOptionMap = Partial<Record<BarcodeFormat, boolean>>;
-type SerializableValue =
-  | string
-  | number
-  | boolean
-  | null
-  | undefined
-  | ArrayBuffer
-  | SerializableValue[]
-  | { [key: string]: SerializableValue };
 
 const toNativeBarcodeOptions = (
   formats?: ScanBarcodeOptions
@@ -73,36 +64,47 @@ const unwrapPluginFrame = (frame: Frame): Frame => {
   return candidate.__frame ?? frame;
 };
 
-const toSerializableValue = (value: unknown): SerializableValue => {
+const toSerializableArgs = (args: BarcodePluginArgs): BarcodePluginArgs => {
   'worklet';
-  if (
-    value == null ||
-    typeof value === 'string' ||
-    typeof value === 'number' ||
-    typeof value === 'boolean'
-  ) {
-    return value;
-  }
-  if (value instanceof ArrayBuffer) {
-    return value;
-  }
-  if (Array.isArray(value)) {
-    return value.map((item) => toSerializableValue(item));
+  const serialized: BarcodePluginArgs = {};
+  const formats: BarcodeFormat[] = [
+    'all',
+    'aztec',
+    'code-128',
+    'code-39',
+    'code-93',
+    'codabar',
+    'data-matrix',
+    'ean-13',
+    'ean-8',
+    'itf',
+    'pdf-417',
+    'qr',
+    'upc-a',
+    'upc-e',
+  ];
+
+  formats.forEach((format) => {
+    const value = args[format];
+    if (typeof value === 'boolean') {
+      serialized[format] = value;
+    }
+  });
+
+  if (args.orientation) {
+    serialized.orientation = args.orientation;
   }
-  if (typeof value === 'object') {
-    const record = value as Record<string, unknown>;
-    const output: { [key: string]: SerializableValue } = {};
-    Object.keys(record).forEach((key) => {
-      output[key] = toSerializableValue(record[key]);
-    });
-    return output;
+
+  if (args.scanRegion) {
+    serialized.scanRegion = {
+      x: args.scanRegion.x,
+      y: args.scanRegion.y,
+      width: args.scanRegion.width,
+      height: args.scanRegion.height,
+    };
   }
-  return undefined;
-};
 
-const toSerializableArgs = (args: BarcodePluginArgs): BarcodePluginArgs => {
-  'worklet';
-  return toSerializableValue(args) as BarcodePluginArgs;
+  return serialized;
 };
 
 const toFloat32Array = (input: unknown): Float32Array | undefined => {
@@ -214,11 +216,15 @@ export function createBarcodeScannerPlugin(
         overrides || orientation
           ? mergeArgs(baseOptions, overrides, orientation ?? null)
           : baseOptions;
-      const result = plugin.call(
-        unwrapPluginFrame(frame),
-        toSerializableArgs(args)
-      );
-      return normalizeBarcodeDetections(result);
+      try {
+        const result = plugin.call(
+          unwrapPluginFrame(frame),
+          toSerializableArgs(args)
+        );
+        return normalizeBarcodeDetections(result);
+      } catch {
+        return [];
+      }
     },
   };
 }

package/src/scanText.ts

@@ -12,16 +12,6 @@ import type {
   TextRecognitionPlugin,
 } from './types';
 
-type SerializableValue =
-  | string
-  | number
-  | boolean
-  | null
-  | undefined
-  | ArrayBuffer
-  | SerializableValue[]
-  | { [key: string]: SerializableValue };
-
 const LINKING_ERROR: string =
   `The package '@mleonard9/vin-scanner' doesn't seem to be linked. Make sure: \n\n` +
   Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
@@ -36,42 +26,37 @@ const unwrapPluginFrame = (frame: Frame): Frame => {
   return candidate.__frame ?? frame;
 };
 
-const toSerializableValue = (value: unknown): SerializableValue => {
-  'worklet';
-  if (
-    value == null ||
-    typeof value === 'string' ||
-    typeof value === 'number' ||
-    typeof value === 'boolean'
-  ) {
-    return value;
-  }
-  if (value instanceof ArrayBuffer) {
-    return value;
-  }
-  if (Array.isArray(value)) {
-    return value.map((item) => toSerializableValue(item));
-  }
-  if (typeof value === 'object') {
-    const record = value as Record<string, unknown>;
-    const output: { [key: string]: SerializableValue } = {};
-    Object.keys(record).forEach((key) => {
-      output[key] = toSerializableValue(record[key]);
-    });
-    return output;
-  }
-  return undefined;
-};
-
 const toSerializableArgs = (
   args: TextRecognitionOptions & {
     orientation?: FrameOrientation;
   }
-) => {
+): TextRecognitionOptions & {
+  orientation?: FrameOrientation;
+} => {
   'worklet';
-  return toSerializableValue(args) as TextRecognitionOptions & {
+  const serialized: TextRecognitionOptions & {
     orientation?: FrameOrientation;
-  };
+  } = {};
+
+  if (args.language) {
+    serialized.language = args.language;
+  }
+  if (args.validationPattern) {
+    serialized.validationPattern = args.validationPattern;
+  }
+  if (args.orientation) {
+    serialized.orientation = args.orientation;
+  }
+  if (args.scanRegion) {
+    serialized.scanRegion = {
+      x: args.scanRegion.x,
+      y: args.scanRegion.y,
+      width: args.scanRegion.width,
+      height: args.scanRegion.height,
+    };
+  }
+
+  return serialized;
 };
 
 const toFloat32Array = (input: unknown): Float32Array | undefined => {
@@ -194,11 +179,15 @@ export function createTextRecognitionPlugin(
         overrides || orientation
           ? mergeTextArgs(options, overrides, orientation ?? null)
           : options;
-      const result = plugin.call(
-        unwrapPluginFrame(frame),
-        toSerializableArgs(args)
-      );
-      return normalizeTextDetections(result);
+      try {
+        const result = plugin.call(
+          unwrapPluginFrame(frame),
+          toSerializableArgs(args)
+        );
+        return normalizeTextDetections(result);
+      } catch {
+        return [];
+      }
     },
   };
 }

package/src/types.ts

@@ -152,6 +152,12 @@ export type BarcodeScannerOptions = {
 export type TextScannerOptions = {
   enabled?: boolean;
   language?: TextRecognitionLanguage;
+  /**
+   * Optional regex pattern forwarded to the native text recognizer to reduce
+   * bridge traffic before VIN validation runs in JS.
+   * Default: `[A-Z0-9]{10,}`
+   */
+  validationPattern?: string;
   /**
    * When true, text VINs are surfaced via `onTextPending` and must be
    * confirmed manually; barcode VINs still emit immediately.
@@ -212,7 +218,7 @@ export type DetectionOptions = {
   /**
    * Enable intelligent frame quality checks to skip blurry or dark frames.
    * This improves accuracy by only processing high-quality frames.
-   * Note: currently unused; retained for backward compatibility.
+   * Set to `false` to disable the luma/sharpness gates entirely.
    */
   enableFrameQualityCheck?: boolean;
   /**
@@ -227,7 +233,7 @@ export type DetectionOptions = {
   minSharpness?: number;
   /**
    * Minimum candidate confidence required before emitting.
-   * Default: 0.6
+   * Default: 0 (checksum validity is the primary acceptance gate).
    */
   minConfidence?: number;
   /**

package/src/useVinScanner.ts

@@ -23,6 +23,7 @@ export function useVinScanner(options?: VinScannerOptions) {
   >([]);
   const pendingTextTimestampRef = useRef<number | null>(null);
   const pendingTextRef = useRef<VinCandidate[]>([]);
+  const pendingTextKeyRef = useRef('');
   const pendingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const hapticsEnabled = options?.haptics ?? true;
   const sessionSeen = useRef<Set<string>>(new Set());
@@ -42,7 +43,7 @@ export function useVinScanner(options?: VinScannerOptions) {
     }
     return createTextRecognitionPlugin({
       language: resolvedOptions.text.language,
-      validationPattern: '[A-HJ-NPR-Z0-9]{10,}',
+      validationPattern: resolvedOptions.text.validationPattern,
     });
   }, [resolvedOptions.text]);
 
@@ -57,6 +58,16 @@ export function useVinScanner(options?: VinScannerOptions) {
 
   const emitTextPending = useRunOnJS(
     (pending: VinCandidate[], ts: number) => {
+      const pendingKey = pending
+        .map((candidate) => candidate.value)
+        .sort()
+        .join('|');
+
+      if (pendingKey.length === 0 || pendingKey === pendingTextKeyRef.current) {
+        return;
+      }
+
+      pendingTextKeyRef.current = pendingKey;
       pendingTextTimestampRef.current = ts;
       pendingTextRef.current = pending;
       setPendingTextCandidates(pending);
@@ -66,6 +77,7 @@ export function useVinScanner(options?: VinScannerOptions) {
       const ttl = resolvedOptions.text.pendingTtlMs;
       if (ttl > 0) {
         pendingTimerRef.current = setTimeout(() => {
+          pendingTextKeyRef.current = '';
           pendingTextTimestampRef.current = null;
           pendingTextRef.current = [];
           setPendingTextCandidates([]);
@@ -227,7 +239,7 @@ export function useVinScanner(options?: VinScannerOptions) {
         noBarcodeFrameCount.current = 0;
         useBarcodeFallback.current = false;
       }
-      const firstCandidate = pickFirstCandidate(candidates, resolvedOptions);
+      const firstCandidate = pickFirstCandidate(filtered, resolvedOptions);
 
       const t3 = Date.now();
 
@@ -236,7 +248,7 @@ export function useVinScanner(options?: VinScannerOptions) {
       const event: VinScannerEvent = {
         timestamp: payload.timestamp,
         duration,
-        candidates,
+        candidates: filtered,
         firstCandidate,
         raw: {
           barcodes: payload.barcodes,
@@ -300,7 +312,7 @@ export function useVinScanner(options?: VinScannerOptions) {
           lastEmittedVin.current = firstCandidate.value;
           lastEmitTimestamp.current = now;
           sessionSeen.current.add(firstCandidate.value);
-          emitResult(candidates, event);
+          emitResult(filtered, event);
         }
       }
     },
@@ -321,6 +333,7 @@ export function useVinScanner(options?: VinScannerOptions) {
         clearTimeout(pendingTimerRef.current);
         pendingTimerRef.current = null;
       }
+      pendingTextKeyRef.current = '';
       pendingTextTimestampRef.current = null;
       pendingTextRef.current = [];
       setPendingTextCandidates([]);
@@ -334,6 +347,9 @@ export function useVinScanner(options?: VinScannerOptions) {
       };
 
       emitResult(pending, event);
+      if (selected?.value) {
+        sessionSeen.current.add(selected.value);
+      }
       lastEmittedVin.current = selected?.value ?? null;
       lastEmitTimestamp.current = Date.now();
     },