@transfergratis/react-native-sdk 0.1.2

package/build/components/TemplateKYCFlowRefactored.js

@@ -0,0 +1,210 @@
+import React from 'react';
+import { View, Text, StyleSheet, SafeAreaView, TouchableOpacity } from 'react-native';
+import { TemplateKYCFlowProvider, useTemplateKYCFlowContext } from '../hooks/useTemplateKYCFlow';
+import { IDCardCapture } from './KYCElements/IDCardCapture';
+import { SelfieCaptureTemplate } from './KYCElements/SelfieCaptureTemplate';
+import { FileUploadTemplate } from './KYCElements/FileUploadTemplate';
+import { LocationCaptureTemplate } from './KYCElements/LocationCaptureTemplate';
+import { CountrySelectionTemplate } from './KYCElements/CountrySelectionTemplate';
+export const TemplateKYCFlow = ({ template, onComplete, onError, language = 'en', onCancel, }) => {
+    return (<TemplateKYCFlowProvider template={template} onComplete={onComplete} onError={onError} initialLanguage={language}>
+      <TemplateKYCFlowContent onCancel={onCancel}/>
+    </TemplateKYCFlowProvider>);
+};
+const TemplateKYCFlowContent = ({ onCancel }) => {
+    const { state, actions, currentComponent, progress, } = useTemplateKYCFlowContext();
+    // Fonction pour déterminer le côté actuel d'une carte d'identité
+    const getCurrentSideForComponent = (componentId) => {
+        const component = state.template.components.find(c => c.id === componentId);
+        if (!component || component.type !== 'id_card')
+            return 'front';
+        const idConfig = component.config;
+        const sides = idConfig.sides || ['front', 'back'];
+        // Calculer le côté basé sur l'ordre dans le template
+        const componentIndex = state.template.components.findIndex(c => c.id === componentId);
+        const sideIndex = componentIndex % sides.length;
+        return sides[sideIndex];
+    };
+    const updateComponentData = (componentId, data) => {
+        actions.updateComponentData(componentId, data);
+    };
+    if (!currentComponent) {
+        return (<View style={styles.container}>
+        <Text style={styles.errorText}>Aucun composant trouvé</Text>
+      </View>);
+    }
+    // Rendu du composant actuel
+    const renderCurrentComponent = () => {
+        const commonProps = {
+            component: currentComponent,
+            value: state.componentData[currentComponent.id],
+            onValueChange: (data) => updateComponentData(currentComponent.id, data),
+            error: state.errors[currentComponent.id],
+            language: state.currentLanguage,
+        };
+        switch (currentComponent.type) {
+            case 'id_card':
+                return <IDCardCapture {...commonProps} currentSide={getCurrentSideForComponent(currentComponent.id)}/>;
+            case 'selfie':
+                return <SelfieCaptureTemplate {...commonProps}/>;
+            case 'file_upload':
+                return <FileUploadTemplate {...commonProps}/>;
+            case 'location':
+                return <LocationCaptureTemplate {...commonProps}/>;
+            case 'country_selection':
+                return <CountrySelectionTemplate {...commonProps}/>;
+            default:
+                return (<View style={styles.unsupportedContainer}>
+            <Text style={styles.unsupportedText}>
+              Type de composant non supporté: {currentComponent.type}
+            </Text>
+          </View>);
+        }
+    };
+    return (<SafeAreaView style={styles.container}>
+      {/* Header avec informations sur l'étape */}
+      {state.showCustomStepper ? (<View style={styles.header}>
+          <Text style={styles.progressText}>
+            Étape {state.currentComponentIndex + 1} sur {state.template.components.length}
+          </Text>
+          <View style={styles.progressContainer}>
+            <View style={styles.progressBar}>
+              <View style={[
+                styles.progressFill,
+                { width: `${progress}%` }
+            ]}/>
+            </View>
+
+          </View>
+
+          <View style={{ position: 'absolute', right: 12, top: 12 }}>
+            <TouchableOpacity onPress={onCancel} disabled={!onCancel} style={{ opacity: onCancel ? 1 : 0.5 }}>
+              <Text style={{ fontSize: 20, fontWeight: 'bold', color: '#333' }}>{`X`}</Text>
+            </TouchableOpacity>
+          </View>
+        </View>) : null}
+
+      {/* Contenu principal */}
+      <View style={styles.content}>
+        {renderCurrentComponent()}
+      </View>
+    </SafeAreaView>);
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#f5f5f5',
+    },
+    header: {
+        backgroundColor: 'white',
+        paddingVertical: 20,
+        paddingHorizontal: 12,
+        borderBottomWidth: 1,
+        borderBottomColor: '#e0e0e0',
+        marginHorizontal: 12,
+        marginTop: 12,
+        // shadow
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.15,
+        shadowRadius: 1.84,
+        elevation: 5,
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        color: '#333',
+        marginBottom: 8,
+    },
+    description: {
+        fontSize: 16,
+        color: '#666',
+        marginBottom: 20,
+    },
+    progressContainer: {
+    // marginBottom: 20,
+    },
+    progressBar: {
+        height: 8,
+        backgroundColor: '#e0e0e0',
+        borderRadius: 4,
+        overflow: 'hidden',
+    },
+    progressFill: {
+        height: '100%',
+        backgroundColor: '#2DBD60',
+        borderRadius: 4,
+    },
+    progressText: {
+        fontSize: 14,
+        color: 'black',
+        fontWeight: '600',
+        textAlign: 'left',
+        marginBottom: 8,
+    },
+    stepInfo: {
+        backgroundColor: '#f8f9fa',
+        padding: 16,
+        borderRadius: 8,
+        borderLeftWidth: 4,
+        borderLeftColor: '#2DBD60',
+    },
+    stepTitle: {
+        fontSize: 18,
+        fontWeight: '600',
+        color: '#333',
+        marginBottom: 8,
+    },
+    stepDescription: {
+        fontSize: 14,
+        color: '#666',
+        lineHeight: 20,
+    },
+    content: {
+        flex: 1,
+        // justifyContent: 'center',
+        alignItems: 'center',
+        // paddingTop: Dimensions.get('window').height > 760 ? 12 : 0,
+    },
+    navigation: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        padding: 20,
+        backgroundColor: 'white',
+        borderTopWidth: 1,
+        borderTopColor: '#e0e0e0',
+    },
+    navButton: {
+        paddingHorizontal: 24,
+        paddingVertical: 12,
+        borderRadius: 8,
+        minWidth: 100,
+        alignItems: 'center',
+    },
+    primaryButton: {
+        backgroundColor: '#2DBD60',
+    },
+    navButtonText: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: 'white',
+    },
+    errorText: {
+        color: '#dc2626',
+        fontSize: 16,
+        textAlign: 'center',
+        margin: 20,
+    },
+    unsupportedContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 20,
+    },
+    unsupportedText: {
+        fontSize: 16,
+        color: '#666',
+        textAlign: 'center',
+    },
+});
+//# sourceMappingURL=TemplateKYCFlowRefactored.js.map

