From 7af7d79a70d807900423534e3981174fa564b289 Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Fri, 20 Oct 2023 14:17:47 +0200
Subject: [PATCH 1/3] [TS migration] Migrate 'withNavigationFallback.js' HOC

---
 src/components/withNavigationFallback.js  | 43 -----------------------
 src/components/withNavigationFallback.tsx | 43 +++++++++++++++++++++++
 2 files changed, 43 insertions(+), 43 deletions(-)
 delete mode 100644 src/components/withNavigationFallback.js
 create mode 100644 src/components/withNavigationFallback.tsx

diff --git a/src/components/withNavigationFallback.js b/src/components/withNavigationFallback.js
deleted file mode 100644
index e82946c9e049..000000000000
--- a/src/components/withNavigationFallback.js
+++ /dev/null
@@ -1,43 +0,0 @@
-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) {
-    function WithNavigationFallback(props) {
-        const context = useContext(NavigationContext);
-
-        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>
-        );
-    }
-    WithNavigationFallback.displayName = `WithNavigationFocusWithFallback(${getComponentDisplayName(WrappedComponent)})`;
-    WithNavigationFallback.propTypes = {
-        forwardedRef: refPropTypes,
-    };
-    WithNavigationFallback.defaultProps = {
-        forwardedRef: undefined,
-    };
-
-    return forwardRef((props, ref) => (
-        <WithNavigationFallback
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            forwardedRef={ref}
-        />
-    ));
-}
diff --git a/src/components/withNavigationFallback.tsx b/src/components/withNavigationFallback.tsx
new file mode 100644
index 000000000000..63dbdaf02ce9
--- /dev/null
+++ b/src/components/withNavigationFallback.tsx
@@ -0,0 +1,43 @@
+import React, {ComponentType, RefAttributes, ForwardedRef, ReactElement, forwardRef, useContext, useMemo} from 'react';
+import {NavigationContext} from '@react-navigation/core';
+import {NavigationProp} from '@react-navigation/native';
+import {ParamListBase} from '@react-navigation/routers';
+import getComponentDisplayName from '../libs/getComponentDisplayName';
+
+type AddListenerCallback = () => void;
+
+type RemoveListenerCallback = () => void;
+
+type NavigationContextValue = {
+    isFocused: () => boolean;
+    addListener: () => AddListenerCallback;
+    removeListener: () => RemoveListenerCallback;
+};
+
+export default function <TProps, TRef>(WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>): (props: TProps & RefAttributes<TRef>) => ReactElement | null {
+    function WithNavigationFallback(props: TProps, ref: ForwardedRef<TRef>) {
+        const context = useContext(NavigationContext);
+
+        const navigationContextValue: NavigationContextValue = useMemo(() => ({isFocused: () => true, addListener: () => () => {}, removeListener: () => () => {}}), []);
+
+        return context ? (
+            <WrappedComponent
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+                ref={ref}
+            />
+        ) : (
+            <NavigationContext.Provider value={navigationContextValue as unknown as NavigationProp<ParamListBase>}>
+                <WrappedComponent
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...props}
+                    ref={ref}
+                />
+            </NavigationContext.Provider>
+        );
+    }
+
+    WithNavigationFallback.displayName = `WithNavigationFocusWithFallback(${getComponentDisplayName(WrappedComponent)})`;
+
+    return forwardRef(WithNavigationFallback);
+}

From 9f79ac32a2fa608072f4d7157fcbb2c6765ce5ad Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Wed, 25 Oct 2023 18:01:32 +0200
Subject: [PATCH 2/3] Make navigationContextValue more readable

---
 src/components/withNavigationFallback.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/withNavigationFallback.tsx b/src/components/withNavigationFallback.tsx
index 63dbdaf02ce9..d3d6d39b4dd3 100644
--- a/src/components/withNavigationFallback.tsx
+++ b/src/components/withNavigationFallback.tsx
@@ -18,7 +18,14 @@ export default function <TProps, TRef>(WrappedComponent: ComponentType<TProps &
     function WithNavigationFallback(props: TProps, ref: ForwardedRef<TRef>) {
         const context = useContext(NavigationContext);
 
-        const navigationContextValue: NavigationContextValue = useMemo(() => ({isFocused: () => true, addListener: () => () => {}, removeListener: () => () => {}}), []);
+        const navigationContextValue: NavigationContextValue = useMemo(
+            () => ({
+                isFocused: () => true,
+                addListener: () => () => {},
+                removeListener: () => () => {},
+            }),
+            [],
+        );
 
         return context ? (
             <WrappedComponent

From c0166dde918c96d9610a7cd238efe7f597ce0185 Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Mon, 30 Oct 2023 09:08:30 +0100
Subject: [PATCH 3/3] Update display name, run linter

---
 src/components/withNavigationFallback.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/withNavigationFallback.tsx b/src/components/withNavigationFallback.tsx
index d3d6d39b4dd3..aa58b12d4b01 100644
--- a/src/components/withNavigationFallback.tsx
+++ b/src/components/withNavigationFallback.tsx
@@ -1,8 +1,7 @@
-import React, {ComponentType, RefAttributes, ForwardedRef, ReactElement, forwardRef, useContext, useMemo} from 'react';
 import {NavigationContext} from '@react-navigation/core';
 import {NavigationProp} from '@react-navigation/native';
 import {ParamListBase} from '@react-navigation/routers';
-import getComponentDisplayName from '../libs/getComponentDisplayName';
+import React, {ComponentType, ForwardedRef, forwardRef, ReactElement, RefAttributes, useContext, useMemo} from 'react';
 
 type AddListenerCallback = () => void;
 
@@ -44,7 +43,7 @@ export default function <TProps, TRef>(WrappedComponent: ComponentType<TProps &
         );
     }
 
-    WithNavigationFallback.displayName = `WithNavigationFocusWithFallback(${getComponentDisplayName(WrappedComponent)})`;
+    WithNavigationFallback.displayName = 'WithNavigationFocusWithFallback';
 
     return forwardRef(WithNavigationFallback);
 }