diff --git a/src/components/withNavigationFallback.js b/src/components/withNavigationFallback.js
index bc4ea5dd3fad..e82946c9e049 100644
--- a/src/components/withNavigationFallback.js
+++ b/src/components/withNavigationFallback.js
@@ -1,39 +1,30 @@
-import React, {Component} from 'react';
+import React, {forwardRef, useContext, useMemo} 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 (
+        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
-                    {...this.props}
-                    ref={this.props.forwardedRef}
+                    {...props}
+                    ref={props.forwardedRef}
                 />
-            );
-        }
+            </NavigationContext.Provider>
+        );
     }
-    WithNavigationFallback.contextType = NavigationContext;
     WithNavigationFallback.displayName = `WithNavigationFocusWithFallback(${getComponentDisplayName(WrappedComponent)})`;
     WithNavigationFallback.propTypes = {
         forwardedRef: refPropTypes,
@@ -41,7 +32,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}