@sanctum-key/react-native-sdk 1.0.0

package/build/components/example/CameraCaptureExAdvanced.js

@@ -0,0 +1,229 @@
+import { StyleSheet, View, Dimensions, Text, Animated } from "react-native";
+import { EnhancedCameraView } from "../EnhancedCameraView";
+import Svg, { Circle, Rect, Path, Mask, Defs, LinearGradient, Stop } from 'react-native-svg';
+import { useEffect, useRef, useState } from 'react';
+const CameraCaptureExAdvanced = () => {
+    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 scanLineAnimation = useRef(new Animated.Value(0)).current;
+    const pulseAnimation = useRef(new Animated.Value(1)).current;
+    const [cornerOpacity, setCornerOpacity] = useState(0.8);
+    const [scanLineY, setScanLineY] = useState(yMin);
+    useEffect(() => {
+        // Animation des instructions avec effet de pulsation
+        const instructionSequence = Animated.loop(Animated.sequence([
+            Animated.timing(instructionAnimation, {
+                toValue: 1,
+                duration: 800,
+                useNativeDriver: false,
+            }),
+            Animated.timing(instructionAnimation, {
+                toValue: 0.9,
+                duration: 200,
+                useNativeDriver: false,
+            }),
+            Animated.timing(instructionAnimation, {
+                toValue: 1,
+                duration: 200,
+                useNativeDriver: false,
+            }),
+            Animated.delay(2000), // Pause de 2 secondes
+        ]));
+        // Animation de pulsation générale
+        const pulseLoop = Animated.loop(Animated.sequence([
+            Animated.timing(pulseAnimation, {
+                toValue: 1.1,
+                duration: 1500,
+                useNativeDriver: false,
+            }),
+            Animated.timing(pulseAnimation, {
+                toValue: 1,
+                duration: 1500,
+                useNativeDriver: false,
+            }),
+        ]));
+        // Animation de la ligne de scan
+        const scanLineLoop = Animated.loop(Animated.timing(scanLineAnimation, {
+            toValue: 1,
+            duration: 3000,
+            useNativeDriver: false,
+        }));
+        // Animation des coins avec setState
+        const cornerInterval = setInterval(() => {
+            setCornerOpacity(prev => prev === 0.8 ? 1 : 0.8);
+        }, 600);
+        // Animation de la ligne de scan avec setState
+        const scanLineInterval = setInterval(() => {
+            setScanLineY(prev => {
+                const newY = prev + 2;
+                return newY > yMax ? yMin : newY;
+            });
+        }, 50);
+        // Démarrer les animations
+        instructionSequence.start();
+        pulseLoop.start();
+        scanLineLoop.start();
+        return () => {
+            instructionSequence.stop();
+            pulseLoop.stop();
+            scanLineLoop.stop();
+            clearInterval(cornerInterval);
+            clearInterval(scanLineInterval);
+        };
+    }, [instructionAnimation, scanLineAnimation, pulseAnimation, yMin, yMax]);
+    return (<EnhancedCameraView showCamera={true} showSwitchCamera={false} bbox={{
+            xMin: 150,
+            yMin: 210,
+            xMax: 350,
+            yMax: 410,
+            borderColor: "#2DBD60",
+            borderWidth: 3,
+            cornerRadius: 8
+        }} overlayComponent={<View style={StyleSheet.absoluteFill}>
+                    <Animated.View style={[
+                styles.topIntruction,
+                {
+                    opacity: instructionAnimation,
+                    transform: [{ scale: instructionAnimation }]
+                }
+            ]}>
+                        <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>
+                            
+                            {/* Gradient pour les coins */}
+                            <LinearGradient id="cornerGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                                <Stop offset="0%" stopColor="#4CAF50" stopOpacity="1"/>
+                                <Stop offset="100%" stopColor="#00FF00" stopOpacity="1"/>
+                            </LinearGradient>
+                        </Defs>
+
+                        {/* Overlay semi-transparent avec masque */}
+                        <Rect x="0" y="0" width={screenWidth} height={screenHeight} fill="rgba(0, 0, 0, 0.6)" mask="url(#cameraMask)"/>
+
+                        {/* Coins de la zone de capture - arrondis avec animation et gradient */}
+                        <Path d={`M ${xMin + 15} ${yMin} Q ${xMin} ${yMin} ${xMin} ${yMin + 15} L ${xMin} ${yMin + 20}`} stroke="url(#cornerGradient)" strokeWidth="8" fill="none" opacity={cornerOpacity}/>
+                        <Path d={`M ${xMin + 20} ${yMin} L ${xMin + 15} ${yMin}`} stroke="url(#cornerGradient)" strokeWidth="8" opacity={cornerOpacity}/>
+
+                        <Path d={`M ${xMax - 15} ${yMin} Q ${xMax} ${yMin} ${xMax} ${yMin + 15} L ${xMax} ${yMin + 20}`} stroke="url(#cornerGradient)" strokeWidth="8" fill="none" opacity={cornerOpacity}/>
+                        <Path d={`M ${xMax - 20} ${yMin} L ${xMax - 15} ${yMin}`} stroke="url(#cornerGradient)" strokeWidth="8" opacity={cornerOpacity}/>
+
+                        <Path d={`M ${xMin + 15} ${yMax} Q ${xMin} ${yMax} ${xMin} ${yMax - 15} L ${xMin} ${yMax - 20}`} stroke="url(#cornerGradient)" strokeWidth="8" fill="none" opacity={cornerOpacity}/>
+                        <Path d={`M ${xMin + 20} ${yMax} L ${xMin + 15} ${yMax}`} stroke="url(#cornerGradient)" strokeWidth="8" opacity={cornerOpacity}/>
+
+                        <Path d={`M ${xMax - 15} ${yMax} Q ${xMax} ${yMax} ${xMax} ${yMax - 15} L ${xMax} ${yMax - 20}`} stroke="url(#cornerGradient)" strokeWidth="8" fill="none" opacity={cornerOpacity}/>
+                        <Path d={`M ${xMax - 20} ${yMax} L ${xMax - 15} ${yMax}`} stroke="url(#cornerGradient)" strokeWidth="8" opacity={cornerOpacity}/>
+
+                        {/* Ligne de scan animée */}
+                        <Path d={`M ${xMin} ${scanLineY} L ${xMax} ${scanLineY}`} stroke="#00FF00" strokeWidth="3" strokeDasharray="15,10" opacity={0.8}/>
+
+                        {/* Points de guidage animés */}
+                        <Circle cx={xMin + boxWidth * 0.25} cy={yMin + boxHeight * 0.25} r="3" fill="#FF5722" opacity={cornerOpacity}/>
+                        <Circle cx={xMin + boxWidth * 0.75} cy={yMin + boxHeight * 0.25} r="3" fill="#FF5722" opacity={cornerOpacity}/>
+                        <Circle cx={xMin + boxWidth * 0.25} cy={yMin + boxHeight * 0.75} r="3" fill="#FF5722" opacity={cornerOpacity}/>
+                        <Circle cx={xMin + boxWidth * 0.75} cy={yMin + boxHeight * 0.75} r="3" fill="#FF5722" opacity={cornerOpacity}/>
+                    </Svg>
+                    
+                    <Animated.View style={[
+                styles.bottomIntruction,
+                {
+                    transform: [{ scale: pulseAnimation }]
+                }
+            ]}>
+                        <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>
+                    </Animated.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',
+    },
+});
+export default CameraCaptureExAdvanced;
+//# sourceMappingURL=CameraCaptureExAdvanced.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CameraCaptureExAdvanced.js","sourceRoot":"","sources":["../../../src/components/example/CameraCaptureExAdvanced.tsx"],"names":[],"mappings":"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","sourcesContent":["import { StyleSheet, View, Dimensions, Text, Animated } from \"react-native\"\nimport { EnhancedCameraView } from \"../EnhancedCameraView\"\nimport Svg, { Circle, Rect, Path, Mask, Defs, LinearGradient, Stop } from 'react-native-svg';\nimport { useEffect, useRef, useState } from 'react';\n\nconst CameraCaptureExAdvanced = () => {\n    const { width: screenWidth, height: screenHeight } = Dimensions.get('window');\n\n    const bbox = [20, 140, 370, 340]; // [xMin, yMin, xMax, yMax]\n    const [xMin, yMin, xMax, yMax] = bbox;\n    const boxWidth = xMax - xMin;\n    const boxHeight = yMax - yMin;\n\n    // Animations\n    const instructionAnimation = useRef(new Animated.Value(0)).current;\n    const scanLineAnimation = useRef(new Animated.Value(0)).current;\n    const pulseAnimation = useRef(new Animated.Value(1)).current;\n    const [cornerOpacity, setCornerOpacity] = useState(0.8);\n    const [scanLineY, setScanLineY] = useState(yMin);\n\n    useEffect(() => {\n        // Animation des instructions avec effet de pulsation\n        const instructionSequence = Animated.loop(\n            Animated.sequence([\n                Animated.timing(instructionAnimation, {\n                    toValue: 1,\n                    duration: 800,\n                    useNativeDriver: false,\n                }),\n                Animated.timing(instructionAnimation, {\n                    toValue: 0.9,\n                    duration: 200,\n                    useNativeDriver: false,\n                }),\n                Animated.timing(instructionAnimation, {\n                    toValue: 1,\n                    duration: 200,\n                    useNativeDriver: false,\n                }),\n                Animated.delay(2000), // Pause de 2 secondes\n            ])\n        );\n\n        // Animation de pulsation générale\n        const pulseLoop = Animated.loop(\n            Animated.sequence([\n                Animated.timing(pulseAnimation, {\n                    toValue: 1.1,\n                    duration: 1500,\n                    useNativeDriver: false,\n                }),\n                Animated.timing(pulseAnimation, {\n                    toValue: 1,\n                    duration: 1500,\n                    useNativeDriver: false,\n                }),\n            ])\n        );\n\n        // Animation de la ligne de scan\n        const scanLineLoop = Animated.loop(\n            Animated.timing(scanLineAnimation, {\n                toValue: 1,\n                duration: 3000,\n                useNativeDriver: false,\n            })\n        );\n\n        // Animation des coins avec setState\n        const cornerInterval = setInterval(() => {\n            setCornerOpacity(prev => prev === 0.8 ? 1 : 0.8);\n        }, 600);\n\n        // Animation de la ligne de scan avec setState\n        const scanLineInterval = setInterval(() => {\n            setScanLineY(prev => {\n                const newY = prev + 2;\n                return newY > yMax ? yMin : newY;\n            });\n        }, 50);\n\n        // Démarrer les animations\n        instructionSequence.start();\n        pulseLoop.start();\n        scanLineLoop.start();\n\n        return () => {\n            instructionSequence.stop();\n            pulseLoop.stop();\n            scanLineLoop.stop();\n            clearInterval(cornerInterval);\n            clearInterval(scanLineInterval);\n        };\n    }, [instructionAnimation, scanLineAnimation, pulseAnimation, yMin, yMax]);\n\n    return (\n        <EnhancedCameraView\n            showCamera={true}\n            showSwitchCamera={false}\n            bbox={{\n              xMin: 150,\n              yMin: 210,\n              xMax: 350,\n              yMax: 410,\n              borderColor: \"#2DBD60\",\n              borderWidth: 3,\n              cornerRadius: 8\n            }}\n            overlayComponent={\n                <View style={StyleSheet.absoluteFill}>\n                    <Animated.View \n                        style={[\n                            styles.topIntruction,\n                            {\n                                opacity: instructionAnimation,\n                                transform: [{ scale: instructionAnimation }]\n                            }\n                        ]}\n                    >\n                        <Text style={styles.topIntructionText}>\n                            💡 Alignez le code QR avec la zone de capture • déplacez la caméra pour ajuster la zone de capture • mesurez 100cm de hauteur.\n                        </Text>\n                    </Animated.View>\n                    \n                    <Svg\n                        height={screenHeight}\n                        width={screenWidth}\n                        style={styles.svg}\n                    >\n                        <Defs>\n                            <Mask id=\"cameraMask\">\n                                {/* Fond blanc - zone visible */}\n                                <Rect\n                                    x=\"0\"\n                                    y=\"0\"\n                                    width={screenWidth}\n                                    height={screenHeight}\n                                    fill=\"white\"\n                                />\n                                {/* Zone noire - zone masquée (transparente) */}\n                                <Rect\n                                    x={xMin}\n                                    y={yMin}\n                                    width={boxWidth}\n                                    height={boxHeight}\n                                    fill=\"black\"\n                                />\n                            </Mask>\n                            \n                            {/* Gradient pour les coins */}\n                            <LinearGradient id=\"cornerGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n                                <Stop offset=\"0%\" stopColor=\"#4CAF50\" stopOpacity=\"1\" />\n                                <Stop offset=\"100%\" stopColor=\"#00FF00\" stopOpacity=\"1\" />\n                            </LinearGradient>\n                        </Defs>\n\n                        {/* Overlay semi-transparent avec masque */}\n                        <Rect\n                            x=\"0\"\n                            y=\"0\"\n                            width={screenWidth}\n                            height={screenHeight}\n                            fill=\"rgba(0, 0, 0, 0.6)\"\n                            mask=\"url(#cameraMask)\"\n                        />\n\n                        {/* Coins de la zone de capture - arrondis avec animation et gradient */}\n                        <Path\n                            d={`M ${xMin + 15} ${yMin} Q ${xMin} ${yMin} ${xMin} ${yMin + 15} L ${xMin} ${yMin + 20}`}\n                            stroke=\"url(#cornerGradient)\"\n                            strokeWidth=\"8\"\n                            fill=\"none\"\n                            opacity={cornerOpacity}\n                        />\n                        <Path\n                            d={`M ${xMin + 20} ${yMin} L ${xMin + 15} ${yMin}`}\n                            stroke=\"url(#cornerGradient)\"\n                            strokeWidth=\"8\"\n                            opacity={cornerOpacity}\n                        />\n\n                        <Path\n                            d={`M ${xMax - 15} ${yMin} Q ${xMax} ${yMin} ${xMax} ${yMin + 15} L ${xMax} ${yMin + 20}`}\n                            stroke=\"url(#cornerGradient)\"\n                            strokeWidth=\"8\"\n                            fill=\"none\"\n                            opacity={cornerOpacity}\n                        />\n                        <Path\n                            d={`M ${xMax - 20} ${yMin} L ${xMax - 15} ${yMin}`}\n                            stroke=\"url(#cornerGradient)\"\n                            strokeWidth=\"8\"\n                            opacity={cornerOpacity}\n                        />\n\n                        <Path\n                            d={`M ${xMin + 15} ${yMax} Q ${xMin} ${yMax} ${xMin} ${yMax - 15} L ${xMin} ${yMax - 20}`}\n                            stroke=\"url(#cornerGradient)\"\n                            strokeWidth=\"8\"\n                            fill=\"none\"\n                            opacity={cornerOpacity}\n                        />\n                        <Path\n                            d={`M ${xMin + 20} ${yMax} L ${xMin + 15} ${yMax}`}\n                            stroke=\"url(#cornerGradient)\"\n                            strokeWidth=\"8\"\n                            opacity={cornerOpacity}\n                        />\n\n                        <Path\n                            d={`M ${xMax - 15} ${yMax} Q ${xMax} ${yMax} ${xMax} ${yMax - 15} L ${xMax} ${yMax - 20}`}\n                            stroke=\"url(#cornerGradient)\"\n                            strokeWidth=\"8\"\n                            fill=\"none\"\n                            opacity={cornerOpacity}\n                        />\n                        <Path\n                            d={`M ${xMax - 20} ${yMax} L ${xMax - 15} ${yMax}`}\n                            stroke=\"url(#cornerGradient)\"\n                            strokeWidth=\"8\"\n                            opacity={cornerOpacity}\n                        />\n\n                        {/* Ligne de scan animée */}\n                        <Path\n                            d={`M ${xMin} ${scanLineY} L ${xMax} ${scanLineY}`}\n                            stroke=\"#00FF00\"\n                            strokeWidth=\"3\"\n                            strokeDasharray=\"15,10\"\n                            opacity={0.8}\n                        />\n\n                        {/* Points de guidage animés */}\n                        <Circle\n                            cx={xMin + boxWidth * 0.25}\n                            cy={yMin + boxHeight * 0.25}\n                            r=\"3\"\n                            fill=\"#FF5722\"\n                            opacity={cornerOpacity}\n                        />\n                        <Circle\n                            cx={xMin + boxWidth * 0.75}\n                            cy={yMin + boxHeight * 0.25}\n                            r=\"3\"\n                            fill=\"#FF5722\"\n                            opacity={cornerOpacity}\n                        />\n                        <Circle\n                            cx={xMin + boxWidth * 0.25}\n                            cy={yMin + boxHeight * 0.75}\n                            r=\"3\"\n                            fill=\"#FF5722\"\n                            opacity={cornerOpacity}\n                        />\n                        <Circle\n                            cx={xMin + boxWidth * 0.75}\n                            cy={yMin + boxHeight * 0.75}\n                            r=\"3\"\n                            fill=\"#FF5722\"\n                            opacity={cornerOpacity}\n                        />\n                    </Svg>\n                    \n                    <Animated.View \n                        style={[\n                            styles.bottomIntruction,\n                            {\n                                transform: [{ scale: pulseAnimation }]\n                            }\n                        ]}\n                    >\n                        <Text style={styles.bottomTitle}>\n                            Mesurez 100cm de hauteur.\n                        </Text>\n                        <Text style={styles.bottomSubtitle}>\n                            Ne pas déplacer la caméra pendant la capture. • Ne pas déplacer la caméra pendant la capture.\n                        </Text>\n                    </Animated.View>\n                </View>\n            }\n        />\n    )\n}\n\nconst styles = StyleSheet.create({\n    overlay: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '50%',\n        backgroundColor: 'rgba(0, 0, 0, 0.5)',\n    },\n    svg: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n    },\n    topIntruction: {\n        zIndex: 1000,\n        flexDirection: 'row',\n        alignItems: 'center',\n        justifyContent: 'center',\n        paddingVertical: 20,\n        paddingHorizontal: 10,\n        marginHorizontal: 20,\n        marginTop: 10,\n        backgroundColor: \"#FDE04730\",\n        borderColor: \"#FDE047\",\n        borderWidth: 1,\n        borderRadius: 10,\n        gap: 10,\n    },\n    topIntructionText: {\n        color: '#FDE047',\n        fontSize: 14,\n        fontWeight: 'bold',\n        textAlign: 'center',\n    },\n    bottomIntruction: {\n        position: 'absolute',\n        bottom: 0,\n        left: 0,\n        width: '100%',\n        height: '35%',\n        paddingHorizontal: 20,\n    },\n    bottomIntructionTextBold: {\n        color: 'white',\n        fontSize: 16,\n        fontWeight: 'bold',\n        textAlign: 'center',\n    },\n    bottomIntructionText: {\n        color: 'white',\n        fontSize: 14,\n        fontWeight: 'bold',\n        textAlign: 'center',\n    },\n    bottomTitle: {\n        color: 'white',\n        fontSize: 25,\n        fontWeight: 'bold',\n        textAlign: 'center',\n    },\n    bottomSubtitle: {\n        color: 'white',\n        marginTop: 15,\n        fontSize: 14,\n        fontWeight: '500',\n        textAlign: 'center',\n    },\n})\n\nexport default CameraCaptureExAdvanced "]}

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

