@hexar/biometric-identity-sdk-react-native 1.0.30 → 1.0.32

package/dist/components/CameraCapture.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CameraCapture.d.ts","sourceRoot":"","sources":["../../src/components/CameraCapture.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAsC,MAAM,OAAO,CAAC;AAY3D,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAmC,MAAM,oCAAoC,CAAC;AAIrH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6NtD,CAAC;AA0JF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"CameraCapture.d.ts","sourceRoot":"","sources":["../../src/components/CameraCapture.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAsC,MAAM,OAAO,CAAC;AAY3D,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAmC,MAAM,oCAAoC,CAAC;AAIrH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgQtD,CAAC;AA0JF,eAAe,aAAa,CAAC"}

package/dist/components/CameraCapture.js

@@ -98,43 +98,74 @@ const CameraCapture = ({ mode, theme, language, onCapture, onCancel, }) => {
             const photo = await cameraRef.current.takePhoto({
                 flash: 'off',
             });
-            // Convert photo file to base64
-            // Try to use react-native-fs if available, otherwise use file path
+            // Compress and convert photo file to base64
             try {
-                // Try dynamic import of react-native-fs
-                const RNFS = require('react-native-fs');
-                const base64 = await RNFS.readFile(photo.path, 'base64');
-                onCapture(base64);
-            }
-            catch (fsError) {
-                // If react-native-fs is not available, try alternative method
+                // Try to use react-native-image-resizer for compression
+                let ImageResizer = null;
+                try {
+                    ImageResizer = require('react-native-image-resizer').default;
+                }
+                catch (e) {
+                    biometric_identity_sdk_core_1.logger.warn('react-native-image-resizer not available, using direct conversion');
+                }
+                let processedPath = photo.path;
+                // Compress image if ImageResizer is available
+                if (ImageResizer) {
+                    try {
+                        const resizedImage = await ImageResizer.createResizedImage(photo.path, 1600, // maxWidth
+                        1600, // maxHeight
+                        'JPEG', 75, // quality (0-100)
+                        0, // rotation
+                        undefined, // outputPath
+                        false, // keepMeta
+                        { mode: 'contain', onlyScaleDown: true });
+                        processedPath = resizedImage.uri;
+                        biometric_identity_sdk_core_1.logger.info('Image compressed:', { original: photo.path, compressed: processedPath });
+                    }
+                    catch (resizeError) {
+                        biometric_identity_sdk_core_1.logger.warn('Image compression failed, using original:', resizeError);
+                    }
+                }
+                // Convert to base64
                 try {
-                    // Use fetch with file:// protocol (works on some platforms)
-                    const fileUri = react_native_1.Platform.OS === 'android' ? `file://${photo.path}` : photo.path;
-                    const response = await fetch(fileUri);
-                    const blob = await response.blob();
-                    // Convert blob to base64 using a workaround
-                    const reader = new FileReader();
-                    reader.onloadend = () => {
-                        const base64data = reader.result;
-                        const base64 = base64data.includes(',')
-                            ? base64data.split(',')[1]
-                            : base64data;
-                        onCapture(base64);
-                        setIsCapturing(false);
-                    };
-                    reader.onerror = () => {
-                        throw new Error('Failed to read photo file');
-                    };
-                    reader.readAsDataURL(blob);
-                    return; // Don't set isCapturing to false here, wait for reader
+                    const RNFS = require('react-native-fs');
+                    const base64 = await RNFS.readFile(processedPath.replace('file://', ''), 'base64');
+                    const sizeKB = Math.round(base64.length / 1024);
+                    biometric_identity_sdk_core_1.logger.info('Image converted to base64:', { sizeKB, path: processedPath });
+                    onCapture(base64);
                 }
-                catch (fetchError) {
-                    // Final fallback: pass file path (SDK should handle file paths)
-                    biometric_identity_sdk_core_1.logger.warn('Could not convert to base64, using file path:', photo.path);
-                    onCapture(photo.path);
+                catch (fsError) {
+                    // Fallback: try fetch method
+                    try {
+                        const fileUri = react_native_1.Platform.OS === 'android' ? `file://${processedPath}` : processedPath;
+                        const response = await fetch(fileUri);
+                        const blob = await response.blob();
+                        const reader = new FileReader();
+                        reader.onloadend = () => {
+                            const base64data = reader.result;
+                            const base64 = base64data.includes(',')
+                                ? base64data.split(',')[1]
+                                : base64data;
+                            onCapture(base64);
+                            setIsCapturing(false);
+                        };
+                        reader.onerror = () => {
+                            throw new Error('Failed to read photo file');
+                        };
+                        reader.readAsDataURL(blob);
+                        return;
+                    }
+                    catch (fetchError) {
+                        biometric_identity_sdk_core_1.logger.warn('Could not convert to base64, using file path:', processedPath);
+                        onCapture(processedPath);
+                    }
                 }
             }
+            catch (error) {
+                biometric_identity_sdk_core_1.logger.error('Error processing image:', error);
+                // Final fallback: pass file path
+                onCapture(photo.path);
+            }
             setIsCapturing(false);
         }
         catch (error) {

package/dist/components/ValidationProgress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ValidationProgress.d.ts","sourceRoot":"","sources":["../../src/components/ValidationProgress.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAoB,MAAM,OAAO,CAAC;AAOzC,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAA2B,MAAM,oCAAoC,CAAC;AAE7G,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAwFhE,CAAC;AAqHF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"ValidationProgress.d.ts","sourceRoot":"","sources":["../../src/components/ValidationProgress.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAoB,MAAM,OAAO,CAAC;AAOzC,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAA2B,MAAM,oCAAoC,CAAC;AAE7G,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAmChE,CAAC;AAgCF,eAAe,kBAAkB,CAAC"}

package/dist/components/ValidationProgress.js

@@ -48,77 +48,14 @@ const ValidationProgress = ({ progress, theme, language = 'en', }) => {
         }
     }, [language]);
     const strings = (0, biometric_identity_sdk_core_1.getStrings)();
