@transfergratis/react-native-sdk 0.1.24 → 0.1.26

package/src/components/KYCElements/OrientationVideoCapture.tsx

@@ -11,6 +11,7 @@ import { showAlert } from '../../utils/platformAlert';
 import Svg, { Rect, Path, Mask, Defs } from 'react-native-svg';
 import { Camera, useCameraDevice } from 'react-native-vision-camera';
 import { OrientationVideoConfig, OrientationVideoState } from '../../types/KYC.types';
+import { KycEnvironment } from '../../types/env.types';
 import kycService from '../../modules/api/KYCService';
 import VisionCameraModule from '../../modules/camera/VisionCameraModule';
 import SideSelfieIcon from '../Svgs/sideSelfieIcon';
@@ -20,6 +21,7 @@ interface OrientationVideoCaptureProps {
   onComplete: (result: any) => void;
   onError: (error: string) => void;
   kycService: typeof kycService;
+  env?: KycEnvironment;
 }
 
 const defaultConfig: OrientationVideoConfig = {
@@ -42,6 +44,7 @@ export const OrientationVideoCapture: React.FC<OrientationVideoCaptureProps> = (
   onComplete,
   onError,
   kycService,
+  env = 'PRODUCTION',
 }) => {
   const finalConfig = { ...defaultConfig, ...config };
   
@@ -174,7 +177,7 @@ export const OrientationVideoCapture: React.FC<OrientationVideoCaptureProps> = (
     setState(prev => ({ ...prev, isProcessing: true, error: null }));
 
     try {
-      const result = await kycService.processOrientationVideo(videoUri);
+      const result = await kycService.processOrientationVideo(videoUri, env);
       
       if (result.success && result.data) {
         setState(prev => ({ 

package/src/components/KYCElements/OrientationVideoCaptureEnhanced.tsx

@@ -12,6 +12,7 @@ import { showAlert } from '../../utils/platformAlert';
 import Svg, { Rect, Path, Mask, Defs } from 'react-native-svg';
 import { EnhancedCameraView } from '../EnhancedCameraView';
 import { OrientationVideoConfig, OrientationVideoState } from '../../types/KYC.types';
+import { KycEnvironment } from '../../types/env.types';
 import kycService from '../../modules/api/KYCService';
 import FrontSelfieIcon from '../Svgs/frontSelfieIcon';
 import ScanningLine from '../Svgs/scanningLine';
@@ -21,6 +22,7 @@ interface OrientationVideoCaptureEnhancedProps {
   onComplete: (result: any) => void;
   onError: (error: string) => void;
   kycService: typeof kycService;
+  env?: KycEnvironment;
 }
 
 const defaultConfig: OrientationVideoConfig = {
@@ -43,6 +45,7 @@ export const OrientationVideoCaptureEnhanced: React.FC<OrientationVideoCaptureEn
   onComplete,
   onError,
   kycService,
+  env = 'PRODUCTION',
 }) => {
   const finalConfig = { ...defaultConfig, ...config };
   const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
@@ -153,7 +156,7 @@ export const OrientationVideoCaptureEnhanced: React.FC<OrientationVideoCaptureEn
     setState(prev => ({ ...prev, isProcessing: true, error: null }));
 
     try {
-      const result = await kycService.processOrientationVideo(videoUri);
+      const result = await kycService.processOrientationVideo(videoUri, env);
       
       if (result.success && result.data) {
         setState(prev => ({ 

package/src/components/KYCElements/OrientationVideoCaptureFinal.tsx

@@ -11,6 +11,7 @@ import { showAlert } from '../../utils/platformAlert';
 import Svg, { Rect, Path, Mask, Defs } from 'react-native-svg';
 import { EnhancedCameraView } from '../EnhancedCameraView';
 import { OrientationVideoConfig, OrientationVideoState } from '../../types/KYC.types';
+import { KycEnvironment } from '../../types/env.types';
 import SideSelfieIcon from '../Svgs/sideSelfieIcon';
 import kycService from '../../modules/api/KYCService';
 
@@ -19,6 +20,7 @@ interface OrientationVideoCaptureFinalProps {
   onComplete: (result: any) => void;
   onError: (error: string) => void;
   kycService: typeof kycService;
+  env?: KycEnvironment;
 }
 
 const defaultConfig: OrientationVideoConfig = {
@@ -41,6 +43,7 @@ export const OrientationVideoCaptureFinal: React.FC<OrientationVideoCaptureFinal
   onComplete,
   onError,
   kycService,
+  env = 'PRODUCTION',
 }) => {
   const finalConfig = { ...defaultConfig, ...config };
   
@@ -127,7 +130,7 @@ export const OrientationVideoCaptureFinal: React.FC<OrientationVideoCaptureFinal
     setState(prev => ({ ...prev, isProcessing: true, error: null }));
 
     try {
-      const result = await kycService.processOrientationVideo(videoUri);
+      const result = await kycService.processOrientationVideo(videoUri, env);
       
       if (result.success && result.data) {
         setState(prev => ({ 

package/src/components/KYCElements/PersonalInformationTemplate.tsx

@@ -0,0 +1,158 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, StyleSheet, TextInput, KeyboardAvoidingView, Platform, ScrollView } from 'react-native';
+import { TemplateComponent, PersonalInformationConfig, LocalizedText } from '../../types/KYC.types';
+import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
+import { useI18n } from '../../hooks/useI18n';
+import { Button } from '../ui/Button';
+
+interface PersonalInformationTemplateProps {
+    component: TemplateComponent;
+    value?: any;
+    onValueChange: (data: any) => void;
+    error?: string;
+    language?: string;
+}
+
+export const PersonalInformationTemplate: React.FC<PersonalInformationTemplateProps> = ({
+    component,
+    value,
+    onValueChange,
+    error,
+}) => {
+    const { actions, getLocalizedText } = useTemplateKYCFlowContext();
+    const { t } = useI18n();
+    const config = component.config as PersonalInformationConfig;
+    const [formData, setFormData] = useState<Record<string, string>>({});
+
+    const title = getLocalizedText(component.labels as LocalizedText);
+    const instructions = getLocalizedText(component.instructions as LocalizedText);
+    const buttonText = getLocalizedText((component.ui as any).buttonText) || t('common.submit');
+
+    useEffect(() => {
+        if (value) {
+            setFormData(value);
+        }
+    }, [value]);
+
+    const handleChange = (fieldId: string, text: string) => {
+        const newData = { ...formData, [fieldId]: text };
+        setFormData(newData);
+        onValueChange(newData);
+    };
+
+    const handleCreate = () => {
+        actions.nextComponent();
+    };
+
+    const isFormValid = () => {
+        if (!config.fields) return true;
+        return config.fields.every(field => {
+            if (field.required && !formData[field.id]) return false;
+            return true;
+        });
+    };
+
+    return (
+        <KeyboardAvoidingView
+            behavior={Platform.OS === "ios" ? "padding" : "height"}
+            style={styles.keyboardAvoidingView}
+        >
+            <ScrollView contentContainerStyle={styles.scrollContainer} showsVerticalScrollIndicator={false}>
+                <View style={styles.container}>
+                    <Text style={styles.title}>{title}</Text>
+                    <Text style={styles.instructions}>{instructions}</Text>
+
+                    <View style={styles.formContainer}>
+                        {config.fields && config.fields.map((field) => (
+                            <View key={field.id} style={styles.fieldContainer}>
+                                <Text style={styles.label}>
+                                    {field.label} {field.type === 'date' && field.dateFormat ? `(${field.dateFormat})` : ''} {field.required && '*'}
+                                </Text>
+                                <TextInput
+                                    style={styles.input}
+                                    placeholder={field.placeholder || field.label}
+                                    value={formData[field.id] || ''}
+                                    onChangeText={(text) => handleChange(field.id, text)}
+                                    autoCapitalize="words"
+                                />
+                            </View>
+                        ))}
+                    </View>
+
+                    {error && <Text style={styles.errorText}>{error}</Text>}
+
+                    <Button
+                        title={buttonText}
+                        onPress={handleCreate}
+                        fullWidth
+                        style={styles.button}
+                        disabled={!isFormValid()}
+                    />
+                </View>
+            </ScrollView>
+        </KeyboardAvoidingView>
+    );
+};
+
+const styles = StyleSheet.create({
+    keyboardAvoidingView: {
+        flex: 1,
+        width: '100%',
+    },
+    scrollContainer: {
+        flexGrow: 1,
+        justifyContent: 'center',
+        paddingBottom: 20,
+    },
+    container: {
+        padding: 20,
+        backgroundColor: 'white',
+        borderRadius: 12,
+        margin: 16,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+        elevation: 3,
+        width: '95%',
+    },
+    title: {
+        fontSize: 22,
+        fontWeight: 'bold',
+        marginBottom: 10,
+        color: '#333',
+    },
+    instructions: {
+        fontSize: 16,
+        color: '#666',
+        marginBottom: 20,
+        lineHeight: 22,
+    },
+    formContainer: {
+        marginBottom: 20,
+    },
+    fieldContainer: {
+        marginBottom: 16,
+    },
+    label: {
+        fontSize: 14,
+        fontWeight: '600',
+        color: '#333',
+        marginBottom: 6,
+    },
+    input: {
+        borderWidth: 1,
+        borderColor: '#ddd',
+        padding: 12,
+        borderRadius: 8,
+        fontSize: 16,
+        backgroundColor: '#f9f9f9',
+    },
+    errorText: {
+        color: 'red',
+        marginBottom: 10,
+    },
+    button: {
+        marginTop: 10,
+    },
+});

package/src/components/KYCElements/PhoneVerificationTemplate.tsx

@@ -0,0 +1,253 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet, TextInput, TouchableOpacity, Alert } from 'react-native';
+import { TemplateComponent, LocalizedText } from '../../types/KYC.types';
+import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
+import { useI18n } from '../../hooks/useI18n';
+import { Button } from '../ui/Button';
+
+interface PhoneVerificationTemplateProps {
+    component: TemplateComponent;
+    value?: any;
+    onValueChange: (data: any) => void;
+    error?: string;
+    language?: string;
+}
+
+type VerificationStep = 'phone' | 'otp';
+
+export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps> = ({
+    component,
+    value,
+    onValueChange,
+    error: propError,
+}) => {
+    const { actions, getLocalizedText } = useTemplateKYCFlowContext();
+    const { t } = useI18n();
+    // const config = component.config as PhoneVerificationConfig;
+
+    // State
+    const [step, setStep] = useState<VerificationStep>('phone');
+    const [phone, setPhone] = useState('');
+    const [otp, setOtp] = useState('');
+    const [localError, setLocalError] = useState<string | null>(null);
+    const [isSimulating, setIsSimulating] = useState(false);
+
+    const title = getLocalizedText(component.labels as LocalizedText);
+    const instructions = getLocalizedText(component.instructions as LocalizedText);
+
+    // Determine button text based on step
+    const verifyButtonText = getLocalizedText((component.ui as any).buttonText) || t('common.verify') || 'Verify';
+    const sendButtonText = t('common.sendCode') || 'Send Verification Code';
+    const buttonText = step === 'phone' ? sendButtonText : verifyButtonText;
+
+    const handleSendCode = () => {
+        if (!phone || phone.length < 5) {
+            setLocalError(t('errors.invalidPhone') || 'Please enter a valid phone number');
+            return;
+        }
+
+        setLocalError(null);
+        setIsSimulating(true);
+
+        // Simulate API call to send code
+        setTimeout(() => {
+            setIsSimulating(false);
+            setStep('otp');
+        }, 1500);
+    };
+
+    const handleVerifyCode = () => {
+        if (!otp || otp.length < 4) {
+            setLocalError(t('errors.invalidCode') || 'Please enter the 6-digit code');
+            return;
+        }
+
+        setLocalError(null);
+        setIsSimulating(true);
+
+        // Simulate verification API
+        setTimeout(() => {
+            setIsSimulating(false);
+
+            // Mock validation logic
+            if (otp === '123456') {
+                onValueChange({ phone, otp, verified: true });
+                actions.nextComponent();
+            } else {
+                setLocalError(t('errors.wrongCode') || 'Invalid verification code. Try 123456');
+            }
+        }, 1500);
+    };
+
+    const onChangePhone = (text: string) => {
+        setPhone(text);
+        if (localError) setLocalError(null);
+    };
+
+    const onChangeOtp = (text: string) => {
+        setOtp(text);
+        if (localError) setLocalError(null);
+    };
+
+    const handleBackToPhone = () => {
+        setStep('phone');
+        setOtp('');
+        setLocalError(null);
+    };
+
+    return (
+        <View style={styles.container}>
+            <Text style={styles.title}>{title}</Text>
+            <Text style={styles.instructions}>
+                {step === 'phone' ? instructions : (t('kyc.enterCodeSent') || `Please enter the code sent to ${phone}`)}
+            </Text>
+
+            <View style={styles.contentContainer}>
+                {step === 'phone' ? (
+                    <View style={styles.inputContainer}>
+                        <Text style={styles.label}>{t('common.phone') || 'Phone Number'}</Text>
+                        <TextInput
+                            style={styles.input}
+                            placeholder="+1234567890"
+                            value={phone}
+                            onChangeText={onChangePhone}
+                            keyboardType="phone-pad"
+                            autoComplete="tel"
+                            editable={!isSimulating}
+                        />
+                    </View>
+                ) : (
+                    <View style={styles.inputContainer}>
+                        <Text style={styles.label}>{t('common.verificationCode') || 'Verification Code'}</Text>
+                        <TextInput
+                            style={styles.input}
+                            placeholder="123456"
+                            value={otp}
+                            onChangeText={onChangeOtp}
+                            keyboardType="number-pad"
+                            maxLength={6}
+                            editable={!isSimulating}
+                        />
+                        <TouchableOpacity onPress={handleBackToPhone} style={styles.changeLink}>
+                            <Text style={styles.changeText}>{t('common.back') || 'Change number'}</Text>
+                        </TouchableOpacity>
+                    </View>
+                )}
+
+                {(localError || propError) && (
+                    <Text style={styles.errorText}>{localError || propError}</Text>
+                )}
+
+                <Button
+                    title={isSimulating ? (t('common.processing') || 'Processing...') : buttonText}
+                    onPress={step === 'phone' ? handleSendCode : handleVerifyCode}
+                    style={styles.button}
+                    disabled={
+                        isSimulating ||
+                        (step === 'phone' ? !phone : !otp)
+                    }
+                />
+
+                {step === 'otp' && (
+                    <TouchableOpacity
+                        onPress={() => {
+                            // Resend logic
+                            Alert.alert(
+                                t('common.codeResent') || 'Code Resent',
+                                t('common.codeResentMessage', { email: phone }) || 'Code resent to ' + phone
+                            );
+                        }}
+                        style={styles.resendButton}
+                        disabled={isSimulating}
+                    >
+                        <Text style={styles.resendText}>{t('common.resendCode') || 'Resend Code'}</Text>
+                    </TouchableOpacity>
+                )}
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        padding: 24,
+        backgroundColor: 'white',
+        borderRadius: 16,
+        margin: 16,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.1,
+        shadowRadius: 12,
+        elevation: 5,
+        width: '95%',
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: '700',
+        marginBottom: 8,
+        color: '#1a1a1a',
+        textAlign: 'center',
+    },
+    instructions: {
+        fontSize: 16,
+        color: '#666',
+        marginBottom: 32,
+        lineHeight: 24,
+        textAlign: 'center',
+    },
+    contentContainer: {
+        // width: '100%',
+    },
+    inputContainer: {
+        marginBottom: 24,
+    },
+    label: {
+        fontSize: 14,
+        fontWeight: '600',
+        color: '#333',
+        marginBottom: 8,
+        marginLeft: 4,
+    },
+    input: {
+        borderWidth: 1,
+        borderColor: '#e0e0e0',
+        padding: 16,
+        borderRadius: 12,
+        fontSize: 16,
+        backgroundColor: '#f8f9fa',
+        color: '#333',
+    },
+    errorText: {
+        color: '#dc2626',
+        marginBottom: 16,
+        fontSize: 14,
+        textAlign: 'center',
+        backgroundColor: '#fee2e2',
+        padding: 8,
+        borderRadius: 8,
+        overflow: 'hidden',
+    },
+    button: {
+        height: 50,
+        borderRadius: 12,
+        width: "100%"
+    },
+    changeLink: {
+        alignSelf: 'flex-end',
+        marginTop: 8,
+    },
+    changeText: {
+        color: '#2DBD60',
+        fontSize: 14,
+        fontWeight: '500',
+    },
+    resendButton: {
+        marginTop: 16,
+        alignItems: 'center',
+    },
+    resendText: {
+        color: '#666',
+        fontSize: 14,
+        textDecorationLine: 'underline',
+    },
+});

package/src/components/KYCElements/SelfieCaptureTemplate.tsx

@@ -33,7 +33,7 @@ export const SelfieCaptureTemplate: React.FC<SelfieCaptureTemplateProps> = ({
   const { t } = useI18n();
   // const config = component.config as SelfieConfig;
   const orientations: OrientationType[] = (['center','left','right']) as OrientationType[];
-  const { actions, state, } = useTemplateKYCFlowContext();
+  const { actions, state, env } = useTemplateKYCFlowContext();
 
   const [silentCaptureResult, setSilentCaptureResult] = useState<ISilentCaptureResult>({ success: false, isAnalyzing: false });
 
@@ -152,10 +152,13 @@ export const SelfieCaptureTemplate: React.FC<SelfieCaptureTemplateProps> = ({
     }
     if (result.success && result.path) {
       setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: true, success: false, error: '' }));
-      selfieVerification(result.path).then((response) => {
+      selfieVerification(result.path, env).then((response) => {
         if (response.length > 0) {
           const res = response[0];
-          if (res?.orientation_direction === getOrientationOpposite(currentOrientation) && res?.capture) {
+          // In SANDBOX mode, always accept the result regardless of orientation
+          if (env === 'SANDBOX' && res?.capture) {
+            setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: true, error: '', path: result.path }));
+          } else if (res?.orientation_direction === getOrientationOpposite(currentOrientation) && res?.capture) {
             setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: true, error: '', path: result.path }));
           } else {
             setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: 'Le selfie n\'est pas correct' }));

package/src/components/KYCElements/WelcomeTemplate.tsx

@@ -150,7 +150,7 @@ export const WelcomeTemplate: React.FC<WelcomeTemplateProps> = ({
 
         {/* Get Started Button */}
         <Button
-          title={buttonText}
+          title={buttonText?.length === 0 ? t('kyc.welcome.getStarted') || 'Get Started' : buttonText}
           fullWidth
           onPress={handleGetStarted}
           style={{ paddingVertical: 20, marginTop: 36 }}
@@ -175,6 +175,7 @@ const styles = StyleSheet.create({
     shadowRadius: 1.84,
     elevation: 3,
     maxWidth: 760,
+    width: '94%',
   },
   title: {
     fontSize: 24,

package/src/components/OverLay/type.ts

@@ -81,6 +81,8 @@ export interface EnhancedCameraViewProps {
     onVideoRecordingStart?: () => void;
     onVideoRecordingStop?: (result: { success: boolean; path?: string; error?: string }) => void;
     videoDuration?: number;
+    /** Delay in ms before first auto-capture (lets camera focus and user position document). Recommended 2500–3000 for ID/document capture. */
+    captureStabilizationDelayMs?: number;
 }
 
 export interface CheckTemplateTypeResponse {

package/src/components/TemplateKYCExample.tsx

@@ -2,8 +2,11 @@ import React from 'react';
 import { View, SafeAreaView } from 'react-native';
 import { TemplateKYCFlow } from './TemplateKYCFlowRefactored';
 import { KYCTemplate, VerificationState } from '../types/KYC.types';
+import { KycEnvironment, BackendEnvironment } from '../types/env.types';
+
+
+
 
-// Template JSON basé sur votre exemple
 const advancedVerificationTemplate: KYCTemplate = {
   id: 1,
   name: {
@@ -103,7 +106,7 @@ const advancedVerificationTemplate: KYCTemplate = {
         allowed_formats: ["jpg", "png"],
         max_size_mb: 5,
         document_types: ["drivers_licence", "passport", "drivers_licence", "national_id"],
-         
+
       } as const
     },
     {
@@ -130,42 +133,23 @@ const advancedVerificationTemplate: KYCTemplate = {
         orientations: ["center", "left", "right"]
       } as const
     },
-    // {
-    //   id: 4,
-    //   type: "file_upload" as const,
-    //   order: 6,
-    //   labels: {
-    //     en: "Upload proof of address",
-    //     fr: "Téléversez un justificatif de domicile"
-    //   },
-    //   instructions: {
-    //     en: "Upload a recent utility bill or bank statement (PDF, JPG, PNG).",
-    //     fr: "Téléversez une facture récente ou un relevé bancaire (PDF, JPG, PNG)."
-    //   },
-    //   ui: {
-    //     icon: "file-upload-icon.png",
-    //     themeColor: "#2DBD60",
-    //     buttonText: { en: "Upload", fr: "Téléverser" }
-    //   },
-    //   config: {
-    //     allowed_formats: ["pdf", "jpg", "png"],
-    //     max_size_mb: 10,
-    //     required: true
-    //   } as const
-    // },
-
   ]
 };
 
-export const TemplateKYCExample: React.FC<{ 
-  onComplete: (data: VerificationState) => void; 
-  onCancel: () => void; 
-  onError: (error: string) => void; 
-  language: string; 
+export const TemplateKYCExample: React.FC<{
+  onComplete: (data: VerificationState) => void;
+  onCancel: () => void;
+  onError: (error: string) => void;
+  language: string;
   API_KEY?: string;
   templateId?: string;
   template?: KYCTemplate;
-}> = ({ onComplete, onCancel, onError, language, API_KEY, templateId, template }) => {
+  env?: KycEnvironment;           // Flow execution: PRODUCTION (full AI) or SANDBOX (skip AI)
+  serverEnv?: BackendEnvironment; // Backend to call: PRODUCTION or TEST (API URL)
+  existingSessionId?: string;
+  initialComponentIndex?: number;
+  initialCountryResume?: { code: string; documentType: string; region?: string };
+}> = ({ onComplete, onCancel, onError, language, API_KEY, templateId, template, env = 'PRODUCTION', serverEnv, existingSessionId, initialComponentIndex, initialCountryResume }) => {
   const handleComplete = (data: VerificationState) => {
     console.log('KYC Template completed with data:', data);
     onComplete(data);
@@ -182,24 +166,29 @@ export const TemplateKYCExample: React.FC<{
     onError(error);
   };
 
+  // Transform backend template to SDK format
   // Determine which template to use: prefer templateId for dynamic loading, then template prop, then fallback to hardcoded
   const templateToUse = templateId ? undefined : (template || advancedVerificationTemplate);
 
   return (
-    <SafeAreaView style={{ flex: 1 , paddingVertical:25}}>
-    <View style={{ flex: 1 }}>
-      <TemplateKYCFlow
-        template={templateToUse}
-        templateId={templateId}
-        onComplete={handleComplete}
-        onError={handleError}
-        onCancel={handleCancel}
-        language={language} // ou "en" pour l'anglais
-        API_KEY={API_KEY}
-      />
-    </View>
-  </SafeAreaView>
+    <SafeAreaView style={{ flex: 1, paddingVertical: 25 }}>
+      <View style={{ flex: 1 }}>
+        <TemplateKYCFlow
+          template={templateToUse}
+          templateId={templateId}
+          onComplete={handleComplete}
+          onError={handleError}
+          onCancel={handleCancel}
+          language={language} // ou "en" pour l'anglais
+          API_KEY={API_KEY}
+          env={env}
+          serverEnv={serverEnv}
+          existingSessionId={existingSessionId}
+          initialComponentIndex={initialComponentIndex}
+          initialCountryResume={initialCountryResume}
+        />
+      </View>
+    </SafeAreaView>
   );
 };
 
-