@getyoti/react-native-yoti-face-capture 3.0.0 → 4.0.0

package/lib/typescript/RNYotiCaptureTypes.d.ts

@@ -8,7 +8,7 @@ export declare enum IMAGE_QUALITY {
     IMAGE_QUALITY_MEDIUM = 1,
     IMAGE_QUALITY_LOW = 2
 }
-export declare type FaceCaptureResult = {
+export type FaceCaptureResult = {
     croppedImage: string;
     croppedFaceBoundingBox: {
         x: number;
@@ -24,14 +24,14 @@ export declare type FaceCaptureResult = {
     };
     originalImage: string;
 };
-export declare type ANALYSIS_FAILURE_CAUSE = 'FaceCaptureAnalysisErrorFaceTooBig' | 'FaceCaptureAnalysisErrorEyesNotOpen' | 'FaceCaptureAnalysisErrorFaceTooSmall' | 'FaceCaptureAnalysisErrorFaceNotStable' | 'FaceCaptureAnalysisErrorNoFaceDetected' | 'FaceCaptureAnalysisErrorFaceNotCentered' | 'FaceCaptureAnalysisErrorFaceNotStraight' | 'FaceCaptureAnalysisErrorEnvironmentTooDark' | 'FaceCaptureAnalysisErrorFaceAnalysisFailed' | 'FaceCaptureAnalysisErrorMultipleFaces';
-export declare type FaceCaptureAnalysisFailure = {
+export type ANALYSIS_FAILURE_CAUSE = 'FaceCaptureAnalysisErrorFaceTooBig' | 'FaceCaptureAnalysisErrorEyesNotOpen' | 'FaceCaptureAnalysisErrorFaceTooSmall' | 'FaceCaptureAnalysisErrorFaceNotStable' | 'FaceCaptureAnalysisErrorNoFaceDetected' | 'FaceCaptureAnalysisErrorFaceNotCentered' | 'FaceCaptureAnalysisErrorFaceNotStraight' | 'FaceCaptureAnalysisErrorEnvironmentTooDark' | 'FaceCaptureAnalysisErrorFaceAnalysisFailed' | 'FaceCaptureAnalysisErrorMultipleFaces';
+export type FaceCaptureAnalysisFailure = {
     cause: ANALYSIS_FAILURE_CAUSE;
     originalImage: string;
 };
-export declare type FaceCaptureSuccessState = 'FaceCaptureStateAnalyzing' | 'FaceCaptureStateCameraReady' | 'FaceCaptureStateCameraStopped';
-export declare type FaceCaptureFailureState = 'FaceCaptureStateErrorCameraInitializingError' | 'FaceCaptureStateErrorInvalidState' | 'FaceCaptureStateErrorCameraNotAccessible';
-export declare type ComponentProps = {
+export type FaceCaptureSuccessState = 'FaceCaptureStateAnalyzing' | 'FaceCaptureStateCameraReady' | 'FaceCaptureStateCameraStopped';
+export type FaceCaptureFailureState = 'FaceCaptureStateErrorCameraInitializingError' | 'FaceCaptureStateErrorInvalidState' | 'FaceCaptureStateErrorCameraNotAccessible';
+export type ComponentProps = {
     requireEyesOpen?: boolean;
     requireValidAngle?: boolean;
     requiredStableFrames?: number;

package/lib/typescript/index.d.ts

@@ -1,2 +1,3 @@
 import RNYotiCapture from './RNYotiCapture';
+export { IMAGE_QUALITY_LOW, IMAGE_QUALITY_MEDIUM, IMAGE_QUALITY_HIGH, } from './RNYotiCaptureTypes';
 export default RNYotiCapture;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getyoti/react-native-yoti-face-capture",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "An easy to use face detection component for React Native from Yoti.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -53,9 +53,8 @@
     "@commitlint/config-conventional": "^11.0.0",
     "@react-native-community/eslint-config": "^2.0.0",
     "@release-it/conventional-changelog": "^2.0.0",
-    "@types/jest": "^26.0.0",
-    "@types/react": "^16.9.19",
-    "@types/react-native": "0.62.13",
+    "@types/jest": "^29.5.3",
+    "@types/react": "^19.1.0",
     "commitlint": "^11.0.0",
     "eslint": "^7.2.0",
     "eslint-config-prettier": "^7.0.0",
@@ -64,8 +63,8 @@
     "jest": "^26.0.1",
     "pod-install": "^0.1.0",
     "prettier": "^2.0.5",
-    "react": "16.13.1",
-    "react-native": "0.63.4",
+    "react": "19.1.0",
+    "react-native": "0.80.3",
     "react-native-builder-bob": "^0.18.0",
     "release-it": "^14.2.2",
     "typescript": "^4.1.3"
@@ -152,6 +151,5 @@
         }
       ]
     ]
-  },
-  "dependencies": {}
+  }
 }

