Remove 'withNavigationFallback.js' HOC

.eslintrc.js

@@ -116,7 +116,7 @@ module.exports = {
                     },
                     {
                         selector: ['parameter', 'method'],
-                        format: ['camelCase'],
+                        format: ['camelCase', 'PascalCase'],
                     },
                 ],
                 '@typescript-eslint/ban-types': [

src/components/withNavigationFallback.tsx

@@ -0,0 +1,43 @@
+import React, {ComponentType, RefAttributes, ForwardedRef, 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>>) {
+    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);
+}

src/libs/getComponentDisplayName.ts

@@ -1,6 +1,6 @@
 import {ComponentType} from 'react';
 
 /** Returns the display name of a component */
-export default function getComponentDisplayName(component: ComponentType): string {
+export default function getComponentDisplayName<TProps>(component: ComponentType<TProps>): string {
     return component.displayName ?? component.name ?? 'Component';
 }