@transfergratis/react-native-sdk 0.1.2

package/build/components/CustomCameraExample.js

@@ -0,0 +1,232 @@
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, Alert } from 'react-native';
+import { EnhancedCameraView } from './EnhancedCameraView';
+export const CustomCameraExample = ({ onPhotoTaken, customInstructions = "Centrez votre visage dans le cadre", overlayColor = "rgba(0, 0, 0, 0.5)", showGrid = true }) => {
+    const [isVisible, setIsVisible] = useState(false);
+    const [capturedImage, setCapturedImage] = useState(null);
+    const handleCapture = (result) => {
+        console.log('Capture result:', result);
+        if (result.success && result.path) {
+            setCapturedImage(result.path);
+            setIsVisible(false);
+            onPhotoTaken?.(result.path);
+            Alert.alert('Succès', 'Photo capturée avec succès !');
+        }
+        else {
+            Alert.alert('Erreur', result.error || 'Échec de la capture');
+        }
+    };
+    const handleError = (event) => {
+        Alert.alert('Erreur', event.message || 'Une erreur est survenue');
+        setIsVisible(false);
+    };
+    if (!isVisible) {
+        return (<View style={styles.container}>
+        <Text style={styles.title}>Caméra Personnalisée</Text>
+        <Text style={styles.subtitle}>
+          Exemple d'intégration de la vue caméra native avec overlay personnalisé
+        </Text>
+        
+        <TouchableOpacity style={styles.openButton} onPress={() => setIsVisible(true)}>
+          <Text style={styles.openButtonText}>📸 Ouvrir la Caméra</Text>
+        </TouchableOpacity>
+
+        {capturedImage && (<View style={styles.resultContainer}>
+            <Text style={styles.resultText}>
+              Dernière photo : {capturedImage}
+            </Text>
+          </View>)}
+      </View>);
+    }
+    return (<View style={styles.cameraContainer}>
+      {/* Vue caméra Vision Camera */}
+      <EnhancedCameraView instructions={customInstructions} showCamera={true} cameraType="front" style={styles.camera} onCapture={handleCapture} onError={handleError} onClose={() => setIsVisible(false)} quality="high" showCaptureButton={true} showSwitchCamera={true} overlayComponent={<View style={[styles.overlay, { backgroundColor: overlayColor }]} pointerEvents="none">
+            {/* Grille d'aide (optionnelle) */}
+            {showGrid && (<View style={styles.grid}>
+                <View style={styles.gridLine}/>
+                <View style={[styles.gridLine, styles.gridLineVertical]}/>
+              </View>)}
+            
+            {/* Cadre de guidage pour le visage */}
+            <View style={styles.faceFrame}>
+              <View style={styles.corner}/>
+              <View style={[styles.corner, styles.cornerTopRight]}/>
+              <View style={[styles.corner, styles.cornerBottomLeft]}/>
+              <View style={[styles.corner, styles.cornerBottomRight]}/>
+            </View>
+            
+            {/* Instructions personnalisées en plus de celles de base */}
+            <View style={styles.instructionsContainer}>
+              <Text style={styles.hint}>
+                💡 Astuce: Assurez-vous d'être bien éclairé
+              </Text>
+            </View>
+          </View>}/>
+    </View>);
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        padding: 20,
+        backgroundColor: '#f5f5f5',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        color: '#333',
+        marginBottom: 10,
+        textAlign: 'center',
+    },
+    subtitle: {
+        fontSize: 16,
+        color: '#666',
+        textAlign: 'center',
+        marginBottom: 30,
+        lineHeight: 22,
+    },
+    openButton: {
+        backgroundColor: '#4CAF50',
+        paddingHorizontal: 30,
+        paddingVertical: 15,
+        borderRadius: 10,
+        marginBottom: 20,
+    },
+    openButtonText: {
+        color: 'white',
+        fontSize: 18,
+        fontWeight: '600',
+    },
+    resultContainer: {
+        backgroundColor: 'white',
+        padding: 15,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: '#ddd',
+    },
+    resultText: {
+        fontSize: 14,
+        color: '#333',
+    },
+    cameraContainer: {
+        flex: 1,
+        position: 'relative',
+    },
+    camera: {
+        flex: 1,
+    },
+    overlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    grid: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+    },
+    gridLine: {
+        position: 'absolute',
+        backgroundColor: 'rgba(255, 255, 255, 0.3)',
+        width: '100%',
+        height: 1,
+        top: '33%',
+    },
+    gridLineVertical: {
+        width: 1,
+        height: '100%',
+        left: '33%',
+        top: 0,
+    },
+    faceFrame: {
+        width: 250,
+        height: 300,
+        borderWidth: 2,
+        borderColor: 'transparent',
+        borderRadius: 20,
+        position: 'relative',
+    },
+    corner: {
+        position: 'absolute',
+        width: 30,
+        height: 30,
+        borderColor: '#4CAF50',
+        borderWidth: 3,
+        top: -3,
+        left: -3,
+        borderBottomColor: 'transparent',
+        borderRightColor: 'transparent',
+        borderRadius: 5,
+    },
+    cornerTopRight: {
+        top: -3,
+        right: -3,
+        left: 'auto',
+        borderLeftColor: 'transparent',
+        borderBottomColor: 'transparent',
+    },
+    cornerBottomLeft: {
+        bottom: -3,
+        left: -3,
+        top: 'auto',
+        borderTopColor: 'transparent',
+        borderRightColor: 'transparent',
+    },
+    cornerBottomRight: {
+        bottom: -3,
+        right: -3,
+        top: 'auto',
+        left: 'auto',
+        borderTopColor: 'transparent',
+        borderLeftColor: 'transparent',
+    },
+    instructionsContainer: {
+        position: 'absolute',
+        top: 80,
+        left: 20,
+        right: 20,
+        alignItems: 'center',
+    },
+    customInstructions: {
+        color: 'white',
+        fontSize: 18,
+        fontWeight: '600',
+        textAlign: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.7)',
+        padding: 10,
+        borderRadius: 10,
+        marginBottom: 10,
+    },
+    hint: {
+        color: 'white',
+        fontSize: 14,
+        textAlign: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        padding: 8,
+        borderRadius: 8,
+    },
+    closeButton: {
+        position: 'absolute',
+        top: 50,
+        right: 20,
+        backgroundColor: 'rgba(0, 0, 0, 0.7)',
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    closeButtonText: {
+        color: 'white',
+        fontSize: 20,
+        fontWeight: 'bold',
+    },
+});
+//# sourceMappingURL=CustomCameraExample.js.map

