@cleanuidev/react-native-scanner 1.0.0-beta.1

package/package.json

@@ -0,0 +1,178 @@
+{
+  "name": "@cleanuidev/react-native-scanner",
+  "version": "1.0.0-beta.1",
+  "description": "scanner",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*",
+    "!node_modules",
+    "!**/node_modules"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-scanner-example",
+    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest",
+    "release": "release-it --only-version"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cleanui-dev/react-native-scanner.git"
+  },
+  "author": "Rahul Gupta <rahulgwebdev@gmail.com> (https://github.com/rahulgwebdev)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/cleanui-dev/react-native-scanner/issues"
+  },
+  "homepage": "https://github.com/cleanui-dev/react-native-scanner#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@react-native/babel-preset": "0.83.0",
+    "@react-native/eslint-config": "0.83.0",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.2.0",
+    "commitlint": "^19.8.1",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "jest": "^29.7.0",
+    "lefthook": "^2.0.3",
+    "prettier": "^2.8.8",
+    "react": "19.2.0",
+    "react-native": "0.83.0",
+    "react-native-builder-bob": "^0.40.17",
+    "release-it": "^19.0.4",
+    "turbo": "^2.5.6",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "codegenConfig": {
+    "name": "ScannerViewSpec",
+    "type": "all",
+    "jsSrcsDir": "src",
+    "android": {
+      "javaPackageName": "com.scanner"
+    },
+    "ios": {
+      "componentProvider": {
+        "ScannerView": "ScannerView"
+      }
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true,
+      "tag": "beta"
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "create-react-native-library": {
+    "type": "fabric-view",
+    "languages": "kotlin-objc",
+    "tools": [
+      "eslint",
+      "jest",
+      "lefthook",
+      "release-it"
+    ],
+    "version": "0.56.0"
+  }
+}

package/src/CameraInfoModule.ts

@@ -0,0 +1,11 @@
+import { NativeModules } from 'react-native';
+import type { DeviceCameraInfo, CurrentCameraInfo } from './types';
+
+const { CameraInfoModule } = NativeModules;
+
+export interface CameraInfoModuleInterface {
+  getCameraInfo(): Promise<DeviceCameraInfo>;
+  getCurrentCameraInfo(): Promise<CurrentCameraInfo>;
+}
+
+export default CameraInfoModule as CameraInfoModuleInterface;

package/src/ScannerViewNativeComponent.ts

@@ -0,0 +1,121 @@
+import {
+  codegenNativeComponent,
+  type ViewProps,
+  type NativeSyntheticEvent,
+} from 'react-native';
+import type {
+  DirectEventHandler,
+  Double,
+} from 'react-native/Libraries/Types/CodegenTypesNamespace';
+
+// Define codegen types locally (no longer exported from react-native in 0.83)
+
+// Event payload types for better TypeScript inference
+export interface BarcodeScannedEventPayload {
+  barcodes: {
+    data: string;
+    format: string;
+    timestamp: Double;
+    boundingBox?: {
+      left: Double;
+      top: Double;
+      right: Double;
+      bottom: Double;
+    };
+    area?: Double;
+  }[];
+}
+
+export interface ScannerErrorEventPayload {
+  error: string;
+  code: string;
+}
+
+export interface OnLoadEventPayload {
+  success: boolean;
+  error?: string;
+}
+
+// Event types for use in handlers
+export type BarcodeScannedEvent =
+  NativeSyntheticEvent<BarcodeScannedEventPayload>;
+export type ScannerErrorEvent = NativeSyntheticEvent<ScannerErrorEventPayload>;
+export type OnLoadEvent = NativeSyntheticEvent<OnLoadEventPayload>;
+
+// Nested object types for better codegen compatibility
+export interface FocusAreaSize {
+  width: Double;
+  height: Double;
+}
+
+export interface FocusAreaPosition {
+  x: Double; // 0-100
+  y: Double; // 0-100
+}
+
+export interface FocusAreaConfig {
+  enabled?: boolean;
+  showOverlay?: boolean;
+  borderColor?: string;
+  tintColor?: string;
+  // NOTE: Codegen does not support mixed types (number OR object), so we always pass {width,height}.
+  size?: FocusAreaSize;
+  position?: FocusAreaPosition;
+}
+
+export interface BarcodeFramesConfig {
+  enabled?: boolean;
+  color?: string;
+  onlyInFocusArea?: boolean;
+}
+
+export interface BoundingBox {
+  left: Double;
+  top: Double;
+  right: Double;
+  bottom: Double;
+}
+
+export interface BarcodeData {
+  data: string;
+  format: string;
+  timestamp: Double;
+  boundingBox?: BoundingBox;
+  area?: Double;
+}
+
+export interface NativeProps extends ViewProps {
+  barcodeTypes?: string[];
+
+  /**
+   * Focus area configuration (Android: drives overlay + optional filtering).
+   * - `showOverlay` controls whether the scanning region is drawn.
+   * - `enabled` controls whether scanning is restricted to that region.
+   */
+  focusArea?: FocusAreaConfig;
+
+  /**
+   * Barcode frames configuration (draw rectangles around detected barcodes).
+   */
+  barcodeFrames?: BarcodeFramesConfig;
+
+  torch?: boolean;
+  zoom?: Double;
+  pauseScanning?: boolean;
+
+  barcodeScanStrategy?: string;
+  keepScreenOn?: boolean;
+
+  /**
+   * Minimum interval (in seconds) between barcode emission events.
+   * Prevents rapid duplicate detections. Set to 0 to disable debouncing.
+   * @default 0.5
+   */
+  barcodeEmissionInterval?: Double;
+
+  onBarcodeScanned?: DirectEventHandler<BarcodeScannedEventPayload>;
+  onScannerError?: DirectEventHandler<ScannerErrorEventPayload>;
+  onLoad?: DirectEventHandler<OnLoadEventPayload>;
+}
+
+export default codegenNativeComponent<NativeProps>('ScannerView');

package/src/hooks/useCameraInfo.ts

@@ -0,0 +1,190 @@
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import CameraInfoModule from '../CameraInfoModule';
+import type {
+  DeviceCameraInfo,
+  CurrentCameraInfo,
+  CameraInfo,
+  CameraFacing,
+} from '../types';
+
+export interface UseCameraInfoReturn {
+  // Device information
+  deviceInfo: DeviceCameraInfo | null;
+  currentCameraInfo: CurrentCameraInfo | null;
+
+  // Camera lists
+  allCameras: CameraInfo[];
+  backCameras: CameraInfo[];
+  frontCameras: CameraInfo[];
+  macroCameras: CameraInfo[];
+
+  // Quick access properties
+  hasMultipleCameras: boolean;
+  hasBackCamera: boolean;
+  hasFrontCamera: boolean;
+  hasMacroCamera: boolean;
+  hasTorch: boolean;
+
+  // Default cameras
+  defaultBackCamera: CameraInfo | null;
+  defaultFrontCamera: CameraInfo | null;
+
+  // Zoom information
+  maxZoom: number;
+  minZoom: number;
+
+  // Loading and error states
+  isLoading: boolean;
+  error: string | null;
+
+  // Actions
+  refreshInfo: () => Promise<void>;
+  getCameraById: (id: string) => CameraInfo | null;
+  getCamerasByFacing: (facing: CameraFacing) => CameraInfo[];
+}
+
+export function useCameraInfo(): UseCameraInfoReturn {
+  const [deviceInfo, setDeviceInfo] = useState<DeviceCameraInfo | null>(null);
+  const [currentCameraInfo, setCurrentCameraInfo] =
+    useState<CurrentCameraInfo | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadCameraInfo = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      const info = await CameraInfoModule.getCameraInfo();
+      setDeviceInfo(info);
+
+      // Try to get current camera info if available
+      try {
+        const currentInfo = await CameraInfoModule.getCurrentCameraInfo();
+        setCurrentCameraInfo(currentInfo);
+      } catch (e) {
+        // Current camera info might not be available if no camera is bound
+        console.log('Current camera info not available:', e);
+      }
+    } catch (e: any) {
+      let errorMessage = 'Failed to load camera information';
+
+      // Handle specific error types
+      if (e?.code === 'PERMISSION_ERROR') {
+        errorMessage =
+          'Camera permission not granted. Please grant camera permission in app settings.';
+      } else if (e?.code === 'NO_CAMERAS_ERROR') {
+        errorMessage = 'No cameras found on this device.';
+      } else if (e?.code === 'CAMERA_ACCESS_ERROR') {
+        errorMessage = 'Unable to access camera information. Please try again.';
+      } else if (e?.message) {
+        errorMessage = e.message;
+      }
+
+      setError(errorMessage);
+      console.error('Error loading camera info:', e);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const refreshInfo = useCallback(async () => {
+    await loadCameraInfo();
+  }, [loadCameraInfo]);
+
+  useEffect(() => {
+    loadCameraInfo();
+  }, [loadCameraInfo]);
+  // Computed properties
+  const allCameras = useMemo(
+    () => deviceInfo?.cameras || [],
+    [deviceInfo?.cameras]
+  );
+  const backCameras = useMemo(
+    () => allCameras.filter((camera) => camera.facing === 'back'),
+    [allCameras]
+  );
+  const frontCameras = useMemo(
+    () => allCameras.filter((camera) => camera.facing === 'front'),
+    [allCameras]
+  );
+  const macroCameras = useMemo(
+    () => allCameras.filter((camera) => camera.isMacroCamera),
+    [allCameras]
+  );
+
+  const hasMultipleCameras = allCameras.length > 1;
+  const hasBackCamera = backCameras.length > 0;
+  const hasFrontCamera = frontCameras.length > 0;
+  const hasMacroCamera = macroCameras.length > 0;
+  const hasTorch = allCameras.some((camera) => camera.hasFlash);
+
+  const defaultBackCamera = deviceInfo?.defaultBackCamera
+    ? allCameras.find((camera) => camera.id === deviceInfo.defaultBackCamera) ||
+      null
+    : backCameras[0] || null;
+
+  const defaultFrontCamera = deviceInfo?.defaultFrontCamera
+    ? allCameras.find(
+        (camera) => camera.id === deviceInfo.defaultFrontCamera
+      ) || null
+    : frontCameras[0] || null;
+
+  // Zoom range from all cameras
+  const allZoomRanges = allCameras.map((camera) => ({
+    min: camera.zoomMin,
+    max: camera.zoomMax,
+  }));
+  const maxZoom = Math.max(...allZoomRanges.map((range) => range.max), 1);
+  const minZoom = Math.min(...allZoomRanges.map((range) => range.min), 1);
+
+  const getCameraById = useCallback(
+    (id: string): CameraInfo | null => {
+      return allCameras.find((camera) => camera.id === id) || null;
+    },
+    [allCameras]
+  );
+
+  const getCamerasByFacing = useCallback(
+    (facing: CameraFacing): CameraInfo[] => {
+      return allCameras.filter((camera) => camera.facing === facing);
+    },
+    [allCameras]
+  );
+
+  return {
+    // Device information
+    deviceInfo,
+    currentCameraInfo,
+
+    // Camera lists
+    allCameras,
+    backCameras,
+    frontCameras,
+    macroCameras,
+
+    // Quick access properties
+    hasMultipleCameras,
+    hasBackCamera,
+    hasFrontCamera,
+    hasMacroCamera,
+    hasTorch,
+
+    // Default cameras
+    defaultBackCamera,
+    defaultFrontCamera,
+
+    // Zoom information
+    maxZoom,
+    minZoom,
+
+    // Loading and error states
+    isLoading,
+    error,
+
+    // Actions
+    refreshInfo,
+    getCameraById,
+    getCamerasByFacing,
+  };
+}

package/src/index.tsx

@@ -0,0 +1,30 @@
+export { BarcodeFormat, BarcodeScanStrategy } from './types';
+export type {
+  FrameSize,
+  FocusAreaConfig,
+  BarcodeFramesConfig,
+  BarcodeScannedEventPayload,
+  ScannerErrorEventPayload,
+  OnLoadEventPayload,
+  DeviceCameraInfo,
+  CurrentCameraInfo,
+  CameraInfo,
+  CameraFacing,
+} from './types';
+
+// Export the camera info hook
+export { useCameraInfo } from './hooks/useCameraInfo';
+export type { UseCameraInfoReturn } from './hooks/useCameraInfo';
+
+// Re-export the native component and event types
+
+export { default as ScannerView } from './ScannerViewNativeComponent';
+export * from './ScannerViewNativeComponent';
+
+// Export event types for better TypeScript inference
+// These are the wrapped NativeSyntheticEvent types that users should use in their handlers
+export type {
+  BarcodeScannedEvent,
+  ScannerErrorEvent,
+  OnLoadEvent,
+} from './ScannerViewNativeComponent';

package/src/types.ts

@@ -0,0 +1,177 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+// Barcode format enum
+export enum BarcodeFormat {
+  QR_CODE = 'QR_CODE',
+  CODE_128 = 'CODE_128',
+  CODE_39 = 'CODE_39',
+  EAN_13 = 'EAN_13',
+  EAN_8 = 'EAN_8',
+  UPC_A = 'UPC_A',
+  UPC_E = 'UPC_E',
+  DATA_MATRIX = 'DATA_MATRIX',
+  PDF_417 = 'PDF_417',
+  AZTEC = 'AZTEC',
+  ITF = 'ITF',
+}
+
+// Barcode scan strategy enum
+export enum BarcodeScanStrategy {
+  ONE = 'ONE',
+  ALL = 'ALL',
+  BIGGEST = 'BIGGEST',
+  SORT_BY_BIGGEST = 'SORT_BY_BIGGEST',
+}
+
+// Frame size configuration - can be a number (square) or object (rectangle)
+export type FrameSize = number | { width: number; height: number };
+
+// Focus area configuration
+export type FocusAreaConfig = {
+  /**
+   * Whether to restrict scanning to focus area only
+   * @default false
+   */
+  enabled?: boolean;
+  /**
+   * Size of the focus area
+   * @default 300
+   */
+  size?: FrameSize;
+  /**
+   * Color of the focus area border
+   * @default transparent (no border) when not provided
+   */
+  borderColor?: string;
+  /**
+   * Color of the semi-transparent overlay (tint) around the focus area
+   * @default '#000000' with 50% opacity when not provided
+   */
+  tintColor?: string;
+  /**
+   * Whether to draw the focus area overlay
+   * @default false
+   */
+  showOverlay?: boolean;
+  /**
+   * Position of the focus area (percentage from 0-100)
+   * @default center (50, 50) when not provided
+   */
+  position?: {
+    x: number;
+    y: number;
+  };
+};
+
+// Barcode frame configuration
+export type BarcodeFramesConfig = {
+  enabled?: boolean; // Whether to draw frames around detected barcodes
+  color?: string; // Color of barcode frames
+  onlyInFocusArea?: boolean; // Only show frames for barcodes in focus area
+};
+
+// Camera information types
+export type CameraFacing = 'front' | 'back' | 'unknown';
+
+export type ZoomRange = {
+  min: number;
+  max: number;
+};
+
+export type CameraInfo = {
+  id: string;
+  facing: CameraFacing;
+  sensorOrientation: number;
+  minFocusDistance: number;
+  hasFlash: boolean;
+  isMacroCamera: boolean;
+  zoomMin: number;
+  zoomMax: number;
+  focalLengths: string[];
+  aeModes: string[];
+  afModes: string[];
+};
+
+export type DeviceCameraInfo = {
+  cameras: CameraInfo[];
+  defaultBackCamera: string;
+  defaultFrontCamera: string;
+};
+
+export type CurrentCameraInfo = {
+  status: string;
+  message: string;
+  // Additional properties when camera is bound
+  currentZoom?: number;
+  isTorchEnabled?: boolean;
+  focusMode?: string;
+};
+
+// Barcode scanned event payload
+export type BarcodeScannedEventPayload = {
+  data: string;
+  format: BarcodeFormat;
+  timestamp: number;
+  boundingBox?: {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+  };
+  area?: number;
+};
+
+// Scanner error event payload
+export type ScannerErrorEventPayload = {
+  error: string;
+  code: string;
+};
+
+// On load event payload (for camera initialization)
+export type OnLoadEventPayload = {
+  success: boolean;
+  error?: string;
+};
+
+// Event types
+export type CameraNativeModuleEvents = {
+  onBarcodeScanned: (params: BarcodeScannedEventPayload) => void;
+  onScannerError: (params: ScannerErrorEventPayload) => void;
+  onLoad: (params: OnLoadEventPayload) => void;
+};
+
+// Props interface for the scanner view
+export type CameraNativeModuleViewProps = {
+  // Barcode configuration
+  barcodeTypes?: BarcodeFormat[];
+
+  // Focus area configuration
+  focusArea?: FocusAreaConfig;
+
+  // Barcode frame configuration
+  barcodeFrames?: BarcodeFramesConfig;
+
+  // Camera configuration
+  torch?: boolean;
+  zoom?: number;
+  pauseScanning?: boolean;
+  keepScreenOn?: boolean;
+
+  // Event handlers
+  onBarcodeScanned?: (event: {
+    nativeEvent: BarcodeScannedEventPayload;
+  }) => void;
+  onScannerError?: (event: { nativeEvent: ScannerErrorEventPayload }) => void;
+  onLoad?: (event: { nativeEvent: OnLoadEventPayload }) => void;
+
+  // Styling
+  style?: StyleProp<ViewStyle>;
+};
+
+// Method invokers for controlling the scanner
+export type CameraNativeModuleMethods = {
+  toggleTorch: () => Promise<boolean>;
+  startScanning: () => Promise<void>;
+  stopScanning: () => Promise<void>;
+  isTorchAvailable: () => Promise<boolean>;
+};