package/react-native-yoti-face-capture.podspec

@@ -11,7 +11,7 @@ Pod::Spec.new do |s|
   s.authors      = package["author"]
   s.homepage     = 'https://github.com/getyoti/react-native-yoti-face-capture'
   s.source       = { :git => "https://github.com/getyoti/react-native-yoti-face-capture.git", :tag => "#{s.version}" }
-  s.platforms    = { :ios => "13.0" }
+  s.platforms    = { :ios => "15.1" }
 
   s.source_files = "ios/**/*.{h,m,mm}"
 

package/src/RNYotiCapture.android.tsx

@@ -1,4 +1,9 @@
-import React from 'react';
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+} from 'react';
 import {
   findNodeHandle,
   requireNativeComponent,
@@ -103,136 +108,144 @@ const FACE_CAPTURE_FAILURE_RENAMING: FailureRenaming = {
   MultipleFacesDetected: 'FaceCaptureAnalysisErrorMultipleFaces',
 };
 
-export default class RNYotiCapture extends React.Component<ComponentProps> {
-  _faceCaptureHandle: number | null;
-
-  constructor(props: ComponentProps) {
-    super(props);
-    this._faceCaptureHandle = null;
-  }
-
-  _setReference = (ref: any) => {
-    if (ref) {
-      this._faceCaptureHandle = findNodeHandle(ref);
-    } else {
-      this._faceCaptureHandle = null;
-    }
-  };
-
-  startAnalyzing() {
-    YotiFaceCaptureModule.startAnalyzing(this._faceCaptureHandle);
-  }
-
-  stopAnalyzing() {
-    YotiFaceCaptureModule.stopAnalyzing(this._faceCaptureHandle);
-  }
-
-  startCamera() {
-    YotiFaceCaptureModule.startCamera(this._faceCaptureHandle);
-  }
-
-  stopCamera() {
-    YotiFaceCaptureModule.stopCamera(this._faceCaptureHandle);
-  }
-
-  onCameraStateChange(
-    cameraState: NativeFaceCaptureState | NativeFaceCaptureStateFailure
-  ) {
-    let state = cameraState.nativeEvent.state;
-
-    switch (state) {
-      case 'Analyzing':
-        this.props.onFaceCaptureStateChanged('FaceCaptureStateAnalyzing');
-        break;
-
-      case 'CameraReady':
-        this.props.onFaceCaptureStateChanged('FaceCaptureStateCameraReady');
-        break;
-
-      case 'CameraStopped':
-        this.props.onFaceCaptureStateChanged('FaceCaptureStateCameraStopped');
-        break;
-
-      case 'CameraInitializationError':
-        this.props.onFaceCaptureStateFailed(
-          'FaceCaptureStateErrorCameraInitializingError'
-        );
-        break;
-
-      case 'MissingPermissions':
-        this.props.onFaceCaptureStateFailed(
-          'FaceCaptureStateErrorCameraNotAccessible'
-        );
-        break;
-    }
-  }
-
-  onFaceCaptureResult(faceCaptureResult: NativeCaptureResult) {
-    const {
-      cause: nativeCause,
-      croppedImage,
-      croppedFaceBoundingBox,
-      faceBoundingBox,
-      originalImage,
-      state,
-    } = faceCaptureResult.nativeEvent;
-
-    if (
-      state === 'ValidFace' &&
-      croppedImage != null &&
-      croppedFaceBoundingBox != null &&
-      faceBoundingBox != null &&
-      originalImage != null
-    ) {
-      this.props.onFaceCaptureAnalyzedImage({
-        croppedImage,
-        croppedFaceBoundingBox,
-        faceBoundingBox,
-        originalImage,
-      });
-      return;
-    }
-    if (nativeCause === undefined || originalImage === undefined) {
-      return;
-    }
-
-    let cause = FACE_CAPTURE_FAILURE_RENAMING[nativeCause];
-    if (cause === undefined) {
-      cause = 'FaceCaptureAnalysisErrorFaceAnalysisFailed';
-    }
-
-    this.props.onFaceCaptureImageAnalysisFailed({
-      cause,
-      originalImage,
-    });
-  }
+export type RNYotiCaptureRef = {
+  startAnalyzing: () => void;
+  stopAnalyzing: () => void;
+  startCamera: () => void;
+  stopCamera: () => void;
+};
 
-  render() {
+const RNYotiCapture = forwardRef<RNYotiCaptureRef, ComponentProps>(
+  (props, ref) => {
     const {
       requireEyesOpen = false,
       requireBrightEnvironment = true,
       requireValidAngle = false,
       requiredStableFrames = 3,
       imageQuality = IMAGE_QUALITY_MEDIUM,
-      faceCenter = [
-        0.5,
-        0.5
-      ],
-    } = this.props;
+      faceCenter = [0.5, 0.5],
+      onFaceCaptureStateChanged,
+      onFaceCaptureStateFailed,
+      onFaceCaptureAnalyzedImage,
+      onFaceCaptureImageAnalysisFailed,
+    } = props;
+
+    const faceCaptureHandleRef = useRef<number | null>(null);
+
+    const setReference = useCallback((nativeRef: any) => {
+      if (nativeRef) {
+        faceCaptureHandleRef.current = findNodeHandle(nativeRef);
+      } else {
+        faceCaptureHandleRef.current = null;
+      }
+    }, []);
+
+    useImperativeHandle(ref, () => ({
+      startAnalyzing: () => {
+        YotiFaceCaptureModule.startAnalyzing(faceCaptureHandleRef.current);
+      },
+      stopAnalyzing: () => {
+        YotiFaceCaptureModule.stopAnalyzing(faceCaptureHandleRef.current);
+      },
+      startCamera: () => {
+        YotiFaceCaptureModule.startCamera(faceCaptureHandleRef.current);
+      },
+      stopCamera: () => {
+        YotiFaceCaptureModule.stopCamera(faceCaptureHandleRef.current);
+      },
+    }));
+
+    const handleCameraStateChange = useCallback(
+      (cameraState: NativeFaceCaptureState | NativeFaceCaptureStateFailure) => {
+        const state = cameraState.nativeEvent.state;
+
+        switch (state) {
+          case 'Analyzing':
+            onFaceCaptureStateChanged('FaceCaptureStateAnalyzing');
+            break;
+
+          case 'CameraReady':
+            onFaceCaptureStateChanged('FaceCaptureStateCameraReady');
+            break;
+
+          case 'CameraStopped':
+            onFaceCaptureStateChanged('FaceCaptureStateCameraStopped');
+            break;
+
+          case 'CameraInitializationError':
+            onFaceCaptureStateFailed(
+              'FaceCaptureStateErrorCameraInitializingError'
+            );
+            break;
+
+          case 'MissingPermissions':
+            onFaceCaptureStateFailed(
+              'FaceCaptureStateErrorCameraNotAccessible'
+            );
+            break;
+        }
+      },
+      [onFaceCaptureStateChanged, onFaceCaptureStateFailed]
+    );
+
+    const handleFaceCaptureResult = useCallback(
+      (faceCaptureResult: NativeCaptureResult) => {
+        const {
+          cause: nativeCause,
+          croppedImage,
+          croppedFaceBoundingBox,
+          faceBoundingBox,
+          originalImage,
+          state,
+        } = faceCaptureResult.nativeEvent;
+
+        if (
+          state === 'ValidFace' &&
+          croppedImage != null &&
+          croppedFaceBoundingBox != null &&
+          faceBoundingBox != null &&
+          originalImage != null
+        ) {
+          onFaceCaptureAnalyzedImage({
+            croppedImage,
+            croppedFaceBoundingBox,
+            faceBoundingBox,
+            originalImage,
+          });
+          return;
+        }
+        if (nativeCause === undefined || originalImage === undefined) {
+          return;
+        }
+
+        let cause = FACE_CAPTURE_FAILURE_RENAMING[nativeCause];
+        if (cause === undefined) {
+          cause = 'FaceCaptureAnalysisErrorFaceAnalysisFailed';
+        }
+
+        onFaceCaptureImageAnalysisFailed({
+          cause,
+          originalImage,
+        });
+      },
+      [onFaceCaptureAnalyzedImage, onFaceCaptureImageAnalysisFailed]
+    );
 
     return (
       <YotiFaceCaptureView
-        {...this.props}
+        {...props}
         requireEyesOpen={requireEyesOpen}
         requireValidAngle={requireValidAngle}
         requiredStableFrames={requiredStableFrames}
         requireBrightEnvironment={requireBrightEnvironment}
         imageQuality={imageQuality}
         faceCenter={faceCenter}
-        ref={this._setReference}
-        onCameraStateChange={this.onCameraStateChange.bind(this)}
-        onFaceCaptureResult={this.onFaceCaptureResult.bind(this)}
+        ref={setReference}
+        onCameraStateChange={handleCameraStateChange}
+        onFaceCaptureResult={handleFaceCaptureResult}
       />
     );
   }
-}
+);
+
+export default RNYotiCapture;

package/src/RNYotiCapture.ios.tsx

@@ -1,4 +1,9 @@
-import React from 'react';
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+} from 'react';
 import {
   findNodeHandle,
   requireNativeComponent,
@@ -62,102 +67,124 @@ const YotiFaceCaptureView = requireNativeComponent<NativeFaceCaptureViewIOS>(
   'YotiFaceCaptureView'
 );
 
-export default class RNYotiCapture extends React.Component<ComponentProps> {
-  _faceCaptureHandle: number | null;
-
-  constructor(props: ComponentProps) {
-    super(props);
-    this._faceCaptureHandle = null;
-  }
-
-  _setReference = (ref: any) => {
-    if (ref) {
-      this._faceCaptureHandle = findNodeHandle(ref);
-    } else {
-      this._faceCaptureHandle = null;
-    }
-  };
+export type RNYotiCaptureRef = {
+  startAnalyzing: () => void;
+  stopAnalyzing: () => void;
+  startCamera: () => void;
+  stopCamera: () => void;
+};
 
-  startAnalyzing() {
-    UIManager.dispatchViewManagerCommand(
-      findNodeHandle(this),
-      UIManager.getViewManagerConfig('YotiFaceCaptureView').Commands
-        .startAnalyzing,
-      []
+const RNYotiCapture = forwardRef<RNYotiCaptureRef, ComponentProps>(
+  (props, ref) => {
+    const {
+      requireEyesOpen = false,
+      requireValidAngle = false,
+      requiredStableFrames = 3,
+      requireBrightEnvironment = true,
+      imageQuality = IMAGE_QUALITY_MEDIUM,
+      faceCenter = [0.5, 0.5],
+      onFaceCaptureAnalyzedImage,
+      onFaceCaptureImageAnalysisFailed,
+      onFaceCaptureStateChanged,
+      onFaceCaptureStateFailed,
+    } = props;
+
+    const faceCaptureHandleRef = useRef<number | null>(null);
+
+    const setReference = useCallback((nativeRef: any) => {
+      if (nativeRef) {
+        faceCaptureHandleRef.current = findNodeHandle(nativeRef);
+      } else {
+        faceCaptureHandleRef.current = null;
+      }
+    }, []);
+
+    useImperativeHandle(ref, () => ({
+      startAnalyzing: () => {
+        UIManager.dispatchViewManagerCommand(
+          faceCaptureHandleRef.current,
+          UIManager.getViewManagerConfig('YotiFaceCaptureView').Commands
+            .startAnalyzing,
+          []
+        );
+      },
+      stopAnalyzing: () => {
+        UIManager.dispatchViewManagerCommand(
+          faceCaptureHandleRef.current,
+          UIManager.getViewManagerConfig('YotiFaceCaptureView').Commands
+            .stopAnalyzing,
+          []
+        );
+      },
+      startCamera: () => {
+        UIManager.dispatchViewManagerCommand(
+          faceCaptureHandleRef.current,
+          UIManager.getViewManagerConfig('YotiFaceCaptureView').Commands
+            .startCamera,
+          []
+        );
+      },
+      stopCamera: () => {
+        UIManager.dispatchViewManagerCommand(
+          faceCaptureHandleRef.current,
+          UIManager.getViewManagerConfig('YotiFaceCaptureView').Commands
+            .stopCamera,
+          []
+        );
+      },
+    }));
+
+    const handleFaceCaptureAnalyzedImage = useCallback(
+      ({ nativeEvent: faceCaptureResult }: NativeFaceCaptureResult) => {
+        onFaceCaptureAnalyzedImage(faceCaptureResult);
+      },
+      [onFaceCaptureAnalyzedImage]
     );
-  }
 
-  stopAnalyzing() {
-    UIManager.dispatchViewManagerCommand(
-      findNodeHandle(this),
-      UIManager.getViewManagerConfig('YotiFaceCaptureView').Commands
-        .stopAnalyzing,
-      []
+    const handleFaceCaptureImageAnalysisFailed = useCallback(
+      ({
+        nativeEvent: faceCaptureAnalysisFailure,
+      }: NativeFaceCaptureAnalysisFailure) => {
+        onFaceCaptureImageAnalysisFailed(faceCaptureAnalysisFailure);
+      },
+      [onFaceCaptureImageAnalysisFailed]
     );
-  }
 
-  public startCamera = () => {
-    UIManager.dispatchViewManagerCommand(
-      findNodeHandle(this._faceCaptureHandle),
-      UIManager.getViewManagerConfig('YotiFaceCaptureView').Commands
-        .startCamera,
-      []
+    const handleFaceCaptureStateChanged = useCallback(
+      ({
+        nativeEvent: { state: faceCaptureState },
+      }: NativeFaceCaptureState) => {
+        onFaceCaptureStateChanged(faceCaptureState);
+      },
+      [onFaceCaptureStateChanged]
     );
-  };
 
-  stopCamera() {
-    UIManager.dispatchViewManagerCommand(
-      findNodeHandle(this._faceCaptureHandle),
-      UIManager.getViewManagerConfig('YotiFaceCaptureView').Commands.stopCamera,
-      []
+    const handleFaceCaptureStateFailed = useCallback(
+      ({
+        nativeEvent: { state: faceCaptureStateFailure },
+      }: NativeFaceCaptureStateFailure) => {
+        onFaceCaptureStateFailed(faceCaptureStateFailure);
+      },
+      [onFaceCaptureStateFailed]
     );
-  }
 
-  render() {
-    const {
-      requireEyesOpen = false,
-      requireValidAngle = false,
-      requiredStableFrames = 3,
-      requireBrightEnvironment = true,
-      imageQuality = IMAGE_QUALITY_MEDIUM,
-      faceCenter = [
-        0.5,
-        0.5
-      ],
-    } = this.props;
     return (
       <YotiFaceCaptureView
-        {...this.props}
+        {...props}
         requireEyesOpen={requireEyesOpen}
         requireValidAngle={requireValidAngle}
         requiredStableFrames={requiredStableFrames}
         requireBrightEnvironment={requireBrightEnvironment}
         imageQuality={imageQuality}
         faceCenter={faceCenter}
-        onFaceCaptureAnalyzedImage={({
-          nativeEvent: faceCaptureResult,
-        }: NativeFaceCaptureResult) =>
-          this.props.onFaceCaptureAnalyzedImage(faceCaptureResult)
-        }
-        onFaceCaptureImageAnalysisFailed={({
-          nativeEvent: faceCaptureAnalysisFailure,
-        }: NativeFaceCaptureAnalysisFailure) =>
-          this.props.onFaceCaptureImageAnalysisFailed(
-            faceCaptureAnalysisFailure
-          )
-        }
-        onFaceCaptureStateChanged={({
-          nativeEvent: { state: faceCaptureState },
-        }: NativeFaceCaptureState) =>
-          this.props.onFaceCaptureStateChanged(faceCaptureState)
-        }
-        onFaceCaptureStateFailed={({
-          nativeEvent: { state: faceCaptureStateFailure },
-        }: NativeFaceCaptureStateFailure) =>
-          this.props.onFaceCaptureStateFailed(faceCaptureStateFailure)
-        }
-        ref={this._setReference}
+        onFaceCaptureAnalyzedImage={handleFaceCaptureAnalyzedImage}
+        onFaceCaptureImageAnalysisFailed={handleFaceCaptureImageAnalysisFailed}
+        onFaceCaptureStateChanged={handleFaceCaptureStateChanged}
+        onFaceCaptureStateFailed={handleFaceCaptureStateFailed}
+        ref={setReference}
       />
     );
   }
-}
+);
+
+export default RNYotiCapture;

package/src/index.tsx

@@ -1,4 +1,10 @@
 // @ts-ignore
 import RNYotiCapture from './RNYotiCapture';
 
+export {
+  IMAGE_QUALITY_LOW,
+  IMAGE_QUALITY_MEDIUM,
+  IMAGE_QUALITY_HIGH,
+} from './RNYotiCaptureTypes';
+
 export default RNYotiCapture;

package/CHANGELOG.md

@@ -1,29 +0,0 @@
-# ChangeLog
-## Version 3.0.0
-BREAKING CHANGE: New configuration requirements
-
-The configuration has been updated and expects a `faceCenter` representing the expected center of the captured face.
-This parameter is a percentage value (x, y). E.g.: (0,0) - top left; (0.5, 0.5) - center of the screen; (1,1) - bottom right; 
-
-Please, check [README.md](https://github.com/getyoti/react-native-yoti-face-capture/blob/main/README.md) for more details.
-
-## Version 2.0.1
-
-Contains a couple of bug fixes on the iOS side of the SDK:
-- Solves the discrepancy between the required screen units that needs to be used for Android and iOS. Now, both platforms will be expecting pixels when defining the scanning area.
-- Fixes a crash when the component was used inside of a react-navigation react-stack screen.
-
-## Version 2.0.0
-
-BREAKING CHANGE: Low light detection
-
-New configurable property `requireBrightEnvironment` has been added to the SDK entry point. If it is activated, the SDK will require a bright environment to take the selfie. To migrate from previous versions, it is needed to include this paremeter on the SDK setup.
-Please, check [README.md](https://github.com/getyoti/react-native-yoti-face-capture/blob/main/README.md) for more details.
-
-## Version 1.1.0
-
-Fix: README.md
-
-## Version 1.0.0
-
-Face capture first release