@sanctum-key/react-native-sdk 1.0.0

package/build/components/example/OrientationVideoExample.js

@@ -0,0 +1,325 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, Alert, ScrollView, } from 'react-native';
+import OrientationVideoCaptureEnhanced from '../KYCElements/OrientationVideoCaptureEnhanced';
+import kycService from '../../modules/api/KYCService';
+const OrientationVideoExample = () => {
+    const [showVideoCapture, setShowVideoCapture] = useState(false);
+    const [result, setResult] = useState(null);
+    const [isLoading] = useState(false);
+    const handleComplete = (orientationResult) => {
+        setResult(orientationResult);
+        setShowVideoCapture(false);
+        // Check if all orientations were captured
+        const allCaptured = orientationResult.center.captured &&
+            orientationResult.left.captured &&
+            orientationResult.right.captured;
+        if (allCaptured) {
+            Alert.alert('Success!', 'All face orientations have been successfully captured and verified.', [{ text: 'OK' }]);
+        }
+        else {
+            Alert.alert('Partial Success', 'Some orientations were not captured. You may need to retake the video.', [{ text: 'OK' }]);
+        }
+    };
+    const handleError = (error) => {
+        setShowVideoCapture(false);
+        Alert.alert('Error', error, [{ text: 'OK' }]);
+    };
+    const startOrientationCapture = () => {
+        setShowVideoCapture(true);
+        setResult(null);
+    };
+    const resetExample = () => {
+        setShowVideoCapture(false);
+        setResult(null);
+    };
+    const renderResult = () => {
+        if (!result)
+            return null;
+        const { center, left, right } = result;
+        const allCaptured = center.captured && left.captured && right.captured;
+        return (<View style={styles.resultContainer}>
+        <Text style={styles.resultTitle}>
+          Orientation Video Analysis Results
+        </Text>
+        
+        <View style={styles.statusContainer}>
+          <Text style={[
+                styles.statusText,
+                allCaptured ? styles.successText : styles.warningText
+            ]}>
+            {allCaptured ? '✅ All orientations captured' : '⚠️ Some orientations missing'}
+          </Text>
+        </View>
+
+        <View style={styles.orientationDetails}>
+          <View style={styles.orientationItem}>
+            <Text style={styles.orientationLabel}>Center</Text>
+            <Text style={[
+                styles.orientationStatus,
+                center.captured ? styles.capturedText : styles.notCapturedText
+            ]}>
+              {center.captured ? '✅ Captured' : '❌ Not captured'}
+            </Text>
+            {center.captured && (<Text style={styles.frameText}>Frame: {center.frame}</Text>)}
+          </View>
+
+          <View style={styles.orientationItem}>
+            <Text style={styles.orientationLabel}>Left</Text>
+            <Text style={[
+                styles.orientationStatus,
+                left.captured ? styles.capturedText : styles.notCapturedText
+            ]}>
+              {left.captured ? '✅ Captured' : '❌ Not captured'}
+            </Text>
+            {left.captured && (<Text style={styles.frameText}>Frame: {left.frame}</Text>)}
+          </View>
+
+          <View style={styles.orientationItem}>
+            <Text style={styles.orientationLabel}>Right</Text>
+            <Text style={[
+                styles.orientationStatus,
+                right.captured ? styles.capturedText : styles.notCapturedText
+            ]}>
+              {right.captured ? '✅ Captured' : '❌ Not captured'}
+            </Text>
+            {right.captured && (<Text style={styles.frameText}>Frame: {right.frame}</Text>)}
+          </View>
+        </View>
+
+        <View style={styles.instructionsContainer}>
+          <Text style={styles.instructionsTitle}>Instructions for Liveness Detection:</Text>
+          <Text style={styles.instructionText}>• Look straight ahead at the camera</Text>
+          <Text style={styles.instructionText}>• Turn your head to the left</Text>
+          <Text style={styles.instructionText}>• Turn your head to the right</Text>
+          <Text style={styles.instructionText}>• Keep your face within the frame</Text>
+          <Text style={styles.instructionText}>• Ensure good lighting conditions</Text>
+        </View>
+      </View>);
+    };
+    if (showVideoCapture) {
+        return (<OrientationVideoCaptureEnhanced config={{
+                duration: 10,
+                orientations: ['center', 'left', 'right'],
+                instructions: {
+                    center: 'Look straight ahead at the camera',
+                    left: 'Turn your head to the left',
+                    right: 'Turn your head to the right',
+                },
+                showPreview: true,
+                allowRetake: true,
+                maxRetakes: 3,
+                quality: 0.8,
+                aspectRatio: 16 / 9,
+            }} onComplete={handleComplete} onError={handleError} kycService={kycService}/>);
+    }
+    return (<ScrollView style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.title}>Orientation Video Capture Example</Text>
+        <Text style={styles.subtitle}>
+          This example demonstrates liveness detection through face orientation analysis
+        </Text>
+      </View>
+
+      <View style={styles.content}>
+        <View style={styles.infoContainer}>
+          <Text style={styles.infoTitle}>What is Liveness Detection?</Text>
+          <Text style={styles.infoText}>
+            Liveness detection is a security feature that verifies a real person is present 
+            during the verification process, preventing spoofing attacks using photos or videos.
+          </Text>
+        </View>
+
+        <View style={styles.infoContainer}>
+          <Text style={styles.infoTitle}>How it works:</Text>
+          <Text style={styles.infoText}>
+            1. Record a short video (10 seconds){'\n'}
+            2. Follow the on-screen instructions{'\n'}
+            3. Turn your head in different directions{'\n'}
+            4. The system analyzes the video to detect face orientations{'\n'}
+            5. Results show which orientations were successfully captured
+          </Text>
+        </View>
+
+        {renderResult()}
+
+        <View style={styles.buttonContainer}>
+          <TouchableOpacity style={styles.startButton} onPress={startOrientationCapture} disabled={isLoading}>
+            <Text style={styles.startButtonText}>
+              {isLoading ? 'Loading...' : 'Start Orientation Capture'}
+            </Text>
+          </TouchableOpacity>
+
+          {result && (<TouchableOpacity style={styles.resetButton} onPress={resetExample}>
+              <Text style={styles.resetButtonText}>Reset Example</Text>
+            </TouchableOpacity>)}
+        </View>
+      </View>
+    </ScrollView>);
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#f5f5f5',
+    },
+    header: {
+        backgroundColor: '#007AFF',
+        padding: 20,
+        alignItems: 'center',
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        color: '#fff',
+        textAlign: 'center',
+        marginBottom: 10,
+    },
+    subtitle: {
+        fontSize: 16,
+        color: '#fff',
+        textAlign: 'center',
+        opacity: 0.9,
+    },
+    content: {
+        padding: 20,
+    },
+    infoContainer: {
+        backgroundColor: '#fff',
+        padding: 20,
+        borderRadius: 10,
+        marginBottom: 20,
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.1,
+        shadowRadius: 3.84,
+        elevation: 5,
+    },
+    infoTitle: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        color: '#333',
+        marginBottom: 10,
+    },
+    infoText: {
+        fontSize: 14,
+        color: '#666',
+        lineHeight: 20,
+    },
+    resultContainer: {
+        backgroundColor: '#fff',
+        padding: 20,
+        borderRadius: 10,
+        marginBottom: 20,
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.1,
+        shadowRadius: 3.84,
+        elevation: 5,
+    },
+    resultTitle: {
+        fontSize: 20,
+        fontWeight: 'bold',
+        color: '#333',
+        textAlign: 'center',
+        marginBottom: 15,
+    },
+    statusContainer: {
+        alignItems: 'center',
+        marginBottom: 20,
+    },
+    statusText: {
+        fontSize: 16,
+        fontWeight: 'bold',
+    },
+    successText: {
+        color: '#34C759',
+    },
+    warningText: {
+        color: '#FF9500',
+    },
+    orientationDetails: {
+        marginBottom: 20,
+    },
+    orientationItem: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingVertical: 10,
+        borderBottomWidth: 1,
+        borderBottomColor: '#f0f0f0',
+    },
+    orientationLabel: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#333',
+        flex: 1,
+    },
+    orientationStatus: {
+        fontSize: 14,
+        fontWeight: '500',
+        flex: 1,
+        textAlign: 'center',
+    },
+    capturedText: {
+        color: '#34C759',
+    },
+    notCapturedText: {
+        color: '#FF3B30',
+    },
+    frameText: {
+        fontSize: 12,
+        color: '#666',
+        flex: 1,
+        textAlign: 'right',
+    },
+    instructionsContainer: {
+        backgroundColor: '#f8f9fa',
+        padding: 15,
+        borderRadius: 8,
+    },
+    instructionsTitle: {
+        fontSize: 16,
+        fontWeight: 'bold',
+        color: '#333',
+        marginBottom: 10,
+    },
+    instructionText: {
+        fontSize: 14,
+        color: '#666',
+        marginBottom: 5,
+    },
+    buttonContainer: {
+        gap: 15,
+    },
+    startButton: {
+        backgroundColor: '#007AFF',
+        paddingVertical: 15,
+        paddingHorizontal: 30,
+        borderRadius: 25,
+        alignItems: 'center',
+    },
+    startButtonText: {
+        color: '#fff',
+        fontSize: 18,
+        fontWeight: 'bold',
+    },
+    resetButton: {
+        backgroundColor: '#FF3B30',
+        paddingVertical: 15,
+        paddingHorizontal: 30,
+        borderRadius: 25,
+        alignItems: 'center',
+    },
+    resetButtonText: {
+        color: '#fff',
+        fontSize: 18,
+        fontWeight: 'bold',
+    },
+});
+export default OrientationVideoExample;
+//# sourceMappingURL=OrientationVideoExample.js.map

