@sanctum-key/react-native-sdk 1.0.0

package/build/components/example/CameraCaptureExSimple.js

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

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

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+/**
+ * Example component demonstrating how to use dynamic template loading
+ *
+ * This example shows two ways to use templates:
+ * 1. With templateId - loads template dynamically from backend API
+ * 2. With direct template object - uses hardcoded template (backward compatibility)
+ */
+export declare const DynamicTemplateExample: React.FC;
+//# sourceMappingURL=DynamicTemplateExample.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicTemplateExample.d.ts","sourceRoot":"","sources":["../../../src/components/example/DynamicTemplateExample.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EA8J1C,CAAC"}

package/build/components/example/DynamicTemplateExample.js

@@ -0,0 +1,241 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet, SafeAreaView, TextInput, TouchableOpacity, ScrollView } from 'react-native';
+import { TemplateKYCFlow } from '../TemplateKYCFlowRefactored';
+/**
+ * Example component demonstrating how to use dynamic template loading
+ *
+ * This example shows two ways to use templates:
+ * 1. With templateId - loads template dynamically from backend API
+ * 2. With direct template object - uses hardcoded template (backward compatibility)
+ */
+export const DynamicTemplateExample = () => {
+    const [templateId, setTemplateId] = useState('');
+    const [apiKey, setApiKey] = useState('');
+    const [showFlow, setShowFlow] = useState(false);
+    const [language, setLanguage] = useState('en');
+    const handleComplete = (data) => {
+        console.log('KYC Verification completed:', data);
+        setShowFlow(false);
+        alert('Verification completed successfully!');
+    };
+    const handleError = (error) => {
+        console.error('KYC Error:', error);
+        alert(`Error: ${error}`);
+        setShowFlow(false);
+    };
+    const handleCancel = () => {
+        console.log('KYC Flow cancelled');
+        setShowFlow(false);
+    };
+    const startFlow = () => {
+        if (!templateId.trim()) {
+            alert('Please enter a template ID');
+            return;
+        }
+        setShowFlow(true);
+    };
+    if (showFlow) {
+        return (<SafeAreaView style={styles.container}>
+        <TemplateKYCFlow templateId={templateId} API_KEY={apiKey || undefined} language={language} onComplete={handleComplete} onError={handleError} onCancel={handleCancel}/>
+      </SafeAreaView>);
+    }
+    return (<SafeAreaView style={styles.container}>
+      <ScrollView style={styles.scrollView} contentContainerStyle={styles.content}>
+        <Text style={styles.title}>Dynamic Template KYC Example</Text>
+        <Text style={styles.subtitle}>
+          Load a KYC template dynamically from the backend API
+        </Text>
+
+        <View style={styles.section}>
+          <Text style={styles.label}>Template ID *</Text>
+          <TextInput style={styles.input} placeholder="e.g., free-style" value={templateId} onChangeText={setTemplateId} autoCapitalize="none" autoCorrect={false}/>
+          <Text style={styles.hint}>
+            Enter the template ID to load from the backend API
+          </Text>
+        </View>
+
+        <View style={styles.section}>
+          <Text style={styles.label}>API Key (Optional)</Text>
+          <TextInput style={styles.input} placeholder="Your API key" value={apiKey} onChangeText={setApiKey} autoCapitalize="none" autoCorrect={false} secureTextEntry/>
+          <Text style={styles.hint}>
+            If not provided, the SDK will use token-based authentication
+          </Text>
+        </View>
+
+        <View style={styles.section}>
+          <Text style={styles.label}>Language</Text>
+          <View style={styles.languageContainer}>
+            <TouchableOpacity style={[
+            styles.languageButton,
+            language === 'en' && styles.languageButtonActive,
+        ]} onPress={() => setLanguage('en')}>
+              <Text style={[
+            styles.languageButtonText,
+            language === 'en' && styles.languageButtonTextActive,
+        ]}>
+                English
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity style={[
+            styles.languageButton,
+            language === 'fr' && styles.languageButtonActive,
+        ]} onPress={() => setLanguage('fr')}>
+              <Text style={[
+            styles.languageButtonText,
+            language === 'fr' && styles.languageButtonTextActive,
+        ]}>
+                Français
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+
+        <TouchableOpacity style={[styles.button, !templateId.trim() && styles.buttonDisabled]} onPress={startFlow} disabled={!templateId.trim()}>
+          <Text style={styles.buttonText}>Start KYC Verification</Text>
+        </TouchableOpacity>
+
+        <View style={styles.infoSection}>
+          <Text style={styles.infoTitle}>Usage Example:</Text>
+          <Text style={styles.code}>
+            {`<TemplateKYCFlow
+  templateId="free-style"
+  API_KEY="your-api-key"
+  language="fr"
+  onComplete={handleComplete}
+  onError={handleError}
+  onCancel={handleCancel}
+/>`}
+          </Text>
+        </View>
+
+        <View style={styles.infoSection}>
+          <Text style={styles.infoTitle}>Notes:</Text>
+          <Text style={styles.infoText}>
+            • Template ID is required to load from backend{'\n'}
+            • API Key is optional but recommended for production{'\n'}
+            • The SDK will automatically transform the backend template format to SDK format{'\n'}
+            • Templates are cached for 5 minutes to improve performance{'\n'}
+            • You can also use a direct template object for backward compatibility
+          </Text>
+        </View>
+      </ScrollView>
+    </SafeAreaView>);
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#f5f5f5',
+    },
+    scrollView: {
+        flex: 1,
+    },
+    content: {
+        padding: 20,
+        paddingBottom: 40,
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        color: '#333',
+        marginBottom: 8,
+        textAlign: 'center',
+    },
+    subtitle: {
+        fontSize: 16,
+        color: '#666',
+        marginBottom: 32,
+        textAlign: 'center',
+    },
+    section: {
+        marginBottom: 24,
+    },
+    label: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#333',
+        marginBottom: 8,
+    },
+    input: {
+        backgroundColor: 'white',
+        borderWidth: 1,
+        borderColor: '#ddd',
+        borderRadius: 8,
+        padding: 12,
+        fontSize: 16,
+        color: '#333',
+    },
+    hint: {
+        fontSize: 12,
+        color: '#999',
+        marginTop: 4,
+    },
+    languageContainer: {
+        flexDirection: 'row',
+        gap: 12,
+    },
+    languageButton: {
+        flex: 1,
+        padding: 12,
+        backgroundColor: 'white',
+        borderWidth: 1,
+        borderColor: '#ddd',
+        borderRadius: 8,
+        alignItems: 'center',
+    },
+    languageButtonActive: {
+        backgroundColor: '#2DBD60',
+        borderColor: '#2DBD60',
+    },
+    languageButtonText: {
+        fontSize: 16,
+        color: '#666',
+        fontWeight: '500',
+    },
+    languageButtonTextActive: {
+        color: 'white',
+        fontWeight: '600',
+    },
+    button: {
+        backgroundColor: '#2DBD60',
+        padding: 16,
+        borderRadius: 8,
+        alignItems: 'center',
+        marginTop: 8,
+        marginBottom: 32,
+    },
+    buttonDisabled: {
+        backgroundColor: '#ccc',
+    },
+    buttonText: {
+        color: 'white',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    infoSection: {
+        backgroundColor: 'white',
+        padding: 16,
+        borderRadius: 8,
+        marginBottom: 16,
+    },
+    infoTitle: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#333',
+        marginBottom: 8,
+    },
+    code: {
+        fontFamily: 'monospace',
+        fontSize: 12,
+        color: '#555',
+        backgroundColor: '#f5f5f5',
+        padding: 12,
+        borderRadius: 4,
+        overflow: 'hidden',
+    },
+    infoText: {
+        fontSize: 14,
+        color: '#666',
+        lineHeight: 20,
+    },
+});
+//# sourceMappingURL=DynamicTemplateExample.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicTemplateExample.js","sourceRoot":"","sources":["../../../src/components/example/DynamicTemplateExample.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport { View, Text, StyleSheet, SafeAreaView, TextInput, TouchableOpacity, ScrollView } from 'react-native';\nimport { TemplateKYCFlow } from '../TemplateKYCFlowRefactored';\nimport { VerificationState } from '../../types/KYC.types';\n\n/**\n * Example component demonstrating how to use dynamic template loading\n * \n * This example shows two ways to use templates:\n * 1. With templateId - loads template dynamically from backend API\n * 2. With direct template object - uses hardcoded template (backward compatibility)\n */\nexport const DynamicTemplateExample: React.FC = () => {\n  const [templateId, setTemplateId] = useState<string>('');\n  const [apiKey, setApiKey] = useState<string>('');\n  const [showFlow, setShowFlow] = useState<boolean>(false);\n  const [language, setLanguage] = useState<'en' | 'fr'>('en');\n\n  const handleComplete = (data: VerificationState) => {\n    console.log('KYC Verification completed:', data);\n    setShowFlow(false);\n    alert('Verification completed successfully!');\n  };\n\n  const handleError = (error: string) => {\n    console.error('KYC Error:', error);\n    alert(`Error: ${error}`);\n    setShowFlow(false);\n  };\n\n  const handleCancel = () => {\n    console.log('KYC Flow cancelled');\n    setShowFlow(false);\n  };\n\n  const startFlow = () => {\n    if (!templateId.trim()) {\n      alert('Please enter a template ID');\n      return;\n    }\n    setShowFlow(true);\n  };\n\n  if (showFlow) {\n    return (\n      <SafeAreaView style={styles.container}>\n        <TemplateKYCFlow\n          templateId={templateId}\n          API_KEY={apiKey || undefined}\n          language={language}\n          onComplete={handleComplete}\n          onError={handleError}\n          onCancel={handleCancel}\n        />\n      </SafeAreaView>\n    );\n  }\n\n  return (\n    <SafeAreaView style={styles.container}>\n      <ScrollView style={styles.scrollView} contentContainerStyle={styles.content}>\n        <Text style={styles.title}>Dynamic Template KYC Example</Text>\n        <Text style={styles.subtitle}>\n          Load a KYC template dynamically from the backend API\n        </Text>\n\n        <View style={styles.section}>\n          <Text style={styles.label}>Template ID *</Text>\n          <TextInput\n            style={styles.input}\n            placeholder=\"e.g., free-style\"\n            value={templateId}\n            onChangeText={setTemplateId}\n            autoCapitalize=\"none\"\n            autoCorrect={false}\n          />\n          <Text style={styles.hint}>\n            Enter the template ID to load from the backend API\n          </Text>\n        </View>\n\n        <View style={styles.section}>\n          <Text style={styles.label}>API Key (Optional)</Text>\n          <TextInput\n            style={styles.input}\n            placeholder=\"Your API key\"\n            value={apiKey}\n            onChangeText={setApiKey}\n            autoCapitalize=\"none\"\n            autoCorrect={false}\n            secureTextEntry\n          />\n          <Text style={styles.hint}>\n            If not provided, the SDK will use token-based authentication\n          </Text>\n        </View>\n\n        <View style={styles.section}>\n          <Text style={styles.label}>Language</Text>\n          <View style={styles.languageContainer}>\n            <TouchableOpacity\n              style={[\n                styles.languageButton,\n                language === 'en' && styles.languageButtonActive,\n              ]}\n              onPress={() => setLanguage('en')}\n            >\n              <Text\n                style={[\n                  styles.languageButtonText,\n                  language === 'en' && styles.languageButtonTextActive,\n                ]}\n              >\n                English\n              </Text>\n            </TouchableOpacity>\n            <TouchableOpacity\n              style={[\n                styles.languageButton,\n                language === 'fr' && styles.languageButtonActive,\n              ]}\n              onPress={() => setLanguage('fr')}\n            >\n              <Text\n                style={[\n                  styles.languageButtonText,\n                  language === 'fr' && styles.languageButtonTextActive,\n                ]}\n              >\n                Français\n              </Text>\n            </TouchableOpacity>\n          </View>\n        </View>\n\n        <TouchableOpacity\n          style={[styles.button, !templateId.trim() && styles.buttonDisabled]}\n          onPress={startFlow}\n          disabled={!templateId.trim()}\n        >\n          <Text style={styles.buttonText}>Start KYC Verification</Text>\n        </TouchableOpacity>\n\n        <View style={styles.infoSection}>\n          <Text style={styles.infoTitle}>Usage Example:</Text>\n          <Text style={styles.code}>\n            {`<TemplateKYCFlow\n  templateId=\"free-style\"\n  API_KEY=\"your-api-key\"\n  language=\"fr\"\n  onComplete={handleComplete}\n  onError={handleError}\n  onCancel={handleCancel}\n/>`}\n          </Text>\n        </View>\n\n        <View style={styles.infoSection}>\n          <Text style={styles.infoTitle}>Notes:</Text>\n          <Text style={styles.infoText}>\n            • Template ID is required to load from backend{'\\n'}\n            • API Key is optional but recommended for production{'\\n'}\n            • The SDK will automatically transform the backend template format to SDK format{'\\n'}\n            • Templates are cached for 5 minutes to improve performance{'\\n'}\n            • You can also use a direct template object for backward compatibility\n          </Text>\n        </View>\n      </ScrollView>\n    </SafeAreaView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#f5f5f5',\n  },\n  scrollView: {\n    flex: 1,\n  },\n  content: {\n    padding: 20,\n    paddingBottom: 40,\n  },\n  title: {\n    fontSize: 24,\n    fontWeight: 'bold',\n    color: '#333',\n    marginBottom: 8,\n    textAlign: 'center',\n  },\n  subtitle: {\n    fontSize: 16,\n    color: '#666',\n    marginBottom: 32,\n    textAlign: 'center',\n  },\n  section: {\n    marginBottom: 24,\n  },\n  label: {\n    fontSize: 16,\n    fontWeight: '600',\n    color: '#333',\n    marginBottom: 8,\n  },\n  input: {\n    backgroundColor: 'white',\n    borderWidth: 1,\n    borderColor: '#ddd',\n    borderRadius: 8,\n    padding: 12,\n    fontSize: 16,\n    color: '#333',\n  },\n  hint: {\n    fontSize: 12,\n    color: '#999',\n    marginTop: 4,\n  },\n  languageContainer: {\n    flexDirection: 'row',\n    gap: 12,\n  },\n  languageButton: {\n    flex: 1,\n    padding: 12,\n    backgroundColor: 'white',\n    borderWidth: 1,\n    borderColor: '#ddd',\n    borderRadius: 8,\n    alignItems: 'center',\n  },\n  languageButtonActive: {\n    backgroundColor: '#2DBD60',\n    borderColor: '#2DBD60',\n  },\n  languageButtonText: {\n    fontSize: 16,\n    color: '#666',\n    fontWeight: '500',\n  },\n  languageButtonTextActive: {\n    color: 'white',\n    fontWeight: '600',\n  },\n  button: {\n    backgroundColor: '#2DBD60',\n    padding: 16,\n    borderRadius: 8,\n    alignItems: 'center',\n    marginTop: 8,\n    marginBottom: 32,\n  },\n  buttonDisabled: {\n    backgroundColor: '#ccc',\n  },\n  buttonText: {\n    color: 'white',\n    fontSize: 16,\n    fontWeight: '600',\n  },\n  infoSection: {\n    backgroundColor: 'white',\n    padding: 16,\n    borderRadius: 8,\n    marginBottom: 16,\n  },\n  infoTitle: {\n    fontSize: 16,\n    fontWeight: '600',\n    color: '#333',\n    marginBottom: 8,\n  },\n  code: {\n    fontFamily: 'monospace',\n    fontSize: 12,\n    color: '#555',\n    backgroundColor: '#f5f5f5',\n    padding: 12,\n    borderRadius: 4,\n    overflow: 'hidden',\n  },\n  infoText: {\n    fontSize: 14,\n    color: '#666',\n    lineHeight: 20,\n  },\n});"]}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const OrientationVideoExample: React.FC;
+export default OrientationVideoExample;
+//# sourceMappingURL=OrientationVideoExample.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OrientationVideoExample.d.ts","sourceRoot":"","sources":["../../../src/components/example/OrientationVideoExample.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAaxC,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAsMpC,CAAC;AAwKF,eAAe,uBAAuB,CAAC"}