package/build/components/CustomCameraExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomCameraExample.js","sourceRoot":"","sources":["../../src/components/CustomCameraExample.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport { View, Text, TouchableOpacity, StyleSheet, Alert } from 'react-native';\nimport { EnhancedCameraView } from './EnhancedCameraView';\n\ninterface CustomCameraExampleProps {\n  onPhotoTaken?: (imagePath: string) => void;\n  customInstructions?: string;\n  overlayColor?: string;\n  showGrid?: boolean;\n}\n\nexport const CustomCameraExample: React.FC<CustomCameraExampleProps> = ({\n  onPhotoTaken,\n  customInstructions = \"Centrez votre visage dans le cadre\",\n  overlayColor = \"rgba(0, 0, 0, 0.5)\",\n  showGrid = true\n}) => {\n  const [isVisible, setIsVisible] = useState(false);\n  const [capturedImage, setCapturedImage] = useState<string | null>(null);\n\n  const handleCapture = (result: { success: boolean; path?: string; error?: string }) => {\n    console.log('Capture result:', result);\n    \n    if (result.success && result.path) {\n      setCapturedImage(result.path);\n      setIsVisible(false);\n      onPhotoTaken?.(result.path);\n      Alert.alert('Succès', 'Photo capturée avec succès !');\n    } else {\n      Alert.alert('Erreur', result.error || 'Échec de la capture');\n    }\n  };\n\n  const handleError = (event: { message: string }) => {\n    Alert.alert('Erreur', event.message || 'Une erreur est survenue');\n    setIsVisible(false);\n  };\n\n  if (!isVisible) {\n    return (\n      <View style={styles.container}>\n        <Text style={styles.title}>Caméra Personnalisée</Text>\n        <Text style={styles.subtitle}>\n          Exemple d'intégration de la vue caméra native avec overlay personnalisé\n        </Text>\n        \n        <TouchableOpacity\n          style={styles.openButton}\n          onPress={() => setIsVisible(true)}\n        >\n          <Text style={styles.openButtonText}>📸 Ouvrir la Caméra</Text>\n        </TouchableOpacity>\n\n        {capturedImage && (\n          <View style={styles.resultContainer}>\n            <Text style={styles.resultText}>\n              Dernière photo : {capturedImage}\n            </Text>\n          </View>\n        )}\n      </View>\n    );\n  }\n\n  return (\n    <View style={styles.cameraContainer}>\n      {/* Vue caméra Vision Camera */}\n      <EnhancedCameraView\n        instructions={customInstructions}\n        showCamera={true}\n        cameraType=\"front\"\n        style={styles.camera}\n        onCapture={handleCapture}\n        onError={handleError}\n        onClose={() => setIsVisible(false)}\n        quality=\"high\"\n        showCaptureButton={true}\n        showSwitchCamera={true}\n        overlayComponent={\n          <View style={[styles.overlay, { backgroundColor: overlayColor }]} pointerEvents=\"none\">\n            {/* Grille d'aide (optionnelle) */}\n            {showGrid && (\n              <View style={styles.grid}>\n                <View style={styles.gridLine} />\n                <View style={[styles.gridLine, styles.gridLineVertical]} />\n              </View>\n            )}\n            \n            {/* Cadre de guidage pour le visage */}\n            <View style={styles.faceFrame}>\n              <View style={styles.corner} />\n              <View style={[styles.corner, styles.cornerTopRight]} />\n              <View style={[styles.corner, styles.cornerBottomLeft]} />\n              <View style={[styles.corner, styles.cornerBottomRight]} />\n            </View>\n            \n            {/* Instructions personnalisées en plus de celles de base */}\n            <View style={styles.instructionsContainer}>\n              <Text style={styles.hint}>\n                💡 Astuce: Assurez-vous d'être bien éclairé\n              </Text>\n            </View>\n          </View>\n        }\n      />\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    padding: 20,\n    backgroundColor: '#f5f5f5',\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  title: {\n    fontSize: 24,\n    fontWeight: 'bold',\n    color: '#333',\n    marginBottom: 10,\n    textAlign: 'center',\n  },\n  subtitle: {\n    fontSize: 16,\n    color: '#666',\n    textAlign: 'center',\n    marginBottom: 30,\n    lineHeight: 22,\n  },\n  openButton: {\n    backgroundColor: '#4CAF50',\n    paddingHorizontal: 30,\n    paddingVertical: 15,\n    borderRadius: 10,\n    marginBottom: 20,\n  },\n  openButtonText: {\n    color: 'white',\n    fontSize: 18,\n    fontWeight: '600',\n  },\n  resultContainer: {\n    backgroundColor: 'white',\n    padding: 15,\n    borderRadius: 10,\n    borderWidth: 1,\n    borderColor: '#ddd',\n  },\n  resultText: {\n    fontSize: 14,\n    color: '#333',\n  },\n  cameraContainer: {\n    flex: 1,\n    position: 'relative',\n  },\n  camera: {\n    flex: 1,\n  },\n  overlay: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  grid: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n  },\n  gridLine: {\n    position: 'absolute',\n    backgroundColor: 'rgba(255, 255, 255, 0.3)',\n    width: '100%',\n    height: 1,\n    top: '33%',\n  },\n  gridLineVertical: {\n    width: 1,\n    height: '100%',\n    left: '33%',\n    top: 0,\n  },\n  faceFrame: {\n    width: 250,\n    height: 300,\n    borderWidth: 2,\n    borderColor: 'transparent',\n    borderRadius: 20,\n    position: 'relative',\n  },\n  corner: {\n    position: 'absolute',\n    width: 30,\n    height: 30,\n    borderColor: '#4CAF50',\n    borderWidth: 3,\n    top: -3,\n    left: -3,\n    borderBottomColor: 'transparent',\n    borderRightColor: 'transparent',\n    borderRadius: 5,\n  },\n  cornerTopRight: {\n    top: -3,\n    right: -3,\n    left: 'auto',\n    borderLeftColor: 'transparent',\n    borderBottomColor: 'transparent',\n  },\n  cornerBottomLeft: {\n    bottom: -3,\n    left: -3,\n    top: 'auto',\n    borderTopColor: 'transparent',\n    borderRightColor: 'transparent',\n  },\n  cornerBottomRight: {\n    bottom: -3,\n    right: -3,\n    top: 'auto',\n    left: 'auto',\n    borderTopColor: 'transparent',\n    borderLeftColor: 'transparent',\n  },\n  instructionsContainer: {\n    position: 'absolute',\n    top: 80,\n    left: 20,\n    right: 20,\n    alignItems: 'center',\n  },\n  customInstructions: {\n    color: 'white',\n    fontSize: 18,\n    fontWeight: '600',\n    textAlign: 'center',\n    backgroundColor: 'rgba(0, 0, 0, 0.7)',\n    padding: 10,\n    borderRadius: 10,\n    marginBottom: 10,\n  },\n  hint: {\n    color: 'white',\n    fontSize: 14,\n    textAlign: 'center',\n    backgroundColor: 'rgba(0, 0, 0, 0.5)',\n    padding: 8,\n    borderRadius: 8,\n  },\n  closeButton: {\n    position: 'absolute',\n    top: 50,\n    right: 20,\n    backgroundColor: 'rgba(0, 0, 0, 0.7)',\n    width: 40,\n    height: 40,\n    borderRadius: 20,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  closeButtonText: {\n    color: 'white',\n    fontSize: 20,\n    fontWeight: 'bold',\n  },\n});"]}

