@hexar/biometric-identity-sdk-react-native 1.0.14 → 1.0.16

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

@@ -1 +1 @@
-{"version":3,"file":"BiometricIdentityFlow.d.ts","sourceRoot":"","sources":["../../src/components/BiometricIdentityFlow.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EAOL,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,gBAAgB,EAChB,WAAW,EACX,cAAc,EAKd,iBAAiB,EAElB,MAAM,oCAAoC,CAAC;AAU5C,MAAM,WAAW,0BAA0B;IACzC,oBAAoB,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACzD,OAAO,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACzC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,MAAM,CAAC,EAAE;QACP,SAAS,CAAC,EAAE,SAAS,CAAC;QACtB,OAAO,CAAC,EAAE,SAAS,CAAC;KACrB,CAAC;CACH;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAgTtE,CAAC;AAiOF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"BiometricIdentityFlow.d.ts","sourceRoot":"","sources":["../../src/components/BiometricIdentityFlow.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,EAOL,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,gBAAgB,EAChB,WAAW,EACX,cAAc,EAKd,iBAAiB,EAElB,MAAM,oCAAoC,CAAC;AAU5C,MAAM,WAAW,0BAA0B;IACzC,oBAAoB,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACzD,OAAO,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACzC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,MAAM,CAAC,EAAE;QACP,SAAS,CAAC,EAAE,SAAS,CAAC;QACtB,OAAO,CAAC,EAAE,SAAS,CAAC;KACrB,CAAC;CACH;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CA8VtE,CAAC;AAiOF,eAAe,qBAAqB,CAAC"}

package/dist/components/BiometricIdentityFlow.js

@@ -55,6 +55,15 @@ const BiometricIdentityFlow = ({ onValidationComplete, onError, theme, language,
     const [showInstructions, setShowInstructions] = (0, react_1.useState)(true);
     const [currentChallenges, setCurrentChallenges] = (0, react_1.useState)([]);
     const [isLoadingChallenges, setIsLoadingChallenges] = (0, react_1.useState)(false);
+    // Use refs to store callbacks to avoid dependency issues in useEffect
+    const onValidationCompleteRef = (0, react_1.useRef)(onValidationComplete);
+    const onErrorRef = (0, react_1.useRef)(onError);
+    const hasCalledValidationComplete = (0, react_1.useRef)(false);
+    // Update refs when callbacks change
+    (0, react_1.useEffect)(() => {
+        onValidationCompleteRef.current = onValidationComplete;
+        onErrorRef.current = onError;
+    }, [onValidationComplete, onError]);
     // Set language early, before any components render
     // Priority: language prop > SDK config language > default 'en'
     // Run on mount and whenever language prop changes
@@ -69,18 +78,29 @@ const BiometricIdentityFlow = ({ onValidationComplete, onError, theme, language,
     }, [language]);
     const strings = (0, biometric_identity_sdk_core_1.getStrings)();
     const styles = createStyles(theme);
-    // Handle validation result
+    // Handle validation result - call callback when RESULT step is reached
+    (0, react_1.useEffect)(() => {
+        if (state.currentStep === biometric_identity_sdk_core_1.SDKStep.RESULT && state.validationResult && !hasCalledValidationComplete.current) {
+            biometric_identity_sdk_core_1.logger.info('Validation completed, calling onValidationComplete callback');
+            hasCalledValidationComplete.current = true;
+            // Use ref to avoid dependency issues
+            onValidationCompleteRef.current(state.validationResult);
+        }
+    }, [state.currentStep, state.validationResult]);
+    // Reset the flag when validation result changes or component resets
     (0, react_1.useEffect)(() => {
-        if (state.validationResult) {
-            onValidationComplete(state.validationResult);
+        if (state.currentStep !== biometric_identity_sdk_core_1.SDKStep.RESULT) {
+            hasCalledValidationComplete.current = false;
         }
-    }, [state.validationResult, onValidationComplete]);
+    }, [state.currentStep]);
     // Handle error
     (0, react_1.useEffect)(() => {
         if (state.error) {
-            onError(state.error);
+            biometric_identity_sdk_core_1.logger.error('SDK error detected:', state.error);
+            // Use ref to avoid dependency issues
+            onErrorRef.current(state.error);
         }
-    }, [state.error, onError]);
+    }, [state.error]);
     /**
      * Start capture process
      */
@@ -128,22 +148,35 @@ const BiometricIdentityFlow = ({ onValidationComplete, onError, theme, language,
                     sessionId: videoResult.sessionId,
                 });
                 biometric_identity_sdk_core_1.logger.info('Starting validation...');
-                await validateIdentity();
+                const result = await validateIdentity();
+                biometric_identity_sdk_core_1.logger.info('Validation completed successfully:', result);
+                // Ensure state is synced after validation
+                // The state should be updated by validateIdentity, but we'll force a sync
+                const finalState = sdk.getState();
+                biometric_identity_sdk_core_1.logger.info('Final state after validation:', finalState);
+                // Backup: If we have a result but the useEffect didn't fire, call the callback directly
+                if (finalState.currentStep === biometric_identity_sdk_core_1.SDKStep.RESULT && finalState.validationResult && !hasCalledValidationComplete.current) {
+                    biometric_identity_sdk_core_1.logger.info('Backup: Calling onValidationComplete directly after validation');
+                    hasCalledValidationComplete.current = true;
+                    onValidationCompleteRef.current(finalState.validationResult);
+                }
             }
         }
         catch (error) {
-            biometric_identity_sdk_core_1.logger.error('Capture error:', error);
-            onError({
+            biometric_identity_sdk_core_1.logger.error('Capture/validation error:', error);
+            const biometricError = {
                 name: 'BiometricError',
                 message: error instanceof Error ? error.message : 'Unknown error during capture',
                 code: 'LIVENESS_CHECK_FAILED',
-            });
+            };
+            onErrorRef.current(biometricError);
         }