package/build/components/TemplateKYCFlowRefactored.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateKYCFlowRefactored.js","sourceRoot":"","sources":["../../src/components/TemplateKYCFlowRefactored.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEtF,OAAO,EAAE,uBAAuB,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACjG,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;AAChF,OAAO,EAAE,wBAAwB,EAAE,MAAM,wCAAwC,CAAC;AAUlF,MAAM,CAAC,MAAM,eAAe,GAAmC,CAAC,EAC9D,QAAQ,EACR,UAAU,EACV,OAAO,EACP,QAAQ,GAAG,IAAI,EACf,QAAQ,GACT,EAAE,EAAE;IACH,OAAO,CACL,CAAC,uBAAuB,CACtB,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,eAAe,CAAC,CAAC,QAAQ,CAAC,CAE1B;MAAA,CAAC,sBAAsB,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAC7C;IAAA,EAAE,uBAAuB,CAAC,CAC3B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,sBAAsB,GAAwC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACnF,MAAM,EACJ,KAAK,EACL,OAAO,EACP,gBAAgB,EAChB,QAAQ,GACT,GAAG,yBAAyB,EAAE,CAAC;IAEhC,iEAAiE;IACjE,MAAM,0BAA0B,GAAG,CAAC,WAAmB,EAAU,EAAE;QACjE,MAAM,SAAS,GAAG,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,WAAW,CAAC,CAAC;QAC5E,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC,IAAI,KAAK,SAAS;YAAE,OAAO,OAAO,CAAC;QAE/D,MAAM,QAAQ,GAAG,SAAS,CAAC,MAAa,CAAC;QACzC,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QAElD,qDAAqD;QACrD,MAAM,cAAc,GAAG,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,WAAW,CAAC,CAAC;QACtF,MAAM,SAAS,GAAG,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC;QAEhD,OAAO,KAAK,CAAC,SAAS,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,CAAC,WAAmB,EAAE,IAAa,EAAE,EAAE;QACjE,OAAO,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;IACjD,CAAC,CAAC;IAEF,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACtB,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,sBAAsB,EAAE,IAAI,CAC7D;MAAA,EAAE,IAAI,CAAC,CACR,CAAC;IACJ,CAAC;IAED,4BAA4B;IAC5B,MAAM,sBAAsB,GAAG,GAAG,EAAE;QAClC,MAAM,WAAW,GAAG;YAClB,SAAS,EAAE,gBAAgB;YAC3B,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,EAAE,CAAC;YAC/C,aAAa,EAAE,CAAC,IAAa,EAAE,EAAE,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,EAAE,IAAI,CAAC;YAChF,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,CAAC;YACxC,QAAQ,EAAE,KAAK,CAAC,eAAe;SAChC,CAAC;QAEF,QAAQ,gBAAgB,CAAC,IAAI,EAAE,CAAC;YAC9B,KAAK,SAAS;gBACZ,OAAO,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,CAAC,WAAW,CAAC,CAAC,0BAA0B,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAG,CAAC;YAE1G,KAAK,QAAQ;gBACX,OAAO,CAAC,qBAAqB,CAAC,IAAI,WAAW,CAAC,EAAG,CAAC;YAEpD,KAAK,aAAa;gBAChB,OAAO,CAAC,kBAAkB,CAAC,IAAI,WAAW,CAAC,EAAG,CAAC;YAEjD,KAAK,UAAU;gBACb,OAAO,CAAC,uBAAuB,CAAC,IAAI,WAAW,CAAC,EAAG,CAAC;YAEtD,KAAK,mBAAmB;gBACtB,OAAO,CAAC,wBAAwB,CAAC,IAAI,WAAW,CAAC,EAAG,CAAC;YAEvD;gBACE,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,oBAAoB,CAAC,CACvC;YAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAClC;8CAAgC,CAAC,gBAAgB,CAAC,IAAI,CACxD;YAAA,EAAE,IAAI,CACR;UAAA,EAAE,IAAI,CAAC,CACR,CAAC;QACN,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CACpC;MAAA,CAAC,0CAA0C,CAC3C;MAAA,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,CACzB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CACzB;UAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAC/B;kBAAM,CAAC,KAAK,CAAC,qBAAqB,GAAG,CAAC,CAAE,KAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,MAAM,CAC/E;UAAA,EAAE,IAAI,CACN;UAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,iBAAiB,CAAC,CACpC;YAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAC9B;cAAA,CAAC,IAAI,CACH,KAAK,CAAC,CAAC;gBACL,MAAM,CAAC,YAAY;gBACnB,EAAE,KAAK,EAAE,GAAG,QAAQ,GAAG,EAAE;aAC1B,CAAC,EAEN;YAAA,EAAE,IAAI,CAER;;UAAA,EAAE,IAAI,CAEN;;UAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,CACxD;YAAA,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAC/F;cAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,IAAI,CAC/E;YAAA,EAAE,gBAAgB,CACpB;UAAA,EAAE,IAAI,CACR;QAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CAER;;MAAA,CAAC,uBAAuB,CACxB;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAC1B;QAAA,CAAC,sBAAsB,EAAE,CAC3B;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,YAAY,CAAC,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,IAAI,EAAE,CAAC;QACP,eAAe,EAAE,SAAS;KAE3B;IACD,MAAM,EAAE;QACN,eAAe,EAAE,OAAO;QACxB,eAAe,EAAE,EAAE;QACnB,iBAAiB,EAAE,EAAE;QACrB,iBAAiB,EAAE,CAAC;QACpB,iBAAiB,EAAE,SAAS;QAC5B,gBAAgB,EAAE,EAAE;QACpB,SAAS,EAAE,EAAE;QACb,SAAS;QACT,WAAW,EAAE,MAAM;QACnB,YAAY,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;QACrC,aAAa,EAAE,IAAI;QACnB,YAAY,EAAE,IAAI;QAClB,SAAS,EAAE,CAAC;KACb;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,MAAM;QAClB,KAAK,EAAE,MAAM;QACb,YAAY,EAAE,CAAC;KAChB;IACD,WAAW,EAAE;QACX,QAAQ,EAAE,EAAE;QACZ,KAAK,EAAE,MAAM;QACb,YAAY,EAAE,EAAE;KACjB;IACD,iBAAiB,EAAE;IACjB,oBAAoB;KACrB;IACD,WAAW,EAAE;QACX,MAAM,EAAE,CAAC;QACT,eAAe,EAAE,SAAS;QAC1B,YAAY,EAAE,CAAC;QACf,QAAQ,EAAE,QAAQ;KACnB;IACD,YAAY,EAAE;QACZ,MAAM,EAAE,MAAM;QACd,eAAe,EAAE,SAAS;QAC1B,YAAY,EAAE,CAAC;KAChB;IACD,YAAY,EAAE;QACZ,QAAQ,EAAE,EAAE;QACZ,KAAK,EAAE,OAAO;QACd,UAAU,EAAE,KAAK;QACjB,SAAS,EAAE,MAAM;QACjB,YAAY,EAAE,CAAC;KAChB;IACD,QAAQ,EAAE;QACR,eAAe,EAAE,SAAS;QAC1B,OAAO,EAAE,EAAE;QACX,YAAY,EAAE,CAAC;QACf,eAAe,EAAE,CAAC;QAClB,eAAe,EAAE,SAAS;KAC3B;IACD,SAAS,EAAE;QACT,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,KAAK;QACjB,KAAK,EAAE,MAAM;QACb,YAAY,EAAE,CAAC;KAChB;IACD,eAAe,EAAE;QACf,QAAQ,EAAE,EAAE;QACZ,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,EAAE;KACf;IACD,OAAO,EAAE;QACP,IAAI,EAAE,CAAC;QACP,4BAA4B;QAC5B,UAAU,EAAE,QAAQ;QACpB,8DAA8D;KAC/D;IACD,UAAU,EAAE;QACV,aAAa,EAAE,KAAK;QACpB,cAAc,EAAE,eAAe;QAC/B,OAAO,EAAE,EAAE;QACX,eAAe,EAAE,OAAO;QACxB,cAAc,EAAE,CAAC;QACjB,cAAc,EAAE,SAAS;KAC1B;IACD,SAAS,EAAE;QACT,iBAAiB,EAAE,EAAE;QACrB,eAAe,EAAE,EAAE;QACnB,YAAY,EAAE,CAAC;QACf,QAAQ,EAAE,GAAG;QACb,UAAU,EAAE,QAAQ;KACrB;IACD,aAAa,EAAE;QACb,eAAe,EAAE,SAAS;KAC3B;IACD,aAAa,EAAE;QACb,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,KAAK;QACjB,KAAK,EAAE,OAAO;KACf;IACD,SAAS,EAAE;QACT,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,EAAE;QACZ,SAAS,EAAE,QAAQ;QACnB,MAAM,EAAE,EAAE;KACX;IACD,oBAAoB,EAAE;QACpB,IAAI,EAAE,CAAC;QACP,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,OAAO,EAAE,EAAE;KACZ;IACD,eAAe,EAAE;QACf,QAAQ,EAAE,EAAE;QACZ,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,QAAQ;KACpB;CACF,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { View, Text, StyleSheet, SafeAreaView, TouchableOpacity } from 'react-native';\nimport { KYCTemplate } from '../types/KYC.types';\nimport { TemplateKYCFlowProvider, useTemplateKYCFlowContext } from '../hooks/useTemplateKYCFlow';\nimport { IDCardCapture } from './KYCElements/IDCardCapture';\nimport { SelfieCaptureTemplate } from './KYCElements/SelfieCaptureTemplate';\nimport { FileUploadTemplate } from './KYCElements/FileUploadTemplate';\nimport { LocationCaptureTemplate } from './KYCElements/LocationCaptureTemplate';\nimport { CountrySelectionTemplate } from './KYCElements/CountrySelectionTemplate';\n\ninterface TemplateKYCFlowProps {\n  template: KYCTemplate;\n  onComplete?: (data: Record<number, unknown>) => void;\n  onError?: (error: string) => void;\n  language?: string;\n  onCancel?: () => void;\n}\n\nexport const TemplateKYCFlow: React.FC<TemplateKYCFlowProps> = ({\n  template,\n  onComplete,\n  onError,\n  language = 'en',\n  onCancel,\n}) => {\n  return (\n    <TemplateKYCFlowProvider\n      template={template}\n      onComplete={onComplete}\n      onError={onError}\n      initialLanguage={language}\n    >\n      <TemplateKYCFlowContent onCancel={onCancel} />\n    </TemplateKYCFlowProvider>\n  );\n};\n\nconst TemplateKYCFlowContent: React.FC<{ onCancel?: () => void }> = ({ onCancel }) => {\n  const {\n    state,\n    actions,\n    currentComponent,\n    progress,\n  } = useTemplateKYCFlowContext();\n\n  // Fonction pour déterminer le côté actuel d'une carte d'identité\n  const getCurrentSideForComponent = (componentId: number): string => {\n    const component = state.template.components.find(c => c.id === componentId);\n    if (!component || component.type !== 'id_card') return 'front';\n\n    const idConfig = component.config as any;\n    const sides = idConfig.sides || ['front', 'back'];\n\n    // Calculer le côté basé sur l'ordre dans le template\n    const componentIndex = state.template.components.findIndex(c => c.id === componentId);\n    const sideIndex = componentIndex % sides.length;\n\n    return sides[sideIndex];\n  };\n\n  const updateComponentData = (componentId: number, data: unknown) => {\n    actions.updateComponentData(componentId, data);\n  };\n\n  if (!currentComponent) {\n    return (\n      <View style={styles.container}>\n        <Text style={styles.errorText}>Aucun composant trouvé</Text>\n      </View>\n    );\n  }\n\n  // Rendu du composant actuel\n  const renderCurrentComponent = () => {\n    const commonProps = {\n      component: currentComponent,\n      value: state.componentData[currentComponent.id],\n      onValueChange: (data: unknown) => updateComponentData(currentComponent.id, data),\n      error: state.errors[currentComponent.id],\n      language: state.currentLanguage,\n    };\n\n    switch (currentComponent.type) {\n      case 'id_card':\n        return <IDCardCapture {...commonProps} currentSide={getCurrentSideForComponent(currentComponent.id)} />;\n\n      case 'selfie':\n        return <SelfieCaptureTemplate {...commonProps} />;\n\n      case 'file_upload':\n        return <FileUploadTemplate {...commonProps} />;\n\n      case 'location':\n        return <LocationCaptureTemplate {...commonProps} />;\n\n      case 'country_selection':\n        return <CountrySelectionTemplate {...commonProps} />;\n\n      default:\n        return (\n          <View style={styles.unsupportedContainer}>\n            <Text style={styles.unsupportedText}>\n              Type de composant non supporté: {currentComponent.type}\n            </Text>\n          </View>\n        );\n    }\n  };\n\n  return (\n    <SafeAreaView style={styles.container}>\n      {/* Header avec informations sur l'étape */}\n      {state.showCustomStepper ? (\n        <View style={styles.header}>\n          <Text style={styles.progressText}>\n            Étape {state.currentComponentIndex + 1} sur {state.template.components.length}\n          </Text>\n          <View style={styles.progressContainer}>\n            <View style={styles.progressBar}>\n              <View\n                style={[\n                  styles.progressFill,\n                  { width: `${progress}%` }\n                ]}\n              />\n            </View>\n\n          </View>\n\n          <View style={{ position: 'absolute', right: 12, top: 12 }}>\n            <TouchableOpacity onPress={onCancel} disabled={!onCancel} style={{ opacity: onCancel ? 1 : 0.5 }}>\n              <Text style={{ fontSize: 20, fontWeight: 'bold', color: '#333' }}>{`X`}</Text>\n            </TouchableOpacity>\n          </View>\n        </View>\n      ) : null}\n\n      {/* Contenu principal */}\n      <View style={styles.content}>\n        {renderCurrentComponent()}\n      </View>\n    </SafeAreaView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#f5f5f5',\n    \n  },\n  header: {\n    backgroundColor: 'white',\n    paddingVertical: 20,\n    paddingHorizontal: 12,\n    borderBottomWidth: 1,\n    borderBottomColor: '#e0e0e0',\n    marginHorizontal: 12,\n    marginTop: 12,\n    // shadow\n    shadowColor: '#000',\n    shadowOffset: { width: 0, height: 2 },\n    shadowOpacity: 0.15,\n    shadowRadius: 1.84,\n    elevation: 5,\n  },\n  title: {\n    fontSize: 24,\n    fontWeight: 'bold',\n    color: '#333',\n    marginBottom: 8,\n  },\n  description: {\n    fontSize: 16,\n    color: '#666',\n    marginBottom: 20,\n  },\n  progressContainer: {\n    // marginBottom: 20,\n  },\n  progressBar: {\n    height: 8,\n    backgroundColor: '#e0e0e0',\n    borderRadius: 4,\n    overflow: 'hidden',\n  },\n  progressFill: {\n    height: '100%',\n    backgroundColor: '#2DBD60',\n    borderRadius: 4,\n  },\n  progressText: {\n    fontSize: 14,\n    color: 'black',\n    fontWeight: '600',\n    textAlign: 'left',\n    marginBottom: 8,\n  },\n  stepInfo: {\n    backgroundColor: '#f8f9fa',\n    padding: 16,\n    borderRadius: 8,\n    borderLeftWidth: 4,\n    borderLeftColor: '#2DBD60',\n  },\n  stepTitle: {\n    fontSize: 18,\n    fontWeight: '600',\n    color: '#333',\n    marginBottom: 8,\n  },\n  stepDescription: {\n    fontSize: 14,\n    color: '#666',\n    lineHeight: 20,\n  },\n  content: {\n    flex: 1,\n    // justifyContent: 'center',\n    alignItems: 'center',\n    // paddingTop: Dimensions.get('window').height > 760 ? 12 : 0,\n  },\n  navigation: {\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    padding: 20,\n    backgroundColor: 'white',\n    borderTopWidth: 1,\n    borderTopColor: '#e0e0e0',\n  },\n  navButton: {\n    paddingHorizontal: 24,\n    paddingVertical: 12,\n    borderRadius: 8,\n    minWidth: 100,\n    alignItems: 'center',\n  },\n  primaryButton: {\n    backgroundColor: '#2DBD60',\n  },\n  navButtonText: {\n    fontSize: 16,\n    fontWeight: '600',\n    color: 'white',\n  },\n  errorText: {\n    color: '#dc2626',\n    fontSize: 16,\n    textAlign: 'center',\n    margin: 20,\n  },\n  unsupportedContainer: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    padding: 20,\n  },\n  unsupportedText: {\n    fontSize: 16,\n    color: '#666',\n    textAlign: 'center',\n  },\n}); "]}

package/build/components/VisionCameraView.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+export interface VisionCameraViewProps {
+    instructions?: string;
+    showCamera: boolean;
+    cameraType?: 'front' | 'back';
+    style?: ViewStyle;
+    onCapture?: (result: {
+        success: boolean;
+        path?: string;
+        error?: string;
+    }) => void;
+    onError?: (event: {
+        message: string;
+    }) => void;
+    onPermissionError?: () => void;
+    enableHdr?: boolean;
+    enableNightMode?: boolean;
+    quality?: 'low' | 'medium' | 'high';
+}
+export declare const VisionCameraView: React.FC<VisionCameraViewProps>;
+//# sourceMappingURL=VisionCameraView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VisionCameraView.d.ts","sourceRoot":"","sources":["../../src/components/VisionCameraView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,EAA8B,SAAS,EAAQ,MAAM,cAAc,CAAC;AAI3E,MAAM,WAAW,qBAAqB;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAClF,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/C,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;CACrC;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA0I5D,CAAC"}

package/build/components/VisionCameraView.js

@@ -0,0 +1,142 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { View, StyleSheet, Platform, Text } from 'react-native';
+import { Camera, useCameraDevice } from 'react-native-vision-camera';
+import VisionCameraModule from '../modules/camera/VisionCameraModule';
+export const VisionCameraView = ({ instructions = 'Position yourself in the frame and tap to capture', showCamera, cameraType = 'front', style, onCapture, onError, onPermissionError, enableHdr = false, enableNightMode = false, quality = 'high', }) => {
+    const camera = useRef(null);
+    const device = useCameraDevice(cameraType);
+    const [hasPermission, setHasPermission] = useState(false);
+    const [isInitialized, setIsInitialized] = useState(false);
+    // Check permissions on component mount
+    useEffect(() => {
+        checkPermissions();
+    }, []);
+    const checkPermissions = async () => {
+        try {
+            const hasAllPermissions = await VisionCameraModule.hasAllPermissions();
+            if (!hasAllPermissions) {
+                const granted = await VisionCameraModule.requestAllPermissions();
+                if (!granted) {
+                    onPermissionError?.();
+                    onError?.({ message: 'Camera permissions not granted' });
+                    return;
+                }
+            }
+            setHasPermission(true);
+        }
+        catch (error) {
+            console.error('Error checking permissions:', error);
+            onError?.({ message: 'Error checking camera permissions' });
+        }
+    };
+    const onInitialized = useCallback(() => {
+        console.log('Camera initialized!');
+        setIsInitialized(true);
+    }, []);
+    const onCameraError = useCallback((error) => {
+        console.error('Camera error:', error);
+        onError?.({ message: error.message || 'Camera error occurred' });
+    }, [onError]);
+    const capturePhoto = useCallback(async () => {
+        try {
+            if (!camera.current || !isInitialized) {
+                onError?.({ message: 'Camera not ready' });
+                return;
+            }
+            const photo = await camera.current.takePhoto({
+                enableShutterSound: true,
+            });
+            const result = VisionCameraModule.processPhotoResult(photo);
+            onCapture?.(result);
+        }
+        catch (error) {
+            console.error('Error taking photo:', error);
+            onCapture?.({
+                success: false,
+                error: error instanceof Error ? error.message : 'Failed to capture photo',
+            });
+        }
+    }, [isInitialized, quality, onCapture, onError]);
+    // Auto-capture functionality (can be triggered externally)
+    useEffect(() => {
+        if (showCamera && isInitialized && hasPermission) {
+            // Auto-capture after a short delay when camera is ready
+            const timer = setTimeout(() => {
+                capturePhoto();
+            }, 1000);
+            return () => clearTimeout(timer);
+        }
+        return undefined;
+    }, [showCamera, isInitialized, hasPermission, capturePhoto]);
+    if (Platform.OS === 'web') {
+        return (<View style={[styles.container, style]}>
+        <Text style={styles.webMessage}>
+          Camera is not supported on web platform. Please use the mobile app.
+        </Text>
+      </View>);
+    }
+    if (!hasPermission) {
+        return (<View style={[styles.container, style]}>
+        <Text style={styles.permissionMessage}>
+          Camera permission required. Please grant permission to continue.
+        </Text>
+      </View>);
+    }
+    if (!device) {
+        return (<View style={[styles.container, style]}>
+        <Text style={styles.errorMessage}>
+          Camera device not available
+        </Text>
+      </View>);
+    }
+    if (!showCamera) {
+        return <View style={[styles.container, style]}/>;
+    }
+    return (<View style={[styles.container, style]}>
+      <Camera ref={camera} style={StyleSheet.absoluteFill} device={device} isActive={showCamera} photo={true} onInitialized={onInitialized} onError={onCameraError}/>
+      
+      {instructions && (<View style={styles.instructionsOverlay}>
+          <Text style={styles.instructions}>{instructions}</Text>
+        </View>)}
+    </View>);
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: 'black',
+    },
+    instructionsOverlay: {
+        position: 'absolute',
+        top: 60,
+        left: 20,
+        right: 20,
+        backgroundColor: 'rgba(0, 0, 0, 0.7)',
+        padding: 15,
+        borderRadius: 10,
+    },
+    instructions: {
+        color: 'white',
+        fontSize: 16,
+        textAlign: 'center',
+        fontWeight: '500',
+    },
+    permissionMessage: {
+        color: 'white',
+        fontSize: 16,
+        textAlign: 'center',
+        margin: 20,
+    },
+    errorMessage: {
+        color: 'red',
+        fontSize: 16,
+        textAlign: 'center',
+        margin: 20,
+    },
+    webMessage: {
+        color: 'white',
+        fontSize: 16,
+        textAlign: 'center',
+        margin: 20,
+    },
+});
+//# sourceMappingURL=VisionCameraView.js.map