-    const getStatusText = () => {
-        if (progress < 80)
-            return strings.validation.checkingDocument || 'Extracting document data...';
-        if (progress < 85)
-            return strings.validation.checkingLiveness || 'Validating liveness...';
-        if (progress < 95)
-            return strings.validation.matchingFaces || 'Comparing faces...';
-        return strings.validation.almostDone || 'Validating document authenticity...';
-    };
     return (react_1.default.createElement(react_native_1.View, { style: styles.container },
         react_1.default.createElement(react_native_1.View, { style: styles.content },
             react_1.default.createElement(react_native_1.ActivityIndicator, { size: "large", color: theme?.primaryColor || '#6366F1' }),
             react_1.default.createElement(react_native_1.Text, { style: [styles.title, { color: theme?.textColor || '#000000' }] }, strings.validation.title || 'Validating Identity'),
-            react_1.default.createElement(react_native_1.Text, { style: [styles.statusText, { color: theme?.secondaryTextColor || '#6B7280' }] }, getStatusText()),
-            react_1.default.createElement(react_native_1.View, { style: styles.progressBarContainer },
-                react_1.default.createElement(react_native_1.View, { style: styles.progressBar },
-                    react_1.default.createElement(react_native_1.View, { style: [
-                            styles.progressFill,
-                            {
-                                width: `${progress}%`,
-                                backgroundColor: theme?.primaryColor || '#6366F1',
-                            },
-                        ] })),
-                react_1.default.createElement(react_native_1.Text, { style: [styles.progressText, { color: theme?.textColor || '#000000' }] },
-                    Math.round(progress),
-                    "%")),
-            react_1.default.createElement(react_native_1.View, { style: styles.stepsContainer },
-                react_1.default.createElement(ValidationStep, { icon: "\u2713", text: strings.validation.checkingDocument || 'OCR Extraction', completed: progress >= 80, theme: theme }),
-                react_1.default.createElement(ValidationStep, { icon: "\u2713", text: strings.validation.checkingLiveness || 'Liveness Detection', completed: progress >= 85, theme: theme }),
-                react_1.default.createElement(ValidationStep, { icon: "\u2713", text: strings.validation.matchingFaces || 'Face Matching', completed: progress >= 95, theme: theme }),
-                react_1.default.createElement(ValidationStep, { icon: "\u2713", text: strings.validation.checkingDocument || 'Document Validation', completed: progress >= 100, theme: theme })),
-            react_1.default.createElement(react_native_1.Text, { style: styles.bottomText }, strings.validation.almostDone || 'This may take a few seconds...'))));
+            react_1.default.createElement(react_native_1.Text, { style: [styles.statusText, { color: theme?.secondaryTextColor || '#6B7280' }] }, strings.validation.validatingDocumentAndFace || 'Validando documento y rostro...'),
+            react_1.default.createElement(react_native_1.Text, { style: styles.bottomText }, strings.validation.almostDone || 'Esto puede tardar unos segundos...'))));
 };
 exports.ValidationProgress = ValidationProgress;
