[CP Staging] Revert "Remove withNavigationFallback.js HOC"

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

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}
+        />
+    ));
+}

src/stories/Composer.stories.js

@@ -1,14 +1,16 @@
 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';
 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