From 48ff412f9de2998e4e5122d8955a06c101f81093 Mon Sep 17 00:00:00 2001
From: Etotaziba Olei <teneeto@gmail.com>
Date: Wed, 13 Sep 2023 19:34:44 +0100
Subject: [PATCH 1/2] migrate withNavigationFallback.js class to function

---
 src/components/withNavigationFallback.js | 50 +++++++++++-------------
 1 file changed, 23 insertions(+), 27 deletions(-)

diff --git a/src/components/withNavigationFallback.js b/src/components/withNavigationFallback.js
index bc4ea5dd3fad..d5067d7598b0 100644
--- a/src/components/withNavigationFallback.js
+++ b/src/components/withNavigationFallback.js
@@ -1,39 +1,34 @@
-import React, {Component} from 'react';
+import React, {forwardRef, useContext} from 'react';
 import {NavigationContext} from '@react-navigation/core';
 import getComponentDisplayName from '../libs/getComponentDisplayName';
 import refPropTypes from './refPropTypes';
 
 export default function (WrappedComponent) {
-    class WithNavigationFallback extends Component {
-        render() {
-            if (!this.context) {
-                return (
-                    <NavigationContext.Provider
-                        value={{
-                            isFocused: () => true,
-                            addListener: () => () => {},
-                            removeListener: () => () => {},
-                        }}
-                    >
-                        <WrappedComponent
-                            // eslint-disable-next-line react/jsx-props-no-spreading
-                            {...this.props}
-                            ref={this.props.forwardedRef}
-                        />
-                    </NavigationContext.Provider>
-                );
-            }
+    function WithNavigationFallback(props) {
+        const context = useContext(NavigationContext);
 
-            return (
+        return !context ? (
+            <NavigationContext.Provider
+                value={{
+                    isFocused: () => true,
+                    addListener: () => () => {},
+                    removeListener: () => () => {},
+                }}
+            >
                 <WrappedComponent
                     // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...this.props}
-                    ref={this.props.forwardedRef}
+                    {...props}
+                    ref={props.forwardedRef}
                 />
-            );
-        }
+            </NavigationContext.Provider>
+        ) : (
+            <WrappedComponent
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+                ref={props.forwardedRef}
+            />
+        );
     }
-    WithNavigationFallback.contextType = NavigationContext;
     WithNavigationFallback.displayName = `WithNavigationFocusWithFallback(${getComponentDisplayName(WrappedComponent)})`;
     WithNavigationFallback.propTypes = {
         forwardedRef: refPropTypes,
@@ -41,7 +36,8 @@ export default function (WrappedComponent) {
     WithNavigationFallback.defaultProps = {
         forwardedRef: undefined,
     };
-    return React.forwardRef((props, ref) => (
+
+    return forwardRef((props, ref) => (
         <WithNavigationFallback
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}

From 6f197b915df61286ef11723ca8e3e93278f3e57c Mon Sep 17 00:00:00 2001
From: Etotaziba Olei <teneeto@gmail.com>
Date: Thu, 14 Sep 2023 09:46:59 +0100
Subject: [PATCH 2/2] useMemo for navigation context value

---
 src/components/withNavigationFallback.js | 26 ++++++++++--------------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/components/withNavigationFallback.js b/src/components/withNavigationFallback.js
index d5067d7598b0..e82946c9e049 100644
--- a/src/components/withNavigationFallback.js
+++ b/src/components/withNavigationFallback.js
@@ -1,4 +1,4 @@
-import React, {forwardRef, useContext} from 'react';
+import React, {forwardRef, useContext, useMemo} from 'react';
 import {NavigationContext} from '@react-navigation/core';
 import getComponentDisplayName from '../libs/getComponentDisplayName';
 import refPropTypes from './refPropTypes';
@@ -7,26 +7,22 @@ export default function (WrappedComponent) {
     function WithNavigationFallback(props) {
         const context = useContext(NavigationContext);
 
-        return !context ? (
-            <NavigationContext.Provider
-                value={{
-                    isFocused: () => true,
-                    addListener: () => () => {},
-                    removeListener: () => () => {},
-                }}
-            >
+        const navigationContextValue = useMemo(() => ({isFocused: () => true, addListener: () => () => {}, removeListener: () => () => {}}), []);
+
+        return context ? (
+            <WrappedComponent
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+                ref={props.forwardedRef}
+            />
+        ) : (
+            <NavigationContext.Provider value={navigationContextValue}>
                 <WrappedComponent
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...props}
                     ref={props.forwardedRef}
                 />
             </NavigationContext.Provider>
-        ) : (
-            <WrappedComponent
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {...props}
-                ref={props.forwardedRef}
-            />
         );
     }
     WithNavigationFallback.displayName = `WithNavigationFocusWithFallback(${getComponentDisplayName(WrappedComponent)})`;