From f9aa0d7484708824decd35d3f35a95d77efc60eb Mon Sep 17 00:00:00 2001
From: Michal Muzyk <mimuzyk@gmail.com>
Date: Tue, 3 Oct 2023 14:06:17 +0200
Subject: [PATCH 1/2] feat: rewrite onfido native class component to functional

---
 src/components/Onfido/index.native.js | 45 +++++++++++++--------------
 1 file changed, 21 insertions(+), 24 deletions(-)

diff --git a/src/components/Onfido/index.native.js b/src/components/Onfido/index.native.js
index 7dd00ddca6be..7d258d57bbe1 100644
--- a/src/components/Onfido/index.native.js
+++ b/src/components/Onfido/index.native.js
@@ -1,23 +1,20 @@
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
-import React from 'react';
+import React, {useEffect} from 'react';
 import {Alert, Linking} from 'react-native';
 import {Onfido as OnfidoSDK, OnfidoCaptureType, OnfidoDocumentType, OnfidoCountryCode} from '@onfido/react-native-sdk';
 import onfidoPropTypes from './onfidoPropTypes';
 import CONST from '../../CONST';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import Log from '../../libs/Log';
 import FullscreenLoadingIndicator from '../FullscreenLoadingIndicator';
+import useLocalize from '../../hooks/useLocalize';
 
-const propTypes = {
-    ...withLocalizePropTypes,
-    ...onfidoPropTypes,
-};
+function Onfido({sdkToken, onUserExit, onSuccess, onError}) {
+    const {translate} = useLocalize();
 
-class Onfido extends React.Component {
-    componentDidMount() {
+    useEffect(() => {
         OnfidoSDK.start({
-            sdkToken: this.props.sdkToken,
+            sdkToken,
             flowSteps: {
                 welcome: true,
                 captureFace: {
@@ -29,7 +26,7 @@ class Onfido extends React.Component {
                 },
             },
         })
-            .then(this.props.onSuccess)
+            .then(onSuccess)
             .catch((error) => {
                 const errorMessage = lodashGet(error, 'message', CONST.ERROR.UNKNOWN_ERROR);
                 const errorType = lodashGet(error, 'type');
@@ -38,24 +35,24 @@ class Onfido extends React.Component {
                 // If the user cancels the Onfido flow we won't log this error as it's normal. In the React Native SDK the user exiting the flow will trigger this error which we can use as
                 // our "user exited the flow" callback. On web, this event has it's own callback passed as a config so we don't need to bother with this there.
                 if (_.contains([CONST.ONFIDO.ERROR.USER_CANCELLED, CONST.ONFIDO.ERROR.USER_TAPPED_BACK, CONST.ONFIDO.ERROR.USER_EXITED], errorMessage)) {
-                    this.props.onUserExit();
+                    onUserExit();
                     return;
                 }
 
                 // Handle user camera permission on iOS and Android
                 if (_.contains([CONST.ONFIDO.ERROR.USER_CAMERA_PERMISSION, CONST.ONFIDO.ERROR.USER_CAMERA_DENINED, CONST.ONFIDO.ERROR.USER_CAMERA_CONSENT_DENIED], errorMessage)) {
                     Alert.alert(
-                        this.props.translate('onfidoStep.cameraPermissionsNotGranted'),
-                        this.props.translate('onfidoStep.cameraRequestMessage'),
+                        translate('onfidoStep.cameraPermissionsNotGranted'),
+                        translate('onfidoStep.cameraRequestMessage'),
                         [
                             {
-                                text: this.props.translate('common.cancel'),
-                                onPress: () => this.props.onUserExit(),
+                                text: translate('common.cancel'),
+                                onPress: () => onUserExit(),
                             },
                             {
-                                text: this.props.translate('common.settings'),
+                                text: translate('common.settings'),
                                 onPress: () => {
-                                    this.props.onUserExit();
+                                    onUserExit();
                                     Linking.openSettings();
                                 },
                             },
@@ -65,14 +62,14 @@ class Onfido extends React.Component {
                     return;
                 }
 
-                this.props.onError(errorMessage);
+                onError(errorMessage);
             });
-    }
+    }, [onError, onSuccess, onUserExit, sdkToken, translate]);
 
-    render() {
-        return <FullscreenLoadingIndicator />;
-    }
+    return <FullscreenLoadingIndicator />;
 }
 
-Onfido.propTypes = propTypes;
-export default withLocalize(Onfido);
+Onfido.propTypes = onfidoPropTypes;
+Onfido.displayName = 'Onfido';
+
+export default Onfido;

From 09e7dc1281bff53336b47de549ad9826d4d49fbc Mon Sep 17 00:00:00 2001
From: Michal Muzyk <mimuzyk@gmail.com>
Date: Wed, 4 Oct 2023 09:14:41 +0200
Subject: [PATCH 2/2] feat: remove deps from hook

---
 src/components/Onfido/index.native.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Onfido/index.native.js b/src/components/Onfido/index.native.js
index 7d258d57bbe1..424e370b5fe6 100644
--- a/src/components/Onfido/index.native.js
+++ b/src/components/Onfido/index.native.js
@@ -64,7 +64,9 @@ function Onfido({sdkToken, onUserExit, onSuccess, onError}) {
 
                 onError(errorMessage);
             });
-    }, [onError, onSuccess, onUserExit, sdkToken, translate]);
+        // Onfido should be initialized only once on mount
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
 
     return <FullscreenLoadingIndicator />;
 }