react-native-pdf417-scanner 1.1.0 → 1.2.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/package.json

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