@transfergratis/react-native-sdk 0.1.2

package/src/components/example/CameraCaptureExScan.tsx

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

package/src/components/example/CameraCaptureExSimple.tsx

@@ -0,0 +1,215 @@
+import { StyleSheet, View, Dimensions, Text } from "react-native"
+import { EnhancedCameraView } from "../EnhancedCameraView"
+import Svg, { Rect, Path, Circle } from 'react-native-svg';
+
+const CameraCaptureExSimple = () => {
+    const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
+    
+    // Zone de capture centrée
+    const captureSize = 200;
+    const xMin = (screenWidth - captureSize) / 2;
+    const yMin = (screenHeight - captureSize) / 2;
+    const xMax = xMin + captureSize;
+    const yMax = yMin + captureSize;
+
+    return (
+        <EnhancedCameraView
+            showCamera={true}
+            showSwitchCamera={false}
+            bbox={{
+              xMin: xMin,
+              yMin: yMin,
+              xMax: xMax,
+              yMax: yMax,
+              borderColor: "#2DBD60",
+              borderWidth: 3,
+              cornerRadius: 8
+            }}
+            overlayComponent={
+                <View style={StyleSheet.absoluteFill}>
+                    {/* Overlay semi-transparent simple */}
+                    <View style={[styles.overlay, { backgroundColor: 'rgba(0, 0, 0, 0.6)' }]} />
+                    
+                    {/* Zone transparente pour la capture */}
+                    <View style={[styles.captureZone, {
+                        left: xMin,
+                        top: yMin,
+                        width: captureSize,
+                        height: captureSize,
+                    }]} />
+                    
+                    {/* Bordure SVG de la zone de capture */}
+                    <Svg 
+                        height={screenHeight} 
+                        width={screenWidth} 
+                        style={StyleSheet.absoluteFill}
+                    >
+                        {/* Bordure principale */}
+                        <Rect
+                            x={xMin}
+                            y={yMin}
+                            width={captureSize}
+                            height={captureSize}
+                            fill="none"
+                            stroke="#4CAF50"
+                            strokeWidth="3"
+                        />
+                        
+                        {/* Coins décoratifs - arrondis */}
+                        <Path
+                            d={`M ${xMin + 20} ${yMin} Q ${xMin} ${yMin} ${xMin} ${yMin + 20} L ${xMin} ${yMin + 30}`}
+                            stroke="#4CAF50"
+                            strokeWidth="4"
+                            fill="none"
+                        />
+                        <Path
+                            d={`M ${xMin + 30} ${yMin} L ${xMin + 20} ${yMin}`}
+                            stroke="#4CAF50"
+                            strokeWidth="4"
+                        />
+                        
+                        <Path
+                            d={`M ${xMax - 20} ${yMin} Q ${xMax} ${yMin} ${xMax} ${yMin + 20} L ${xMax} ${yMin + 30}`}
+                            stroke="#4CAF50"
+                            strokeWidth="4"
+                            fill="none"
+                        />
+                        <Path
+                            d={`M ${xMax - 30} ${yMin} L ${xMax - 20} ${yMin}`}
+                            stroke="#4CAF50"
+                            strokeWidth="4"
+                        />
+                        
+                        <Path
+                            d={`M ${xMin + 20} ${yMax} Q ${xMin} ${yMax} ${xMin} ${yMax - 20} L ${xMin} ${yMax - 30}`}
+                            stroke="#4CAF50"
+                            strokeWidth="4"
+                            fill="none"
+                        />
+                        <Path
+                            d={`M ${xMin + 30} ${yMax} L ${xMin + 20} ${yMax}`}
+                            stroke="#4CAF50"
+                            strokeWidth="4"
+                        />
+                        
+                        <Path
+                            d={`M ${xMax - 20} ${yMax} Q ${xMax} ${yMax} ${xMax} ${yMax - 20} L ${xMax} ${yMax - 30}`}
+                            stroke="#4CAF50"
+                            strokeWidth="4"
+                            fill="none"
+                        />
+                        <Path
+                            d={`M ${xMax - 30} ${yMax} L ${xMax - 20} ${yMax}`}
+                            stroke="#4CAF50"
+                            strokeWidth="4"
+                        />
+                        
+                        {/* Lignes de guidage */}
+                        <Path
+                            d={`M ${xMin + captureSize/2} ${yMin} L ${xMin + captureSize/2} ${yMin + 10}`}
+                            stroke="#4CAF50"
+                            strokeWidth="2"
+                        />
+                        <Path
+                            d={`M ${xMin + captureSize/2} ${yMax} L ${xMin + captureSize/2} ${yMax - 10}`}
+                            stroke="#4CAF50"
+                            strokeWidth="2"
+                        />
+                        <Path
+                            d={`M ${xMin} ${yMin + captureSize/2} L ${xMin + 10} ${yMin + captureSize/2}`}
+                            stroke="#4CAF50"
+                            strokeWidth="2"
+                        />
+                        <Path
+                            d={`M ${xMax} ${yMin + captureSize/2} L ${xMax - 10} ${yMin + captureSize/2}`}
+                            stroke="#4CAF50"
+                            strokeWidth="2"
+                        />
+                    </Svg>
+                    
+                    {/* Texte d'instruction */}
+                    <View style={styles.instructionContainer}>
+                        <View style={styles.instructionBox}>
+                            <View style={styles.instructionText}>
+                                <View style={styles.instructionIcon}>
+                                    <Svg height="24" width="24">
+                                        <Rect x="4" y="6" width="16" height="12" fill="none" stroke="#4CAF50" strokeWidth="2" />
+                                        <Circle cx="12" cy="12" r="3" fill="#4CAF50" />
+                                    </Svg>
+                                </View>
+                                <View style={styles.instructionContent}>
+                                    <View style={styles.instructionTitle}>
+                                        <Text style={styles.instructionTitleText}>
+                                            Positionnez votre document
+                                        </Text>
+                                    </View>
+                                    <View style={styles.instructionSubtitle}>
+                                        <Text style={styles.instructionSubtitleText}>
+                                            Assurez-vous que le document est bien visible dans le cadre
+                                        </Text>
+                                    </View>
+                                </View>
+                            </View>
+                        </View>
+                    </View>
+                </View>
+            }
+        />
+    )
+}
+
+const styles = StyleSheet.create({
+    overlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+    },
+    captureZone: {
+        position: 'absolute',
+        backgroundColor: 'transparent',
+        borderWidth: 0,
+    },
+    instructionContainer: {
+        position: 'absolute',
+        bottom: 100,
+        left: 20,
+        right: 20,
+        alignItems: 'center',
+    },
+    instructionBox: {
+        backgroundColor: 'rgba(0, 0, 0, 0.8)',
+        borderRadius: 12,
+        padding: 16,
+        maxWidth: 300,
+    },
+    instructionText: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    instructionIcon: {
+        marginRight: 12,
+    },
+    instructionContent: {
+        flex: 1,
+    },
+    instructionTitle: {
+        marginBottom: 4,
+    },
+    instructionTitleText: {
+        color: '#FFFFFF',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    instructionSubtitle: {
+        marginBottom: 0,
+    },
+    instructionSubtitleText: {
+        color: '#CCCCCC',
+        fontSize: 14,
+        lineHeight: 20,
+    },
+});
+
+export default CameraCaptureExSimple;