package/build/components/example/OrientationVideoExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrientationVideoExample.js","sourceRoot":"","sources":["../../../src/components/example/OrientationVideoExample.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport {\n  View,\n  Text,\n  StyleSheet,\n  TouchableOpacity,\n  Alert,\n  ScrollView,\n} from 'react-native'; \nimport { OrientationVideoResult } from '../../types/KYC.types';\nimport OrientationVideoCaptureEnhanced from '../KYCElements/OrientationVideoCaptureEnhanced';\nimport kycService from '../../modules/api/KYCService';\n\nconst OrientationVideoExample: React.FC = () => {\n  const [showVideoCapture, setShowVideoCapture] = useState(false);\n  const [result, setResult] = useState<OrientationVideoResult | null>(null);\n  const [isLoading] = useState(false);\n\n  \n\n  const handleComplete = (orientationResult: OrientationVideoResult) => {\n    setResult(orientationResult);\n    setShowVideoCapture(false);\n    \n    // Check if all orientations were captured\n    const allCaptured = orientationResult.center.captured && \n                       orientationResult.left.captured && \n                       orientationResult.right.captured;\n    \n    if (allCaptured) {\n      Alert.alert(\n        'Success!',\n        'All face orientations have been successfully captured and verified.',\n        [{ text: 'OK' }]\n      );\n    } else {\n      Alert.alert(\n        'Partial Success',\n        'Some orientations were not captured. You may need to retake the video.',\n        [{ text: 'OK' }]\n      );\n    }\n  };\n\n  const handleError = (error: string) => {\n    setShowVideoCapture(false);\n    Alert.alert('Error', error, [{ text: 'OK' }]);\n  };\n\n  const startOrientationCapture = () => {\n    setShowVideoCapture(true);\n    setResult(null);\n  };\n\n  const resetExample = () => {\n    setShowVideoCapture(false);\n    setResult(null);\n  };\n\n  const renderResult = () => {\n    if (!result) return null;\n\n    const { center, left, right } = result;\n    const allCaptured = center.captured && left.captured && right.captured;\n\n    return (\n      <View style={styles.resultContainer}>\n        <Text style={styles.resultTitle}>\n          Orientation Video Analysis Results\n        </Text>\n        \n        <View style={styles.statusContainer}>\n          <Text style={[\n            styles.statusText,\n            allCaptured ? styles.successText : styles.warningText\n          ]}>\n            {allCaptured ? '✅ All orientations captured' : '⚠️ Some orientations missing'}\n          </Text>\n        </View>\n\n        <View style={styles.orientationDetails}>\n          <View style={styles.orientationItem}>\n            <Text style={styles.orientationLabel}>Center</Text>\n            <Text style={[\n              styles.orientationStatus,\n              center.captured ? styles.capturedText : styles.notCapturedText\n            ]}>\n              {center.captured ? '✅ Captured' : '❌ Not captured'}\n            </Text>\n            {center.captured && (\n              <Text style={styles.frameText}>Frame: {center.frame}</Text>\n            )}\n          </View>\n\n          <View style={styles.orientationItem}>\n            <Text style={styles.orientationLabel}>Left</Text>\n            <Text style={[\n              styles.orientationStatus,\n              left.captured ? styles.capturedText : styles.notCapturedText\n            ]}>\n              {left.captured ? '✅ Captured' : '❌ Not captured'}\n            </Text>\n            {left.captured && (\n              <Text style={styles.frameText}>Frame: {left.frame}</Text>\n            )}\n          </View>\n\n          <View style={styles.orientationItem}>\n            <Text style={styles.orientationLabel}>Right</Text>\n            <Text style={[\n              styles.orientationStatus,\n              right.captured ? styles.capturedText : styles.notCapturedText\n            ]}>\n              {right.captured ? '✅ Captured' : '❌ Not captured'}\n            </Text>\n            {right.captured && (\n              <Text style={styles.frameText}>Frame: {right.frame}</Text>\n            )}\n          </View>\n        </View>\n\n        <View style={styles.instructionsContainer}>\n          <Text style={styles.instructionsTitle}>Instructions for Liveness Detection:</Text>\n          <Text style={styles.instructionText}>• Look straight ahead at the camera</Text>\n          <Text style={styles.instructionText}>• Turn your head to the left</Text>\n          <Text style={styles.instructionText}>• Turn your head to the right</Text>\n          <Text style={styles.instructionText}>• Keep your face within the frame</Text>\n          <Text style={styles.instructionText}>• Ensure good lighting conditions</Text>\n        </View>\n      </View>\n    );\n  };\n\n  if (showVideoCapture) {\n    return (\n      <OrientationVideoCaptureEnhanced\n        config={{\n          duration: 10,\n          orientations: ['center', 'left', 'right'],\n          instructions: {\n            center: 'Look straight ahead at the camera',\n            left: 'Turn your head to the left',\n            right: 'Turn your head to the right',\n          },\n          showPreview: true,\n          allowRetake: true,\n          maxRetakes: 3,\n          quality: 0.8,\n          aspectRatio: 16 / 9,\n        }}\n        onComplete={handleComplete}\n        onError={handleError}\n        kycService={kycService}\n      />\n    );\n  }\n\n  return (\n    <ScrollView style={styles.container}>\n      <View style={styles.header}>\n        <Text style={styles.title}>Orientation Video Capture Example</Text>\n        <Text style={styles.subtitle}>\n          This example demonstrates liveness detection through face orientation analysis\n        </Text>\n      </View>\n\n      <View style={styles.content}>\n        <View style={styles.infoContainer}>\n          <Text style={styles.infoTitle}>What is Liveness Detection?</Text>\n          <Text style={styles.infoText}>\n            Liveness detection is a security feature that verifies a real person is present \n            during the verification process, preventing spoofing attacks using photos or videos.\n          </Text>\n        </View>\n\n        <View style={styles.infoContainer}>\n          <Text style={styles.infoTitle}>How it works:</Text>\n          <Text style={styles.infoText}>\n            1. Record a short video (10 seconds){'\\n'}\n            2. Follow the on-screen instructions{'\\n'}\n            3. Turn your head in different directions{'\\n'}\n            4. The system analyzes the video to detect face orientations{'\\n'}\n            5. Results show which orientations were successfully captured\n          </Text>\n        </View>\n\n        {renderResult()}\n\n        <View style={styles.buttonContainer}>\n          <TouchableOpacity \n            style={styles.startButton} \n            onPress={startOrientationCapture}\n            disabled={isLoading}\n          >\n            <Text style={styles.startButtonText}>\n              {isLoading ? 'Loading...' : 'Start Orientation Capture'}\n            </Text>\n          </TouchableOpacity>\n\n          {result && (\n            <TouchableOpacity \n              style={styles.resetButton} \n              onPress={resetExample}\n            >\n              <Text style={styles.resetButtonText}>Reset Example</Text>\n            </TouchableOpacity>\n          )}\n        </View>\n      </View>\n    </ScrollView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#f5f5f5',\n  },\n  header: {\n    backgroundColor: '#007AFF',\n    padding: 20,\n    alignItems: 'center',\n  },\n  title: {\n    fontSize: 24,\n    fontWeight: 'bold',\n    color: '#fff',\n    textAlign: 'center',\n    marginBottom: 10,\n  },\n  subtitle: {\n    fontSize: 16,\n    color: '#fff',\n    textAlign: 'center',\n    opacity: 0.9,\n  },\n  content: {\n    padding: 20,\n  },\n  infoContainer: {\n    backgroundColor: '#fff',\n    padding: 20,\n    borderRadius: 10,\n    marginBottom: 20,\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 2,\n    },\n    shadowOpacity: 0.1,\n    shadowRadius: 3.84,\n    elevation: 5,\n  },\n  infoTitle: {\n    fontSize: 18,\n    fontWeight: 'bold',\n    color: '#333',\n    marginBottom: 10,\n  },\n  infoText: {\n    fontSize: 14,\n    color: '#666',\n    lineHeight: 20,\n  },\n  resultContainer: {\n    backgroundColor: '#fff',\n    padding: 20,\n    borderRadius: 10,\n    marginBottom: 20,\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 2,\n    },\n    shadowOpacity: 0.1,\n    shadowRadius: 3.84,\n    elevation: 5,\n  },\n  resultTitle: {\n    fontSize: 20,\n    fontWeight: 'bold',\n    color: '#333',\n    textAlign: 'center',\n    marginBottom: 15,\n  },\n  statusContainer: {\n    alignItems: 'center',\n    marginBottom: 20,\n  },\n  statusText: {\n    fontSize: 16,\n    fontWeight: 'bold',\n  },\n  successText: {\n    color: '#34C759',\n  },\n  warningText: {\n    color: '#FF9500',\n  },\n  orientationDetails: {\n    marginBottom: 20,\n  },\n  orientationItem: {\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    paddingVertical: 10,\n    borderBottomWidth: 1,\n    borderBottomColor: '#f0f0f0',\n  },\n  orientationLabel: {\n    fontSize: 16,\n    fontWeight: '600',\n    color: '#333',\n    flex: 1,\n  },\n  orientationStatus: {\n    fontSize: 14,\n    fontWeight: '500',\n    flex: 1,\n    textAlign: 'center',\n  },\n  capturedText: {\n    color: '#34C759',\n  },\n  notCapturedText: {\n    color: '#FF3B30',\n  },\n  frameText: {\n    fontSize: 12,\n    color: '#666',\n    flex: 1,\n    textAlign: 'right',\n  },\n  instructionsContainer: {\n    backgroundColor: '#f8f9fa',\n    padding: 15,\n    borderRadius: 8,\n  },\n  instructionsTitle: {\n    fontSize: 16,\n    fontWeight: 'bold',\n    color: '#333',\n    marginBottom: 10,\n  },\n  instructionText: {\n    fontSize: 14,\n    color: '#666',\n    marginBottom: 5,\n  },\n  buttonContainer: {\n    gap: 15,\n  },\n  startButton: {\n    backgroundColor: '#007AFF',\n    paddingVertical: 15,\n    paddingHorizontal: 30,\n    borderRadius: 25,\n    alignItems: 'center',\n  },\n  startButtonText: {\n    color: '#fff',\n    fontSize: 18,\n    fontWeight: 'bold',\n  },\n  resetButton: {\n    backgroundColor: '#FF3B30',\n    paddingVertical: 15,\n    paddingHorizontal: 30,\n    borderRadius: 25,\n    alignItems: 'center',\n  },\n  resetButtonText: {\n    color: '#fff',\n    fontSize: 18,\n    fontWeight: 'bold',\n  },\n});\n\nexport default OrientationVideoExample; "]}

package/build/components/example/SelfieCaptureEx.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const SelfieCaptureEx: () => React.JSX.Element;
+export default SelfieCaptureEx;
+//# sourceMappingURL=SelfieCaptureEx.d.ts.map

package/build/components/example/SelfieCaptureEx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelfieCaptureEx.d.ts","sourceRoot":"","sources":["../../../src/components/example/SelfieCaptureEx.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,QAAA,MAAM,eAAe,yBAgRpB,CAAA;AAgFD,eAAe,eAAe,CAAA"}

package/build/components/example/SelfieCaptureEx.js

@@ -0,0 +1,238 @@
+import { StyleSheet, View, Dimensions, Text, Animated, Image } from "react-native";
+import { EnhancedCameraView } from "../EnhancedCameraView";
+import Svg, { Rect, Path, Mask, Defs, LinearGradient, Stop } from 'react-native-svg';
+import React, { useEffect, useRef, useState } from 'react';
+const SelfieCaptureEx = () => {
+    const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
+    const bbox = [20, 140, 370, 340]; // [xMin, yMin, xMax, yMax]
+    const [xMin, yMin, xMax, yMax] = bbox;
+    const boxWidth = xMax - xMin;
+    const boxHeight = yMax - yMin;
+    // Animations
+    // const instructionAnimation = useRef(new Animated.Value(0)).current;
+    const [cornerOpacity, setCornerOpacity] = useState(0.8);
+    const [scanLineX, setScanLineX] = useState({
+        val: yMin - (40 + 280),
+        direction: 'down'
+    });
+    const [imageUrl, setImageUrl] = useState(null);
+    const scanY = useRef(new Animated.Value(yMin)).current;
+    useEffect(() => {
+        // Animation boucle : descend puis remonte
+        Animated.loop(Animated.sequence([
+            Animated.timing(scanY, {
+                toValue: yMax,
+                duration: 2000,
+                useNativeDriver: false,
+            }),
+            Animated.timing(scanY, {
+                toValue: yMin,
+                duration: 2000,
+                useNativeDriver: false,
+            }),
+        ])).start();
+    }, [scanY, yMin, yMax]);
+    useEffect(() => {
+        // Animation des coins avec setState
+        const cornerInterval = setInterval(() => {
+            setCornerOpacity(prev => prev === 0.8 ? 1 : 0.8);
+        }, 800);
+        const scanLineInterval = setInterval(() => {
+            setScanLineX(prev => {
+                const newX = prev.val + (prev.direction === 'up' ? -1 : 1) * Math.round(Math.random() * 2); // Vitesse de déplacement horizontal 
+                if (prev.direction === "down") {
+                    if (newX > yMax - (280 - 40)) {
+                        return { val: yMax + (40), direction: 'up' };
+                    }
+                    else {
+                        return { val: newX, direction: 'down' };
+                    }
+                }
+                else {
+                    if (newX < yMin - (40)) {
+                        return { val: yMin - (40 + 280), direction: 'down' };
+                    }
+                    else {
+                        return { val: newX, direction: 'up' };
+                    }
+                }
+            });
+        }, 2); // Fréquence de mise à jour
+        // Démarrer les animations
+        return () => {
+            clearInterval(cornerInterval);
+            clearInterval(scanLineInterval);
+        };
+    }, [yMin, yMax]);
+    if (imageUrl) {
+        return (<View style={{
+                flex: 1,
+                justifyContent: 'center',
+                alignItems: 'center',
+            }}>
+
+               <View style={{
+                justifyContent: 'center',
+                alignItems: 'center',
+            }}>
+               <Image source={{ uri: imageUrl }} style={[styles.image,
+                {
+                    width: boxWidth,
+                    height: boxHeight,
+                    marginLeft: -xMin,
+                    marginTop: -yMin,
+                },
+            ]}/>
+               </View>
+
+            </View>);
+    }
+    return (<EnhancedCameraView showCamera={true} showSwitchCamera={false} bbox={{
+            xMin: 150,
+            yMin: 210,
+            xMax: 350,
+            yMax: 410,
+            borderColor: "#2DBD60",
+            borderWidth: 3,
+            cornerRadius: 8
+        }} onCapture={(image) => {
+            setImageUrl(image.path ?? null);
+        }} overlayComponent={<View style={StyleSheet.absoluteFill}>
+                    {/* <Animated.View
+                style={[
+                    styles.topIntruction,
+
+                ]}
+            >
+                <Text style={styles.topIntructionText}>
+                    💡 Alignez le code QR avec la zone de capture • déplacez la caméra pour ajuster la zone de capture • mesurez 100cm de hauteur.
+                </Text>
+            </Animated.View> */}
+
+                    <Svg height={screenHeight} width={screenWidth} style={styles.svg}>
+                        <Defs>
+                            <Mask id="cameraMask">
+                                {/* Fond blanc - zone visible */}
+                                <Rect x="0" y="0" width={screenWidth} height={screenHeight} fill="white"/>
+                                {/* Zone noire - zone masquée (transparente) */}
+                                <Rect x={xMin} y={yMin} width={boxWidth} height={boxHeight} fill="black"/>
+                            </Mask>
+                        </Defs>
+
+                        {/* Overlay semi-transparent avec masque */}
+                        <Rect x="0" y="0" width={screenWidth} height={screenHeight} fill="rgba(0, 0, 0, 0.5)" mask="url(#cameraMask)"/>
+
+                        {/* Coins de la zone de capture - arrondis avec animation */}
+                        <Path d={`M ${xMin + 15} ${yMin} Q ${xMin} ${yMin} ${xMin} ${yMin + 15} L ${xMin} ${yMin + 20}`} stroke="#4CAF50" strokeWidth="8" fill="none" opacity={cornerOpacity}/>
+                        <Path d={`M ${xMin + 20} ${yMin} L ${xMin + 15} ${yMin}`} stroke="#4CAF50" strokeWidth="8" opacity={cornerOpacity}/>
+
+                        <Path d={`M ${xMax - 15} ${yMin} Q ${xMax} ${yMin} ${xMax} ${yMin + 15} L ${xMax} ${yMin + 20}`} stroke="#4CAF50" strokeWidth="8" fill="none" opacity={cornerOpacity}/>
+                        <Path d={`M ${xMax - 20} ${yMin} L ${xMax - 15} ${yMin}`} stroke="#4CAF50" strokeWidth="8" opacity={cornerOpacity}/>
+
+                        <Path d={`M ${xMin + 15} ${yMax} Q ${xMin} ${yMax} ${xMin} ${yMax - 15} L ${xMin} ${yMax - 20}`} stroke="#4CAF50" strokeWidth="8" fill="none" opacity={cornerOpacity}/>
+                        <Path d={`M ${xMin + 20} ${yMax} L ${xMin + 15} ${yMax}`} stroke="#4CAF50" strokeWidth="8" opacity={cornerOpacity}/>
+
+                        <Path d={`M ${xMax - 15} ${yMax} Q ${xMax} ${yMax} ${xMax} ${yMax - 15} L ${xMax} ${yMax - 20}`} stroke="#4CAF50" strokeWidth="8" fill="none" opacity={cornerOpacity}/>
+                        <Path d={`M ${xMax - 20} ${yMax} L ${xMax - 15} ${yMax}`} stroke="#4CAF50" strokeWidth="8" opacity={cornerOpacity}/>
+
+                        <Defs>
+                            <LinearGradient id="grad-rect" x1="0%" y1={scanLineX.direction === 'up' ? "100%" : "0%"} x2="0%" y2={scanLineX.direction === 'up' ? "0%" : "100%"}>
+                                <Stop offset="70%" stopColor="#2DBD60" stopOpacity="0"/>
+                                <Stop offset="85%" stopColor="#2DBD60" stopOpacity="0.1"/>
+                                <Stop offset="88%" stopColor="#2DBD60" stopOpacity="0.15"/>
+                                <Stop offset="90%" stopColor="#2DBD60" stopOpacity="0.2"/>
+                                <Stop offset="100%" stopColor="#2DBD60" stopOpacity="1"/>
+                            </LinearGradient>
+                        </Defs>
+
+
+                        <Rect x="0" y={scanLineX.val} width={screenWidth} height="280" rx="0" ry="0" fill="url(#grad-rect)"/>
+                    </Svg>
+
+                    <View style={styles.bottomIntruction}>
+                        <Text style={styles.bottomTitle}>
+                            Mesurez 100cm de hauteur.
+                        </Text>
+                        <Text style={styles.bottomSubtitle}>
+                            Ne pas déplacer la caméra pendant la capture. • Ne pas déplacer la caméra pendant la capture.
+                        </Text>
+                    </View>
+                </View>}/>);
+};
+const styles = StyleSheet.create({
+    overlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '50%',
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    },
+    svg: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+    },
+    topIntruction: {
+        zIndex: 1000,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 20,
+        paddingHorizontal: 10,
+        marginHorizontal: 20,
+        marginTop: 10,
+        backgroundColor: "#FDE04730",
+        borderColor: "#FDE047",
+        borderWidth: 1,
+        borderRadius: 10,
+        gap: 10,
+    },
+    topIntructionText: {
+        color: '#FDE047',
+        fontSize: 14,
+        fontWeight: 'bold',
+        textAlign: 'center',
+    },
+    bottomIntruction: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        width: '100%',
+        height: '35%',
+        paddingHorizontal: 20,
+    },
+    bottomIntructionTextBold: {
+        color: 'white',
+        fontSize: 16,
+        fontWeight: 'bold',
+        textAlign: 'center',
+    },
+    bottomIntructionText: {
+        color: 'white',
+        fontSize: 14,
+        fontWeight: 'bold',
+        textAlign: 'center',
+    },
+    bottomTitle: {
+        color: 'white',
+        fontSize: 25,
+        fontWeight: 'bold',
+        textAlign: 'center',
+    },
+    bottomSubtitle: {
+        color: 'white',
+        marginTop: 15,
+        fontSize: 14,
+        fontWeight: '500',
+        textAlign: 'center',
+    },
+    image: {
+        position: 'absolute',
+        borderRadius: 10,
+    },
+});
+export default SelfieCaptureEx;
+//# sourceMappingURL=SelfieCaptureEx.js.map