package/build/components/EnhancedCameraView.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+export interface EnhancedCameraViewProps {
+    instructions?: string;
+    showCamera: boolean;
+    cameraType?: 'front' | 'back';
+    style?: ViewStyle;
+    onCapture?: (result: {
+        success: boolean;
+        path?: string;
+        error?: string;
+    }) => void;
+    onError?: (event: {
+        message: string;
+    }) => void;
+    onClose?: () => void;
+    enableFlash?: boolean;
+    enableHdr?: boolean;
+    quality?: 'low' | 'medium' | 'high';
+    showCaptureButton?: boolean;
+    showSwitchCamera?: boolean;
+    overlayComponent?: React.ReactNode;
+    bbox?: {
+        xMin: number;
+        yMin: number;
+        xMax: number;
+        yMax: number;
+        borderColor?: string;
+        borderWidth?: number;
+        cornerRadius?: number;
+    };
+    canFlip?: boolean;
+    enableVideo?: boolean;
+    isRecording?: boolean;
+    onVideoRecordingStart?: () => void;
+    onVideoRecordingStop?: (result: {
+        success: boolean;
+        path?: string;
+        error?: string;
+    }) => void;
+    videoDuration?: number;
+}
+export declare const EnhancedCameraView: React.FC<EnhancedCameraViewProps>;
+//# sourceMappingURL=EnhancedCameraView.d.ts.map

