From b24474d860b3f09499c7a3a6312b66e43e7abc5f Mon Sep 17 00:00:00 2001
From: Tienifr <113963320+tienifr@users.noreply.github.com>
Date: Wed, 18 Oct 2023 03:52:41 +0000
Subject: [PATCH 1/3] Revert "Remove 'withNavigationFallback.js' HOC"

---
 .eslintrc.js                             |  2 +-
 src/components/Button/index.js           |  7 +++-
 src/components/withNavigationFallback.js | 43 ++++++++++++++++++++++++
 src/libs/getComponentDisplayName.ts      |  2 +-
 src/stories/Composer.stories.js          | 29 ++++++++--------
 5 files changed, 65 insertions(+), 18 deletions(-)
 create mode 100644 src/components/withNavigationFallback.js

diff --git a/.eslintrc.js b/.eslintrc.js
index 83e9479ce0c4..75a74ed371c4 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -116,7 +116,7 @@ module.exports = {
                     },
                     {
                         selector: ['parameter', 'method'],
-                        format: ['camelCase', 'PascalCase'],
+                        format: ['camelCase'],
                     },
                 ],
                 '@typescript-eslint/ban-types': [
diff --git a/src/components/Button/index.js b/src/components/Button/index.js
index 16654ce87d30..dc12a4ded5c2 100644
--- a/src/components/Button/index.js
+++ b/src/components/Button/index.js
@@ -9,6 +9,8 @@ import Icon from '../Icon';
 import CONST from '../../CONST';
 import * as StyleUtils from '../../styles/StyleUtils';
 import HapticFeedback from '../../libs/HapticFeedback';
+import withNavigationFallback from '../withNavigationFallback';
+import compose from '../../libs/compose';
 import * as Expensicons from '../Icon/Expensicons';
 import withNavigationFocus from '../withNavigationFocus';
 import validateSubmitShortcut from './validateSubmitShortcut';
@@ -326,7 +328,10 @@ class Button extends Component {
 Button.propTypes = propTypes;
 Button.defaultProps = defaultProps;
 
-export default withNavigationFocus(
+export default compose(
+    withNavigationFallback,
+    withNavigationFocus,
+)(
     React.forwardRef((props, ref) => (
         <Button
             // eslint-disable-next-line react/jsx-props-no-spreading
diff --git a/src/components/withNavigationFallback.js b/src/components/withNavigationFallback.js
new file mode 100644
index 000000000000..e82946c9e049
--- /dev/null
+++ b/src/components/withNavigationFallback.js
@@ -0,0 +1,43 @@
+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/libs/getComponentDisplayName.ts b/src/libs/getComponentDisplayName.ts
index 0bf52d543a84..fd1bbcaea521 100644
--- a/src/libs/getComponentDisplayName.ts
+++ b/src/libs/getComponentDisplayName.ts
@@ -1,6 +1,6 @@
 import {ComponentType} from 'react';
 
 /** Returns the display name of a component */
-export default function getComponentDisplayName<TProps>(component: ComponentType<TProps>): string {
+export default function getComponentDisplayName(component: ComponentType): string {
     return component.displayName ?? component.name ?? 'Component';
 }
diff --git a/src/stories/Composer.stories.js b/src/stories/Composer.stories.js
index 2eedd6b97c38..50039d7d537a 100644
--- a/src/stories/Composer.stories.js
+++ b/src/stories/Composer.stories.js
@@ -1,7 +1,6 @@
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
-import React, {useMemo, useState} from 'react';
+import React, {useState} from 'react';
 import {View, Image} from 'react-native';
-import {NavigationContext} from '@react-navigation/core';
 import Composer from '../components/Composer';
 import RenderHTML from '../components/RenderHTML';
 import Text from '../components/Text';
@@ -9,6 +8,9 @@ import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
 import * as StyleUtils from '../styles/StyleUtils';
 import CONST from '../CONST';
+import withNavigationFallback from '../components/withNavigationFallback';
+
+const ComposerWithNavigation = withNavigationFallback(Composer);
 
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
@@ -17,7 +19,7 @@ import CONST from '../CONST';
  */
 const story = {
     title: 'Components/Composer',
-    component: Composer,
+    component: ComposerWithNavigation,
 };
 
 const parser = new ExpensiMark();
@@ -26,22 +28,19 @@ function Default(args) {
     const [pastedFile, setPastedFile] = useState(null);
     const [comment, setComment] = useState(args.defaultValue);
     const renderedHTML = parser.replace(comment);
-    const navigationContextValue = useMemo(() => ({addListener: () => () => {}, removeListener: () => () => {}}), []);
 
     return (
         <View>
             <View style={[styles.border, styles.p4]}>
-                <NavigationContext.Provider value={navigationContextValue}>
-                    <Composer
-                        // eslint-disable-next-line react/jsx-props-no-spreading
-                        {...args}
-                        multiline
-                        textAlignVertical="top"
-                        onChangeText={setComment}
-                        onPasteFile={setPastedFile}
-                        style={[styles.textInputCompose, styles.w100]}
-                    />
-                </NavigationContext.Provider>
+                <ComposerWithNavigation
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...args}
+                    multiline
+                    textAlignVertical="top"
+                    onChangeText={setComment}
+                    onPasteFile={setPastedFile}
+                    style={[styles.textInputCompose, styles.w100]}
+                />
             </View>
             <View style={[styles.flexRow, styles.mv5, styles.flexWrap, styles.w100]}>
                 <View

From 6a2173b97c5444ded2c9336fee45e5d81a578ef1 Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Wed, 18 Oct 2023 11:07:20 +0700
Subject: [PATCH 2/3] fix lint

---
 .eslintrc.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 75a74ed371c4..83e9479ce0c4 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -116,7 +116,7 @@ module.exports = {
                     },
                     {
                         selector: ['parameter', 'method'],
-                        format: ['camelCase'],
+                        format: ['camelCase', 'PascalCase'],
                     },
                 ],
                 '@typescript-eslint/ban-types': [

From a8f3d666f4b7881df652b06bcc6ea9c08d72bb81 Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Wed, 18 Oct 2023 11:19:35 +0700
Subject: [PATCH 3/3] fix ts error

---
 src/libs/getComponentDisplayName.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/getComponentDisplayName.ts b/src/libs/getComponentDisplayName.ts
index fd1bbcaea521..0bf52d543a84 100644
--- a/src/libs/getComponentDisplayName.ts
+++ b/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';
 }