diff --git a/.eslintrc.js b/.eslintrc.js
index 35a4a333f8af..1c66876114e7 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -79,6 +79,7 @@ module.exports = {
                     },
                 ],
                 curly: 'error',
+                "react/display-name": 'error',
             },
         },
         {
diff --git a/__mocks__/react-native-safe-area-context.js b/__mocks__/react-native-safe-area-context.js
index 4b4af7841c2c..df3700a918a4 100644
--- a/__mocks__/react-native-safe-area-context.js
+++ b/__mocks__/react-native-safe-area-context.js
@@ -20,13 +20,18 @@ function withSafeAreaInsets(WrappedComponent) {
             />
         );
     }
-    return forwardRef((props, ref) => (
+
+    const WithSafeAreaInsetsWithRef = forwardRef((props, ref) => (
         <WithSafeAreaInsets
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
             forwardedRef={ref}
         />
     ));
+    
+    WithSafeAreaInsetsWithRef.displayName = 'WithSafeAreaInsetsWithRef';
+    
+    return WithSafeAreaInsetsWithRef;
 }
 
 const SafeAreaView = View;
diff --git a/src/components/AddressSearch/index.js b/src/components/AddressSearch/index.js
index 3e676b811c16..baa03ecc3ad0 100644
--- a/src/components/AddressSearch/index.js
+++ b/src/components/AddressSearch/index.js
@@ -499,15 +499,17 @@ AddressSearch.propTypes = propTypes;
 AddressSearch.defaultProps = defaultProps;
 AddressSearch.displayName = 'AddressSearch';
 
+const AddressSearchWithRef = React.forwardRef((props, ref) => (
+    <AddressSearch
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        innerRef={ref}
+    />
+));
+
+AddressSearchWithRef.displayName = 'AddressSearchWithRef';
+
 export default compose(
     withNetwork(),
     withLocalize,
-)(
-    React.forwardRef((props, ref) => (
-        <AddressSearch
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            innerRef={ref}
-        />
-    )),
-);
+)(AddressSearchWithRef);
diff --git a/src/components/AmountTextInput.js b/src/components/AmountTextInput.js
index cc2e1e1e872b..d110fe39cd6c 100644
--- a/src/components/AmountTextInput.js
+++ b/src/components/AmountTextInput.js
@@ -64,10 +64,14 @@ AmountTextInput.propTypes = propTypes;
 AmountTextInput.defaultProps = defaultProps;
 AmountTextInput.displayName = 'AmountTextInput';
 