@@ -0,0 +1,3 @@
+declare const CameraCaptureExScan: () => import("react").JSX.Element;
+export default CameraCaptureExScan;
+//# sourceMappingURL=CameraCaptureExScan.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CameraCaptureExScan.d.ts","sourceRoot":"","sources":["../../../src/components/example/CameraCaptureExScan.tsx"],"names":[],"mappings":"AAKA,QAAA,MAAM,mBAAmB,mCAgQxB,CAAA;AA0ED,eAAe,mBAAmB,CAAA"}

package/build/components/example/CameraCaptureExScan.js

@@ -0,0 +1,213 @@
+import { StyleSheet, View, Dimensions, Text, Animated } from "react-native";
+import { EnhancedCameraView } from "../EnhancedCameraView";
+import Svg, { Rect, Path, Mask, Defs, LinearGradient, Stop, Text as SvgText } from 'react-native-svg';
+import { useEffect, useRef, useState } from 'react';
+const CameraCaptureExScan = () => {
+    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(0);
+    const [scanProgress, setScanProgress] = useState(0);
+    useEffect(() => {
+        // Animation des instructions
+        const instructionSequence = Animated.loop(Animated.sequence([
+            Animated.timing(instructionAnimation, {
+                toValue: 1,
+                duration: 600,
+                useNativeDriver: false,
+            }),
+            Animated.timing(instructionAnimation, {
+                toValue: 0.95,
+                duration: 200,
+                useNativeDriver: false,
+            }),
+            Animated.timing(instructionAnimation, {
+                toValue: 1,
+                duration: 200,
+                useNativeDriver: false,
+            }),
+        ]));
+        // Animation des coins
+        const cornerInterval = setInterval(() => {
+            setCornerOpacity(prev => prev === 0.8 ? 1 : 0.8);
+        }, 800);
+        // Animation de la ligne de scan verticale qui se déplace horizontalement
+        const scanLineInterval = setInterval(() => {
+            setScanLineX(prev => {
+                const newX = prev + 2; // Vitesse de déplacement horizontal
+                if (newX > screenWidth) {
+                    setScanProgress(100);
+                    return 0;
+                }
+                // Calculer le pourcentage de progression
+                const progress = (newX / screenWidth) * 100;
+                setScanProgress(progress);
+                return newX;
+            });
+        }, 25); // Fréquence de mise à jour
+        // Démarrer les animations
+        instructionSequence.start();
+        return () => {
+            instructionSequence.stop();
+            clearInterval(cornerInterval);
+            clearInterval(scanLineInterval);
+        };
+    }, [instructionAnimation, screenWidth]);
+    return (<EnhancedCameraView showCamera={true} showSwitchCamera={false} bbox={{
+            xMin: 150,
+            yMin: 210,
+            xMax: 350,
+            yMax: 410,
+            borderColor: "#2DBD60",
+            borderWidth: 3,
+            cornerRadius: 8
+        }} overlayComponent={<View style={StyleSheet.absoluteFill}>
+                    <Animated.View style={[
+                styles.topIntruction,
+                {
+                    opacity: instructionAnimation,
+                    transform: [{ scale: instructionAnimation }]
+                }
+            ]}>
+                        <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>
+                            
+                            {/* Gradient pour la ligne de scan */}
+                            <LinearGradient id="scanGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+                                <Stop offset="0%" stopColor="#00FF00" stopOpacity="0.3"/>
+                                <Stop offset="50%" stopColor="#00FF00" stopOpacity="1"/>
+                                <Stop offset="100%" stopColor="#00FF00" stopOpacity="0.3"/>
+                            </LinearGradient>
+                        </Defs>
+
+                        {/* Overlay semi-transparent avec masque */}
+                        <Rect x="0" y="0" width={screenWidth} height={screenHeight} fill="rgba(0, 0, 0, 0.6)" 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}/>
+
+                        {/* Ligne de scan verticale avec gradient qui se déplace horizontalement */}
+                        <Path d={`M ${scanLineX} ${yMin - (boxHeight * 0.1)} L ${scanLineX} ${yMax + (boxHeight * 0.1)}`} stroke="url(#scanGradient)" strokeWidth="4" strokeDasharray="12,6" opacity={0.9}/>
+
+                        {/* Effet de scan - zone éclairée */}
+                        <Rect x={0} y={yMin} width={scanLineX} height={boxHeight} fill="rgba(0, 255, 0, 0.1)"/>
+
+                        {/* Indicateur de progression */}
+                        <Rect x={0} y={yMax + 10} width={screenWidth} height="4" fill="rgba(255, 255, 255, 0.3)" rx="2"/>
+                        <Rect x={0} y={yMax + 10} width={(screenWidth * scanProgress) / 100} height="4" fill="#00FF00" rx="2"/>
+
+                        {/* Texte de progression */}
+                        <SvgText x={screenWidth / 2} y={yMax + 30} fontSize="12" fill="#00FF00" textAnchor="middle" fontWeight="bold">
+                            {Math.round(scanProgress)}%
+                        </SvgText>
+                    </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',
+    },
+});
+export default CameraCaptureExScan;
+//# sourceMappingURL=CameraCaptureExScan.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CameraCaptureExScan.js","sourceRoot":"","sources":["../../../src/components/example/CameraCaptureExScan.tsx"],"names":[],"mappings":"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","sourcesContent":["import { StyleSheet, View, Dimensions, Text, Animated } from \"react-native\"\nimport { EnhancedCameraView } from \"../EnhancedCameraView\"\nimport Svg, { Rect, Path, Mask, Defs, LinearGradient, Stop, Text as SvgText } from 'react-native-svg';\nimport { useEffect, useRef, useState } from 'react';\n\nconst CameraCaptureExScan = () => {\n    const { width: screenWidth, height: screenHeight } = Dimensions.get('window');\n\n    const bbox = [20, 140, 370, 340]; // [xMin, yMin, xMax, yMax]\n    const [xMin, yMin, xMax, yMax] = bbox;\n    const boxWidth = xMax - xMin;\n    const boxHeight = yMax - yMin;\n\n    // Animations\n    const instructionAnimation = useRef(new Animated.Value(0)).current;\n    const [cornerOpacity, setCornerOpacity] = useState(0.8);\n    const [scanLineX, setScanLineX] = useState(0);\n    const [scanProgress, setScanProgress] = useState(0);\n\n    useEffect(() => {\n        // Animation des instructions\n        const instructionSequence = Animated.loop(\n            Animated.sequence([\n                Animated.timing(instructionAnimation, {\n                    toValue: 1,\n                    duration: 600,\n                    useNativeDriver: false,\n                }),\n                Animated.timing(instructionAnimation, {\n                    toValue: 0.95,\n                    duration: 200,\n                    useNativeDriver: false,\n                }),\n                Animated.timing(instructionAnimation, {\n                    toValue: 1,\n                    duration: 200,\n                    useNativeDriver: false,\n                }),\n            ])\n        );\n\n        // Animation des coins\n        const cornerInterval = setInterval(() => {\n            setCornerOpacity(prev => prev === 0.8 ? 1 : 0.8);\n        }, 800);\n\n        // Animation de la ligne de scan verticale qui se déplace horizontalement\n        const scanLineInterval = setInterval(() => {\n            setScanLineX(prev => {\n                const newX = prev + 2; // Vitesse de déplacement horizontal\n                if (newX > screenWidth) {\n                    setScanProgress(100);\n                    return 0;\n                }\n                // Calculer le pourcentage de progression\n                const progress = (newX / screenWidth) * 100;\n                setScanProgress(progress);\n                return newX;\n            });\n        }, 25); // Fréquence de mise à jour\n\n        // Démarrer les animations\n        instructionSequence.start();\n\n        return () => {\n            instructionSequence.stop();\n            clearInterval(cornerInterval);\n            clearInterval(scanLineInterval);\n        };\n    }, [instructionAnimation, screenWidth]);\n\n    return (\n        <EnhancedCameraView\n            showCamera={true}\n            showSwitchCamera={false}\n            bbox={{\n              xMin: 150,\n              yMin: 210,\n              xMax: 350,\n              yMax: 410,\n              borderColor: \"#2DBD60\",\n              borderWidth: 3,\n              cornerRadius: 8\n            }}\n            overlayComponent={\n                <View style={StyleSheet.absoluteFill}>\n                    <Animated.View \n                        style={[\n                            styles.topIntruction,\n                            {\n                                opacity: instructionAnimation,\n                                transform: [{ scale: instructionAnimation }]\n                            }\n                        ]}\n                    >\n                        <Text style={styles.topIntructionText}>\n                            💡 Alignez le code QR avec la zone de capture • déplacez la caméra pour ajuster la zone de capture • mesurez 100cm de hauteur.\n                        </Text>\n                    </Animated.View>\n                    \n                    <Svg\n                        height={screenHeight}\n                        width={screenWidth}\n                        style={styles.svg}\n                    >\n                        <Defs>\n                            <Mask id=\"cameraMask\">\n                                {/* Fond blanc - zone visible */}\n                                <Rect\n                                    x=\"0\"\n                                    y=\"0\"\n                                    width={screenWidth}\n                                    height={screenHeight}\n                                    fill=\"white\"\n                                />\n                                {/* Zone noire - zone masquée (transparente) */}\n                                <Rect\n                                    x={xMin}\n                                    y={yMin}\n                                    width={boxWidth}\n                                    height={boxHeight}\n                                    fill=\"black\"\n                                />\n                            </Mask>\n                            \n                            {/* Gradient pour la ligne de scan */}\n                            <LinearGradient id=\"scanGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n                                <Stop offset=\"0%\" stopColor=\"#00FF00\" stopOpacity=\"0.3\" />\n                                <Stop offset=\"50%\" stopColor=\"#00FF00\" stopOpacity=\"1\" />\n                                <Stop offset=\"100%\" stopColor=\"#00FF00\" stopOpacity=\"0.3\" />\n                            </LinearGradient>\n                        </Defs>\n\n                        {/* Overlay semi-transparent avec masque */}\n                        <Rect\n                            x=\"0\"\n                            y=\"0\"\n                            width={screenWidth}\n                            height={screenHeight}\n                            fill=\"rgba(0, 0, 0, 0.6)\"\n                            mask=\"url(#cameraMask)\"\n                        />\n\n                        {/* Coins de la zone de capture - arrondis avec animation */}\n                        <Path\n                            d={`M ${xMin + 15} ${yMin} Q ${xMin} ${yMin} ${xMin} ${yMin + 15} L ${xMin} ${yMin + 20}`}\n                            stroke=\"#4CAF50\"\n                            strokeWidth=\"8\"\n                            fill=\"none\"\n                            opacity={cornerOpacity}\n                        />\n                        <Path\n                            d={`M ${xMin + 20} ${yMin} L ${xMin + 15} ${yMin}`}\n                            stroke=\"#4CAF50\"\n                            strokeWidth=\"8\"\n                            opacity={cornerOpacity}\n                        />\n\n                        <Path\n                            d={`M ${xMax - 15} ${yMin} Q ${xMax} ${yMin} ${xMax} ${yMin + 15} L ${xMax} ${yMin + 20}`}\n                            stroke=\"#4CAF50\"\n                            strokeWidth=\"8\"\n                            fill=\"none\"\n                            opacity={cornerOpacity}\n                        />\n                        <Path\n                            d={`M ${xMax - 20} ${yMin} L ${xMax - 15} ${yMin}`}\n                            stroke=\"#4CAF50\"\n                            strokeWidth=\"8\"\n                            opacity={cornerOpacity}\n                        />\n\n                        <Path\n                            d={`M ${xMin + 15} ${yMax} Q ${xMin} ${yMax} ${xMin} ${yMax - 15} L ${xMin} ${yMax - 20}`}\n                            stroke=\"#4CAF50\"\n                            strokeWidth=\"8\"\n                            fill=\"none\"\n                            opacity={cornerOpacity}\n                        />\n                        <Path\n                            d={`M ${xMin + 20} ${yMax} L ${xMin + 15} ${yMax}`}\n                            stroke=\"#4CAF50\"\n                            strokeWidth=\"8\"\n                            opacity={cornerOpacity}\n                        />\n\n                        <Path\n                            d={`M ${xMax - 15} ${yMax} Q ${xMax} ${yMax} ${xMax} ${yMax - 15} L ${xMax} ${yMax - 20}`}\n                            stroke=\"#4CAF50\"\n                            strokeWidth=\"8\"\n                            fill=\"none\"\n                            opacity={cornerOpacity}\n                        />\n                        <Path\n                            d={`M ${xMax - 20} ${yMax} L ${xMax - 15} ${yMax}`}\n                            stroke=\"#4CAF50\"\n                            strokeWidth=\"8\"\n                            opacity={cornerOpacity}\n                        />\n\n                        {/* Ligne de scan verticale avec gradient qui se déplace horizontalement */}\n                        <Path\n                            d={`M ${scanLineX} ${yMin - (boxHeight * 0.1)} L ${scanLineX} ${yMax + (boxHeight * 0.1)}`}\n                            stroke=\"url(#scanGradient)\"\n                            strokeWidth=\"4\"\n                            strokeDasharray=\"12,6\"\n                            opacity={0.9}\n                        />\n\n                        {/* Effet de scan - zone éclairée */}\n                        <Rect\n                            x={0}\n                            y={yMin}\n                            width={scanLineX}\n                            height={boxHeight}\n                            fill=\"rgba(0, 255, 0, 0.1)\"\n                        />\n\n                        {/* Indicateur de progression */}\n                        <Rect\n                            x={0}\n                            y={yMax + 10}\n                            width={screenWidth}\n                            height=\"4\"\n                            fill=\"rgba(255, 255, 255, 0.3)\"\n                            rx=\"2\"\n                        />\n                        <Rect\n                            x={0}\n                            y={yMax + 10}\n                            width={(screenWidth * scanProgress) / 100}\n                            height=\"4\"\n                            fill=\"#00FF00\"\n                            rx=\"2\"\n                        />\n\n                        {/* Texte de progression */}\n                        <SvgText\n                            x={screenWidth / 2}\n                            y={yMax + 30}\n                            fontSize=\"12\"\n                            fill=\"#00FF00\"\n                            textAnchor=\"middle\"\n                            fontWeight=\"bold\"\n                        >\n                            {Math.round(scanProgress)}%\n                        </SvgText>\n                    </Svg>\n                    \n                    <View style={styles.bottomIntruction}>\n                        <Text style={styles.bottomTitle}>\n                            Mesurez 100cm de hauteur.\n                        </Text>\n                        <Text style={styles.bottomSubtitle}>\n                            Ne pas déplacer la caméra pendant la capture. • Ne pas déplacer la caméra pendant la capture.\n                        </Text>\n                    </View>\n                </View>\n            }\n        />\n    )\n}\n\nconst styles = StyleSheet.create({\n    overlay: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '50%',\n        backgroundColor: 'rgba(0, 0, 0, 0.5)',\n    },\n    svg: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n    },\n    topIntruction: {\n        zIndex: 1000,\n        flexDirection: 'row',\n        alignItems: 'center',\n        justifyContent: 'center',\n        paddingVertical: 20,\n        paddingHorizontal: 10,\n        marginHorizontal: 20,\n        marginTop: 10,\n        backgroundColor: \"#FDE04730\",\n        borderColor: \"#FDE047\",\n        borderWidth: 1,\n        borderRadius: 10,\n        gap: 10,\n    },\n    topIntructionText: {\n        color: '#FDE047',\n        fontSize: 14,\n        fontWeight: 'bold',\n        textAlign: 'center',\n    },\n    bottomIntruction: {\n        position: 'absolute',\n        bottom: 0,\n        left: 0,\n        width: '100%',\n        height: '35%',\n        paddingHorizontal: 20,\n    },\n    bottomIntructionTextBold: {\n        color: 'white',\n        fontSize: 16,\n        fontWeight: 'bold',\n        textAlign: 'center',\n    },\n    bottomIntructionText: {\n        color: 'white',\n        fontSize: 14,\n        fontWeight: 'bold',\n        textAlign: 'center',\n    },\n    bottomTitle: {\n        color: 'white',\n        fontSize: 25,\n        fontWeight: 'bold',\n        textAlign: 'center',\n    },\n    bottomSubtitle: {\n        color: 'white',\n        marginTop: 15,\n        fontSize: 14,\n        fontWeight: '500',\n        textAlign: 'center',\n    },\n})\n\nexport default CameraCaptureExScan "]}

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

@@ -0,0 +1,3 @@
+declare const CameraCaptureExSimple: () => import("react").JSX.Element;
+export default CameraCaptureExSimple;
+//# sourceMappingURL=CameraCaptureExSimple.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CameraCaptureExSimple.d.ts","sourceRoot":"","sources":["../../../src/components/example/CameraCaptureExSimple.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,qBAAqB,mCA0J1B,CAAA;AAwDD,eAAe,qBAAqB,CAAC"}