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': [
diff --git a/src/components/Button/index.js b/src/components/Button/index.js
index dc12a4ded5c2..16654ce87d30 100644
--- a/src/components/Button/index.js
+++ b/src/components/Button/index.js
@@ -9,8 +9,6 @@ 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';
@@ -328,10 +326,7 @@ class Button extends Component {
 Button.propTypes = propTypes;
 Button.defaultProps = defaultProps;
 
-export default compose(
-    withNavigationFallback,
-    withNavigationFocus,
-)(
+export default 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
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/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';
 }
diff --git a/src/stories/Composer.stories.js b/src/stories/Composer.stories.js
index 50039d7d537a..2eedd6b97c38 100644
--- a/src/stories/Composer.stories.js
+++ b/src/stories/Composer.stories.js
@@ -1,6 +1,7 @@
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
-import React, {useState} from 'react';
+import React, {useMemo, 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';
@@ -8,9 +9,6 @@ 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:
@@ -19,7 +17,7 @@ const ComposerWithNavigation = withNavigationFallback(Composer);
  */
 const story = {
     title: 'Components/Composer',
-    component: ComposerWithNavigation,
+    component: Composer,
 };
 
 const parser = new ExpensiMark();
@@ -28,19 +26,22 @@ 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]}>
-                <ComposerWithNavigation
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...args}
-                    multiline
-                    textAlignVertical="top"
-                    onChangeText={setComment}
-                    onPasteFile={setPastedFile}
-                    style={[styles.textInputCompose, styles.w100]}
-                />
+                <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>
             </View>
             <View style={[styles.flexRow, styles.mv5, styles.flexWrap, styles.w100]}>
                 <View