-export default React.forwardRef((props, ref) => (
+const AmountTextInputWithRef = React.forwardRef((props, ref) => (
     <AmountTextInput
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         forwardedRef={ref}
     />
 ));
+
+AmountTextInputWithRef.displayName = 'AmountTextInputWithRef';
+
+export default AmountTextInputWithRef;
diff --git a/src/components/Attachments/AttachmentCarousel/Pager/index.js b/src/components/Attachments/AttachmentCarousel/Pager/index.js
index d10a5abad6b7..e5feaedf63b7 100644
--- a/src/components/Attachments/AttachmentCarousel/Pager/index.js
+++ b/src/components/Attachments/AttachmentCarousel/Pager/index.js
@@ -171,10 +171,14 @@ function AttachmentCarouselPager({
 AttachmentCarouselPager.propTypes = pagerPropTypes;
 AttachmentCarouselPager.defaultProps = pagerDefaultProps;
 
-export default React.forwardRef((props, ref) => (
+const AttachmentCarouselPagerWithRef = React.forwardRef((props, ref) => (
     <AttachmentCarouselPager
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         forwardedRef={ref}
     />
 ));
+
+AttachmentCarouselPagerWithRef.displayName = 'AttachmentCarouselPagerWithRef';
+
+export default AttachmentCarouselPagerWithRef;
diff --git a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.js b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.js
index 40e08d876907..7ba1e51bcdd3 100644
--- a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.js
+++ b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.js
@@ -110,10 +110,14 @@ function BaseAutoCompleteSuggestions(props) {
 BaseAutoCompleteSuggestions.propTypes = propTypes;
 BaseAutoCompleteSuggestions.displayName = 'BaseAutoCompleteSuggestions';
 
-export default React.forwardRef((props, ref) => (
+const BaseAutoCompleteSuggestionsWithRef = React.forwardRef((props, ref) => (
     <BaseAutoCompleteSuggestions
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         forwardedRef={ref}
     />
 ));
+
+BaseAutoCompleteSuggestionsWithRef.displayName = 'BaseAutoCompleteSuggestionsWithRef';
+
+export default BaseAutoCompleteSuggestionsWithRef;
diff --git a/src/components/BaseMiniContextMenuItem.js b/src/components/BaseMiniContextMenuItem.js
index ffbc5ee76d98..cf7ff4d95b07 100644
--- a/src/components/BaseMiniContextMenuItem.js
+++ b/src/components/BaseMiniContextMenuItem.js
@@ -90,10 +90,14 @@ BaseMiniContextMenuItem.propTypes = propTypes;
 BaseMiniContextMenuItem.defaultProps = defaultProps;
 BaseMiniContextMenuItem.displayName = 'BaseMiniContextMenuItem';
 
-export default React.forwardRef((props, ref) => (
+const BaseMiniContextMenuItemWithRef = React.forwardRef((props, ref) => (
     <BaseMiniContextMenuItem
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         innerRef={ref}
     />
 ));
+
+BaseMiniContextMenuItemWithRef.displayName = 'BaseMiniContextMenuItemWithRef';
+
+export default BaseMiniContextMenuItemWithRef;
diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js
index 63c067c93234..5c45475c9e94 100644
--- a/src/components/CheckboxWithLabel.js
+++ b/src/components/CheckboxWithLabel.js
@@ -130,10 +130,14 @@ CheckboxWithLabel.propTypes = propTypes;
 CheckboxWithLabel.defaultProps = defaultProps;
 CheckboxWithLabel.displayName = 'CheckboxWithLabel';
 
-export default React.forwardRef((props, ref) => (
+const CheckboxWithLabelWithRef = React.forwardRef((props, ref) => (
     <CheckboxWithLabel
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         forwardedRef={ref}
     />
 ));
+
+CheckboxWithLabelWithRef.displayName = 'CheckboxWithLabelWithRef';
+
+export default CheckboxWithLabelWithRef;
diff --git a/src/components/Composer/index.android.js b/src/components/Composer/index.android.js
index 1132efa9e50e..d5013e9340e3 100644
--- a/src/components/Composer/index.android.js
+++ b/src/components/Composer/index.android.js
@@ -131,10 +131,14 @@ function Composer({shouldClear, onClear, isDisabled, maxLines, forwardedRef, isC
 Composer.propTypes = propTypes;
 Composer.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => (
+const ComposerWithRef = React.forwardRef((props, ref) => (
     <Composer
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         forwardedRef={ref}
     />
 ));
+
+ComposerWithRef.displayName = 'ComposerWithRef';
+
+export default ComposerWithRef;
diff --git a/src/components/Composer/index.ios.js b/src/components/Composer/index.ios.js
index 0b2c93f6639e..d073ad8287f6 100644
--- a/src/components/Composer/index.ios.js
+++ b/src/components/Composer/index.ios.js
@@ -132,10 +132,14 @@ function Composer({shouldClear, onClear, isDisabled, maxLines, forwardedRef, isC
 Composer.propTypes = propTypes;
 Composer.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => (
+const ComposerWithRef = React.forwardRef((props, ref) => (
     <Composer
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         forwardedRef={ref}
     />
 ));
+
+ComposerWithRef.displayName = 'ComposerWithRef';
+
+export default ComposerWithRef;
diff --git a/src/components/Composer/index.js b/src/components/Composer/index.js
index ad7a84cc1828..df1c76e97d0d 100755
--- a/src/components/Composer/index.js
+++ b/src/components/Composer/index.js
@@ -489,16 +489,18 @@ function Composer({
 Composer.propTypes = propTypes;
 Composer.defaultProps = defaultProps;
 
+const ComposerWithRef = React.forwardRef((props, ref) => (
+    <Composer
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        forwardedRef={ref}
+    />
+));
+
+ComposerWithRef.displayName = 'ComposerWithRef';
+
 export default compose(
     withLocalize,
     withWindowDimensions,
     withNavigation,
-)(
-    React.forwardRef((props, ref) => (
-        <Composer
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            forwardedRef={ref}
-        />
-    )),
-);
+)(ComposerWithRef);
diff --git a/src/components/ContextMenuItem.js b/src/components/ContextMenuItem.js
index 4c740caea78a..010e971784cb 100644
--- a/src/components/ContextMenuItem.js
+++ b/src/components/ContextMenuItem.js
@@ -109,10 +109,14 @@ ContextMenuItem.propTypes = propTypes;
 ContextMenuItem.defaultProps = defaultProps;
 ContextMenuItem.displayName = 'ContextMenuItem';
 
-export default forwardRef((props, ref) => (
+const ContextMenuItemWithRef = forwardRef((props, ref) => (
     <ContextMenuItem
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         innerRef={ref}
     />
 ));
+
+ContextMenuItemWithRef.displayName = 'ContextMenuItemWithRef';
+
+export default ContextMenuItemWithRef;
diff --git a/src/components/CountrySelector.js b/src/components/CountrySelector.js
index 2788f3cea8e3..3dac127b1963 100644
--- a/src/components/CountrySelector.js
+++ b/src/components/CountrySelector.js
@@ -68,10 +68,14 @@ CountrySelector.propTypes = propTypes;
 CountrySelector.defaultProps = defaultProps;
 CountrySelector.displayName = 'CountrySelector';
 
-export default React.forwardRef((props, ref) => (
+const CountrySelectorWithRef = React.forwardRef((props, ref) => (
     <CountrySelector
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         forwardedRef={ref}
     />
 ));
+
+CountrySelectorWithRef.displayName = 'CountrySelectorWithRef';
+
+export default CountrySelectorWithRef;
diff --git a/src/components/DatePicker/index.ios.js b/src/components/DatePicker/index.ios.js
index ef40aecb6f8c..ea53492b34a6 100644
--- a/src/components/DatePicker/index.ios.js
+++ b/src/components/DatePicker/index.ios.js
@@ -138,10 +138,14 @@ DatePicker.displayName = 'DatePicker';
  * locale. Otherwise the spinner would be present in the system locale and it would be weird if it happens
  * that the modal buttons are in one locale (app) while the (spinner) month names are another (system)
  */
-export default React.forwardRef((props, ref) => (
+const DatePickerWithRef = React.forwardRef((props, ref) => (
     <DatePicker
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         innerRef={ref}
     />
 ));
+
+DatePickerWithRef.displayName = 'DatePickerWithRef';
+
+export default DatePickerWithRef;
diff --git a/src/components/DatePicker/index.js b/src/components/DatePicker/index.js
index d14886fd1c59..163f120b8b98 100644
--- a/src/components/DatePicker/index.js
+++ b/src/components/DatePicker/index.js
@@ -77,10 +77,14 @@ DatePicker.displayName = 'DatePicker';
 DatePicker.propTypes = propTypes;
 DatePicker.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => (
+const DatePickerWithRef = React.forwardRef((props, ref) => (
     <DatePicker
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         innerRef={ref}
     />
 ));
+
+DatePickerWithRef.displayName = 'DatePickerWithRef';
+
+export default DatePickerWithRef;
diff --git a/src/components/EmojiPicker/EmojiPickerButtonDropdown.js b/src/components/EmojiPicker/EmojiPickerButtonDropdown.js
index 0dc967d257d2..a1a22d8c50dd 100644
--- a/src/components/EmojiPicker/EmojiPickerButtonDropdown.js
+++ b/src/components/EmojiPicker/EmojiPickerButtonDropdown.js
@@ -76,12 +76,15 @@ function EmojiPickerButtonDropdown(props) {
 EmojiPickerButtonDropdown.propTypes = propTypes;
 EmojiPickerButtonDropdown.defaultProps = defaultProps;
 EmojiPickerButtonDropdown.displayName = 'EmojiPickerButtonDropdown';
-export default withLocalize(
-    React.forwardRef((props, ref) => (
-        <EmojiPickerButtonDropdown
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            forwardedRef={ref}
-        />
-    )),
-);
+
+const EmojiPickerButtonDropdownWithRef = React.forwardRef((props, ref) => (
+    <EmojiPickerButtonDropdown
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        forwardedRef={ref}
+    />
+));
+
+EmojiPickerButtonDropdownWithRef.displayName = 'EmojiPickerButtonDropdownWithRef';
+
+export default withLocalize(EmojiPickerButtonDropdownWithRef);
diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js
index aea3b0f5b984..48daa983b5b0 100755
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.js
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js
@@ -526,6 +526,16 @@ function EmojiPickerMenu(props) {
 EmojiPickerMenu.propTypes = propTypes;
 EmojiPickerMenu.defaultProps = defaultProps;
 
+const EmojiPickerMenuWithRef = React.forwardRef((props, ref) => (
+    <EmojiPickerMenu
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        forwardedRef={ref}
+    />
+));
+
+EmojiPickerMenuWithRef.displayName = 'EmojiPickerMenuWithRef';
+
 export default compose(
     withLocalize,
     withOnyx({
@@ -536,12 +546,4 @@ export default compose(
             key: ONYXKEYS.FREQUENTLY_USED_EMOJIS,
         },
     }),
-)(
-    React.forwardRef((props, ref) => (
-        <EmojiPickerMenu
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            forwardedRef={ref}
-        />
-    )),
-);
+)(EmojiPickerMenuWithRef);
diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.native.js b/src/components/EmojiPicker/EmojiPickerMenu/index.native.js
index fe8c3e275ad2..b54b67294d40 100644
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.native.js
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.native.js
@@ -201,6 +201,16 @@ EmojiPickerMenu.displayName = 'EmojiPickerMenu';
 EmojiPickerMenu.propTypes = propTypes;
 EmojiPickerMenu.defaultProps = defaultProps;
 
+const EmojiPickerMenuWithRef = React.forwardRef((props, ref) => (
+    <EmojiPickerMenu
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        forwardedRef={ref}
+    />
+));
+
+EmojiPickerMenuWithRef.displayName = 'EmojiPickerMenuWithRef';
+
 export default compose(
     withLocalize,
     withOnyx({
@@ -211,12 +221,4 @@ export default compose(
             key: ONYXKEYS.FREQUENTLY_USED_EMOJIS,
         },
     }),
-)(
-    React.forwardRef((props, ref) => (
-        <EmojiPickerMenu
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            forwardedRef={ref}
-        />
-    )),
-);
+)(EmojiPickerMenuWithRef);
diff --git a/src/components/FlatList/index.android.js b/src/components/FlatList/index.android.js
index 8763488cf180..d047124da914 100644
--- a/src/components/FlatList/index.android.js
+++ b/src/components/FlatList/index.android.js
@@ -65,10 +65,14 @@ function CustomFlatList(props) {
 CustomFlatList.propTypes = propTypes;
 CustomFlatList.defaultProps = defaultProps;
 
-export default forwardRef((props, ref) => (
+const CustomFlatListWithRef = forwardRef((props, ref) => (
     <CustomFlatList
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         innerRef={ref}
     />
 ));
+
+CustomFlatListWithRef.displayName = 'CustomFlatListWithRef';
+
+export default CustomFlatListWithRef;
diff --git a/src/components/FloatingActionButton.js b/src/components/FloatingActionButton.js
index ef97cd1822a2..947acf801f19 100644
--- a/src/components/FloatingActionButton.js
+++ b/src/components/FloatingActionButton.js
@@ -118,10 +118,14 @@ FloatingActionButton.defaultProps = defaultProps;
 
 const FloatingActionButtonWithLocalize = withLocalize(FloatingActionButton);
 
-export default React.forwardRef((props, ref) => (
+const FloatingActionButtonWithLocalizeWithRef = React.forwardRef((props, ref) => (
     <FloatingActionButtonWithLocalize
         // eslint-disable-next-line
         {...props}
         buttonRef={ref}
     />
 ));
+
+FloatingActionButtonWithLocalizeWithRef.displayName = 'FloatingActionButtonWithLocalizeWithRef';
+
+export default FloatingActionButtonWithLocalizeWithRef;
diff --git a/src/components/Form/InputWrapper.js b/src/components/Form/InputWrapper.js
index 43064b5a6690..8a87bc2f5a5a 100644
--- a/src/components/Form/InputWrapper.js
+++ b/src/components/Form/InputWrapper.js
@@ -25,10 +25,14 @@ InputWrapper.propTypes = propTypes;
 InputWrapper.defaultProps = defaultProps;
 InputWrapper.displayName = 'InputWrapper';
 
-export default forwardRef((props, ref) => (
+const InputWrapperWithRef = forwardRef((props, ref) => (
     <InputWrapper
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         forwardedRef={ref}
     />
 ));
+
+InputWrapperWithRef.displayName = 'InputWrapperWithRef';
+
+export default InputWrapperWithRef;
diff --git a/src/components/FormScrollView.js b/src/components/FormScrollView.js
index aa84bfefcc2f..b52c8d00c51a 100644
--- a/src/components/FormScrollView.js
+++ b/src/components/FormScrollView.js
@@ -8,7 +8,7 @@ const propTypes = {
     children: PropTypes.node.isRequired,
 };
 
-const FormScrollView = React.forwardRef((props, ref) => (
+const FormScrollViewWithRef = React.forwardRef((props, ref) => (
     <ScrollView
         style={[styles.w100, styles.flex1]}
         ref={ref}
@@ -21,5 +21,6 @@ const FormScrollView = React.forwardRef((props, ref) => (
     </ScrollView>
 ));
 
-FormScrollView.propTypes = propTypes;
-export default FormScrollView;
+FormScrollViewWithRef.displayName = 'FormScrollViewWithRef';
+FormScrollViewWithRef.propTypes = propTypes;
+export default FormScrollViewWithRef;
diff --git a/src/components/FormSubmit/index.js b/src/components/FormSubmit/index.js
index 7f76f77fe549..343f23bc1087 100644
--- a/src/components/FormSubmit/index.js
+++ b/src/components/FormSubmit/index.js
@@ -75,10 +75,14 @@ function FormSubmit({innerRef, children, onSubmit, style}) {
 FormSubmit.propTypes = formSubmitPropTypes.propTypes;
 FormSubmit.defaultProps = formSubmitPropTypes.defaultProps;
 
-export default React.forwardRef((props, ref) => (
+const FormSubmitWithRef = React.forwardRef((props, ref) => (
     <FormSubmit
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         innerRef={ref}
     />
 ));
+
+FormSubmitWithRef.displayName = 'FormSubmitWithRef';
+
+export default FormSubmitWithRef;
diff --git a/src/components/InvertedFlatList/BaseInvertedFlatList.js b/src/components/InvertedFlatList/BaseInvertedFlatList.js
index 92543dbf719a..baee08eae4cd 100644
--- a/src/components/InvertedFlatList/BaseInvertedFlatList.js
+++ b/src/components/InvertedFlatList/BaseInvertedFlatList.js
@@ -145,10 +145,14 @@ BaseInvertedFlatList.propTypes = propTypes;
 BaseInvertedFlatList.defaultProps = defaultProps;
 BaseInvertedFlatList.displayName = 'BaseInvertedFlatList';
 
-export default forwardRef((props, ref) => (
+const BaseInvertedFlatListWithRef = forwardRef((props, ref) => (
     <BaseInvertedFlatList
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         innerRef={ref}
     />
 ));
+
+BaseInvertedFlatListWithRef.displayName = 'BaseInvertedFlatListWithRef';
+
+export default BaseInvertedFlatListWithRef;
diff --git a/src/components/InvertedFlatList/index.js b/src/components/InvertedFlatList/index.js
index 564db6296c9b..d328ca93575b 100644
--- a/src/components/InvertedFlatList/index.js
+++ b/src/components/InvertedFlatList/index.js
@@ -131,10 +131,14 @@ InvertedFlatList.defaultProps = {
     onScroll: () => {},
 };
 
-export default forwardRef((props, ref) => (
+const InvertedFlatListWithRef = forwardRef((props, ref) => (
     <InvertedFlatList
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         innerRef={ref}
     />
 ));
+
+InvertedFlatListWithRef.displayName = 'InvertedFlatListWithRef';
+
+export default InvertedFlatListWithRef;
diff --git a/src/components/InvertedFlatList/index.native.js b/src/components/InvertedFlatList/index.native.js
index ece86032d80b..8473b602d45f 100644
--- a/src/components/InvertedFlatList/index.native.js
+++ b/src/components/InvertedFlatList/index.native.js
@@ -2,7 +2,7 @@ import React, {forwardRef} from 'react';
 import BaseInvertedFlatList from './BaseInvertedFlatList';
 import CellRendererComponent from './CellRendererComponent';
 
-export default forwardRef((props, ref) => (
+const BaseInvertedFlatListWithRef = forwardRef((props, ref) => (
     <BaseInvertedFlatList
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
@@ -16,3 +16,7 @@ export default forwardRef((props, ref) => (
         removeClippedSubviews={false}
     />
 ));
+
+BaseInvertedFlatListWithRef.displayName = 'BaseInvertedFlatListWithRef';
+
+export default BaseInvertedFlatListWithRef;
diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js
index 3a9cc6845194..8b68d37d9c74 100644
--- a/src/components/MagicCodeInput.js
+++ b/src/components/MagicCodeInput.js
@@ -356,12 +356,14 @@ function MagicCodeInput(props) {
 MagicCodeInput.propTypes = propTypes;
 MagicCodeInput.defaultProps = defaultProps;
 
-export default withNetwork()(
-    forwardRef((props, ref) => (
-        <MagicCodeInput
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            innerRef={ref}
-        />
-    )),
-);
+const MagicCodeInputWithRef = forwardRef((props, ref) => (
+    <MagicCodeInput
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        innerRef={ref}
+    />
+));
+
+MagicCodeInputWithRef.displayName = 'MagicCodeInputWithRef';
+
+export default withNetwork()(MagicCodeInputWithRef);
diff --git a/src/components/MenuItemWithTopDescription.js b/src/components/MenuItemWithTopDescription.js
index ee51d2f41ccd..94f44a1869b6 100644
--- a/src/components/MenuItemWithTopDescription.js
+++ b/src/components/MenuItemWithTopDescription.js
@@ -19,10 +19,14 @@ function MenuItemWithTopDescription(props) {
 MenuItemWithTopDescription.propTypes = propTypes;
 MenuItemWithTopDescription.displayName = 'MenuItemWithTopDescription';
 
-export default React.forwardRef((props, ref) => (
+const MenuItemWithTopDescriptionWithRef = React.forwardRef((props, ref) => (
     <MenuItemWithTopDescription
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         forwardedRef={ref}
     />
 ));
+
+MenuItemWithTopDescriptionWithRef.displayName = 'MenuItemWithTopDescriptionWithRef';
+
+export default MenuItemWithTopDescriptionWithRef;
diff --git a/src/components/Modal/BaseModal.js b/src/components/Modal/BaseModal.js
index 051c4ba3f80a..d1a906efc951 100644
--- a/src/components/Modal/BaseModal.js
+++ b/src/components/Modal/BaseModal.js
@@ -219,10 +219,14 @@ BaseModal.propTypes = propTypes;
 BaseModal.defaultProps = defaultProps;
 BaseModal.displayName = 'BaseModal';
 
-export default forwardRef((props, ref) => (
+const BaseModalWithRef = forwardRef((props, ref) => (
     <BaseModal
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         forwardedRef={ref}
     />
 ));
+
+BaseModalWithRef.displayName = 'BaseModalWithRef';
+
+export default BaseModalWithRef;
diff --git a/src/components/OptionsList/index.js b/src/components/OptionsList/index.js
index 2164b479df94..017d9c23d9ae 100644
--- a/src/components/OptionsList/index.js
+++ b/src/components/OptionsList/index.js
@@ -54,12 +54,14 @@ OptionsList.displayName = 'OptionsList';
 OptionsList.propTypes = propTypes;
 OptionsList.defaultProps = defaultProps;
 
-export default withWindowDimensions(
-    forwardRef((props, ref) => (
-        <OptionsList
-            forwardedRef={ref}
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-        />
-    )),
-);
+const OptionsListWithRef = forwardRef((props, ref) => (
+    <OptionsList
+        forwardedRef={ref}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+    />
+));
+
+OptionsListWithRef.displayName = 'OptionsListWithRef';
+
+export default withWindowDimensions(OptionsListWithRef);
diff --git a/src/components/Picker/BasePicker.js b/src/components/Picker/BasePicker.js
index 697dfc509d22..c69adec097cf 100644
--- a/src/components/Picker/BasePicker.js
+++ b/src/components/Picker/BasePicker.js
@@ -283,7 +283,7 @@ BasePicker.propTypes = propTypes;
 BasePicker.defaultProps = defaultProps;
 BasePicker.displayName = 'BasePicker';
 
-export default React.forwardRef((props, ref) => (
+const BasePickerWithRef = React.forwardRef((props, ref) => (
     <BasePicker
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
@@ -293,3 +293,7 @@ export default React.forwardRef((props, ref) => (
         key={props.inputID}
     />
 ));
+
+BasePickerWithRef.displayName = 'BasePickerWithRef';
+
+export default BasePickerWithRef;
diff --git a/src/components/Picker/index.js b/src/components/Picker/index.js
index d0a6a4911880..8e49a42e8932 100644
--- a/src/components/Picker/index.js
+++ b/src/components/Picker/index.js
@@ -13,7 +13,7 @@ const additionalPickerEvents = (onMouseDown, onChange) => ({
     },
 });
 
-export default forwardRef((props, ref) => (
+const BasePickerWithRef = forwardRef((props, ref) => (
     <BasePicker
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
@@ -26,3 +26,7 @@ export default forwardRef((props, ref) => (
         additionalPickerEvents={additionalPickerEvents}
     />
 ));
+
+BasePickerWithRef.displayName = 'BasePickerWithRef';
+
+export default BasePickerWithRef;
diff --git a/src/components/Picker/index.native.js b/src/components/Picker/index.native.js
index 4032e79b6d17..f441609fd4d0 100644
--- a/src/components/Picker/index.native.js
+++ b/src/components/Picker/index.native.js
@@ -1,10 +1,14 @@
 import React, {forwardRef} from 'react';
 import BasePicker from './BasePicker';
 
-export default forwardRef((props, ref) => (
+const BasePickerWithRef = forwardRef((props, ref) => (
     <BasePicker
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         ref={ref}
     />
 ));
+
+BasePickerWithRef.displayName = 'BasePickerWithRef';
+
+export default BasePickerWithRef;
diff --git a/src/components/Pressable/GenericPressable/index.js b/src/components/Pressable/GenericPressable/index.js
index 774ac3ac5092..8247d0c35670 100644
--- a/src/components/Pressable/GenericPressable/index.js
+++ b/src/components/Pressable/GenericPressable/index.js
@@ -21,5 +21,6 @@ const WebGenericPressable = forwardRef((props, ref) => (
 
 WebGenericPressable.propTypes = GenericPressablePropTypes.pressablePropTypes;
 WebGenericPressable.defaultProps = GenericPressablePropTypes.defaultProps;
+WebGenericPressable.displayName = 'WebGenericPressable';
 
 export default WebGenericPressable;
diff --git a/src/components/Pressable/GenericPressable/index.native.js b/src/components/Pressable/GenericPressable/index.native.js
index 3de74eda35de..14a2c2bcbf82 100644
--- a/src/components/Pressable/GenericPressable/index.native.js
+++ b/src/components/Pressable/GenericPressable/index.native.js
@@ -15,5 +15,6 @@ const NativeGenericPressable = forwardRef((props, ref) => (
 
 NativeGenericPressable.propTypes = GenericPressablePropTypes.pressablePropTypes;
 NativeGenericPressable.defaultProps = GenericPressablePropTypes.defaultProps;
+NativeGenericPressable.displayName = 'WebGenericPressable';
 
 export default NativeGenericPressable;
diff --git a/src/components/Pressable/PressableWithDelayToggle.js b/src/components/Pressable/PressableWithDelayToggle.js
index b55770a63196..c56ab49382b4 100644
--- a/src/components/Pressable/PressableWithDelayToggle.js
+++ b/src/components/Pressable/PressableWithDelayToggle.js
@@ -141,10 +141,14 @@ function PressableWithDelayToggle(props) {
 PressableWithDelayToggle.propTypes = propTypes;
 PressableWithDelayToggle.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => (
+const PressableWithDelayToggleWithRef = React.forwardRef((props, ref) => (
     <PressableWithDelayToggle
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         innerRef={ref}
     />
 ));
+
+PressableWithDelayToggleWithRef.displayName = 'PressableWithDelayToggleWithRef';
+
+export default PressableWithDelayToggleWithRef;
diff --git a/src/components/PressableWithSecondaryInteraction/index.js b/src/components/PressableWithSecondaryInteraction/index.js
index d84a3f282e97..7eb6f7ca376b 100644
--- a/src/components/PressableWithSecondaryInteraction/index.js
+++ b/src/components/PressableWithSecondaryInteraction/index.js
@@ -117,10 +117,14 @@ PressableWithSecondaryInteraction.propTypes = pressableWithSecondaryInteractionP
 PressableWithSecondaryInteraction.defaultProps = pressableWithSecondaryInteractionPropTypes.defaultProps;
 PressableWithSecondaryInteraction.displayName = 'PressableWithSecondaryInteraction';
 
-export default forwardRef((props, ref) => (
+const PressableWithSecondaryInteractionWithRef = forwardRef((props, ref) => (
     <PressableWithSecondaryInteraction
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         forwardedRef={ref}
     />
 ));
+
+PressableWithSecondaryInteractionWithRef.displayName = 'PressableWithSecondaryInteractionWithRef';
+
+export default PressableWithSecondaryInteractionWithRef;
diff --git a/src/components/PressableWithSecondaryInteraction/index.native.js b/src/components/PressableWithSecondaryInteraction/index.native.js
index 0ca668bb4234..1b6690ad2f33 100644
--- a/src/components/PressableWithSecondaryInteraction/index.native.js
+++ b/src/components/PressableWithSecondaryInteraction/index.native.js
@@ -38,10 +38,14 @@ PressableWithSecondaryInteraction.propTypes = pressableWithSecondaryInteractionP
 PressableWithSecondaryInteraction.defaultProps = pressableWithSecondaryInteractionPropTypes.defaultProps;
 PressableWithSecondaryInteraction.displayName = 'PressableWithSecondaryInteraction';
 
-export default forwardRef((props, ref) => (
+const PressableWithSecondaryInteractionWithRef = forwardRef((props, ref) => (
     <PressableWithSecondaryInteraction
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         forwardedRef={ref}
     />
 ));
+
+PressableWithSecondaryInteractionWithRef.displayName = 'PressableWithSecondaryInteractionWithRef';
+
+export default PressableWithSecondaryInteractionWithRef;
diff --git a/src/components/RNTextInput.js b/src/components/RNTextInput.js
index 5a790cde91d7..30815376ca8c 100644
--- a/src/components/RNTextInput.js
+++ b/src/components/RNTextInput.js
@@ -38,10 +38,14 @@ RNTextInput.propTypes = propTypes;
 RNTextInput.defaultProps = defaultProps;
 RNTextInput.displayName = 'RNTextInput';
 
-export default React.forwardRef((props, ref) => (
+const RNTextInputWithRef = React.forwardRef((props, ref) => (
     <RNTextInput
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         forwardedRef={ref}
     />
 ));
+
+RNTextInputWithRef.displayName = 'RNTextInputWithRef';
+
+export default RNTextInputWithRef;
diff --git a/src/components/Reactions/EmojiReactionBubble.js b/src/components/Reactions/EmojiReactionBubble.js
index 818bc8f33309..3e40216bd870 100644
--- a/src/components/Reactions/EmojiReactionBubble.js
+++ b/src/components/Reactions/EmojiReactionBubble.js
@@ -96,12 +96,14 @@ EmojiReactionBubble.propTypes = propTypes;
 EmojiReactionBubble.defaultProps = defaultProps;
 EmojiReactionBubble.displayName = 'EmojiReactionBubble';
 
-export default withWindowDimensions(
-    React.forwardRef((props, ref) => (
-        <EmojiReactionBubble
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            forwardedRef={ref}
-        />
-    )),
-);
+const EmojiReactionBubbleWithRef = React.forwardRef((props, ref) => (
+    <EmojiReactionBubble
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        forwardedRef={ref}
+    />
+));
+
+EmojiReactionBubbleWithRef.displayName = 'EmojiReactionBubbleWithRef';
+
+export default withWindowDimensions(EmojiReactionBubbleWithRef);
diff --git a/src/components/RoomNameInput/index.js b/src/components/RoomNameInput/index.js
index 37d131108e9e..ec9bf7a090ab 100644
--- a/src/components/RoomNameInput/index.js
+++ b/src/components/RoomNameInput/index.js
@@ -71,10 +71,14 @@ RoomNameInput.propTypes = roomNameInputPropTypes.propTypes;
 RoomNameInput.defaultProps = roomNameInputPropTypes.defaultProps;
 RoomNameInput.displayName = 'RoomNameInput';
 
-export default React.forwardRef((props, ref) => (
+const RoomNameInputWithRef = React.forwardRef((props, ref) => (
     <RoomNameInput
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         forwardedRef={ref}
     />
 ));
+
+RoomNameInputWithRef.displayName = 'RoomNameInputWithRef';
+
+export default RoomNameInputWithRef;
diff --git a/src/components/RoomNameInput/index.native.js b/src/components/RoomNameInput/index.native.js
index 78500a8f0be2..9e83a673982c 100644
--- a/src/components/RoomNameInput/index.native.js
+++ b/src/components/RoomNameInput/index.native.js
@@ -53,10 +53,14 @@ RoomNameInput.propTypes = roomNameInputPropTypes.propTypes;
 RoomNameInput.defaultProps = roomNameInputPropTypes.defaultProps;
 RoomNameInput.displayName = 'RoomNameInput';
 
-export default React.forwardRef((props, ref) => (
+const RoomNameInputWithRef = React.forwardRef((props, ref) => (
     <RoomNameInput
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         forwardedRef={ref}
     />
 ));
+
+RoomNameInputWithRef.displayName = 'RoomNameInputWithRef';
+
+export default RoomNameInputWithRef;
diff --git a/src/components/ScrollViewWithContext.js b/src/components/ScrollViewWithContext.js
index 1d183e250767..01018601a781 100644
--- a/src/components/ScrollViewWithContext.js
+++ b/src/components/ScrollViewWithContext.js
@@ -51,11 +51,15 @@ function ScrollViewWithContext({onScroll, scrollEventThrottle, children, innerRe
 ScrollViewWithContext.propTypes = propTypes;
 ScrollViewWithContext.displayName = 'ScrollViewWithContext';
 
-export default React.forwardRef((props, ref) => (
+const ScrollViewWithContextWithRef = React.forwardRef((props, ref) => (
     <ScrollViewWithContext
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         innerRef={ref}
     />
 ));
+
+ScrollViewWithContextWithRef.displayName = 'ScrollViewWithContextWithRef';
+
+export default ScrollViewWithContextWithRef;
 export {ScrollContext};
diff --git a/src/components/SectionList/index.android.js b/src/components/SectionList/index.android.js
index 7fc74277a281..d214e1748bf4 100644
--- a/src/components/SectionList/index.android.js
+++ b/src/components/SectionList/index.android.js
@@ -1,7 +1,7 @@
 import React, {forwardRef} from 'react';
 import {SectionList} from 'react-native';
 
-export default forwardRef((props, ref) => (
+const SectionListWithRef = forwardRef((props, ref) => (
     <SectionList
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
@@ -12,3 +12,7 @@ export default forwardRef((props, ref) => (
         removeClippedSubviews
     />
 ));
+
+SectionListWithRef.displayName = 'SectionListWithRef';
+
+export default SectionListWithRef;
diff --git a/src/components/StatePicker/index.js b/src/components/StatePicker/index.js
index f7f894af2a07..586abc26f702 100644
--- a/src/components/StatePicker/index.js
+++ b/src/components/StatePicker/index.js
@@ -88,10 +88,14 @@ StatePicker.propTypes = propTypes;
 StatePicker.defaultProps = defaultProps;
 StatePicker.displayName = 'StatePicker';
 
-export default React.forwardRef((props, ref) => (
+const StatePickerWithRef = React.forwardRef((props, ref) => (
     <StatePicker
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         forwardedRef={ref}
     />
 ));
+
+StatePickerWithRef.displayName = 'StatePickerWithRef';
+
+export default StatePickerWithRef;
diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js
index 6cefe04e71a1..010121282a45 100644
--- a/src/components/TextInput/index.js
+++ b/src/components/TextInput/index.js
@@ -73,10 +73,14 @@ TextInput.displayName = 'TextInput';
 TextInput.propTypes = baseTextInputPropTypes.propTypes;
 TextInput.defaultProps = baseTextInputPropTypes.defaultProps;
 
-export default React.forwardRef((props, ref) => (
+const TextInputWithRef = React.forwardRef((props, ref) => (
     <TextInput
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         innerRef={ref}
     />
 ));
+
+TextInputWithRef.displayName = 'TextInputWithRef';
+
+export default TextInputWithRef;
diff --git a/src/components/TextInputWithCurrencySymbol/BaseTextInputWithCurrencySymbol.js b/src/components/TextInputWithCurrencySymbol/BaseTextInputWithCurrencySymbol.js
index 6dd1aacb0b09..ac0f4ccbe143 100644
--- a/src/components/TextInputWithCurrencySymbol/BaseTextInputWithCurrencySymbol.js
+++ b/src/components/TextInputWithCurrencySymbol/BaseTextInputWithCurrencySymbol.js
@@ -63,10 +63,14 @@ BaseTextInputWithCurrencySymbol.propTypes = textInputWithCurrencySymbolPropTypes
 BaseTextInputWithCurrencySymbol.defaultProps = textInputWithCurrencySymbolPropTypes.defaultProps;
 BaseTextInputWithCurrencySymbol.displayName = 'BaseTextInputWithCurrencySymbol';
 
-export default React.forwardRef((props, ref) => (
+const BaseTextInputWithCurrencySymbolWithRef = React.forwardRef((props, ref) => (
     <BaseTextInputWithCurrencySymbol
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         forwardedRef={ref}
     />
 ));
+
+BaseTextInputWithCurrencySymbolWithRef.displayName = 'BaseTextInputWithCurrencySymbolWithRef';
+
+export default BaseTextInputWithCurrencySymbolWithRef;
diff --git a/src/components/TextInputWithCurrencySymbol/index.android.js b/src/components/TextInputWithCurrencySymbol/index.android.js
index e597566d6ffd..57b3c96136e8 100644
--- a/src/components/TextInputWithCurrencySymbol/index.android.js
+++ b/src/components/TextInputWithCurrencySymbol/index.android.js
@@ -30,10 +30,14 @@ TextInputWithCurrencySymbol.propTypes = textInputWithCurrencySymbolPropTypes.pro
 TextInputWithCurrencySymbol.defaultProps = textInputWithCurrencySymbolPropTypes.defaultProps;
 TextInputWithCurrencySymbol.displayName = 'TextInputWithCurrencySymbol';
 
-export default React.forwardRef((props, ref) => (
+const TextInputWithCurrencySymbolWithRef = React.forwardRef((props, ref) => (
     <TextInputWithCurrencySymbol
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         forwardedRef={ref}
     />
 ));
+
+TextInputWithCurrencySymbolWithRef.displayName = 'TextInputWithCurrencySymbolWithRef';
+
+export default TextInputWithCurrencySymbolWithRef;
diff --git a/src/components/TextInputWithCurrencySymbol/index.js b/src/components/TextInputWithCurrencySymbol/index.js
index f70134a2e0eb..2102882a74a3 100644
--- a/src/components/TextInputWithCurrencySymbol/index.js
+++ b/src/components/TextInputWithCurrencySymbol/index.js
@@ -17,10 +17,14 @@ TextInputWithCurrencySymbol.propTypes = textInputWithCurrencySymbolPropTypes.pro
 TextInputWithCurrencySymbol.defaultProps = textInputWithCurrencySymbolPropTypes.defaultProps;
 TextInputWithCurrencySymbol.displayName = 'TextInputWithCurrencySymbol';
 
-export default React.forwardRef((props, ref) => (
+const TextInputWithCurrencySymbolWithRef = React.forwardRef((props, ref) => (
     <TextInputWithCurrencySymbol
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         forwardedRef={ref}
     />
 ));
+
+TextInputWithCurrencySymbolWithRef.displayName = 'TextInputWithCurrencySymbolWithRef';
+
+export default TextInputWithCurrencySymbolWithRef;
diff --git a/src/components/TextLink.js b/src/components/TextLink.js
index 233aaf50644e..3f7b7ff729c3 100644
--- a/src/components/TextLink.js
+++ b/src/components/TextLink.js
@@ -84,10 +84,15 @@ function TextLink(props) {
 TextLink.defaultProps = defaultProps;
 TextLink.propTypes = propTypes;
 TextLink.displayName = 'TextLink';
-export default React.forwardRef((props, ref) => (
+
+const TextLinkWithRef = React.forwardRef((props, ref) => (
     <TextLink
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         forwardedRef={ref}
     />
 ));
+
+TextLinkWithRef.displayName = 'TextLinkWithRef';
+
+export default TextLinkWithRef;
diff --git a/src/components/ValuePicker/index.js b/src/components/ValuePicker/index.js
index 161fbbfadb8b..ce248baf707e 100644
--- a/src/components/ValuePicker/index.js
+++ b/src/components/ValuePicker/index.js
@@ -93,10 +93,14 @@ ValuePicker.propTypes = propTypes;
 ValuePicker.defaultProps = defaultProps;
 ValuePicker.displayName = 'ValuePicker';
 
-export default React.forwardRef((props, ref) => (
+const ValuePickerWithRef = React.forwardRef((props, ref) => (
     <ValuePicker
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         forwardedRef={ref}
     />
 ));
+
+ValuePickerWithRef.displayName = 'ValuePickerWithRef';
+
+export default ValuePickerWithRef;
diff --git a/src/components/withAnimatedRef.js b/src/components/withAnimatedRef.js
index 71ef130b9ce7..6471bcb24887 100644
--- a/src/components/withAnimatedRef.js
+++ b/src/components/withAnimatedRef.js
@@ -23,11 +23,15 @@ export default function withAnimatedRef(WrappedComponent) {
         forwardedRef: undefined,
     };
 
-    return React.forwardRef((props, ref) => (
+    const WithAnimatedRefWithRef = React.forwardRef((props, ref) => (
         <WithAnimatedRef
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
             forwardedRef={ref}
         />
     ));
+    
+    WithAnimatedRefWithRef.displayName = 'WithAnimatedRefWithRef';
+
+    return WithAnimatedRefWithRef;
 }
diff --git a/src/components/withNavigationFallback.js b/src/components/withNavigationFallback.js
index e82946c9e049..55f1272da37d 100644
--- a/src/components/withNavigationFallback.js
+++ b/src/components/withNavigationFallback.js
@@ -33,11 +33,15 @@ export default function (WrappedComponent) {
         forwardedRef: undefined,
     };
 
-    return forwardRef((props, ref) => (
+    const WithNavigationFallbackWithRef = forwardRef((props, ref) => (
         <WithNavigationFallback
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
             forwardedRef={ref}
         />
     ));
+    
+    WithNavigationFallbackWithRef.displayName = `WithNavigationFallbackWithRef`;
+
+    return WithNavigationFallbackWithRef;
 }
diff --git a/src/components/withTheme.js b/src/components/withTheme.js
index 99de2a2c7fc7..b9ff76909300 100644
--- a/src/components/withTheme.js
+++ b/src/components/withTheme.js
@@ -28,13 +28,18 @@ export default function withTheme(WrappedComponent) {
     WithTheme.defaultProps = {
         forwardedRef: () => {},
     };
-    return React.forwardRef((props, ref) => (
+
+    const WithThemeWithRef = React.forwardRef((props, ref) => (
         <WithTheme
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
             forwardedRef={ref}
         />
     ));
+    
+    WithThemeWithRef.displayName = `WithThemeWithRef`;
+
+    return WithThemeWithRef;
 }
 
 export {withThemePropTypes};
diff --git a/src/components/withThemeStyles.js b/src/components/withThemeStyles.js
index 0320fcb71808..5a8f6ccaa047 100644
--- a/src/components/withThemeStyles.js
+++ b/src/components/withThemeStyles.js
@@ -28,13 +28,18 @@ export default function withThemeStyles(WrappedComponent) {
     WithThemeStyles.defaultProps = {
         forwardedRef: () => {},
     };
-    return React.forwardRef((props, ref) => (
+    
+    const WithThemeStylesWithRef = React.forwardRef((props, ref) => (
         <WithThemeStyles
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
             forwardedRef={ref}
         />
     ));
+    
+    WithThemeStylesWithRef.displayName = `WithThemeStylesWithRef`;
+    
+    return WithThemeStylesWithRef;
 }
 
 export {withThemeStylesPropTypes};
diff --git a/src/components/withToggleVisibilityView.js b/src/components/withToggleVisibilityView.js
index eef5135d02b6..99bf02ac084e 100644
--- a/src/components/withToggleVisibilityView.js
+++ b/src/components/withToggleVisibilityView.js
@@ -35,13 +35,18 @@ export default function (WrappedComponent) {
         forwardedRef: undefined,
         isVisible: false,
     };
-    return React.forwardRef((props, ref) => (
+
+    const WithToggleVisibilityViewWithRef = React.forwardRef((props, ref) => (
         <WithToggleVisibilityView
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
             forwardedRef={ref}
         />
     ));
+    
+    WithToggleVisibilityViewWithRef.displayName = `WithToggleVisibilityViewWithRef`;
+
+    return WithToggleVisibilityViewWithRef;
 }
 
 export {toggleVisibilityViewPropTypes};
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
index cfc8f815e4fe..088da657a693 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
@@ -18,17 +18,24 @@ const defaultSubRouteOptions = {
  */
 function createModalStackNavigator(screens) {
     const ModalStackNavigator = createStackNavigator();
-    return () => (
-        <ModalStackNavigator.Navigator screenOptions={defaultSubRouteOptions}>
-            {_.map(screens, (getComponent, name) => (
-                <ModalStackNavigator.Screen
-                    key={name}
-                    name={name}
-                    getComponent={getComponent}
-                />
-            ))}
-        </ModalStackNavigator.Navigator>
-    );
+
+    function ModalStack() {
+        return (
+            <ModalStackNavigator.Navigator screenOptions={defaultSubRouteOptions}>
+                {_.map(screens, (getComponent, name) => (
+                    <ModalStackNavigator.Screen
+                        key={name}
+                        name={name}
+                        getComponent={getComponent}
+                    />
+                ))}
+            </ModalStackNavigator.Navigator>
+        );
+    }
+
+    ModalStack.displayName = 'ModalStack';
+
+    return ModalStack;
 }
 
 const MoneyRequestModalStackNavigator = createModalStackNavigator({
diff --git a/src/pages/AddPersonalBankAccountPage.js b/src/pages/AddPersonalBankAccountPage.js
index cb53623caa8c..3e7b2ef214e0 100644
--- a/src/pages/AddPersonalBankAccountPage.js
+++ b/src/pages/AddPersonalBankAccountPage.js
@@ -136,6 +136,7 @@ function AddPersonalBankAccountPage({personalBankAccount, plaidData}) {
 AddPersonalBankAccountPage.displayName = 'AddPersonalBankAccountPage';
 AddPersonalBankAccountPage.propTypes = propTypes;
 AddPersonalBankAccountPage.defaultProps = defaultProps;
+AddPersonalBankAccountPage.displayName = 'AddPersonalBankAccountPage';
 
 export default withOnyx({
     personalBankAccount: {
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
index 398a6a7c6c93..2b3127f31168 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
@@ -534,6 +534,7 @@ class ReimbursementAccountPage extends React.Component {
 
 ReimbursementAccountPage.propTypes = propTypes;
 ReimbursementAccountPage.defaultProps = defaultProps;
+ReimbursementAccountPage.displayName = 'ReimbursementAccountPage';
 
 export default compose(
     withNetwork(),
diff --git a/src/pages/ReimbursementAccount/RequestorOnfidoStep.js b/src/pages/ReimbursementAccount/RequestorOnfidoStep.js
index 474698c1e2b2..86cf7ae71aa8 100644
--- a/src/pages/ReimbursementAccount/RequestorOnfidoStep.js
+++ b/src/pages/ReimbursementAccount/RequestorOnfidoStep.js
@@ -83,6 +83,7 @@ function RequestorOnfidoStep({onBackButtonPress, reimbursementAccount, onfidoTok
 RequestorOnfidoStep.displayName = 'RequestorOnfidoStep';
 RequestorOnfidoStep.propTypes = propTypes;
 RequestorOnfidoStep.defaultProps = defaultProps;
+RequestorOnfidoStep.displayName = 'RequestorOnfidoStep';
 
 export default withOnyx({
     onfidoToken: {
diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js
index 272fb30de858..c671e7b1a096 100755
--- a/src/pages/SearchPage.js
+++ b/src/pages/SearchPage.js
@@ -219,6 +219,7 @@ class SearchPage extends Component {
 
 SearchPage.propTypes = propTypes;
 SearchPage.defaultProps = defaultProps;
+SearchPage.displayName = 'SearchPage';
 
 export default compose(
     withLocalize,
diff --git a/src/pages/ShareCodePage.js b/src/pages/ShareCodePage.js
index e6d36ebc7070..f3b683094043 100644
--- a/src/pages/ShareCodePage.js
+++ b/src/pages/ShareCodePage.js
@@ -122,5 +122,6 @@ class ShareCodePage extends React.Component {
 
 ShareCodePage.propTypes = propTypes;
 ShareCodePage.defaultProps = defaultProps;
+ShareCodePage.displayName = 'ShareCodePage';
 
 export default compose(withEnvironment, withLocalize, withCurrentUserPersonalDetails)(ShareCodePage);
diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js
index e194d0870885..505263c7dffb 100644
--- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js
+++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js
@@ -594,6 +594,16 @@ ComposerWithSuggestions.propTypes = propTypes;
 ComposerWithSuggestions.defaultProps = defaultProps;
 ComposerWithSuggestions.displayName = 'ComposerWithSuggestions';
 
+const ComposerWithSuggestionsWithRef = React.forwardRef((props, ref) => (
+    <ComposerWithSuggestions
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        forwardedRef={ref}
+    />
+));
+
+ComposerWithSuggestionsWithRef.displayName = 'ComposerWithSuggestionsWithRef';
+
 export default compose(
     withKeyboardState,
     withOnyx({
@@ -619,12 +629,4 @@ export default compose(
             initWithStoredValues: false,
         },
     }),
-)(
-    React.forwardRef((props, ref) => (
-        <ComposerWithSuggestions
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            forwardedRef={ref}
-        />
-    )),
-);
+)(ComposerWithSuggestionsWithRef);
diff --git a/src/pages/home/report/ReportActionCompose/SuggestionEmoji.js b/src/pages/home/report/ReportActionCompose/SuggestionEmoji.js
index 857b7d5e52c2..d18b6fc2892d 100644
--- a/src/pages/home/report/ReportActionCompose/SuggestionEmoji.js
+++ b/src/pages/home/report/ReportActionCompose/SuggestionEmoji.js
@@ -248,6 +248,8 @@ const SuggestionEmojiWithRef = React.forwardRef((props, ref) => (
     />
 ));
 
+SuggestionEmojiWithRef.displayName = 'SuggestionEmojiWithRef';
+
 export default withOnyx({
     preferredSkinTone: {
         key: ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE,
diff --git a/src/pages/home/report/ReportActionCompose/SuggestionMention.js b/src/pages/home/report/ReportActionCompose/SuggestionMention.js
index 59221f57fd4b..67d6ac0632eb 100644
--- a/src/pages/home/report/ReportActionCompose/SuggestionMention.js
+++ b/src/pages/home/report/ReportActionCompose/SuggestionMention.js
@@ -306,16 +306,18 @@ SuggestionMention.propTypes = propTypes;
 SuggestionMention.defaultProps = defaultProps;
 SuggestionMention.displayName = 'SuggestionMention';
 
+const SuggestionMentionWithRef = React.forwardRef((props, ref) => (
+    <SuggestionMention
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        forwardedRef={ref}
+    />
+));
+
+SuggestionMentionWithRef.displayName = 'SuggestionMentionWithRef';
+
 export default withOnyx({
     personalDetails: {
         key: ONYXKEYS.PERSONAL_DETAILS_LIST,
     },
-})(
-    React.forwardRef((props, ref) => (
-        <SuggestionMention
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            forwardedRef={ref}
-        />
-    )),
-);
+})(SuggestionMentionWithRef);
diff --git a/src/pages/home/report/ReportActionCompose/Suggestions.js b/src/pages/home/report/ReportActionCompose/Suggestions.js
index 74e9e79471e7..5365aefe13e6 100644
--- a/src/pages/home/report/ReportActionCompose/Suggestions.js
+++ b/src/pages/home/report/ReportActionCompose/Suggestions.js
@@ -128,10 +128,14 @@ Suggestions.propTypes = propTypes;
 Suggestions.defaultProps = defaultProps;
 Suggestions.displayName = 'Suggestions';
 
-export default React.forwardRef((props, ref) => (
+const SuggestionsWithRef = React.forwardRef((props, ref) => (
     <Suggestions
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         forwardedRef={ref}
     />
 ));
+
+SuggestionsWithRef.displayName = 'SuggestionsWithRef';
+
+export default SuggestionsWithRef;
diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index 1d0f918de4f7..99223183ce17 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -472,10 +472,14 @@ ReportActionItemMessageEdit.propTypes = propTypes;
 ReportActionItemMessageEdit.defaultProps = defaultProps;
 ReportActionItemMessageEdit.displayName = 'ReportActionItemMessageEdit';
 
-export default React.forwardRef((props, ref) => (
+const ReportActionItemMessageEditWithRef = React.forwardRef((props, ref) => (
     <ReportActionItemMessageEdit
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         forwardedRef={ref}
     />
 ));
+
+ReportActionItemMessageEditWithRef.displayName = 'ReportActionItemMessageEditWithRef';
+
+export default ReportActionItemMessageEditWithRef;
diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.js b/src/pages/home/report/withReportAndReportActionOrNotFound.js
index 47f499423d28..a14293e71c67 100644
--- a/src/pages/home/report/withReportAndReportActionOrNotFound.js
+++ b/src/pages/home/report/withReportAndReportActionOrNotFound.js
@@ -130,7 +130,7 @@ export default function (WrappedComponent) {
     WithReportAndReportActionOrNotFound.displayName = `withReportAndReportActionOrNotFound(${getComponentDisplayName(WrappedComponent)})`;
 
     // eslint-disable-next-line rulesdir/no-negated-variables
-    const withReportAndReportActionOrNotFound = React.forwardRef((props, ref) => (
+    const WithReportAndReportActionOrNotFoundWithRef = React.forwardRef((props, ref) => (
         <WithReportAndReportActionOrNotFound
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
@@ -138,6 +138,8 @@ export default function (WrappedComponent) {
         />
     ));
 
+    WithReportAndReportActionOrNotFoundWithRef.displayName = 'WithReportAndReportActionOrNotFoundWithRef';
+
     return compose(
         withWindowDimensions,
         withOnyx({
@@ -161,5 +163,5 @@ export default function (WrappedComponent) {
                 canEvict: false,
             },
         }),
-    )(withReportAndReportActionOrNotFound);
+    )(WithReportAndReportActionOrNotFoundWithRef);
 }
diff --git a/src/pages/home/report/withReportOrNotFound.js b/src/pages/home/report/withReportOrNotFound.js
index 891e2e2418c6..0f17ba01adb8 100644
--- a/src/pages/home/report/withReportOrNotFound.js
+++ b/src/pages/home/report/withReportOrNotFound.js
@@ -99,7 +99,7 @@ export default function (shouldRequireReportID = true) {
         WithReportOrNotFound.displayName = `withReportOrNotFound(${getComponentDisplayName(WrappedComponent)})`;
 
         // eslint-disable-next-line rulesdir/no-negated-variables
-        const withReportOrNotFound = React.forwardRef((props, ref) => (
+        const WithReportOrNotFoundWithRef = React.forwardRef((props, ref) => (
             <WithReportOrNotFound
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...props}
@@ -107,6 +107,8 @@ export default function (shouldRequireReportID = true) {
             />
         ));
 
+        WithReportOrNotFoundWithRef.displayName = 'WithReportOrNotFoundWithRef';
+
         return withOnyx({
             report: {
                 key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`,
@@ -120,6 +122,6 @@ export default function (shouldRequireReportID = true) {
             policies: {
                 key: ONYXKEYS.COLLECTION.POLICY,
             },
-        })(withReportOrNotFound);
-    };
+        })(WithReportOrNotFoundWithRef);
+    }
 }
diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
index 02f1856c7bf5..340e7a0ed6a8 100644
--- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
+++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
@@ -257,6 +257,16 @@ FloatingActionButtonAndPopover.propTypes = propTypes;
 FloatingActionButtonAndPopover.defaultProps = defaultProps;
 FloatingActionButtonAndPopover.displayName = 'FloatingActionButtonAndPopover';
 
+const FloatingActionButtonAndPopoverWithRef = forwardRef((props, ref) => (
+    <FloatingActionButtonAndPopover
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        innerRef={ref}
+    />
+));
+
+FloatingActionButtonAndPopoverWithRef.displayName = 'FloatingActionButtonAndPopoverWithRef';
+
 export default compose(
     withLocalize,
     withNavigation,
@@ -277,12 +287,4 @@ export default compose(
             key: ONYXKEYS.DEMO_INFO,
         },
     }),
-)(
-    forwardRef((props, ref) => (
-        <FloatingActionButtonAndPopover
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            innerRef={ref}
-        />
-    )),
-);
+)(FloatingActionButtonAndPopoverWithRef);
diff --git a/src/pages/iou/ReceiptSelector/NavigationAwareCamera.js b/src/pages/iou/ReceiptSelector/NavigationAwareCamera.js
index e9cb81003979..2b4ef44dfd8d 100644
--- a/src/pages/iou/ReceiptSelector/NavigationAwareCamera.js
+++ b/src/pages/iou/ReceiptSelector/NavigationAwareCamera.js
@@ -72,4 +72,14 @@ NavigationAwareCamera.propTypes = propTypes;
 NavigationAwareCamera.displayName = 'NavigationAwareCamera';
 NavigationAwareCamera.defaultProps = defaultProps;
 
-export default NavigationAwareCamera;
+const NavigationAwareCameraWithRef = React.forwardRef((props, ref) => (
+    <NavigationAwareCamera
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        forwardedRef={ref}
+    />
+));
+
+NavigationAwareCameraWithRef.displayName = 'NavigationAwareCameraWithRef';
+
+export default NavigationAwareCameraWithRef;
diff --git a/src/pages/iou/ReceiptSelector/NavigationAwareCamera.native.js b/src/pages/iou/ReceiptSelector/NavigationAwareCamera.native.js
index 8faec1cbbe37..271c802635f1 100644
--- a/src/pages/iou/ReceiptSelector/NavigationAwareCamera.native.js
+++ b/src/pages/iou/ReceiptSelector/NavigationAwareCamera.native.js
@@ -80,4 +80,14 @@ const NavigationAwareCamera = React.forwardRef(({cameraTabIndex, isInTabNavigato
 NavigationAwareCamera.propTypes = propTypes;
 NavigationAwareCamera.displayName = 'NavigationAwareCamera';
 
-export default NavigationAwareCamera;
+const NavigationAwareCameraWithRef = React.forwardRef((props, ref) => (
+    <NavigationAwareCamera
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        forwardedRef={ref}
+    />
+));
+
+NavigationAwareCameraWithRef.displayName = 'NavigationAwareCameraWithRef';
+
+export default NavigationAwareCameraWithRef;
diff --git a/src/pages/iou/steps/MoneyRequestAmountForm.js b/src/pages/iou/steps/MoneyRequestAmountForm.js
index d84c4d9e3cd0..55e76727e500 100644
--- a/src/pages/iou/steps/MoneyRequestAmountForm.js
+++ b/src/pages/iou/steps/MoneyRequestAmountForm.js
@@ -299,10 +299,14 @@ MoneyRequestAmountForm.propTypes = propTypes;
 MoneyRequestAmountForm.defaultProps = defaultProps;
 MoneyRequestAmountForm.displayName = 'MoneyRequestAmountForm';
 
-export default React.forwardRef((props, ref) => (
+const MoneyRequestAmountFormWithRef = React.forwardRef((props, ref) => (
     <MoneyRequestAmountForm
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         forwardedRef={ref}
     />
 ));
+
+MoneyRequestAmountFormWithRef.displayName = 'MoneyRequestAmountFormWithRef';
+
+export default MoneyRequestAmountFormWithRef;
diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
index 9f1e5a416995..7e88ebe7db48 100755
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
@@ -283,6 +283,16 @@ MoneyRequestParticipantsSelector.propTypes = propTypes;
 MoneyRequestParticipantsSelector.defaultProps = defaultProps;
 MoneyRequestParticipantsSelector.displayName = 'MoneyRequestParticipantsSelector';
 
+const MoneyRequestParticipantsSelectorWithRef = React.forwardRef((props, ref) => (
+    <MoneyRequestParticipantsSelector
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        forwardedRef={ref}
+    />
+));
+
+MoneyRequestParticipantsSelectorWithRef.displayName = 'MoneyRequestParticipantsSelectorWithRef';
+
 export default compose(
     withLocalize,
     withOnyx({
@@ -296,12 +306,4 @@ export default compose(
             key: ONYXKEYS.BETAS,
         },
     }),
-)(
-    React.forwardRef((props, ref) => (
-        <MoneyRequestParticipantsSelector
-            /* eslint-disable-next-line react/jsx-props-no-spreading */
-            {...props}
-            forwardedRef={ref}
-        />
-    )),
-);
+)(MoneyRequestParticipantsSelectorWithRef);
diff --git a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js
index 7e8baba5a9ce..1c9abcf535f6 100644
--- a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js
+++ b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js
@@ -335,6 +335,7 @@ class ContactMethodDetailsPage extends Component {
 
 ContactMethodDetailsPage.propTypes = propTypes;
 ContactMethodDetailsPage.defaultProps = defaultProps;
+ContactMethodDetailsPage.displayName = 'ContactMethodDetailsPage';
 
 export default compose(
     withLocalize,
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.js
index 4c0bf81210b4..ea51bbc71cf9 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.js
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.js
@@ -103,17 +103,19 @@ function BaseTwoFactorAuthForm(props) {
 BaseTwoFactorAuthForm.propTypes = propTypes;
 BaseTwoFactorAuthForm.defaultProps = defaultProps;
 
+const BaseTwoFactorAuthFormWithRef = forwardRef((props, ref) => (
+    <BaseTwoFactorAuthForm
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        innerRef={ref}
+    />
+));
+
+BaseTwoFactorAuthFormWithRef.displayName = 'BaseTwoFactorAuthFormWithRef';
+
 export default compose(
     withLocalize,
     withOnyx({
         account: {key: ONYXKEYS.ACCOUNT},
     }),
-)(
-    forwardRef((props, ref) => (
-        <BaseTwoFactorAuthForm
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            innerRef={ref}
-        />
-    )),
-);
+)(BaseTwoFactorAuthFormWithRef);
diff --git a/src/pages/signin/LoginForm/BaseLoginForm.js b/src/pages/signin/LoginForm/BaseLoginForm.js
index 6270e6982e6e..ab548619b631 100644
--- a/src/pages/signin/LoginForm/BaseLoginForm.js
+++ b/src/pages/signin/LoginForm/BaseLoginForm.js
@@ -285,6 +285,16 @@ LoginForm.propTypes = propTypes;
 LoginForm.defaultProps = defaultProps;
 LoginForm.displayName = 'LoginForm';
 
+const LoginFormWithRef = forwardRef((props, ref) => (
+    <LoginForm
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        innerRef={ref}
+    />
+));
+
+LoginFormWithRef.displayName = 'LoginFormWithRef';
+
 export default compose(
     withNavigationFocus,
     withOnyx({
@@ -295,12 +305,4 @@ export default compose(
     withLocalize,
     withToggleVisibilityView,
     withNetwork(),
-)(
-    forwardRef((props, ref) => (
-        <LoginForm
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            innerRef={ref}
-        />
-    )),
-);
+)(LoginFormWithRef);
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index fdc88b6ede9e..fbdb995e1cc5 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -185,16 +185,18 @@ SignInPageLayout.propTypes = propTypes;
 SignInPageLayout.displayName = 'SignInPageLayout';
 SignInPageLayout.defaultProps = defaultProps;
 
+const SignInPageLayoutWithRef = forwardRef((props, ref) => (
+    <SignInPageLayout
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        innerRef={ref}
+    />
+));
+
+SignInPageLayoutWithRef.displayName = 'SignInPageLayoutWithRef';
+
 export default compose(
     withWindowDimensions,
     withSafeAreaInsets,
     withLocalize,
-)(
-    forwardRef((props, ref) => (
-        <SignInPageLayout
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            innerRef={ref}
-        />
-    )),
-);
+)(SignInPageLayoutWithRef);
diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js
index 5e7efadd3778..1f032ab514d3 100644
--- a/src/pages/workspace/WorkspaceInviteMessagePage.js
+++ b/src/pages/workspace/WorkspaceInviteMessagePage.js
@@ -239,6 +239,7 @@ class WorkspaceInviteMessagePage extends React.Component {
 
 WorkspaceInviteMessagePage.propTypes = propTypes;
 WorkspaceInviteMessagePage.defaultProps = defaultProps;
+WorkspaceInviteMessagePage.displayName = 'WorkspaceInviteMessagePage';
 
 export default compose(
     withLocalize,
diff --git a/src/pages/workspace/withPolicy.js b/src/pages/workspace/withPolicy.js
index 6ca0ca67fce1..19c24c7dad39 100644
--- a/src/pages/workspace/withPolicy.js
+++ b/src/pages/workspace/withPolicy.js
@@ -105,7 +105,7 @@ export default function (WrappedComponent) {
     WithPolicy.propTypes = propTypes;
     WithPolicy.defaultProps = defaultProps;
     WithPolicy.displayName = `withPolicy(${getComponentDisplayName(WrappedComponent)})`;
-    const withPolicy = React.forwardRef((props, ref) => (
+    const WithPolicyWithRef = React.forwardRef((props, ref) => (
         <WithPolicy
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
@@ -113,6 +113,8 @@ export default function (WrappedComponent) {
         />
     ));
 
+    WithPolicyWithRef.displayName = 'WithPolicyWithRef';
+
     return withOnyx({
         policy: {
             key: (props) => `${ONYXKEYS.COLLECTION.POLICY}${getPolicyIDFromRoute(props.route)}`,
@@ -126,7 +128,7 @@ export default function (WrappedComponent) {
         policyMembersDraft: {
             key: (props) => `${ONYXKEYS.COLLECTION.POLICY_MEMBERS_DRAFTS}${getPolicyIDFromRoute(props.route)}`,
         },
-    })(withPolicy);
+    })(WithPolicyWithRef);
 }
 
 export {policyPropTypes, policyDefaultProps};
diff --git a/src/pages/workspace/withPolicyAndFullscreenLoading.js b/src/pages/workspace/withPolicyAndFullscreenLoading.js
index 8265169434a3..60522cbfbf05 100644
--- a/src/pages/workspace/withPolicyAndFullscreenLoading.js
+++ b/src/pages/workspace/withPolicyAndFullscreenLoading.js
@@ -46,7 +46,7 @@ export default function (WrappedComponent) {
     WithPolicyAndFullscreenLoading.defaultProps = defaultProps;
     WithPolicyAndFullscreenLoading.displayName = `WithPolicyAndFullscreenLoading(${getComponentDisplayName(WrappedComponent)})`;
 
-    const withPolicyAndFullscreenLoading = React.forwardRef((props, ref) => (
+    const WithPolicyAndFullscreenLoadingWithRef = React.forwardRef((props, ref) => (
         <WithPolicyAndFullscreenLoading
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
@@ -54,6 +54,8 @@ export default function (WrappedComponent) {
         />
     ));
 
+    WithPolicyAndFullscreenLoadingWithRef.displayName = 'WithPolicyAndFullscreenLoadingWithRef';
+
     return compose(
         withPolicy,
         withOnyx({
@@ -61,5 +63,5 @@ export default function (WrappedComponent) {
                 key: ONYXKEYS.IS_LOADING_REPORT_DATA,
             },
         }),
-    )(withPolicyAndFullscreenLoading);
+    )(WithPolicyAndFullscreenLoadingWithRef);
 }
diff --git a/tests/perf-test/ReportActionsList.perf-test.js b/tests/perf-test/ReportActionsList.perf-test.js
index 4d83cc435636..f5ca2fc5e886 100644
--- a/tests/perf-test/ReportActionsList.perf-test.js
+++ b/tests/perf-test/ReportActionsList.perf-test.js
@@ -20,13 +20,21 @@ jest.setTimeout(60000);
 
 const mockedNavigate = jest.fn();
 
-jest.mock('../../src/components/withNavigationFocus', () => (Component) => (props) => (
-    <Component
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        isFocused={false}
-    />
-));
+jest.mock('../../src/components/withNavigationFocus', () => (Component) => {
+    function WithNavigationFocus(props) {
+        return (
+            <Component
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            isFocused={false}
+        />
+        );
+    }
+
+    WithNavigationFocus.displayName = 'WithNavigationFocus';
+
+    return WithNavigationFocus;
+});
 
 jest.mock('@react-navigation/native', () => {
     const actualNav = jest.requireActual('@react-navigation/native');
diff --git a/tests/perf-test/SelectionList.perf-test.js b/tests/perf-test/SelectionList.perf-test.js
index cdf9492e0ff3..e78970a04012 100644
--- a/tests/perf-test/SelectionList.perf-test.js
+++ b/tests/perf-test/SelectionList.perf-test.js
@@ -13,13 +13,19 @@ jest.mock('../../src/hooks/useLocalize', () =>
     })),
 );
 
-jest.mock('../../src/components/withLocalize', () => (Component) => (props) => (
-    <Component
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        translate={() => ''}
-    />
-));
+jest.mock('../../src/components/withLocalize', () => (Component) => {
+    function WrappedComponent(props) {
+        return (
+            <Component
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+                translate={() => ''}
+            />
+        );
+    }
+    WrappedComponent.displayName = `WrappedComponent`;
+    return WrappedComponent;
+});
 
 jest.mock('../../src/hooks/useNetwork', () =>
     jest.fn(() => ({
@@ -27,13 +33,19 @@ jest.mock('../../src/hooks/useNetwork', () =>
     })),
 );
 
-jest.mock('../../src/components/withKeyboardState', () => (Component) => (props) => (
-    <Component
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        isKeyboardShown={false}
-    />
-));
+jest.mock('../../src/components/withKeyboardState', () => (Component) => {
+    function WrappedComponent(props) {
+        return (
+            <Component
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+                isKeyboardShown={false}
+            />
+        );
+    }
+    WrappedComponent.displayName = `WrappedComponent`;
+    return WrappedComponent;
+});
 
 jest.mock('@react-navigation/native', () => ({
     useFocusEffect: () => {},
diff --git a/tests/unit/CalendarPickerTest.js b/tests/unit/CalendarPickerTest.js
index 512a86a25e19..3b3b123cd946 100644
--- a/tests/unit/CalendarPickerTest.js
+++ b/tests/unit/CalendarPickerTest.js
@@ -18,14 +18,20 @@ jest.mock('@react-navigation/native', () => ({
     createNavigationContainerRef: jest.fn(),
 }));
 
-jest.mock('../../src/components/withLocalize', () => (Component) => (props) => (
-    <Component
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        translate={() => ''}
-        preferredLocale="en"
-    />
-));
+jest.mock('../../src/components/withLocalize', () => (Component) => {
+    function WrappedComponent(props) {
+        return (
+            <Component
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+                translate={() => ''}
+                preferredLocale="en"
+            />
+        );
+    }
+    WrappedComponent.displayName = `WrappedComponent`;
+    return WrappedComponent;
+});
 
 jest.mock('../../src/hooks/useLocalize', () =>
     jest.fn(() => ({