react-native-pdf417-scanner 1.1.0 → 1.3.0

package/README.md

@@ -1,16 +1,24 @@
 # React Native PDF417 Scanner SDK
 
-A comprehensive React Native SDK for live PDF417 barcode scanning using native Android implementation with ZXing library.
+A comprehensive React Native SDK for live PDF417 barcode scanning with **native camera view** using Android implementation and ZXing library.
 
 ## Features
 
-- **Live PDF417 Scanning**: Real-time barcode detection using device camera
-- **Native Performance**: Optimized native Android implementation with ZXing
-- **Camera Management**: Automatic camera permission handling and lifecycle management
-- **Advanced Controls**: Autofocus, torch/flashlight control, scan timeout
-- **Event-Driven API**: Clean React Native bridge with events and callbacks
-- **Error Handling**: Comprehensive error reporting and recovery
-- **TypeScript Support**: Full TypeScript definitions included
+- **🎥 Live Camera View**: Real-time camera preview with native Android TextureView
+- **📱 Live PDF417 Scanning**: Real-time barcode detection using device camera
+- **⚡ Native Performance**: Optimized native Android implementation with ZXing
+- **🎛️ Camera Management**: Automatic camera permission handling and lifecycle management
+- **🔦 Advanced Controls**: Autofocus, torch/flashlight control, scan timeout
+- **📡 Event-Driven API**: Clean React Native bridge with events and callbacks
+- **🛡️ Error Handling**: Comprehensive error reporting and recovery
+- **📝 TypeScript Support**: Full TypeScript definitions included
+
+## What's New in v1.2.0
+
+- **Native Camera View Component**: Show live camera feed instead of black screen
+- **Real-time Preview**: See exactly what the camera sees while scanning
+- **Overlay Support**: Add custom UI overlays on top of camera view
+- **Better UX**: Professional scanning experience with live preview
 
 ## Installation
 
@@ -65,14 +73,247 @@ add(PDF417ScannerPackage())
 
 ## Usage
 