-const ValidationStep = ({ icon, text, completed, theme, }) => (react_1.default.createElement(react_native_1.View, { style: stepStyles.container },
-    react_1.default.createElement(react_native_1.View, { style: [
-            stepStyles.iconContainer,
-            completed && {
-                backgroundColor: theme?.successColor || '#10B981',
-            },
-        ] }, completed && react_1.default.createElement(react_native_1.Text, { style: stepStyles.icon }, icon)),
-    react_1.default.createElement(react_native_1.Text, { style: [stepStyles.text, completed && stepStyles.textCompleted] }, text)));
-const stepStyles = react_native_1.StyleSheet.create({
-    container: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        marginVertical: 8,
-    },
-    iconContainer: {
-        width: 24,
-        height: 24,
-        borderRadius: 12,
-        backgroundColor: '#E5E7EB',
-        justifyContent: 'center',
-        alignItems: 'center',
-        marginRight: 12,
-    },
-    icon: {
-        color: '#FFFFFF',
-        fontSize: 14,
-        fontWeight: 'bold',
-    },
-    text: {
-        fontSize: 14,
-        color: '#9CA3AF',
-    },
-    textCompleted: {
-        color: '#111827',
-        fontWeight: '500',
-    },
-});
 const styles = react_native_1.StyleSheet.create({
     container: {
         flex: 1,
@@ -141,36 +78,11 @@ const styles = react_native_1.StyleSheet.create({
         marginBottom: 32,
         textAlign: 'center',
     },
-    progressBarContainer: {
-        width: '100%',
-        marginBottom: 32,
-    },
-    progressBar: {
-        width: '100%',
-        height: 8,
-        backgroundColor: '#E5E7EB',
-        borderRadius: 4,
-        overflow: 'hidden',
-        marginBottom: 8,
-    },
-    progressFill: {
-        height: '100%',
-        borderRadius: 4,
-    },
-    progressText: {
-        fontSize: 14,
-        fontWeight: '600',
-        textAlign: 'center',
-    },
-    stepsContainer: {
-        width: '100%',
-        marginTop: 24,
-        marginBottom: 32,
-    },
     bottomText: {
         fontSize: 14,
         color: '#9CA3AF',
         textAlign: 'center',
+        marginTop: 16,
     },
 });
 exports.default = exports.ValidationProgress;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hexar/biometric-identity-sdk-react-native",
-  "version": "1.0.30",
+  "version": "1.0.32",
   "description": "React Native wrapper for Biometric Identity SDK",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,7 +11,7 @@
     "clean": "rm -rf dist"
   },
   "peerDependencies": {
-    "@hexar/biometric-identity-sdk-core": ">=1.0.19",
+    "@hexar/biometric-identity-sdk-core": ">=1.0.21",
     "react": ">=18.0.0",
     "react-native": ">=0.70.0",
     "react-native-permissions": ">=4.0.0",

package/src/components/CameraCapture.tsx

@@ -97,41 +97,76 @@ export const CameraCapture: React.FC<CameraCaptureProps> = ({
         flash: 'off',
       });
 
-      // Convert photo file to base64
-      // Try to use react-native-fs if available, otherwise use file path
+      // Compress and convert photo file to base64
       try {
-        // Try dynamic import of react-native-fs
-        const RNFS = require('react-native-fs');
-        const base64 = await RNFS.readFile(photo.path, 'base64');
-        onCapture(base64);
-      } catch (fsError) {
-        // If react-native-fs is not available, try alternative method
+        // Try to use react-native-image-resizer for compression
+        let ImageResizer: any = null;
         try {
-          // Use fetch with file:// protocol (works on some platforms)
-          const fileUri = Platform.OS === 'android' ? `file://${photo.path}` : photo.path;
-          const response = await fetch(fileUri);
-          const blob = await response.blob();
-          
-          // Convert blob to base64 using a workaround
-          const reader = new FileReader();
-          reader.onloadend = () => {
-            const base64data = reader.result as string;
-            const base64 = base64data.includes(',') 
-              ? base64data.split(',')[1] 
-              : base64data;
-            onCapture(base64);
-            setIsCapturing(false);
-          };
-          reader.onerror = () => {
-            throw new Error('Failed to read photo file');
-          };
-          reader.readAsDataURL(blob);
-          return; // Don't set isCapturing to false here, wait for reader
-        } catch (fetchError) {
-          // Final fallback: pass file path (SDK should handle file paths)
-          logger.warn('Could not convert to base64, using file path:', photo.path);
-          onCapture(photo.path);
+          ImageResizer = require('react-native-image-resizer').default;
+        } catch (e) {
+          logger.warn('react-native-image-resizer not available, using direct conversion');
         }
+        
+        let processedPath = photo.path;
+        
+        // Compress image if ImageResizer is available
+        if (ImageResizer) {
+          try {
+            const resizedImage = await ImageResizer.createResizedImage(
+              photo.path,
+              1600,  // maxWidth
+              1600,  // maxHeight
+              'JPEG',
+              75,    // quality (0-100)
+              0,     // rotation
+              undefined, // outputPath
+              false,  // keepMeta
+              { mode: 'contain', onlyScaleDown: true }
+            );
+            processedPath = resizedImage.uri;
+            logger.info('Image compressed:', { original: photo.path, compressed: processedPath });
+          } catch (resizeError) {
+            logger.warn('Image compression failed, using original:', resizeError);
+          }
+        }
+        
+        // Convert to base64
+        try {
+          const RNFS = require('react-native-fs');
+          const base64 = await RNFS.readFile(processedPath.replace('file://', ''), 'base64');
+          const sizeKB = Math.round(base64.length / 1024);
+          logger.info('Image converted to base64:', { sizeKB, path: processedPath });
+          onCapture(base64);
+        } catch (fsError) {
+          // Fallback: try fetch method
+          try {
+            const fileUri = Platform.OS === 'android' ? `file://${processedPath}` : processedPath;
+            const response = await fetch(fileUri);
+            const blob = await response.blob();
+            
+            const reader = new FileReader();
+            reader.onloadend = () => {
+              const base64data = reader.result as string;
+              const base64 = base64data.includes(',') 
+                ? base64data.split(',')[1] 
+                : base64data;
+              onCapture(base64);
+              setIsCapturing(false);
+            };
+            reader.onerror = () => {
+              throw new Error('Failed to read photo file');
+            };
+            reader.readAsDataURL(blob);
+            return;
+          } catch (fetchError) {
+            logger.warn('Could not convert to base64, using file path:', processedPath);
+            onCapture(processedPath);
+          }
+        }
+      } catch (error) {
+        logger.error('Error processing image:', error);
+        // Final fallback: pass file path
+        onCapture(photo.path);
       }
       
       setIsCapturing(false);

package/src/components/ValidationProgress.tsx

@@ -31,13 +31,6 @@ export const ValidationProgress: React.FC<ValidationProgressProps> = ({
 
   const strings = getStrings();
 
-  const getStatusText = () => {
-    if (progress < 80) return strings.validation.checkingDocument || 'Extracting document data...';
-    if (progress < 85) return strings.validation.checkingLiveness || 'Validating liveness...';
-    if (progress < 95) return strings.validation.matchingFaces || 'Comparing faces...';
-    return strings.validation.almostDone || 'Validating document authenticity...';
-  };
-
   return (
     <View style={styles.container}>
       <View style={styles.content}>
@@ -51,123 +44,17 @@ export const ValidationProgress: React.FC<ValidationProgressProps> = ({
         </Text>
 
         <Text style={[styles.statusText, { color: theme?.secondaryTextColor || '#6B7280' }]}>
-          {getStatusText()}
+          {strings.validation.validatingDocumentAndFace || 'Validando documento y rostro...'}
         </Text>
 
-        {/* Progress Bar */}
-        <View style={styles.progressBarContainer}>
-          <View style={styles.progressBar}>
-            <View
-              style={[
-                styles.progressFill,
-                {
-                  width: `${progress}%`,
-                  backgroundColor: theme?.primaryColor || '#6366F1',
-                },
-              ]}
-            />
-          </View>
-          <Text style={[styles.progressText, { color: theme?.textColor || '#000000' }]}>
-            {Math.round(progress)}%
-          </Text>
-        </View>
-
-        {/* Validation Steps */}
-        <View style={styles.stepsContainer}>
-          <ValidationStep
-            icon="✓"
-            text={strings.validation.checkingDocument || 'OCR Extraction'}
-            completed={progress >= 80}
-            theme={theme}
-          />
-          <ValidationStep
-            icon="✓"
-            text={strings.validation.checkingLiveness || 'Liveness Detection'}
-            completed={progress >= 85}
-            theme={theme}
-          />
-          <ValidationStep
-            icon="✓"
-            text={strings.validation.matchingFaces || 'Face Matching'}
-            completed={progress >= 95}
-            theme={theme}
-          />
-          <ValidationStep
-            icon="✓"
-            text={strings.validation.checkingDocument || 'Document Validation'}
-            completed={progress >= 100}
-            theme={theme}
-          />
-        </View>
-
         <Text style={styles.bottomText}>
-          {strings.validation.almostDone || 'This may take a few seconds...'}
+          {strings.validation.almostDone || 'Esto puede tardar unos segundos...'}
         </Text>
       </View>
     </View>
   );
 };
 
-interface ValidationStepProps {
-  icon: string;
-  text: string;
-  completed: boolean;
-  theme?: ThemeConfig;
-}
-
-const ValidationStep: React.FC<ValidationStepProps> = ({
-  icon,
-  text,
-  completed,
-  theme,
-}) => (
-  <View style={stepStyles.container}>
-    <View
-      style={[
-        stepStyles.iconContainer,
-        completed && {
-          backgroundColor: theme?.successColor || '#10B981',
-        },
-      ]}
-    >
-      {completed && <Text style={stepStyles.icon}>{icon}</Text>}
-    </View>
-    <Text style={[stepStyles.text, completed && stepStyles.textCompleted]}>
-      {text}
-    </Text>
-  </View>
-);
-
-const stepStyles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginVertical: 8,
-  },
-  iconContainer: {
-    width: 24,
-    height: 24,
-    borderRadius: 12,
-    backgroundColor: '#E5E7EB',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: 12,
-  },
-  icon: {
-    color: '#FFFFFF',
-    fontSize: 14,
-    fontWeight: 'bold',
-  },
-  text: {
-    fontSize: 14,
-    color: '#9CA3AF',
-  },
-  textCompleted: {
-    color: '#111827',
-    fontWeight: '500',
-  },
-});
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -190,36 +77,11 @@ const styles = StyleSheet.create({
     marginBottom: 32,
     textAlign: 'center',
   },
-  progressBarContainer: {
-    width: '100%',
-    marginBottom: 32,
-  },
-  progressBar: {
-    width: '100%',
-    height: 8,
-    backgroundColor: '#E5E7EB',
-    borderRadius: 4,
-    overflow: 'hidden',
-    marginBottom: 8,
-  },
-  progressFill: {
-    height: '100%',
-    borderRadius: 4,
-  },
-  progressText: {
-    fontSize: 14,
-    fontWeight: '600',
-    textAlign: 'center',
-  },
-  stepsContainer: {
-    width: '100%',
-    marginTop: 24,
-    marginBottom: 32,
-  },
   bottomText: {
     fontSize: 14,
     color: '#9CA3AF',
     textAlign: 'center',
+    marginTop: 16,
   },
 });