package/build/components/EnhancedCameraView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnhancedCameraView.d.ts","sourceRoot":"","sources":["../../src/components/EnhancedCameraView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,EAA4C,SAAS,EAAE,MAAM,cAAc,CAAC;AAInF,MAAM,WAAW,uBAAuB;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAClF,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACpC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,IAAI,CAAC,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;IACF,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,oBAAoB,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7F,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA8QhE,CAAC"}

package/build/components/EnhancedCameraView.js

@@ -0,0 +1,316 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
+import { Camera, useCameraDevice } from 'react-native-vision-camera';
+import VisionCameraModule from '../modules/camera/VisionCameraModule';
+export const EnhancedCameraView = ({ instructions = 'Position yourself in the frame and tap the capture button', showCamera, cameraType: initialCameraType = 'front', style, onCapture, onError, onClose, enableFlash = false, enableHdr = false, quality = 'high', showCaptureButton = true, showSwitchCamera = true, overlayComponent, bbox, canFlip = true, enableVideo = false, isRecording = false, onVideoRecordingStart, onVideoRecordingStop, videoDuration = 10, }) => {
+    const camera = useRef(null);
+    const [cameraType, setCameraType] = useState(initialCameraType);
+    const [hasPermission, setHasPermission] = useState(false);
+    const [isInitialized, setIsInitialized] = useState(false);
+    const [flash, setFlash] = useState('off');
+    const device = useCameraDevice(cameraType);
+    // Check permissions on component mount
+    useEffect(() => {
+        if (showCamera) {
+            checkPermissions();
+        }
+    }, [showCamera]);
+    const checkPermissions = async () => {
+        try {
+            const hasAllPermissions = await VisionCameraModule.hasAllPermissions();
+            if (!hasAllPermissions) {
+                const granted = await VisionCameraModule.requestAllPermissions();
+                if (!granted) {
+                    onError?.({ message: 'Camera permissions not granted' });
+                    return;
+                }
+            }
+            setHasPermission(true);
+        }
+        catch (error) {
+            console.error('Error checking permissions:', error);
+            onError?.({ message: 'Error checking camera permissions' });
+        }
+    };
+    const onInitialized = useCallback(() => {
+        console.log('Camera initialized!');
+        setIsInitialized(true);
+    }, []);
+    const onCameraError = useCallback((error) => {
+        console.error('Camera error:', error);
+        onError?.({ message: error.message || 'Camera error occurred' });
+    }, [onError]);
+    const capturePhoto = useCallback(async () => {
+        try {
+            if (!camera.current || !isInitialized) {
+                onError?.({ message: 'Camera not ready' });
+                return;
+            }
+            const photo = await camera.current.takePhoto({
+                enableShutterSound: true,
+                flash: enableFlash ? flash : 'off',
+            });
+            const result = VisionCameraModule.processPhotoResult(photo);
+            onCapture?.(result);
+        }
+        catch (error) {
+            console.error('Error taking photo:', error);
+            onCapture?.({
+                success: false,
+                error: error instanceof Error ? error.message : 'Failed to capture photo',
+            });
+        }
+    }, [isInitialized, quality, flash, enableFlash, onCapture, onError]);
+    const startVideoRecording = useCallback(async () => {
+        try {
+            if (!camera.current || !isInitialized) {
+                onError?.({ message: 'Camera not ready' });
+                return;
+            }
+            await camera.current.startRecording({
+                onRecordingFinished: (video) => {
+                    onVideoRecordingStop?.({
+                        success: true,
+                        path: video.path,
+                    });
+                },
+                onRecordingError: (error) => {
+                    console.error('Recording error:', error);
+                    onVideoRecordingStop?.({
+                        success: false,
+                        error: error.message || 'Failed to record video',
+                    });
+                },
+            });
+            onVideoRecordingStart?.();
+        }
+        catch (error) {
+            console.error('Error starting video recording:', error);
+            onVideoRecordingStop?.({
+                success: false,
+                error: error instanceof Error ? error.message : 'Failed to start video recording',
+            });
+        }
+    }, [isInitialized, onVideoRecordingStart, onVideoRecordingStop, onError]);
+    const stopVideoRecording = useCallback(async () => {
+        try {
+            if (!camera.current) {
+                onError?.({ message: 'Camera not ready' });
+                return;
+            }
+            await camera.current.stopRecording();
+        }
+        catch (error) {
+            console.error('Error stopping video recording:', error);
+            onError?.({ message: 'Failed to stop video recording' });
+        }
+    }, [onError]);
+    const switchCamera = useCallback(() => {
+        setCameraType(current => current === 'front' ? 'back' : 'front');
+    }, []);
+    const toggleFlash = useCallback(() => {
+        setFlash(current => {
+            switch (current) {
+                case 'off': return 'on';
+                case 'on': return 'auto';
+                case 'auto': return 'off';
+                default: return 'off';
+            }
+        });
+    }, []);
+    if (!hasPermission) {
+        return (<View style={[styles.container, style]}>
+        <Text style={styles.permissionMessage}>
+          Camera permission required. Please grant permission to continue.
+        </Text>
+      </View>);
+    }
+    if (!device) {
+        return (<View style={[styles.container, style]}>
+        <Text style={styles.errorMessage}>
+          Camera device not available
+        </Text>
+      </View>);
+    }
+    if (!showCamera) {
+        return <View style={[styles.container, style]}/>;
+    }
+    return (<View style={[styles.container, style]}>
+      <Camera ref={camera} style={StyleSheet.absoluteFill} device={device} isActive={showCamera} photo={true} video={enableVideo} audio={enableVideo} onInitialized={onInitialized} onError={onCameraError}/>
+
+      {/* Instructions */}
+      {/* {instructions && (
+            <View style={styles.instructionsOverlay}>
+              <Text style={styles.instructions}>{instructions}</Text>
+            </View>
+          )} */}
+
+      {/* Custom overlay component */}
+      {overlayComponent}
+
+      {/* Bounding box overlay */}
+      {bbox && (<View style={styles.bboxOverlay}>
+                      <View style={[
+                styles.bbox,
+                {
+                    left: `${bbox.xMin}%`,
+                    top: `${bbox.yMin}%`,
+                    width: `${bbox.xMax - bbox.xMin}%`,
+                    height: `${bbox.yMax - bbox.yMin}%`,
+                    borderColor: bbox.borderColor || '#2DBD60',
+                    borderWidth: bbox.borderWidth || 3,
+                    borderRadius: bbox.cornerRadius || 8,
+                }
+            ]}/>
+        </View>)}
+
+
+      {/* Camera controls */}
+      <View style={styles.controlsContainer}>
+        {/* Flash button */}
+        {enableFlash && (<TouchableOpacity style={styles.controlButton} onPress={toggleFlash}>
+            <Text style={styles.controlButtonText}>
+              {flash === 'off' ? '⚡' : flash === 'on' ? '⚡️' : '✨'}
+            </Text>
+          </TouchableOpacity>)}
+
+        {/* Capture button */}
+        {showCaptureButton && !enableVideo && (<TouchableOpacity style={styles.captureButton} onPress={capturePhoto} disabled={!isInitialized}>
+            <View style={[
+                styles.captureButtonInner,
+                !isInitialized && styles.captureButtonDisabled
+            ]}/>
+          </TouchableOpacity>)}
+
+        {/* Video recording button */}
+        {showCaptureButton && enableVideo && (<TouchableOpacity style={[
+                styles.captureButton,
+                isRecording && styles.recordingButton
+            ]} onPress={isRecording ? stopVideoRecording : startVideoRecording} disabled={!isInitialized}>
+            <View style={[
+                styles.captureButtonInner,
+                !isInitialized && styles.captureButtonDisabled,
+                isRecording && styles.recordingButtonInner
+            ]}/>
+          </TouchableOpacity>)}
+
+        {/* Switch camera button */}
+        {showSwitchCamera && canFlip && (<TouchableOpacity style={styles.controlButton} onPress={switchCamera}>
+            <Text style={styles.controlButtonText}>🔄</Text>
+          </TouchableOpacity>)}
+      </View>
+    </View>);
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: 'black',
+    },
+    instructionsOverlay: {
+        position: 'absolute',
+        top: 60,
+        left: 20,
+        right: 20,
+        backgroundColor: 'rgba(0, 0, 0, 0.7)',
+        padding: 15,
+        // borderRadius: 10,
+        zIndex: 1,
+    },
+    instructions: {
+        color: 'white',
+        fontSize: 16,
+        textAlign: 'center',
+        fontWeight: '500',
+    },
+    closeButton: {
+        position: 'absolute',
+        top: 50,
+        right: 20,
+        backgroundColor: 'rgba(0, 0, 0, 0.7)',
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        justifyContent: 'center',
+        alignItems: 'center',
+        zIndex: 2,
+    },
+    closeButtonText: {
+        color: 'white',
+        fontSize: 20,
+        fontWeight: 'bold',
+    },
+    controlsContainer: {
+        position: 'absolute',
+        bottom: 40,
+        left: 0,
+        right: 0,
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+        alignItems: 'center',
+        paddingHorizontal: 40,
+        zIndex: 1,
+    },
+    controlButton: {
+        backgroundColor: 'rgba(0, 0, 0, 0.7)',
+        width: 50,
+        height: 50,
+        borderRadius: 25,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    controlButtonText: {
+        fontSize: 24,
+    },
+    captureButton: {
+        backgroundColor: 'rgba(255, 255, 255, 0.3)',
+        width: 80,
+        height: 80,
+        borderRadius: 40,
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderWidth: 3,
+        borderColor: 'white',
+    },
+    captureButtonInner: {
+        backgroundColor: 'white',
+        width: 60,
+        height: 60,
+        borderRadius: 30,
+    },
+    captureButtonDisabled: {
+        backgroundColor: 'rgba(255, 255, 255, 0.5)',
+    },
+    recordingButton: {
+        backgroundColor: 'rgba(255, 59, 48, 0.3)',
+        borderColor: '#FF3B30',
+    },
+    recordingButtonInner: {
+        backgroundColor: '#FF3B30',
+    },
+    permissionMessage: {
+        color: 'white',
+        fontSize: 16,
+        textAlign: 'center',
+        margin: 20,
+    },
+    errorMessage: {
+        color: 'red',
+        fontSize: 16,
+        textAlign: 'center',
+        margin: 20,
+    },
+    bboxOverlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        pointerEvents: 'none',
+    },
+    bbox: {
+        position: 'absolute',
+        borderStyle: 'solid',
+        backgroundColor: 'transparent',
+    },
+});
+//# sourceMappingURL=EnhancedCameraView.js.map