-    }, [cameraMode, uploadFrontID, uploadBackID, storeVideoRecording, validateIdentity, onError]);
+    }, [cameraMode, uploadFrontID, uploadBackID, storeVideoRecording, validateIdentity, sdk]);
     /**
      * Handle retry
      */
     const handleRetry = (0, react_1.useCallback)(() => {
+        hasCalledValidationComplete.current = false;
         reset();
         setCurrentChallenges([]);
         setShowInstructions(true);
@@ -169,14 +202,22 @@ const BiometricIdentityFlow = ({ onValidationComplete, onError, theme, language,
         }
         return (react_1.default.createElement(CameraCapture_1.CameraCapture, { mode: cameraMode, theme: theme, language: language, onCapture: handleCaptureComplete, onCancel: () => setShowCamera(false) }));
     }
+    // Show result (check this first, even if step is still VALIDATING but result exists)
+    // This handles edge cases where state transition might be delayed
+    if (state.validationResult && (state.currentStep === biometric_identity_sdk_core_1.SDKStep.RESULT || state.progress >= 100)) {
+        // If we have a result but step is still VALIDATING, force transition to RESULT
+        if (state.currentStep === biometric_identity_sdk_core_1.SDKStep.VALIDATING && state.progress >= 100) {
+            biometric_identity_sdk_core_1.logger.info('Result available but step still VALIDATING, showing ResultScreen');
+        }
+        return (react_1.default.createElement(ResultScreen_1.ResultScreen, { result: state.validationResult, theme: theme, language: language, onClose: () => {
+                // Callback already called automatically when RESULT step was reached
+                // This onClose is just for UI cleanup/navigation
+            } }));
+    }
     // Show validation progress
     if (state.currentStep === biometric_identity_sdk_core_1.SDKStep.VALIDATING) {
         return (react_1.default.createElement(ValidationProgress_1.ValidationProgress, { progress: state.progress, theme: theme, language: language }));
     }
-    // Show result
-    if (state.currentStep === biometric_identity_sdk_core_1.SDKStep.RESULT && state.validationResult) {
-        return (react_1.default.createElement(ResultScreen_1.ResultScreen, { result: state.validationResult, theme: theme, language: language, onClose: () => onValidationComplete(state.validationResult) }));
-    }
     // Show error
     if (state.currentStep === biometric_identity_sdk_core_1.SDKStep.ERROR && state.error) {
         return (react_1.default.createElement(ErrorScreen_1.ErrorScreen, { error: state.error, theme: theme, language: language, onRetry: handleRetry, onClose: () => onError(state.error) }));

package/dist/components/VideoRecorder.js

@@ -84,7 +84,7 @@ const getInstructionMap = (strings) => ({
     smile: { text: strings.liveness.instructions.smile || 'Smile 😊', icon: '😊' },
     blink: { text: strings.liveness.instructions.blink || 'Blink your eyes naturally', icon: '👁' },
     open_mouth: { text: strings.liveness.instructions.openMouth || 'Open your mouth slightly', icon: '😮' },
-    stay_still: { text: strings.liveness.instructions.stayStill || 'Look at the camera and stay still', icon: '📷' },
+    stay_still: { text: strings.liveness.instructions.stayStill || 'Look at the camera and follow the instructions', icon: '📷' },
 });
 const VideoRecorder = ({ theme, language, duration, instructions, challenges: propChallenges, sessionId, smartMode = true, onComplete, onCancel, onFetchChallenges, }) => {
     if (language) {

package/dist/hooks/useBiometricSDK.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBiometricSDK.d.ts","sourceRoot":"","sources":["../../src/hooks/useBiometricSDK.ts"],"names":[],"mappings":"AACA,OAAO,EACL,oBAAoB,EACpB,QAAQ,EACR,WAAW,EAEZ,MAAM,oCAAoC,CAAC;AAE5C,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,qBAAqB;IACpC,GAAG,EAAE,oBAAoB,CAAC;IAC1B,KAAK,EAAE,QAAQ,CAAC;IAChB,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,OAAO,CAAC;IACxB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAClE,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACjE,mBAAmB,EAAE,CAAC,SAAS,EAAE,WAAW,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/D,eAAe,EAAE,CAAC,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,KAAK,OAAO,CAAC,eAAe,EAAE,CAAC,CAAC;IAC7E,gBAAgB,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC;IACrC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,WAAW,EAAE,CAAC,SAAS,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACzD;AAED,eAAO,MAAM,eAAe,QAAO,qBAuNlC,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"useBiometricSDK.d.ts","sourceRoot":"","sources":["../../src/hooks/useBiometricSDK.ts"],"names":[],"mappings":"AACA,OAAO,EACL,oBAAoB,EACpB,QAAQ,EACR,WAAW,EAGZ,MAAM,oCAAoC,CAAC;AAE5C,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,qBAAqB;IACpC,GAAG,EAAE,oBAAoB,CAAC;IAC1B,KAAK,EAAE,QAAQ,CAAC;IAChB,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,OAAO,CAAC;IACxB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAClE,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACjE,mBAAmB,EAAE,CAAC,SAAS,EAAE,WAAW,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/D,eAAe,EAAE,CAAC,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,KAAK,OAAO,CAAC,eAAe,EAAE,CAAC,CAAC;IAC7E,gBAAgB,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC;IACrC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,WAAW,EAAE,CAAC,SAAS,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACzD;AAED,eAAO,MAAM,eAAe,QAAO,qBAgQlC,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/hooks/useBiometricSDK.js

@@ -137,24 +137,61 @@ const useBiometricSDK = () => {
      * Validate identity with all collected data
      */
     const validateIdentity = (0, react_1.useCallback)(async () => {
+        biometric_identity_sdk_core_1.logger.info('validateIdentity called, current state:', sdk.getState());
         setState(sdk.getState());
         const pollInterval = setInterval(() => {
             if (isMounted.current) {
-                setState(sdk.getState());
+                const currentState = sdk.getState();
+                setState(currentState);
             }
         }, 200);
         try {
             const result = await sdk.validateIdentity();
-            clearInterval(pollInterval);
+            // Keep polling for a bit to ensure we capture the RESULT state transition
+            // The SDK updates state synchronously, but we want to make sure React sees it
+            let pollCount = 0;
+            const maxPolls = 10; // Poll for up to 2 seconds (10 * 200ms)
+            const finalPollInterval = setInterval(() => {
+                pollCount++;
+                if (isMounted.current) {
+                    const currentState = sdk.getState();
+                    biometric_identity_sdk_core_1.logger.info(`Polling state (${pollCount}/${maxPolls}):`, currentState);
+                    setState(currentState);
+                    // Stop polling once we reach RESULT or ERROR state
+                    if (currentState.currentStep === biometric_identity_sdk_core_1.SDKStep.RESULT || currentState.currentStep === biometric_identity_sdk_core_1.SDKStep.ERROR) {
+                        clearInterval(finalPollInterval);
+                        clearInterval(pollInterval);
+                        biometric_identity_sdk_core_1.logger.info('Reached final state, stopped polling:', currentState);
+                    }
+                    else if (pollCount >= maxPolls) {
+                        // Force stop after max polls
+                        clearInterval(finalPollInterval);
+                        clearInterval(pollInterval);
+                        const finalState = sdk.getState();
+                        biometric_identity_sdk_core_1.logger.warn('Max polls reached, forcing final state:', finalState);
+                        setState(finalState);
+                    }
+                }
+            }, 200);
+            // Also get immediate state after promise resolves
             if (isMounted.current) {
-                setState(sdk.getState());
+                const immediateState = sdk.getState();
+                biometric_identity_sdk_core_1.logger.info('Validation result received, immediate state:', immediateState);
+                setState(immediateState);
+                // If we're already at RESULT, clear intervals immediately
+                if (immediateState.currentStep === biometric_identity_sdk_core_1.SDKStep.RESULT || immediateState.currentStep === biometric_identity_sdk_core_1.SDKStep.ERROR) {
+                    clearInterval(finalPollInterval);
+                    clearInterval(pollInterval);
+                }
             }
             return result;
         }
         catch (error) {
             clearInterval(pollInterval);
             if (isMounted.current) {
-                setState(sdk.getState());
+                const errorState = sdk.getState();
+                biometric_identity_sdk_core_1.logger.error('Validation error, state:', errorState, error);
+                setState(errorState);
             }
             throw error;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hexar/biometric-identity-sdk-react-native",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "description": "React Native wrapper for Biometric Identity SDK",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/BiometricIdentityFlow.tsx

@@ -3,7 +3,7 @@
  * Main UI component for identity verification with backend AI support
  */
 
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import {
   View,
   Text,
@@ -76,6 +76,17 @@ export const BiometricIdentityFlow: React.FC<BiometricIdentityFlowProps> = ({
   const [showInstructions, setShowInstructions] = useState(true);
   const [currentChallenges, setCurrentChallenges] = useState<ChallengeAction[]>([]);
   const [isLoadingChallenges, setIsLoadingChallenges] = useState(false);
+  
+  // Use refs to store callbacks to avoid dependency issues in useEffect
+  const onValidationCompleteRef = useRef(onValidationComplete);
+  const onErrorRef = useRef(onError);
+  const hasCalledValidationComplete = useRef(false);
+
+  // Update refs when callbacks change
+  useEffect(() => {
+    onValidationCompleteRef.current = onValidationComplete;
+    onErrorRef.current = onError;
+  }, [onValidationComplete, onError]);
 
   // Set language early, before any components render
   // Priority: language prop > SDK config language > default 'en'
@@ -93,19 +104,31 @@ export const BiometricIdentityFlow: React.FC<BiometricIdentityFlowProps> = ({
   const strings = getStrings();
   const styles = createStyles(theme);
 
-  // Handle validation result
+  // Handle validation result - call callback when RESULT step is reached
   useEffect(() => {
-    if (state.validationResult) {
-      onValidationComplete(state.validationResult);
+    if (state.currentStep === SDKStep.RESULT && state.validationResult && !hasCalledValidationComplete.current) {
+      logger.info('Validation completed, calling onValidationComplete callback');
+      hasCalledValidationComplete.current = true;
+      // Use ref to avoid dependency issues
+      onValidationCompleteRef.current(state.validationResult);
     }
-  }, [state.validationResult, onValidationComplete]);
+  }, [state.currentStep, state.validationResult]);
+  
+  // Reset the flag when validation result changes or component resets
+  useEffect(() => {
+    if (state.currentStep !== SDKStep.RESULT) {
+      hasCalledValidationComplete.current = false;
+    }
+  }, [state.currentStep]);
 
   // Handle error
   useEffect(() => {
     if (state.error) {
-      onError(state.error);
+      logger.error('SDK error detected:', state.error);
+      // Use ref to avoid dependency issues
+      onErrorRef.current(state.error);
     }
-  }, [state.error, onError]);
+  }, [state.error]);
 
   /**
    * Start capture process
@@ -156,22 +179,37 @@ export const BiometricIdentityFlow: React.FC<BiometricIdentityFlowProps> = ({
         });
         
         logger.info('Starting validation...');
-        await validateIdentity();
+        const result = await validateIdentity();
+        logger.info('Validation completed successfully:', result);
+        
+        // Ensure state is synced after validation
+        // The state should be updated by validateIdentity, but we'll force a sync
+        const finalState = sdk.getState();
+        logger.info('Final state after validation:', finalState);
+        
+        // Backup: If we have a result but the useEffect didn't fire, call the callback directly
+        if (finalState.currentStep === SDKStep.RESULT && finalState.validationResult && !hasCalledValidationComplete.current) {
+          logger.info('Backup: Calling onValidationComplete directly after validation');
+          hasCalledValidationComplete.current = true;
+          onValidationCompleteRef.current(finalState.validationResult);
+        }
       }
     } catch (error) {
-      logger.error('Capture error:', error);
-      onError({
+      logger.error('Capture/validation error:', error);
+      const biometricError: BiometricError = {
         name: 'BiometricError',
         message: error instanceof Error ? error.message : 'Unknown error during capture',
         code: 'LIVENESS_CHECK_FAILED',
-      } as BiometricError);
+      } as BiometricError;
+      onErrorRef.current(biometricError);
     }
-  }, [cameraMode, uploadFrontID, uploadBackID, storeVideoRecording, validateIdentity, onError]);
+  }, [cameraMode, uploadFrontID, uploadBackID, storeVideoRecording, validateIdentity, sdk]);
 
   /**
    * Handle retry
    */
   const handleRetry = useCallback(() => {
+    hasCalledValidationComplete.current = false;
     reset();
     setCurrentChallenges([]);
     setShowInstructions(true);
@@ -233,25 +271,33 @@ export const BiometricIdentityFlow: React.FC<BiometricIdentityFlowProps> = ({
     );
   }
 
-  // Show validation progress
-  if (state.currentStep === SDKStep.VALIDATING) {
+  // Show result (check this first, even if step is still VALIDATING but result exists)
+  // This handles edge cases where state transition might be delayed
+  if (state.validationResult && (state.currentStep === SDKStep.RESULT || state.progress >= 100)) {
+    // If we have a result but step is still VALIDATING, force transition to RESULT
+    if (state.currentStep === SDKStep.VALIDATING && state.progress >= 100) {
+      logger.info('Result available but step still VALIDATING, showing ResultScreen');
+    }
     return (
-      <ValidationProgress
-        progress={state.progress}
+      <ResultScreen
+        result={state.validationResult}
         theme={theme}
         language={language}
+        onClose={() => {
+          // Callback already called automatically when RESULT step was reached
+          // This onClose is just for UI cleanup/navigation
+        }}
       />
     );
   }
 
-  // Show result
-  if (state.currentStep === SDKStep.RESULT && state.validationResult) {
+  // Show validation progress
+  if (state.currentStep === SDKStep.VALIDATING) {
     return (
-      <ResultScreen
-        result={state.validationResult}
+      <ValidationProgress
+        progress={state.progress}
         theme={theme}
         language={language}
-        onClose={() => onValidationComplete(state.validationResult!)}
       />
     );
   }

package/src/components/VideoRecorder.tsx

@@ -99,7 +99,7 @@ const getInstructionMap = (strings: any): Record<string, { text: string; icon: s
   smile: { text: strings.liveness.instructions.smile || 'Smile 😊', icon: '😊' },
   blink: { text: strings.liveness.instructions.blink || 'Blink your eyes naturally', icon: '👁' },
   open_mouth: { text: strings.liveness.instructions.openMouth || 'Open your mouth slightly', icon: '😮' },
-  stay_still: { text: strings.liveness.instructions.stayStill || 'Look at the camera and stay still', icon: '📷' },
+  stay_still: { text: strings.liveness.instructions.stayStill || 'Look at the camera and follow the instructions', icon: '📷' },
 });
 
 export const VideoRecorder: React.FC<VideoRecorderProps> = ({

package/src/hooks/useBiometricSDK.ts

@@ -3,6 +3,7 @@ import {
   BiometricIdentitySDK,
   SDKState,
   VideoResult,
+  SDKStep,
   logger,
 } from '@hexar/biometric-identity-sdk-core';
 
@@ -193,26 +194,67 @@ export const useBiometricSDK = (): UseBiometricSDKResult => {
    * Validate identity with all collected data
    */
   const validateIdentity = useCallback(async () => {
+    logger.info('validateIdentity called, current state:', sdk.getState());
     setState(sdk.getState());
     
     const pollInterval = setInterval(() => {
       if (isMounted.current) {
-        setState(sdk.getState());
+        const currentState = sdk.getState();
+        setState(currentState);
       }
     }, 200);
     
     try {
       const result = await sdk.validateIdentity();
-      clearInterval(pollInterval);
       
+      // Keep polling for a bit to ensure we capture the RESULT state transition
+      // The SDK updates state synchronously, but we want to make sure React sees it
+      let pollCount = 0;
+      const maxPolls = 10; // Poll for up to 2 seconds (10 * 200ms)
+      
+      const finalPollInterval = setInterval(() => {
+        pollCount++;
+        if (isMounted.current) {
+          const currentState = sdk.getState();
+          logger.info(`Polling state (${pollCount}/${maxPolls}):`, currentState);
+          setState(currentState);
+          
+          // Stop polling once we reach RESULT or ERROR state
+          if (currentState.currentStep === SDKStep.RESULT || currentState.currentStep === SDKStep.ERROR) {
+            clearInterval(finalPollInterval);
+            clearInterval(pollInterval);
+            logger.info('Reached final state, stopped polling:', currentState);
+          } else if (pollCount >= maxPolls) {
+            // Force stop after max polls
+            clearInterval(finalPollInterval);
+            clearInterval(pollInterval);
+            const finalState = sdk.getState();
+            logger.warn('Max polls reached, forcing final state:', finalState);
+            setState(finalState);
+          }
+        }
+      }, 200);
+      
+      // Also get immediate state after promise resolves
       if (isMounted.current) {
-        setState(sdk.getState());
+        const immediateState = sdk.getState();
+        logger.info('Validation result received, immediate state:', immediateState);
+        setState(immediateState);
+        
+        // If we're already at RESULT, clear intervals immediately
+        if (immediateState.currentStep === SDKStep.RESULT || immediateState.currentStep === SDKStep.ERROR) {
+          clearInterval(finalPollInterval);
+          clearInterval(pollInterval);
+        }
       }
+      
       return result;
     } catch (error) {
       clearInterval(pollInterval);
       if (isMounted.current) {
-        setState(sdk.getState());
+        const errorState = sdk.getState();
+        logger.error('Validation error, state:', errorState, error);
+        setState(errorState);
       }
       throw error;
     }