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

package/README.md

@@ -2,16 +2,18 @@
 
 # 📱 React Native Scanner
 
-**A powerful, native barcode and QR code scanner for React Native**
+**A powerful, native barcode and QR code scanner for React Native with configurable target area scanning**
+
+![React Native Barcode Scanner Demo - QR Code and Barcode Scanning with Target Area](./preview.gif)
 
 [![npm version](https://img.shields.io/npm/v/@cleanuidev/react-native-scanner?label=beta&color=blue)](https://www.npmjs.com/package/@cleanuidev/react-native-scanner)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![Platform](https://img.shields.io/badge/Platform-Android-blue.svg)](https://www.android.com/)
+[![Platform](https://img.shields.io/badge/Platform-Android%20%7C%20iOS-blue.svg)](https://reactnative.dev/)
 [![React Native](https://img.shields.io/badge/React%20Native-0.83+-61DAFB?logo=react)](https://reactnative.dev/)
 
 **Built with ❤️ by [CleanUI.dev](https://cleanui.dev)**
 
-[Features](#-features) • [Installation](#-installation) • [Documentation](#-documentation) • [Support](#-consulting--support)
+[Features](#-features) • [Installation](#-installation) • [Documentation](#-documentation)
 
 </div>
 
@@ -23,12 +25,12 @@
 
 | Feature | Description |
 |:------:|:-----------|
-| 🚀 **Native Performance** | Built with CameraX and ML Kit for optimal performance |
-| 🎯 **Focus Area** | Configurable focus area with optional overlay for precise scanning |
+| 🚀 **Native Performance** | Built with CameraX & ML Kit (Android) and AVFoundation & Vision (iOS) for optimal performance |
+| 🎯 **Target Area Scanning** | Scan barcodes within configurable target areas for precise detection |
 | 🔦 **Torch Control** | Built-in flashlight/torch control |
 | 📊 **Multiple Formats** | Support for QR codes, Code128, Code39, EAN, UPC, and more |
-| 🎨 **Customizable** | Configurable focus area colors, barcode frame visualization, and scanning behavior |
-| 📱 **Cross Platform** | Android support (iOS coming soon) |
+| 🎨 **Customizable** | Configurable target area colors, barcode frame visualization, and scanning behavior |
+| 📱 **Cross Platform** | Android & iOS support (new Fabric architecture) |
 
 </div>
 
@@ -56,13 +58,15 @@ npm install @cleanuidev/react-native-scanner@1.0.0-beta.1
 yarn add @cleanuidev/react-native-scanner@1.0.0-beta.1
 ```
 
-> **💡 Note**: Once the library reaches stable release (1.0.0), you can install it without the `@beta` tag:
+> **Note**: Once the library reaches stable release (1.0.0), you can install it without the `@beta` tag:
 > ```bash
 > npm install @cleanuidev/react-native-scanner
 > # or
 > yarn add @cleanuidev/react-native-scanner
 > ```
 
+## Platform Setup
+
 ### Android Setup
 
 Add the following permissions to your `android/app/src/main/AndroidManifest.xml`:
@@ -75,9 +79,22 @@ Add the following permissions to your `android/app/src/main/AndroidManifest.xml`
 <uses-feature android:name="android.hardware.camera.flash" android:required="false" />
 ```
 
----
+### iOS Setup
+
+For iOS, add camera usage description to your `ios/YourApp/Info.plist`:
+
+```xml
+<key>NSCameraUsageDescription</key>
+<string>This app needs camera access to scan barcodes and QR codes</string>
+```
+
+Then install CocoaPods dependencies:
+
+```bash
+cd ios && pod install && cd ..
+```
 
-## 🚀 Quick Start
+## Usage
 
 ### Basic Scanner
 
@@ -112,7 +129,7 @@ const styles = StyleSheet.create({
 });
 ```
 
-### Scanner with Focus Area
+### Scanner with Target Area
 
 ```tsx
 import React, { useState } from 'react';
@@ -122,12 +139,12 @@ import ScannerView, { BarcodeFormat } from '@cleanuidev/react-native-scanner';
 export default function FocusAreaScanner() {
   const [torchEnabled, setTorchEnabled] = useState(false);
   
-  // Focus area configuration
+  // Target area configuration
   const focusAreaConfig = {
-    enabled: true,        // Only scan barcodes within the focus area
-    showOverlay: true,    // Show the focus area overlay
-    size: 300,           // Size of the focus area (square)
-    color: '#00FF00',    // Color of the focus area border
+    enabled: true,        // Only scan barcodes within the target area
+    showOverlay: true,    // Show overlay outside the target area
+    size: 300,           // Size of the target area (square)
+    color: '#00FF00',    // Color of the target area border
   };
 
   // Barcode frames configuration
@@ -174,36 +191,14 @@ export default function FocusAreaScanner() {
 }
 ```
 
----
-
-## 🎨 UI Design Note
-
-> **💡 Note**: The native overlays and frames are provided to fulfill minimum design requirements and for debugging during development. We **recommend implementing custom React Native UI** for enhanced user experiences.
+## API Reference
 
-To use custom UI, simply disable the native visual overlays and build your own:
-
-```tsx
-<ScannerView
-  focusArea={{ enabled: true, showOverlay: false }} // Disable native overlay
-  barcodeFrames={{ enabled: false }} // Disable native frames
-  onBarcodeScanned={handleBarcodeScanned}
-/>
-```
-
-Then layer your custom React Native components on top for a fully branded experience.
-
----
-
-## 📚 Documentation
-
-### API Reference
-
-#### Props
+### Props
 
 | Prop | Type | Default | Description |
-|:----:|:----:|:-------:|:-----------|
+|------|------|---------|-------------|
 | `barcodeTypes` | `BarcodeFormat[]` | `[BarcodeFormat.QR_CODE]` | Array of barcode formats to scan |
-| `focusArea` | `FocusAreaConfig` | - | Focus area configuration |
+| `focusArea` | `FocusAreaConfig` | - | Target area configuration for precise scanning |
 | `barcodeFrames` | `BarcodeFramesConfig` | - | Barcode frame visualization configuration |
 | `torch` | `boolean` | `false` | Enable/disable torch/flashlight |
 | `zoom` | `number` | `1.0` | Camera zoom level |
@@ -214,30 +209,28 @@ Then layer your custom React Native components on top for a fully branded experi
 | `onScannerError` | `function` | - | Callback when scanner encounters an error |
 | `onLoad` | `function` | - | Callback when scanner is loaded |
 
-#### Configuration Types
-
-##### FocusAreaConfig
+#### FocusAreaConfig
 
 ```tsx
 type FocusAreaConfig = {
-  enabled?: boolean;        // Whether to restrict scanning to focus area only
-  size?: FrameSize;         // Size of the focus area
-  color?: string;           // Color of focus area border
-  showOverlay?: boolean;    // Whether to draw the focus area overlay
+  enabled?: boolean;        // Whether to restrict scanning to target area only
+  size?: FrameSize;         // Size of the target area
+  color?: string;           // Color of target area border
+  showOverlay?: boolean;    // Whether to draw overlay outside the target area
 };
 ```
 
-##### BarcodeFramesConfig
+#### BarcodeFramesConfig
 
 ```tsx
 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
+  onlyInFocusArea?: boolean; // Only show frames for barcodes in target area
 };
 ```
 
-##### FrameSize
+#### FrameSize
 
 ```tsx
 type FrameSize = number | { width: number; height: number };
@@ -257,7 +250,7 @@ BarcodeScanStrategy.BIGGEST          // Process only the largest barcode by area
 BarcodeScanStrategy.SORT_BY_BIGGEST  // Process all barcodes sorted by size (largest first)
 ```
 
-#### Barcode Formats
+### Barcode Formats
 
 ```tsx
 import { BarcodeFormat } from '@cleanuidev/react-native-scanner';
@@ -276,10 +269,9 @@ BarcodeFormat.AZTEC          // Aztec
 BarcodeFormat.ITF            // ITF (Interleaved 2 of 5)
 ```
 
-#### Event Payloads
-
-##### onBarcodeScanned
+### Event Payloads
 
+#### onBarcodeScanned
 ```tsx
 {
   nativeEvent: [
@@ -299,8 +291,7 @@ BarcodeFormat.ITF            // ITF (Interleaved 2 of 5)
 }
 ```
 
-##### onScannerError
-
+#### onScannerError
 ```tsx
 {
   nativeEvent: {
@@ -310,8 +301,7 @@ BarcodeFormat.ITF            // ITF (Interleaved 2 of 5)
 }
 ```
 
-##### onLoad
-
+#### onLoad
 ```tsx
 {
   nativeEvent: {
@@ -321,20 +311,16 @@ BarcodeFormat.ITF            // ITF (Interleaved 2 of 5)
 }
 ```
 
----
+## Target Area Configuration
 
-## 🎯 Advanced Usage
+The target area feature provides precise control over where barcodes are scanned:
 
-### Focus Area Configuration
-
-The focus area feature provides precise control over where barcodes are scanned:
-
-#### Basic Focus Area
+### Basic Target Area
 
 ```tsx
 <ScannerView
   focusArea={{
-    showOverlay: true,    // Show visual overlay
+    showOverlay: true,    // Show overlay outside the target area
     size: 300,           // 300x300 pixel square
     color: '#00FF00',    // Green border
   }}
@@ -342,38 +328,69 @@ The focus area feature provides precise control over where barcodes are scanned:
 />
 ```
 
-#### Focus Area with Restricted Scanning
+### Target Area with Restricted Scanning
 
 ```tsx
 <ScannerView
   focusArea={{
-    enabled: true,        // Only scan within focus area
-    showOverlay: true,    // Show visual overlay
+    enabled: true,        // Only scan within target area
+    showOverlay: true,    // Show overlay outside the target area
     size: 300,           // 300x300 pixel square
     color: '#00FF00',    // Green border
   }}
-  // Only scans within the focus area
+  // Only scans within the target area
+/>
+```
+
+### Rectangular Target Area
+
+```tsx
+<ScannerView
+  focusArea={{
+    enabled: true,
+    showOverlay: true,
+    size: { width: 300, height: 200 }, // Rectangular target area
+    color: '#00FF00',
+  }}
+/>
+```
+
+### Positioning Target Area with Coordinates
+
+You can position the target area anywhere on the screen using percentage-based coordinates (0-100):
+
+```tsx
+<ScannerView
+  focusArea={{
+    enabled: true,
+    showOverlay: true,
+    size: 300,
+    position: { x: 50, y: 50 }, // Center position (default)
+    color: '#00FF00',
+  }}
 />
 ```
 
-#### Rectangular Focus Area
+**Example: Position target area at top center**
 
 ```tsx
 <ScannerView
   focusArea={{
     enabled: true,
     showOverlay: true,
-    size: { width: 300, height: 200 }, // Rectangular focus area
+    size: 250,
+    position: { x: 50, y: 25 }, // Top center
     color: '#00FF00',
   }}
+  onBarcodeScanned={handleBarcodeScanned}
 />
 ```
 
-### Barcode Frame Visualization
+## Barcode Frame Visualization
 
 The scanner can display visual frames around detected barcodes to help users see what's being scanned:
 
-#### Show All Barcode Frames
+### Show All Barcode Frames
 
 ```tsx
 <ScannerView
@@ -385,7 +402,7 @@ The scanner can display visual frames around detected barcodes to help users see
 />
 ```
 
-#### Show Frames Only in Focus Area
+### Show Frames Only in Target Area
 
 ```tsx
 <ScannerView
@@ -397,16 +414,16 @@ The scanner can display visual frames around detected barcodes to help users see
   barcodeFrames={{
     enabled: true,
     color: '#FF0000',
-    onlyInFocusArea: true, // Only show frames for barcodes in focus area
+    onlyInFocusArea: true, // Only show frames for barcodes in target area
   }}
 />
 ```
 
-### Barcode Scan Strategy
+## Barcode Scan Strategy
 
-The scanner supports different strategies for processing multiple detected barcodes. The `onBarcodeScanned` event always returns an array of barcodes, even when only one barcode is processed.
+The scanner now supports different strategies for processing multiple detected barcodes. The `onBarcodeScanned` event always returns an array of barcodes, even when only one barcode is processed.
 
-#### Process All Barcodes (Default)
+### Process All Barcodes (Default)
 
 ```tsx
 <ScannerView
@@ -418,7 +435,7 @@ The scanner supports different strategies for processing multiple detected barco
 />
 ```
 
-#### Process Only the First Barcode
+### Process Only the First Barcode
 
 ```tsx
 <ScannerView
@@ -433,7 +450,7 @@ The scanner supports different strategies for processing multiple detected barco
 />
 ```
 
-#### Process Only the Largest Barcode
+### Process Only the Largest Barcode
 
 ```tsx
 <ScannerView
@@ -449,7 +466,7 @@ The scanner supports different strategies for processing multiple detected barco
 />
 ```
 
-#### Process All Barcodes Sorted by Size
+### Process All Barcodes Sorted by Size
 
 ```tsx
 <ScannerView
@@ -464,7 +481,7 @@ The scanner supports different strategies for processing multiple detected barco
 />
 ```
 
-### Torch Control
+## Torch Control
 
 The torch/flashlight can be controlled via the `torch` prop:
 
@@ -477,11 +494,11 @@ const [torchEnabled, setTorchEnabled] = useState(false);
 />
 ```
 
-### Keep Screen On
+## Keep Screen On
 
 The scanner automatically keeps the screen on while the camera is active to prevent auto-lock during scanning sessions. This behavior can be controlled via the `keepScreenOn` prop:
 
-#### Default Behavior (Screen Stays On)
+### Default Behavior (Screen Stays On)
 
 ```tsx
 <ScannerView
@@ -490,7 +507,7 @@ The scanner automatically keeps the screen on while the camera is active to prev
 />
 ```
 
-#### Allow Screen Auto-Lock
+### Allow Screen Auto-Lock
 
 ```tsx
 <ScannerView
@@ -499,7 +516,7 @@ The scanner automatically keeps the screen on while the camera is active to prev
 />
 ```
 
-#### Dynamic Control
+### Dynamic Control
 
 ```tsx
 const [keepScreenOn, setKeepScreenOn] = useState(true);
@@ -515,11 +532,23 @@ const [keepScreenOn, setKeepScreenOn] = useState(true);
 </TouchableOpacity>
 ```
 
-> **💡 Note**: The screen is kept on by default (`keepScreenOn={true}`) as this is typically desired for scanning applications. When disabled, the screen may auto-lock, which could interrupt scanning sessions.
+**Note**: The screen is kept on by default (`keepScreenOn={true}`) as this is typically desired for scanning applications. When disabled, the screen may auto-lock, which could interrupt scanning sessions.
 
----
+## 🎨 UI Design Note
 
-## 🔐 Permissions
+> **💡 Note**: The native overlays and frames are provided to fulfill minimum design requirements and for debugging during development. We **recommend implementing custom React Native UI** for enhanced user experiences.
+
+To use custom UI, simply disable the native visual overlays and build your own:
+
+```tsx
+<ScannerView
+  focusArea={{ enabled: true, showOverlay: false }} // Disable native overlay
+  barcodeFrames={{ enabled: false }} // Disable native frames
+  onBarcodeScanned={handleBarcodeScanned}
+/>
+```
+
+## Permissions
 
 The scanner requires camera permissions. Make sure to request camera permissions in your app before using the scanner:
 
@@ -549,17 +578,11 @@ const requestCameraPermission = async () => {
 };
 ```
 
----
-
-## 📖 Examples
+## Example
 
 See the `example/` directory for complete working examples, including the "New Props Example" that demonstrates the updated prop structure.
 
----
-
-## 🤝 Contributing
-
-We welcome contributions! Please follow these steps:
+## Contributing
 
 1. Fork the repository
 2. Create your feature branch (`git checkout -b feature/amazing-feature`)
@@ -567,10 +590,6 @@ We welcome contributions! Please follow these steps:
 4. Push to the branch (`git push origin feature/amazing-feature`)
 5. Open a Pull Request
 
-For more details, see our [Contributing Guide](CONTRIBUTING.md).
-
----
-
 ## 💼 Consulting & Support
 
 ### Community Support (Free)
@@ -579,6 +598,19 @@ For bug reports, feature requests, and general questions:
 - 📝 [Open an issue](https://github.com/cleanui-dev/react-native-scanner/issues) on GitHub
 - 💬 Use GitHub Discussions for questions and community help
 
+### Support the Maintainer
+
+If you find this library useful, consider supporting the maintainer/developer directly through donations:
+
+- 💰 [Donate via PayPal](https://paypal.me/rahulgwebdev) - Support the maintainer directly and help keep this project maintained and improved
+- ⭐ Star the repository - Show your appreciation and help others discover this library
+
+**Your donations help:**
+- 🐛 Maintain and fix bugs
+- ✨ Add new features and improvements
+- 📚 Keep documentation up to date
+- ⚡ Ensure long-term sustainability of the project
+
 ### Commercial Support & Consulting
 
 Need professional help with implementation, custom development, or enterprise support?
@@ -594,16 +626,10 @@ Need professional help with implementation, custom development, or enterprise su
 
 ---
 
-## 📄 License
+## License
 
 This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
 
 ---
 
-<div align="center">
-
-**Made with ❤️ by [CleanUI.dev](https://cleanui.dev)**
-
-[Website](https://cleanui.dev) • [GitHub](https://github.com/cleanui-dev) • [Support](mailto:hi@cleanuitechnologies.com)
-
-</div>
+Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

package/Scanner.podspec

@@ -11,7 +11,7 @@ Pod::Spec.new do |s|
   s.authors      = package["author"]
 
   s.platforms    = { :ios => min_ios_version_supported }
-  s.source       = { :git => "https://github.com/cleanui-dev/react-native-scanner.git", :tag => "#{s.version}" }
+  s.source       = { :git => "https://github.com/rahulgwebdev/react-native-scanner.git", :tag => "#{s.version}" }
 
   s.source_files = "ios/**/*.{h,m,mm,swift,cpp}"
   s.private_header_files = "ios/**/*.h"

package/android/src/main/java/com/scanner/ScannerView.kt

@@ -222,6 +222,7 @@ class ScannerView : FrameLayout {
 
     if (!hasCameraPermission()) {
       Log.e(TAG, "Camera permission not granted")
+      emitOnScannerError("Camera permission not granted", "CAMERA_PERMISSION_DENIED")
       return
     }
 
@@ -331,8 +332,16 @@ class ScannerView : FrameLayout {
       // Set up auto-focus on frame center (if focus area is enabled)
       setupAutoFocusOnFrame()
 
+      // Emit onLoad event after camera is successfully started
+      emitOnLoadEvent(success = true)
+
     } catch (exc: Exception) {
       Log.e(TAG, "Use case binding failed", exc)
+      // Emit onScannerError event for camera initialization failure
+      emitOnScannerError(
+        error = exc.message ?: "Camera binding failed",
+        code = "CAMERA_INITIALIZATION_FAILED"
+      )
     }
   }
 
@@ -450,12 +459,14 @@ class ScannerView : FrameLayout {
                 // Debounce: Prevent rapid duplicate emissions
                 // If we've emitted recently (within debounce interval), skip this emission
                 // This prevents multiple alerts when pauseScanning is set but detection callbacks are still in flight
+                Log.d(TAG, "📊 Debounce check: interval=${barcodeEmissionDebounceInterval}ms, timeSinceLast=${timeSinceLastEmission}ms")
                 if (timeSinceLastEmission < barcodeEmissionDebounceInterval) {
-                  Log.d(TAG, "⏭️ Skipping barcode emission (debounced, last emission was ${timeSinceLastEmission}ms ago)")
+                  Log.d(TAG, "⏭️ Skipping barcode emission (debounced, last emission was ${timeSinceLastEmission}ms ago, interval=${barcodeEmissionDebounceInterval}ms)")
                   return@addOnSuccessListener
                 }
 
                 lastBarcodeEmissionTime = currentTime
+                Log.d(TAG, "✅ Emitting barcode (interval=${barcodeEmissionDebounceInterval}ms, timeSinceLast=${timeSinceLastEmission}ms)")
 
                 // Create array of barcode events
                 val barcodeEvents = Arguments.createArray()
@@ -502,6 +513,11 @@ class ScannerView : FrameLayout {
             }
           }
           .addOnFailureListener { e ->
+            // Emit onScannerError event for barcode detection failure
+            emitOnScannerError(
+              error = e.message ?: "Barcode detection failed",
+              code = "BARCODE_DETECTION_FAILED"
+            )
             Log.e(TAG, "Barcode scanning failed", e)
           }
           .addOnCompleteListener {
@@ -613,8 +629,48 @@ class ScannerView : FrameLayout {
 
   fun setBarcodeEmissionInterval(intervalSeconds: Double) {
     // Convert seconds to milliseconds, ensure non-negative
+    val previousInterval = barcodeEmissionDebounceInterval
+    Log.d(TAG, "📊 [ScannerView] setBarcodeEmissionInterval called with: ${intervalSeconds}s")
     barcodeEmissionDebounceInterval = max(0, (intervalSeconds * 1000).toLong())
-    Log.d(TAG, "Barcode emission interval set to: ${barcodeEmissionDebounceInterval}ms")
+    Log.d(TAG, "📊 ScannerView.setBarcodeEmissionInterval: ${intervalSeconds}s -> ${barcodeEmissionDebounceInterval}ms (was ${previousInterval}ms)")
+    
+    if (barcodeEmissionDebounceInterval == 0L) {
+      Log.d(TAG, "📊 ⚠️ Debouncing DISABLED (interval = 0ms)")
+    } else {
+      Log.d(TAG, "📊 ✅ Debouncing ENABLED (interval = ${barcodeEmissionDebounceInterval}ms)")
+    }
+  }
+
+  private fun emitOnLoadEvent(success: Boolean, error: String? = null) {
+    val ctx = reactContext
+    if (ctx is ThemedReactContext) {
+      ctx.runOnUiQueueThread {
+        val eventData = Arguments.createMap().apply {
+          putBoolean("success", success)
+          if (error != null) {
+            putString("error", error)
+          }
+        }
+        ctx.getJSModule(RCTEventEmitter::class.java)
+          .receiveEvent(this@ScannerView.id, "onLoad", eventData)
+        Log.d(TAG, "✅ onLoad event emitted: success=$success, error=$error")
+      }
+    }
+  }
+
+  private fun emitOnScannerError(error: String, code: String) {
+    val ctx = reactContext
+    if (ctx is ThemedReactContext) {
+      ctx.runOnUiQueueThread {
+        val eventData = Arguments.createMap().apply {
+          putString("error", error)
+          putString("code", code)
+        }
+        ctx.getJSModule(RCTEventEmitter::class.java)
+          .receiveEvent(this@ScannerView.id, "onScannerError", eventData)
+        Log.d(TAG, "✅ onScannerError event emitted: code=$code, error=$error")
+      }
+    }
   }
 
   fun setBarcodeScanStrategy(strategy: String) {

package/android/src/main/java/com/scanner/ScannerViewManager.kt

@@ -6,12 +6,20 @@ import com.facebook.react.bridge.*
 import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.uimanager.SimpleViewManager
 import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewManagerDelegate
 import com.facebook.react.uimanager.annotations.ReactProp
 import com.facebook.react.uimanager.events.RCTModernEventEmitter
+import com.facebook.react.viewmanagers.ScannerViewManagerInterface
+import com.facebook.react.viewmanagers.ScannerViewManagerDelegate
 
 @ReactModule(name = ScannerViewManager.NAME)
-class ScannerViewManager : SimpleViewManager<ScannerView>() {
+class ScannerViewManager : SimpleViewManager<ScannerView>(),
+  ScannerViewManagerInterface<ScannerView> {
+  private val mDelegate: ViewManagerDelegate<ScannerView> = ScannerViewManagerDelegate(this)
 
+  override fun getDelegate(): ViewManagerDelegate<ScannerView> {
+    return mDelegate
+  }
   override fun getName(): String {
     return NAME
   }
@@ -22,7 +30,7 @@ class ScannerViewManager : SimpleViewManager<ScannerView>() {
 
   // Barcode configuration
   @ReactProp(name = "barcodeTypes")
-  fun setBarcodeTypes(view: ScannerView?, types: ReadableArray?) {
+  override fun setBarcodeTypes(view: ScannerView?, types: ReadableArray?) {
     if (types != null) {
       val typeList = mutableListOf<String>()
       for (i in 0 until types.size()) {
@@ -36,33 +44,33 @@ class ScannerViewManager : SimpleViewManager<ScannerView>() {
 
   // Focus area configuration
   @ReactProp(name = "focusArea")
-  fun setFocusArea(view: ScannerView?, focusArea: ReadableMap?) {
+  override fun setFocusArea(view: ScannerView?, focusArea: ReadableMap?) {
     if (focusArea != null) {
-      val enabled = focusArea.getBoolean("enabled") ?: false
-      val showOverlay = focusArea.getBoolean("showOverlay") ?: false
+      val enabled = focusArea.getBoolean("enabled")
+      val showOverlay = focusArea.getBoolean("showOverlay")
       val borderColor = focusArea.getString("borderColor")
       val tintColor = focusArea.getString("tintColor")
       val size = focusArea.getDynamic("size")
       val position = focusArea.getMap("position")
-      
+
       // Set focus area properties
       view?.setFocusAreaEnabled(enabled)
       view?.setEnableFrame(showOverlay)
-      
+
       if (borderColor != null) {
         view?.setBorderColor(borderColor)
       }
-      
+
       if (tintColor != null) {
         view?.setTintColor(tintColor)
       }
-      
+
       if (position != null) {
         val x = position.getDouble("x").toFloat()
         val y = position.getDouble("y").toFloat()
         view?.setPosition(x, y)
       }
-      
+
       if (size != null) {
         val frameSize: FrameSize = when {
           size.type == ReadableType.Number -> FrameSize.Square(size.asInt())
@@ -76,40 +84,40 @@ class ScannerViewManager : SimpleViewManager<ScannerView>() {
         }
         view?.setFrameSize(frameSize)
       }
-      
+
       Log.d("ScannerViewManager", "Focus area configured: enabled=$enabled, showOverlay=$showOverlay, borderColor=$borderColor, tintColor=$tintColor, position=$position")
     }
   }
 
   // Barcode frames configuration
   @ReactProp(name = "barcodeFrames")
-  fun setBarcodeFrames(view: ScannerView?, barcodeFrames: ReadableMap?) {
+  override fun setBarcodeFrames(view: ScannerView?, barcodeFrames: ReadableMap?) {
     if (barcodeFrames != null) {
       val enabled = barcodeFrames.getBoolean("enabled") ?: false
       val color = barcodeFrames.getString("color")
       val onlyInFocusArea = barcodeFrames.getBoolean("onlyInFocusArea") ?: false
-      
+
       // Set barcode frames properties
       view?.setBarcodeFramesEnabled(enabled)
       view?.setShowBarcodeFramesOnlyInFrame(onlyInFocusArea)
-      
+
       if (color != null) {
         view?.setBarcodeFramesColor(color)
       }
-      
+
       Log.d("ScannerViewManager", "Barcode frames configured: enabled=$enabled, onlyInFocusArea=$onlyInFocusArea, color=$color")
     }
   }
 
   // Torch control
   @ReactProp(name = "torch")
-  fun setTorch(view: ScannerView?, enabled: Boolean?) {
-    view?.setTorch(enabled ?: false)
+  override fun setTorch(view: ScannerView, value: Boolean) {
+    view.setTorch(value)
   }
 
   // Event handlers
   @ReactProp(name = "onBarcodeScanned")
-  fun setOnBarcodeScanned(view: ScannerView?, onBarcodeScanned: Boolean?) {
+   fun setOnBarcodeScanned(view: ScannerView?, onBarcodeScanned: Boolean?) {
     // This prop is used to register the event handler
     // The actual event emission happens in ScannerView.processImage()
     Log.d("ScannerViewManager", "onBarcodeScanned event handler registered")
@@ -128,33 +136,49 @@ class ScannerViewManager : SimpleViewManager<ScannerView>() {
   }
 
   @ReactProp(name = "zoom")
-  fun setZoom(view: ScannerView?, zoom: Double) {
+  override fun setZoom(view: ScannerView?, zoom: Double) {
     view?.setZoom(zoom.toFloat())
   }
 
   @ReactProp(name = "pauseScanning")
-  fun setPauseScanning(view: ScannerView?, pause: Boolean?) {
-    if (pause == true) {
-      view?.pauseScanning()
+  override fun setPauseScanning(view: ScannerView, value: Boolean) {
+    if (value) {
+      view.pauseScanning()
     } else {
-      view?.resumeScanning()
+      view.resumeScanning()
     }
   }
 
   @ReactProp(name = "barcodeScanStrategy")
-  fun setBarcodeScanStrategy(view: ScannerView?, strategy: String?) {
+  override fun setBarcodeScanStrategy(view: ScannerView?, strategy: String?) {
     view?.setBarcodeScanStrategy(strategy ?: "ALL")
   }
 
   @ReactProp(name = "keepScreenOn")
-  fun setKeepScreenOn(view: ScannerView?, keepOn: Boolean?) {
-    view?.setKeepScreenOnEnabled(keepOn ?: true)
+  override fun setKeepScreenOn(view: ScannerView, value: Boolean) {
+    view.setKeepScreenOnEnabled(value)
   }
 
   @ReactProp(name = "barcodeEmissionInterval")
-  fun setBarcodeEmissionInterval(view: ScannerView?, interval: Double) {
-    // Use 0.5 as default if interval is 0 or negative (React Native may pass 0 for undefined)
-    val actualInterval = if (interval > 0) interval else 0.5
+  override fun setBarcodeEmissionInterval(view: ScannerView?, interval: Double) {
+    Log.d("ScannerViewManager", "📊 [@ReactProp] barcodeEmissionInterval received: $interval")
+
+    // WithDefault<Double, 0.5> in TypeScript means codegen handles the default automatically
+    // If negative, clamp to 0 (minimum value)
+    // If 0, disable debouncing
+    // Otherwise, use the provided value (0 or positive)
+    val actualInterval = if (interval < 0) {
+      Log.d("ScannerViewManager", "📊 Clamping negative interval ($interval) to 0.0 (minimum)")
+      0.0 // Negative values clamped to 0 (minimum)
+    } else {
+      if (interval == 0.0) {
+        Log.d("ScannerViewManager", "📊 Using interval: ${interval}s (explicitly set to 0, will disable debouncing)")
+      } else {
+        Log.d("ScannerViewManager", "📊 Using interval: ${interval}s")
+      }
+      interval // Use provided value (0 or positive)
+    }
+    Log.d("ScannerViewManager", "📊 Final interval to set: ${actualInterval}s")
     view?.setBarcodeEmissionInterval(actualInterval)
   }
 
@@ -169,7 +193,16 @@ class ScannerViewManager : SimpleViewManager<ScannerView>() {
         "bubbled" to "onBarcodeScanned"
       )
     )
-    // Add more events here if needed
+    map["onLoad"] = mapOf(
+      "phasedRegistrationNames" to mapOf(
+        "bubbled" to "onLoad"
+      )
+    )
+    map["onScannerError"] = mapOf(
+      "phasedRegistrationNames" to mapOf(
+        "bubbled" to "onScannerError"
+      )
+    )
     return map
   }
 }

package/ios/ScannerView.mm

@@ -263,7 +263,11 @@ using namespace facebook::react;
 
     // Barcode emission interval
     if (oldViewProps.barcodeEmissionInterval != newViewProps.barcodeEmissionInterval) {
-        NSNumber *intervalValue = @(newViewProps.barcodeEmissionInterval);
+        // Handle negative values (clamp to 0)
+        double interval = newViewProps.barcodeEmissionInterval;
+        double actualInterval = interval < 0 ? 0.0 : interval;
+        
+        NSNumber *intervalValue = @(actualInterval);
         if ([_scannerImpl respondsToSelector:@selector(setBarcodeEmissionInterval:)]) {
             [_scannerImpl performSelector:@selector(setBarcodeEmissionInterval:) withObject:intervalValue];
         }

package/lib/module/ScannerViewNativeComponent.ts

@@ -6,6 +6,7 @@ import {
 import type {
   DirectEventHandler,
   Double,
+  WithDefault,
 } from 'react-native/Libraries/Types/CodegenTypesNamespace';
 
 // Define codegen types locally (no longer exported from react-native in 0.83)
@@ -111,7 +112,7 @@ export interface NativeProps extends ViewProps {
    * Prevents rapid duplicate detections. Set to 0 to disable debouncing.
    * @default 0.5
    */
-  barcodeEmissionInterval?: Double;
+  barcodeEmissionInterval?: WithDefault<Double, 0.5>;
 
   onBarcodeScanned?: DirectEventHandler<BarcodeScannedEventPayload>;
   onScannerError?: DirectEventHandler<ScannerErrorEventPayload>;

package/lib/typescript/src/ScannerViewNativeComponent.d.ts

@@ -1,5 +1,5 @@
 import { type ViewProps, type NativeSyntheticEvent } from 'react-native';
-import type { DirectEventHandler, Double } from 'react-native/Libraries/Types/CodegenTypesNamespace';
+import type { DirectEventHandler, Double, WithDefault } from 'react-native/Libraries/Types/CodegenTypesNamespace';
 export interface BarcodeScannedEventPayload {
     barcodes: {
         data: string;
@@ -81,7 +81,7 @@ export interface NativeProps extends ViewProps {
      * Prevents rapid duplicate detections. Set to 0 to disable debouncing.
      * @default 0.5
      */
-    barcodeEmissionInterval?: Double;
+    barcodeEmissionInterval?: WithDefault<Double, 0.5>;
     onBarcodeScanned?: DirectEventHandler<BarcodeScannedEventPayload>;
     onScannerError?: DirectEventHandler<ScannerErrorEventPayload>;
     onLoad?: DirectEventHandler<OnLoadEventPayload>;

package/lib/typescript/src/ScannerViewNativeComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScannerViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/ScannerViewNativeComponent.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ScannerViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/ScannerViewNativeComponent.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cleanuidev/react-native-scanner",
-  "version": "1.0.0-beta.1",
-  "description": "scanner",
+  "version": "1.0.0-beta.3",
+  "description": "High-performance native barcode and QR code scanner for React Native. Scan barcodes in configurable target areas for precise detection. Built with CameraX & ML Kit (Android) and AVFoundation & Vision (iOS).",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
   "exports": {
@@ -45,18 +45,42 @@
   "keywords": [
     "react-native",
     "ios",
-    "android"
+    "android",
+    "barcode-scanner",
+    "qr-code-scanner",
+    "barcode",
+    "qr-code",
+    "qrcode",
+    "scanner",
+    "camera",
+    "camerax",
+    "ml-kit",
+    "avfoundation",
+    "vision",
+    "react-native-scanner",
+    "barcode-detection",
+    "qr-detection",
+    "mobile-scanner",
+    "native-scanner",
+    "fabric",
+    "new architecture",
+    "focus area",
+    "region scanning",
+    "frame scanning",
+    "area scanning",
+    "targeted-scanning",
+    "precise-scanning"
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/cleanui-dev/react-native-scanner.git"
+    "url": "git+https://github.com/rahulgwebdev/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"
+    "url": "https://github.com/rahulgwebdev/react-native-scanner/issues"
   },
-  "homepage": "https://github.com/cleanui-dev/react-native-scanner#readme",
+  "homepage": "https://github.com/rahulgwebdev/react-native-scanner#readme",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"

package/src/ScannerViewNativeComponent.ts

@@ -6,6 +6,7 @@ import {
 import type {
   DirectEventHandler,
   Double,
+  WithDefault,
 } from 'react-native/Libraries/Types/CodegenTypesNamespace';
 
 // Define codegen types locally (no longer exported from react-native in 0.83)
@@ -111,7 +112,7 @@ export interface NativeProps extends ViewProps {
    * Prevents rapid duplicate detections. Set to 0 to disable debouncing.
    * @default 0.5
    */
-  barcodeEmissionInterval?: Double;
+  barcodeEmissionInterval?: WithDefault<Double, 0.5>;
 
   onBarcodeScanned?: DirectEventHandler<BarcodeScannedEventPayload>;
   onScannerError?: DirectEventHandler<ScannerErrorEventPayload>;