package/build/components/VisionCameraView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisionCameraView.js","sourceRoot":"","sources":["../../src/components/VisionCameraView.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { View, StyleSheet, Platform, ViewStyle, Text } from 'react-native';\nimport { Camera, useCameraDevice } from 'react-native-vision-camera';\nimport VisionCameraModule from '../modules/camera/VisionCameraModule';\n\nexport interface VisionCameraViewProps {\n  instructions?: string;\n  showCamera: boolean;\n  cameraType?: 'front' | 'back';\n  style?: ViewStyle;\n  onCapture?: (result: { success: boolean; path?: string; error?: string }) => void;\n  onError?: (event: { message: string }) => void;\n  onPermissionError?: () => void;\n  enableHdr?: boolean;\n  enableNightMode?: boolean;\n  quality?: 'low' | 'medium' | 'high';\n}\n\nexport const VisionCameraView: React.FC<VisionCameraViewProps> = ({\n  instructions = 'Position yourself in the frame and tap to capture',\n  showCamera,\n  cameraType = 'front',\n  style,\n  onCapture,\n  onError,\n  onPermissionError,\n  enableHdr = false,\n  enableNightMode = false,\n  quality = 'high',\n}) => {\n  const camera = useRef<Camera>(null);\n  const device = useCameraDevice(cameraType);\n  const [hasPermission, setHasPermission] = useState(false);\n  const [isInitialized, setIsInitialized] = useState(false);\n\n  // Check permissions on component mount\n  useEffect(() => {\n    checkPermissions();\n  }, []);\n\n  const checkPermissions = async () => {\n    try {\n      const hasAllPermissions = await VisionCameraModule.hasAllPermissions();\n      if (!hasAllPermissions) {\n        const granted = await VisionCameraModule.requestAllPermissions();\n        if (!granted) {\n          onPermissionError?.();\n          onError?.({ message: 'Camera permissions not granted' });\n          return;\n        }\n      }\n      setHasPermission(true);\n    } catch (error) {\n      console.error('Error checking permissions:', error);\n      onError?.({ message: 'Error checking camera permissions' });\n    }\n  };\n\n  const onInitialized = useCallback(() => {\n    console.log('Camera initialized!');\n    setIsInitialized(true);\n  }, []);\n\n  const onCameraError = useCallback((error: any) => {\n    console.error('Camera error:', error);\n    onError?.({ message: error.message || 'Camera error occurred' });\n  }, [onError]);\n\n  const capturePhoto = useCallback(async () => {\n    try {\n      if (!camera.current || !isInitialized) {\n        onError?.({ message: 'Camera not ready' });\n        return;\n      }\n\n      const photo = await camera.current.takePhoto({\n        enableShutterSound: true,\n      });\n\n      const result = VisionCameraModule.processPhotoResult(photo);\n      onCapture?.(result);\n    } catch (error) {\n      console.error('Error taking photo:', error);\n      onCapture?.({\n        success: false,\n        error: error instanceof Error ? error.message : 'Failed to capture photo',\n      });\n    }\n  }, [isInitialized, quality, onCapture, onError]);\n\n  // Auto-capture functionality (can be triggered externally)\n  useEffect(() => {\n    if (showCamera && isInitialized && hasPermission) {\n      // Auto-capture after a short delay when camera is ready\n      const timer = setTimeout(() => {\n        capturePhoto();\n      }, 1000);\n      \n      return () => clearTimeout(timer);\n    }\n    return undefined;\n  }, [showCamera, isInitialized, hasPermission, capturePhoto]);\n\n  if (Platform.OS === 'web') {\n    return (\n      <View style={[styles.container, style]}>\n        <Text style={styles.webMessage}>\n          Camera is not supported on web platform. Please use the mobile app.\n        </Text>\n      </View>\n    );\n  }\n\n  if (!hasPermission) {\n    return (\n      <View style={[styles.container, style]}>\n        <Text style={styles.permissionMessage}>\n          Camera permission required. Please grant permission to continue.\n        </Text>\n      </View>\n    );\n  }\n\n  if (!device) {\n    return (\n      <View style={[styles.container, style]}>\n        <Text style={styles.errorMessage}>\n          Camera device not available\n        </Text>\n      </View>\n    );\n  }\n\n  if (!showCamera) {\n    return <View style={[styles.container, style]} />;\n  }\n\n  return (\n    <View style={[styles.container, style]}>\n      <Camera\n        ref={camera}\n        style={StyleSheet.absoluteFill}\n        device={device}\n        isActive={showCamera}\n        photo={true}\n        onInitialized={onInitialized}\n        onError={onCameraError}\n      />\n      \n      {instructions && (\n        <View style={styles.instructionsOverlay}>\n          <Text style={styles.instructions}>{instructions}</Text>\n        </View>\n      )}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: 'black',\n  },\n  instructionsOverlay: {\n    position: 'absolute',\n    top: 60,\n    left: 20,\n    right: 20,\n    backgroundColor: 'rgba(0, 0, 0, 0.7)',\n    padding: 15,\n    borderRadius: 10,\n  },\n  instructions: {\n    color: 'white',\n    fontSize: 16,\n    textAlign: 'center',\n    fontWeight: '500',\n  },\n  permissionMessage: {\n    color: 'white',\n    fontSize: 16,\n    textAlign: 'center',\n    margin: 20,\n  },\n  errorMessage: {\n    color: 'red',\n    fontSize: 16,\n    textAlign: 'center',\n    margin: 20,\n  },\n  webMessage: {\n    color: 'white',\n    fontSize: 16,\n    textAlign: 'center',\n    margin: 20,\n  },\n});"]}

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

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

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

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

package/build/components/example/CameraCaptureEx.js

@@ -0,0 +1,219 @@
+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(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;
+//# sourceMappingURL=CameraCaptureEx.js.map