@transfergratis/react-native-sdk 0.1.2

package/src/components/example/CameraCaptureEx.tsx

@@ -0,0 +1,335 @@
+import { StyleSheet, View, Dimensions, Text, Animated, Image } from "react-native"
+import { EnhancedCameraView } from "../EnhancedCameraView"
+import Svg, { Rect, Path, Mask, Defs } from 'react-native-svg';
+import React, { useEffect, useRef, useState } from 'react';
+import ScanningLine from "../Svgs/scanningLine";
+
+const CameraCaptureEx = () => {
+    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 [imageUrl, setImageUrl] = useState<string | null>(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 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 avec setState
+        const cornerInterval = setInterval(() => {
+            setCornerOpacity(prev => prev === 0.8 ? 1 : 0.8);
+        }, 800);
+
+
+
+
+        // Démarrer les animations
+        instructionSequence.start();
+
+        return () => {
+            instructionSequence.stop();
+            clearInterval(cornerInterval);
+
+        };
+    }, [instructionAnimation, xMin, xMax]);
+
+    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}
+                        />
+
+                    </Svg>
+                    <ScanningLine yMin={yMin} screenWidth={screenWidth} height={screenHeight} yMax={yMax} />
+
+                    <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 CameraCaptureEx

package/src/components/example/CameraCaptureExAdvanced.tsx

@@ -0,0 +1,357 @@
+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