-### Basic Implementation
+### Method 1: With Native Camera View (Recommended)
+
+```typescript
+import React, { useEffect, useState } from 'react';
+import { View, Modal, TouchableOpacity, Text, StyleSheet } from 'react-native';
+import PDF417Scanner, { 
+  PDF417ScanResult, 
+  PDF417ScanError, 
+  PDF417CameraView 
+} from 'react-native-pdf417-scanner';
+
+const ScannerWithCameraView = () => {
+  const [showScanner, setShowScanner] = useState(false);
+  const [torchEnabled, setTorchEnabled] = useState(false);
+  const [cameraReady, setCameraReady] = useState(false);
+
+  useEffect(() => {
+    const scanResultUnsubscribe = PDF417Scanner.onScanResult(handleScanResult);
+    const scanErrorUnsubscribe = PDF417Scanner.onScanError(handleScanError);
+
+    return () => {
+      scanResultUnsubscribe();
+      scanErrorUnsubscribe();
+    };
+  }, []);
+
+  const handleScanResult = (result: PDF417ScanResult) => {
+    console.log('Scanned:', result.data);
+    setShowScanner(false);
+    // Handle scan result
+  };
+
+  const handleScanError = (error: PDF417ScanError) => {
+    console.error('Scan error:', error);
+  };
+
+  const startScanning = async () => {
+    setShowScanner(true);
+    try {
+      await PDF417Scanner.startScanning({
+        enableAutoFocus: true,
+        enableTorch: torchEnabled,
+        scanTimeout: 30000,
+        enableBeep: true,
+        enableVibration: true,
+      });
+    } catch (error) {
+      console.error('Failed to start scanning:', error);
+      setShowScanner(false);
+    }
+  };
+
+  const stopScanning = async () => {
+    try {
+      await PDF417Scanner.stopScanning();
+      setShowScanner(false);
+      setCameraReady(false);
+    } catch (error) {
+      console.error('Failed to stop scanning:', error);
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity style={styles.scanButton} onPress={startScanning}>
+        <Text style={styles.scanButtonText}>Start Scanning</Text>
+      </TouchableOpacity>
+
+      <Modal visible={showScanner} animationType="slide">
+        <View style={styles.scannerContainer}>
+          {/* Native Camera View */}
+          <PDF417CameraView
+            style={styles.cameraView}
+            isActive={showScanner}
+            torchEnabled={torchEnabled}
+            onCameraReady={() => setCameraReady(true)}
+            onCameraError={(event) => {
+              console.error('Camera error:', event.nativeEvent.error);
+              setShowScanner(false);
+            }}
+          />
+
+          {/* Overlay UI */}
+          <View style={styles.overlay}>
+            {/* Header */}
+            <View style={styles.header}>
+              <TouchableOpacity onPress={stopScanning}>
+                <Text style={styles.closeButton}>Close</Text>
+              </TouchableOpacity>
+              <Text style={styles.title}>Scan PDF417</Text>
+              <TouchableOpacity onPress={() => setTorchEnabled(!torchEnabled)}>
+                <Text style={styles.torchButton}>
+                  {torchEnabled ? 'Flash Off' : 'Flash On'}
+                </Text>
+              </TouchableOpacity>
+            </View>
+
+            {/* Scan Frame */}
+            <View style={styles.scanFrame}>
+              <View style={styles.frameCorner} />
+              <View style={[styles.frameCorner, styles.topRight]} />
+              <View style={[styles.frameCorner, styles.bottomLeft]} />
+              <View style={[styles.frameCorner, styles.bottomRight]} />
+            </View>
+
+            {/* Instructions */}
+            <View style={styles.instructions}>
+              <Text style={styles.instructionText}>
+                {cameraReady 
+                  ? 'Point camera at PDF417 barcode' 
+                  : 'Starting camera...'}
+              </Text>
+            </View>
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  scanButton: {
+    backgroundColor: '#2196F3',
+    paddingHorizontal: 30,
+    paddingVertical: 15,
+    borderRadius: 8,
+  },
+  scanButtonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  scannerContainer: {
+    flex: 1,
+  },
+  cameraView: {
+    flex: 1,
+  },
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingTop: 50,
+    paddingBottom: 20,
+    backgroundColor: 'rgba(0,0,0,0.7)',
+  },
+  closeButton: {
+    color: '#fff',
+    fontSize: 16,
+  },
+  title: {
+    color: '#fff',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  torchButton: {
+    color: '#fff',
+    fontSize: 16,
+  },
+  scanFrame: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    width: 250,
+    height: 150,
+    marginTop: -75,
+    marginLeft: -125,
+  },
+  frameCorner: {
+    position: 'absolute',
+    width: 20,
+    height: 20,
+    borderColor: '#2196F3',
+    borderWidth: 3,
+    borderRightColor: 'transparent',
+    borderBottomColor: 'transparent',
+  },
+  topRight: {
+    top: 0,
+    right: 0,
+    borderTopColor: '#2196F3',
+    borderRightColor: '#2196F3',
+    borderLeftColor: 'transparent',
+    borderBottomColor: 'transparent',
+  },
+  bottomLeft: {
+    bottom: 0,
+    left: 0,
+    borderBottomColor: '#2196F3',
+    borderLeftColor: '#2196F3',
+    borderTopColor: 'transparent',
+    borderRightColor: 'transparent',
+  },
+  bottomRight: {
+    bottom: 0,
+    right: 0,
+    borderBottomColor: '#2196F3',
+    borderRightColor: '#2196F3',
+    borderTopColor: 'transparent',
+    borderLeftColor: 'transparent',
+  },
+  instructions: {
+    position: 'absolute',
+    bottom: 100,
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+  },
+  instructionText: {
+    color: '#fff',
+    fontSize: 16,
+    textAlign: 'center',
+    backgroundColor: 'rgba(0,0,0,0.7)',
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    borderRadius: 8,
+  },
+});
+```
+
+### Method 2: Basic Implementation (Background Scanning)
 
 ```typescript
 import React, { useEffect, useState } from 'react';
 import { View, Button, Alert } from 'react-native';
 import PDF417Scanner, { PDF417ScanResult, PDF417ScanError } from 'react-native-pdf417-scanner';
 
-const ScannerComponent = () => {
+const BasicScannerComponent = () => {
   const [isScanning, setIsScanning] = useState(false);
 
   useEffect(() => {
@@ -139,6 +380,35 @@ const ScannerComponent = () => {
 
 ## API Reference
 
+### Components
+
+#### `PDF417CameraView`
+Native camera view component that displays live camera feed.
+
+**Props:**
+```typescript
+interface PDF417CameraViewProps {
+  style?: ViewStyle;                    // View styling
+  isActive?: boolean;                   // Whether camera should be active
+  torchEnabled?: boolean;               // Flash/torch state
+  onCameraReady?: () => void;           // Called when camera is ready
+  onCameraError?: (event: {             // Called on camera errors
+    nativeEvent: { error: string }
+  }) => void;
+}
+```
+
+**Example:**
+```typescript
+<PDF417CameraView
+  style={{ flex: 1 }}
+  isActive={true}
+  torchEnabled={false}
+  onCameraReady={() => console.log('Camera ready')}
+  onCameraError={(e) => console.log('Error:', e.nativeEvent.error)}
+/>
+```
+
 ### Methods
 
 #### `startScanning(config?: PDF417ScannerConfig): Promise<void>`

package/android/src/main/java/com/pdf417scanner/PDF417CameraView.java

@@ -1,6 +1,8 @@
 package com.pdf417scanner;
 
+import android.Manifest;
 import android.content.Context;
+import android.content.pm.PackageManager;
 import android.graphics.SurfaceTexture;
 import android.hardware.camera2.CameraAccessException;
 import android.hardware.camera2.CameraCaptureSession;
@@ -18,6 +20,7 @@ import android.view.Surface;
 import android.view.TextureView;
 
 import androidx.annotation.NonNull;
+import androidx.core.app.ActivityCompat;
 
 import java.util.Arrays;
 import java.util.concurrent.Semaphore;
@@ -70,6 +73,9 @@ public class PDF417CameraView extends TextureView implements TextureView.Surface
         startBackgroundThread();
         if (isAvailable()) {
             openCamera(getWidth(), getHeight());
+        } else {
+            // Surface not ready yet, will be called from onSurfaceTextureAvailable
+            Log.d(TAG, "Surface texture not available yet, waiting...");
         }
     }
 
@@ -118,6 +124,15 @@ public class PDF417CameraView extends TextureView implements TextureView.Surface
 
     private void openCamera(int width, int height) {
         try {
+            // Check camera permission first
+            if (ActivityCompat.checkSelfPermission(getContext(), Manifest.permission.CAMERA) 
+                != PackageManager.PERMISSION_GRANTED) {
+                if (cameraReadyListener != null) {
+                    cameraReadyListener.onCameraError("Camera permission not granted");
+                }
+                return;
+            }
+
             if (!cameraOpenCloseLock.tryAcquire(2500, TimeUnit.MILLISECONDS)) {
                 throw new RuntimeException("Time out waiting to lock camera opening.");
             }
@@ -193,6 +208,13 @@ public class PDF417CameraView extends TextureView implements TextureView.Surface
     private void createCameraPreviewSession() {
         try {
             SurfaceTexture texture = getSurfaceTexture();
+            if (texture == null) {
+                if (cameraReadyListener != null) {
+                    cameraReadyListener.onCameraError("Surface texture not available");
+                }
+                return;
+            }
+            
             texture.setDefaultBufferSize(previewSize.getWidth(), previewSize.getHeight());
             Surface surface = new Surface(texture);
 
@@ -215,7 +237,7 @@ public class PDF417CameraView extends TextureView implements TextureView.Surface
                         } catch (CameraAccessException e) {
                             Log.e(TAG, "Error starting camera preview", e);
                             if (cameraReadyListener != null) {
-                                cameraReadyListener.onCameraError("Failed to start preview");
+                                cameraReadyListener.onCameraError("Failed to start preview: " + e.getMessage());
                             }
                         }
                     }
@@ -230,7 +252,7 @@ public class PDF417CameraView extends TextureView implements TextureView.Surface
         } catch (CameraAccessException e) {
             Log.e(TAG, "Error creating camera preview session", e);
             if (cameraReadyListener != null) {
-                cameraReadyListener.onCameraError("Failed to create preview session");
+                cameraReadyListener.onCameraError("Failed to create preview session: " + e.getMessage());
             }
         }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-pdf417-scanner",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "React Native SDK for PDF417 barcode scanning with native camera view",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",