diff --git a/__mocks__/react-native-safe-area-context.js b/__mocks__/react-native-safe-area-context.js
index f17c34cf326e..4b4af7841c2c 100644
--- a/__mocks__/react-native-safe-area-context.js
+++ b/__mocks__/react-native-safe-area-context.js
@@ -9,15 +9,17 @@ const insets = {
 };
 
 function withSafeAreaInsets(WrappedComponent) {
-    const WithSafeAreaInsets = (props) => (
-        <WrappedComponent
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            // eslint-disable-next-line react/prop-types
-            ref={props.forwardedRef}
-            insets={insets}
-        />
-    );
+    function WithSafeAreaInsets(props) {
+        return (
+            <WrappedComponent
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+                // eslint-disable-next-line react/prop-types
+                ref={props.forwardedRef}
+                insets={insets}
+            />
+        );
+    }
     return forwardRef((props, ref) => (
         <WithSafeAreaInsets
             // eslint-disable-next-line react/jsx-props-no-spreading
diff --git a/package-lock.json b/package-lock.json
index d4aab8430cd4..fab86c49c289 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -147,7 +147,7 @@
         "electron": "22.3.7",
         "electron-builder": "24.4.0",
         "eslint": "^7.6.0",
-        "eslint-config-expensify": "^2.0.36",
+        "eslint-config-expensify": "^2.0.38",
         "eslint-config-prettier": "^8.8.0",
         "eslint-plugin-jest": "^24.1.0",
         "eslint-plugin-jsx-a11y": "^6.6.1",
@@ -22542,9 +22542,9 @@
       }
     },
     "node_modules/eslint-config-expensify": {
-      "version": "2.0.36",
-      "resolved": "https://registry.npmjs.org/eslint-config-expensify/-/eslint-config-expensify-2.0.36.tgz",
-      "integrity": "sha512-8tQsyWhPUFRGJYCucTJd2FFVOOUQfsxGlGynVncCKgI96fmkagurhAu/zteszW0Ora6gAf7BkIuW6z6ZKKBdjg==",
+      "version": "2.0.38",
+      "resolved": "https://registry.npmjs.org/eslint-config-expensify/-/eslint-config-expensify-2.0.38.tgz",
+      "integrity": "sha512-jAlrYSjkDV8YESUUPcaTjUM8Fgru+37FS+Hq6zzcRR0FbA5bLiOPguhJHo77XpYh5N+PEf4wrpgsS04sjdgDPg==",
       "dev": true,
       "dependencies": {
         "@lwc/eslint-plugin-lwc": "^0.11.0",
@@ -58409,9 +58409,9 @@
       }
     },
     "eslint-config-expensify": {
-      "version": "2.0.36",
-      "resolved": "https://registry.npmjs.org/eslint-config-expensify/-/eslint-config-expensify-2.0.36.tgz",
-      "integrity": "sha512-8tQsyWhPUFRGJYCucTJd2FFVOOUQfsxGlGynVncCKgI96fmkagurhAu/zteszW0Ora6gAf7BkIuW6z6ZKKBdjg==",
+      "version": "2.0.38",
+      "resolved": "https://registry.npmjs.org/eslint-config-expensify/-/eslint-config-expensify-2.0.38.tgz",
+      "integrity": "sha512-jAlrYSjkDV8YESUUPcaTjUM8Fgru+37FS+Hq6zzcRR0FbA5bLiOPguhJHo77XpYh5N+PEf4wrpgsS04sjdgDPg==",
       "dev": true,
       "requires": {
         "@lwc/eslint-plugin-lwc": "^0.11.0",
diff --git a/package.json b/package.json
index 58a377ec0876..911bf90124f5 100644
--- a/package.json
+++ b/package.json
@@ -183,7 +183,7 @@
     "electron": "22.3.7",
     "electron-builder": "24.4.0",
     "eslint": "^7.6.0",
-    "eslint-config-expensify": "^2.0.36",
+    "eslint-config-expensify": "^2.0.38",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-jest": "^24.1.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
diff --git a/src/App.js b/src/App.js
index 2b47d8ddcd28..af27b3a6f854 100644
--- a/src/App.js
+++ b/src/App.js
@@ -33,29 +33,31 @@ LogBox.ignoreLogs([
 
 const fill = {flex: 1};
 
-const App = () => (
-    <GestureHandlerRootView style={fill}>
-        <ComposeProviders
-            components={[
-                OnyxProvider,
-                SafeAreaProvider,
-                PortalProvider,
-                SafeArea,
-                LocaleContextProvider,
-                HTMLEngineProvider,
-                WindowDimensionsProvider,
-                KeyboardStateProvider,
-                CurrentReportIdContextProvider,
-                PickerStateProvider,
-            ]}
-        >
-            <CustomStatusBar />
-            <ErrorBoundary errorMessage="NewExpensify crash caught by error boundary">
-                <Expensify />
-            </ErrorBoundary>
-        </ComposeProviders>
-    </GestureHandlerRootView>
-);
+function App() {
+    return (
+        <GestureHandlerRootView style={fill}>
+            <ComposeProviders
+                components={[
+                    OnyxProvider,
+                    SafeAreaProvider,
+                    PortalProvider,
+                    SafeArea,
+                    LocaleContextProvider,
+                    HTMLEngineProvider,
+                    WindowDimensionsProvider,
+                    KeyboardStateProvider,
+                    CurrentReportIdContextProvider,
+                    PickerStateProvider,
+                ]}
+            >
+                <CustomStatusBar />
+                <ErrorBoundary errorMessage="NewExpensify crash caught by error boundary">
+                    <Expensify />
+                </ErrorBoundary>
+            </ComposeProviders>
+        </GestureHandlerRootView>
+    );
+}
 
 App.displayName = 'App';
 
diff --git a/src/components/AddPaymentMethodMenu.js b/src/components/AddPaymentMethodMenu.js
index 2581bde85b4e..e5f6bf946f16 100644
--- a/src/components/AddPaymentMethodMenu.js
+++ b/src/components/AddPaymentMethodMenu.js
@@ -43,41 +43,43 @@ const defaultProps = {
     betas: [],
 };
 
-const AddPaymentMethodMenu = (props) => (
-    <PopoverMenu
-        isVisible={props.isVisible}
-        onClose={props.onClose}
-        anchorPosition={props.anchorPosition}
-        onItemSelected={props.onClose}
-        menuItems={[
-            {
-                text: props.translate('common.bankAccount'),
-                icon: Expensicons.Bank,
-                onSelected: () => {
-                    props.onItemSelected(CONST.PAYMENT_METHODS.BANK_ACCOUNT);
+function AddPaymentMethodMenu(props) {
+    return (
+        <PopoverMenu
+            isVisible={props.isVisible}
+            onClose={props.onClose}
+            anchorPosition={props.anchorPosition}
+            onItemSelected={props.onClose}
+            menuItems={[
+                {
+                    text: props.translate('common.bankAccount'),
+                    icon: Expensicons.Bank,
+                    onSelected: () => {
+                        props.onItemSelected(CONST.PAYMENT_METHODS.BANK_ACCOUNT);
+                    },
                 },
-            },
-            ...(Permissions.canUseWallet(props.betas)
-                ? [
-                      {
-                          text: props.translate('common.debitCard'),
-                          icon: Expensicons.CreditCard,
-                          onSelected: () => props.onItemSelected(CONST.PAYMENT_METHODS.DEBIT_CARD),
-                      },
-                  ]
-                : []),
-            ...(props.shouldShowPaypal && !props.payPalMeData.description
-                ? [
-                      {
-                          text: props.translate('common.payPalMe'),
-                          icon: Expensicons.PayPal,
-                          onSelected: () => props.onItemSelected(CONST.PAYMENT_METHODS.PAYPAL),
-                      },
-                  ]
-                : []),
-        ]}
-    />
-);
+                ...(Permissions.canUseWallet(props.betas)
+                    ? [
+                          {
+                              text: props.translate('common.debitCard'),
+                              icon: Expensicons.CreditCard,
+                              onSelected: () => props.onItemSelected(CONST.PAYMENT_METHODS.DEBIT_CARD),
+                          },
+                      ]
+                    : []),
+                ...(props.shouldShowPaypal && !props.payPalMeData.description
+                    ? [
+                          {
+                              text: props.translate('common.payPalMe'),
+                              icon: Expensicons.PayPal,
+                              onSelected: () => props.onItemSelected(CONST.PAYMENT_METHODS.PAYPAL),
+                          },
+                      ]
+                    : []),
+            ]}
+        />
+    );
+}
 
 AddPaymentMethodMenu.propTypes = propTypes;
 AddPaymentMethodMenu.defaultProps = defaultProps;
diff --git a/src/components/AddressSearch/index.js b/src/components/AddressSearch/index.js
index 5219c5b4855f..9699eb9aab94 100644
--- a/src/components/AddressSearch/index.js
+++ b/src/components/AddressSearch/index.js
@@ -91,7 +91,7 @@ const defaultProps = {
 // Do not convert to class component! It's been tried before and presents more challenges than it's worth.
 // Relevant thread: https://expensify.slack.com/archives/C03TQ48KC/p1634088400387400
 // Reference: https://github.com/FaridSafi/react-native-google-places-autocomplete/issues/609#issuecomment-886133839
-const AddressSearch = (props) => {
+function AddressSearch(props) {
     const [displayListViewBorder, setDisplayListViewBorder] = useState(false);
     const containerRef = useRef();
     const query = useMemo(
@@ -291,7 +291,7 @@ const AddressSearch = (props) => {
             </View>
         </ScrollView>
     );
-};
+}
 
 AddressSearch.propTypes = propTypes;
 AddressSearch.defaultProps = defaultProps;
diff --git a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js
index 03f293d12f71..f20f798768c2 100644
--- a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js
+++ b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js
@@ -34,7 +34,7 @@ const defaultProps = {
     ...anchorForAttachmentsOnlyDefaultProps,
 };
 
-const BaseAnchorForAttachmentsOnly = (props) => {
+function BaseAnchorForAttachmentsOnly(props) {
     const sourceURL = props.source;
     const sourceURLWithAuth = addEncryptedAuthTokenToURL(sourceURL);
     const sourceID = (sourceURL.match(CONST.REGEX.ATTACHMENT_ID) || [])[1];
@@ -70,7 +70,7 @@ const BaseAnchorForAttachmentsOnly = (props) => {
             )}
         </ShowContextMenuContext.Consumer>
     );
-};
+}
 
 BaseAnchorForAttachmentsOnly.displayName = 'BaseAnchorForAttachmentsOnly';
 BaseAnchorForAttachmentsOnly.propTypes = propTypes;
diff --git a/src/components/AnchorForAttachmentsOnly/index.js b/src/components/AnchorForAttachmentsOnly/index.js
index d4d607d3cc65..1a58aa4b3ae1 100644
--- a/src/components/AnchorForAttachmentsOnly/index.js
+++ b/src/components/AnchorForAttachmentsOnly/index.js
@@ -4,14 +4,16 @@ import BaseAnchorForAttachmentsOnly from './BaseAnchorForAttachmentsOnly';
 import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
 import ControlSelection from '../../libs/ControlSelection';
 
-const AnchorForAttachmentsOnly = (props) => (
-    <BaseAnchorForAttachmentsOnly
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
-        onPressOut={() => ControlSelection.unblock()}
-    />
-);
+function AnchorForAttachmentsOnly(props) {
+    return (
+        <BaseAnchorForAttachmentsOnly
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
+            onPressOut={() => ControlSelection.unblock()}
+        />
+    );
+}
 
 AnchorForAttachmentsOnly.propTypes = anchorForAttachmentsOnlyPropTypes.propTypes;
 AnchorForAttachmentsOnly.defaultProps = anchorForAttachmentsOnlyPropTypes.defaultProps;
diff --git a/src/components/AnchorForAttachmentsOnly/index.native.js b/src/components/AnchorForAttachmentsOnly/index.native.js
index 4fcdd2e6cff3..f27aad641186 100644
--- a/src/components/AnchorForAttachmentsOnly/index.native.js
+++ b/src/components/AnchorForAttachmentsOnly/index.native.js
@@ -3,13 +3,15 @@ import * as anchorForAttachmentsOnlyPropTypes from './anchorForAttachmentsOnlyPr
 import BaseAnchorForAttachmentsOnly from './BaseAnchorForAttachmentsOnly';
 import styles from '../../styles/styles';
 
-const AnchorForAttachmentsOnly = (props) => (
-    <BaseAnchorForAttachmentsOnly
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        style={styles.mw100}
-    />
-);
+function AnchorForAttachmentsOnly(props) {
+    return (
+        <BaseAnchorForAttachmentsOnly
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            style={styles.mw100}
+        />
+    );
+}
 
 AnchorForAttachmentsOnly.propTypes = anchorForAttachmentsOnlyPropTypes.propTypes;
 AnchorForAttachmentsOnly.defaultProps = anchorForAttachmentsOnlyPropTypes.defaultProps;
diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
index 4a002ef49cf1..191af3613e1f 100644
--- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
+++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
@@ -38,7 +38,7 @@ const defaultProps = {
 /*
  * This is a default anchor component for regular links.
  */
-const BaseAnchorForCommentsOnly = (props) => {
+function BaseAnchorForCommentsOnly(props) {
     let linkRef;
     const rest = _.omit(props, _.keys(propTypes));
     const linkProps = {};
@@ -85,7 +85,7 @@ const BaseAnchorForCommentsOnly = (props) => {
             </Tooltip>
         </PressableWithSecondaryInteraction>
     );
-};
+}
 
 BaseAnchorForCommentsOnly.propTypes = propTypes;
 BaseAnchorForCommentsOnly.defaultProps = defaultProps;
diff --git a/src/components/AnchorForCommentsOnly/index.js b/src/components/AnchorForCommentsOnly/index.js
index 1de4ea56b3aa..9ded866b7cdf 100644
--- a/src/components/AnchorForCommentsOnly/index.js
+++ b/src/components/AnchorForCommentsOnly/index.js
@@ -6,16 +6,18 @@ import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
 import ControlSelection from '../../libs/ControlSelection';
 import styles from '../../styles/styles';
 
-const AnchorForCommentsOnly = (props) => (
-    <View style={styles.dInline}>
-        <BaseAnchorForCommentsOnly
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
-            onPressOut={() => ControlSelection.unblock()}
-        />
-    </View>
-);
+function AnchorForCommentsOnly(props) {
+    return (
+        <View style={styles.dInline}>
+            <BaseAnchorForCommentsOnly
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+                onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
+                onPressOut={() => ControlSelection.unblock()}
+            />
+        </View>
+    );
+}
 
 AnchorForCommentsOnly.propTypes = anchorForCommentsOnlyPropTypes.propTypes;
 AnchorForCommentsOnly.defaultProps = anchorForCommentsOnlyPropTypes.defaultProps;
diff --git a/src/components/AnchorForCommentsOnly/index.native.js b/src/components/AnchorForCommentsOnly/index.native.js
index 21b922f52794..69211b75e855 100644
--- a/src/components/AnchorForCommentsOnly/index.native.js
+++ b/src/components/AnchorForCommentsOnly/index.native.js
@@ -6,7 +6,7 @@ import * as anchorForCommentsOnlyPropTypes from './anchorForCommentsOnlyPropType
 import BaseAnchorForCommentsOnly from './BaseAnchorForCommentsOnly';
 
 // eslint-disable-next-line react/jsx-props-no-spreading
-const AnchorForCommentsOnly = (props) => {
+function AnchorForCommentsOnly(props) {
     const onPress = () => (_.isFunction(props.onPress) ? props.onPress() : Linking.openURL(props.href));
 
     return (
@@ -16,7 +16,7 @@ const AnchorForCommentsOnly = (props) => {
             onPress={onPress}
         />
     );
-};
+}
 
 AnchorForCommentsOnly.propTypes = anchorForCommentsOnlyPropTypes.propTypes;
 AnchorForCommentsOnly.defaultProps = anchorForCommentsOnlyPropTypes.defaultProps;
diff --git a/src/components/AnimatedStep.js b/src/components/AnimatedStep.js
index 0cd7261eb501..dce06cb33760 100644
--- a/src/components/AnimatedStep.js
+++ b/src/components/AnimatedStep.js
@@ -21,7 +21,7 @@ const defaultProps = {
     style: [],
 };
 
-const AnimatedStep = (props) => {
+function AnimatedStep(props) {
     function getAnimationStyle(direction) {
         let animationStyle;
 
@@ -43,7 +43,7 @@ const AnimatedStep = (props) => {
             {props.children}
         </Animatable.View>
     );
-};
+}
 
 AnimatedStep.propTypes = propTypes;
 AnimatedStep.defaultProps = defaultProps;
diff --git a/src/components/AnonymousReportFooter.js b/src/components/AnonymousReportFooter.js
index 2b92c20d127c..08a4a04e64dd 100644
--- a/src/components/AnonymousReportFooter.js
+++ b/src/components/AnonymousReportFooter.js
@@ -23,33 +23,35 @@ const defaultProps = {
     report: {},
 };
 
-const AnonymousReportFooter = (props) => (
-    <View style={styles.anonymousRoomFooter}>
-        <View style={[styles.flexRow]}>
-            <AvatarWithDisplayName
-                report={props.report}
-                size={CONST.AVATAR_SIZE.MEDIUM}
-                isAnonymous
-            />
-        </View>
-        <View style={[styles.flexRow, styles.alignItemsCenter]}>
-            <View style={styles.mr4}>
-                <View style={[props.isSmallScreenWidth ? styles.alignItemsStart : styles.alignItemsEnd]}>
-                    <ExpensifyWordmark style={styles.anonymousRoomFooterLogo} />
-                </View>
-                <Text style={[styles.textNormal, styles.textWhite]}>{props.translate('anonymousReportFooter.logoTagline')}</Text>
-            </View>
-            <View style={styles.anonymousRoomFooterSignInButton}>
-                <Button
-                    medium
-                    success
-                    text={props.translate('common.signIn')}
-                    onPress={() => Session.signOutAndRedirectToSignIn()}
+function AnonymousReportFooter(props) {
+    return (
+        <View style={styles.anonymousRoomFooter}>
+            <View style={[styles.flexRow]}>
+                <AvatarWithDisplayName
+                    report={props.report}
+                    size={CONST.AVATAR_SIZE.MEDIUM}
+                    isAnonymous
                 />
             </View>
+            <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                <View style={styles.mr4}>
+                    <View style={[props.isSmallScreenWidth ? styles.alignItemsStart : styles.alignItemsEnd]}>
+                        <ExpensifyWordmark style={styles.anonymousRoomFooterLogo} />
+                    </View>
+                    <Text style={[styles.textNormal, styles.textWhite]}>{props.translate('anonymousReportFooter.logoTagline')}</Text>
+                </View>
+                <View style={styles.anonymousRoomFooterSignInButton}>
+                    <Button
+                        medium
+                        success
+                        text={props.translate('common.signIn')}
+                        onPress={() => Session.signOutAndRedirectToSignIn()}
+                    />
+                </View>
+            </View>
         </View>
-    </View>
-);
+    );
+}
 
 AnonymousReportFooter.propTypes = propTypes;
 AnonymousReportFooter.defaultProps = defaultProps;
diff --git a/src/components/ArchivedReportFooter.js b/src/components/ArchivedReportFooter.js
index 75117cd4cb42..db8deadecd83 100644
--- a/src/components/ArchivedReportFooter.js
+++ b/src/components/ArchivedReportFooter.js
@@ -47,7 +47,7 @@ const defaultProps = {
     personalDetails: {},
 };
 
-const ArchivedReportFooter = (props) => {
+function ArchivedReportFooter(props) {
     const archiveReason = lodashGet(props.reportClosedAction, 'originalMessage.reason', CONST.REPORT.ARCHIVE_REASON.DEFAULT);
     let displayName = lodashGet(props.personalDetails, `${props.report.ownerEmail}.displayName`, props.report.ownerEmail);
 
@@ -71,7 +71,7 @@ const ArchivedReportFooter = (props) => {
             shouldShowIcon
         />
     );
-};
+}
 
 ArchivedReportFooter.propTypes = propTypes;
 ArchivedReportFooter.defaultProps = defaultProps;
diff --git a/src/components/AttachmentCarousel/CarouselActions.js b/src/components/AttachmentCarousel/CarouselActions.js
index 3946a613ee16..a33bb854d872 100644
--- a/src/components/AttachmentCarousel/CarouselActions.js
+++ b/src/components/AttachmentCarousel/CarouselActions.js
@@ -9,7 +9,7 @@ const propTypes = {
     onCycleThroughAttachments: PropTypes.func.isRequired,
 };
 
-const Carousel = (props) => {
+function Carousel(props) {
     useEffect(() => {
         const shortcutLeftConfig = CONST.KEYBOARD_SHORTCUTS.ARROW_LEFT;
         const unsubscribeLeftKey = KeyboardShortcut.subscribe(
@@ -49,7 +49,7 @@ const Carousel = (props) => {
     }, []);
 
     return null;
-};
+}
 
 Carousel.propTypes = propTypes;
 
diff --git a/src/components/AttachmentView.js b/src/components/AttachmentView.js
index cf9814149322..e5d4fd1bf299 100755
--- a/src/components/AttachmentView.js
+++ b/src/components/AttachmentView.js
@@ -63,7 +63,7 @@ const defaultProps = {
     containerStyles: [],
 };
 
-const AttachmentView = (props) => {
+function AttachmentView(props) {
     const [loadComplete, setLoadComplete] = useState(false);
     const containerStyles = [styles.flex1, styles.flexRow, styles.alignSelfStretch];
 
@@ -155,7 +155,7 @@ const AttachmentView = (props) => {
             )}
         </View>
     );
-};
+}
 
 AttachmentView.propTypes = propTypes;
 AttachmentView.defaultProps = defaultProps;
diff --git a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.js b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.js
index fe0aee5ac805..65ac1dc3edfe 100644
--- a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.js
+++ b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.js
@@ -24,7 +24,7 @@ const measureHeightOfSuggestionRows = (numRows, isSuggestionPickerLarge) => {
     return numRows * CONST.AUTO_COMPLETE_SUGGESTER.ITEM_HEIGHT;
 };
 
-const BaseAutoCompleteSuggestions = (props) => {
+function BaseAutoCompleteSuggestions(props) {
     const rowHeight = useSharedValue(0);
     /**
      * Render a suggestion menu item component.
@@ -73,7 +73,7 @@ const BaseAutoCompleteSuggestions = (props) => {
             />
         </Animated.View>
     );
-};
+}
 
 BaseAutoCompleteSuggestions.propTypes = propTypes;
 BaseAutoCompleteSuggestions.displayName = 'BaseAutoCompleteSuggestions';
diff --git a/src/components/AutoCompleteSuggestions/index.js b/src/components/AutoCompleteSuggestions/index.js
index a04eb18b73ef..9e1951d9a1d5 100644
--- a/src/components/AutoCompleteSuggestions/index.js
+++ b/src/components/AutoCompleteSuggestions/index.js
@@ -10,7 +10,7 @@ import {propTypes} from './autoCompleteSuggestionsPropTypes';
  * On the native platform, tapping on auto-complete suggestions will not blur the main input.
  */
 
-const AutoCompleteSuggestions = (props) => {
+function AutoCompleteSuggestions(props) {
     const containerRef = React.useRef(null);
     React.useEffect(() => {
         const container = containerRef.current;
@@ -33,7 +33,7 @@ const AutoCompleteSuggestions = (props) => {
             ref={containerRef}
         />
     );
-};
+}
 
 AutoCompleteSuggestions.propTypes = propTypes;
 AutoCompleteSuggestions.displayName = 'AutoCompleteSuggestions';
diff --git a/src/components/AutoCompleteSuggestions/index.native.js b/src/components/AutoCompleteSuggestions/index.native.js
index db701406092d..22af774bd4fc 100644
--- a/src/components/AutoCompleteSuggestions/index.native.js
+++ b/src/components/AutoCompleteSuggestions/index.native.js
@@ -2,10 +2,10 @@ import React from 'react';
 import BaseAutoCompleteSuggestions from './BaseAutoCompleteSuggestions';
 import {propTypes} from './autoCompleteSuggestionsPropTypes';
 
-const AutoCompleteSuggestions = (props) => (
+function AutoCompleteSuggestions(props) {
     // eslint-disable-next-line react/jsx-props-no-spreading
-    <BaseAutoCompleteSuggestions {...props} />
-);
+    return <BaseAutoCompleteSuggestions {...props} />;
+}
 
 AutoCompleteSuggestions.propTypes = propTypes;
 AutoCompleteSuggestions.displayName = 'AutoCompleteSuggestions';
diff --git a/src/components/AutoEmailLink.js b/src/components/AutoEmailLink.js
index f99c8ea76f3c..9f39997bce13 100644
--- a/src/components/AutoEmailLink.js
+++ b/src/components/AutoEmailLink.js
@@ -21,32 +21,34 @@ const defaultProps = {
  *     - Else just render it inside `Text` component
  */
 
-const AutoEmailLink = (props) => (
-    <Text style={props.style}>
-        {_.map(props.text.split(CONST.REG_EXP.EXTRACT_EMAIL), (str, index) => {
-            if (CONST.REG_EXP.EMAIL.test(str)) {
+function AutoEmailLink(props) {
+    return (
+        <Text style={props.style}>
+            {_.map(props.text.split(CONST.REG_EXP.EXTRACT_EMAIL), (str, index) => {
+                if (CONST.REG_EXP.EMAIL.test(str)) {
+                    return (
+                        <TextLink
+                            key={`${index}-${str}`}
+                            href={`mailto:${str}`}
+                            style={styles.link}
+                        >
+                            {str}
+                        </TextLink>
+                    );
+                }
+
                 return (
-                    <TextLink
+                    <Text
+                        style={props.style}
                         key={`${index}-${str}`}
-                        href={`mailto:${str}`}
-                        style={styles.link}
                     >
                         {str}
-                    </TextLink>
+                    </Text>
                 );
-            }
-
-            return (
-                <Text
-                    style={props.style}
-                    key={`${index}-${str}`}
-                >
-                    {str}
-                </Text>
-            );
-        })}
-    </Text>
-);
+            })}
+        </Text>
+    );
+}
 
 AutoEmailLink.displayName = 'AutoEmailLink';
 AutoEmailLink.propTypes = propTypes;
diff --git a/src/components/AvatarCropModal/AvatarCropModal.js b/src/components/AvatarCropModal/AvatarCropModal.js
index af113276a2be..55dd36bb08e1 100644
--- a/src/components/AvatarCropModal/AvatarCropModal.js
+++ b/src/components/AvatarCropModal/AvatarCropModal.js
@@ -58,7 +58,7 @@ const defaultProps = {
 };
 
 // This component can't be written using class since reanimated API uses hooks.
-const AvatarCropModal = (props) => {
+function AvatarCropModal(props) {
     const originalImageWidth = useSharedValue(CONST.AVATAR_CROP_MODAL.INITIAL_SIZE);
     const originalImageHeight = useSharedValue(CONST.AVATAR_CROP_MODAL.INITIAL_SIZE);
     const translateY = useSharedValue(0);
@@ -433,7 +433,7 @@ const AvatarCropModal = (props) => {
             />
         </Modal>
     );
-};
+}
 
 AvatarCropModal.displayName = 'AvatarCropModal';
 AvatarCropModal.propTypes = propTypes;
diff --git a/src/components/AvatarCropModal/ImageCropView.js b/src/components/AvatarCropModal/ImageCropView.js
index 3ad72bd3d674..be19109d7379 100644
--- a/src/components/AvatarCropModal/ImageCropView.js
+++ b/src/components/AvatarCropModal/ImageCropView.js
@@ -49,7 +49,7 @@ const defaultProps = {
     maskImage: Expensicons.ImageCropCircleMask,
 };
 
-const ImageCropView = (props) => {
+function ImageCropView(props) {
     const containerStyle = StyleUtils.getWidthAndHeightStyle(props.containerSize, props.containerSize);
 
     const originalImageHeight = props.originalImageHeight;
@@ -93,7 +93,7 @@ const ImageCropView = (props) => {
             </Animated.View>
         </PanGestureHandler>
     );
-};
+}
 
 ImageCropView.displayName = 'ImageCropView';
 ImageCropView.propTypes = propTypes;
diff --git a/src/components/AvatarCropModal/Slider.js b/src/components/AvatarCropModal/Slider.js
index 2877b3a9c917..573ee781e5f8 100644
--- a/src/components/AvatarCropModal/Slider.js
+++ b/src/components/AvatarCropModal/Slider.js
@@ -25,7 +25,7 @@ const defaultProps = {
 };
 
 // This component can't be written using class since reanimated API uses hooks.
-const Slider = (props) => {
+function Slider(props) {
     const sliderValue = props.sliderValue;
     const [tooltipIsVisible, setTooltipIsVisible] = useState(true);
 
@@ -60,7 +60,7 @@ const Slider = (props) => {
             </PanGestureHandler>
         </View>
     );
-};
+}
 
 Slider.displayName = 'Slider';
 Slider.propTypes = propTypes;
diff --git a/src/components/AvatarWithDisplayName.js b/src/components/AvatarWithDisplayName.js
index 6da7f00f5637..66c2b4821b33 100644
--- a/src/components/AvatarWithDisplayName.js
+++ b/src/components/AvatarWithDisplayName.js
@@ -49,7 +49,7 @@ const defaultProps = {
     size: CONST.AVATAR_SIZE.DEFAULT,
 };
 
-const AvatarWithDisplayName = (props) => {
+function AvatarWithDisplayName(props) {
     const title = props.isAnonymous ? props.report.displayName : ReportUtils.getDisplayNameForParticipant(props.report.ownerEmail, true);
     const subtitle = ReportUtils.getChatRoomSubtitle(props.report);
     const isExpenseReport = ReportUtils.isExpenseReport(props.report);
@@ -101,7 +101,7 @@ const AvatarWithDisplayName = (props) => {
             )}
         </View>
     );
-};
+}
 AvatarWithDisplayName.propTypes = propTypes;
 AvatarWithDisplayName.displayName = 'AvatarWithDisplayName';
 AvatarWithDisplayName.defaultProps = defaultProps;
diff --git a/src/components/AvatarWithIndicator.js b/src/components/AvatarWithIndicator.js
index 1835e739c25b..f59818099914 100644
--- a/src/components/AvatarWithIndicator.js
+++ b/src/components/AvatarWithIndicator.js
@@ -71,7 +71,7 @@ const defaultProps = {
     loginList: {},
 };
 
-const AvatarWithIndicator = (props) => {
+function AvatarWithIndicator(props) {
     // If a policy was just deleted from Onyx, then Onyx will pass a null value to the props, and
     // those should be cleaned out before doing any error checking
     const cleanPolicies = _.pick(props.policies, (policy) => policy);
@@ -107,7 +107,7 @@ const AvatarWithIndicator = (props) => {
             </View>
         </Tooltip>
     );
-};
+}
 
 AvatarWithIndicator.defaultProps = defaultProps;
 AvatarWithIndicator.propTypes = propTypes;
diff --git a/src/components/Badge.js b/src/components/Badge.js
index 01861c6c30ff..b3e0fdb88b64 100644
--- a/src/components/Badge.js
+++ b/src/components/Badge.js
@@ -44,7 +44,7 @@ const defaultProps = {
     environment: CONST.ENVIRONMENT.DEV,
 };
 
-const Badge = (props) => {
+function Badge(props) {
     const textStyles = props.success || props.error ? styles.textWhite : undefined;
     const Wrapper = props.pressable ? Pressable : View;
     const wrapperStyles = ({pressed}) => [
@@ -67,7 +67,7 @@ const Badge = (props) => {
             </Text>
         </Wrapper>
     );
-};
+}
 
 Badge.displayName = 'Badge';
 Badge.propTypes = propTypes;
diff --git a/src/components/Banner.js b/src/components/Banner.js
index d52286bb2e4c..d89e0332331a 100644
--- a/src/components/Banner.js
+++ b/src/components/Banner.js
@@ -54,59 +54,61 @@ const defaultProps = {
     textStyles: [],
 };
 
-const Banner = (props) => (
-    <Hoverable>
-        {(isHovered) => {
-            const isClickable = props.onClose || props.onPress;
-            const shouldHighlight = isClickable && isHovered;
-            return (
-                <View
-                    style={[
-                        styles.flexRow,
-                        styles.alignItemsCenter,
-                        styles.p5,
-                        styles.borderRadiusNormal,
-                        shouldHighlight ? styles.activeComponentBG : styles.hoveredComponentBG,
-                        styles.breakAll,
-                        ...props.containerStyles,
-                    ]}
-                >
-                    <View style={[styles.flexRow, styles.flexGrow1, styles.mw100, styles.alignItemsCenter]}>
-                        {props.shouldShowIcon && (
-                            <View style={[styles.mr3]}>
-                                <Icon
-                                    src={Expensicons.Exclamation}
-                                    fill={StyleUtils.getIconFillColor(getButtonState(shouldHighlight))}
-                                />
-                            </View>
-                        )}
-                        {props.shouldRenderHTML ? (
-                            <RenderHTML html={props.text} />
-                        ) : (
-                            <Text
-                                style={[...props.textStyles]}
-                                onPress={props.onPress}
-                            >
-                                {props.text}
-                            </Text>
+function Banner(props) {
+    return (
+        <Hoverable>
+            {(isHovered) => {
+                const isClickable = props.onClose || props.onPress;
+                const shouldHighlight = isClickable && isHovered;
+                return (
+                    <View
+                        style={[
+                            styles.flexRow,
+                            styles.alignItemsCenter,
+                            styles.p5,
+                            styles.borderRadiusNormal,
+                            shouldHighlight ? styles.activeComponentBG : styles.hoveredComponentBG,
+                            styles.breakAll,
+                            ...props.containerStyles,
+                        ]}
+                    >
+                        <View style={[styles.flexRow, styles.flexGrow1, styles.mw100, styles.alignItemsCenter]}>
+                            {props.shouldShowIcon && (
+                                <View style={[styles.mr3]}>
+                                    <Icon
+                                        src={Expensicons.Exclamation}
+                                        fill={StyleUtils.getIconFillColor(getButtonState(shouldHighlight))}
+                                    />
+                                </View>
+                            )}
+                            {props.shouldRenderHTML ? (
+                                <RenderHTML html={props.text} />
+                            ) : (
+                                <Text
+                                    style={[...props.textStyles]}
+                                    onPress={props.onPress}
+                                >
+                                    {props.text}
+                                </Text>
+                            )}
+                        </View>
+                        {props.shouldShowCloseButton && (
+                            <Tooltip text={props.translate('common.close')}>
+                                <PressableWithFeedback
+                                    onPress={props.onClose}
+                                    accessibilityRole="button"
+                                    accessibilityLabel={props.translate('common.close')}
+                                >
+                                    <Icon src={Expensicons.Close} />
+                                </PressableWithFeedback>
+                            </Tooltip>
                         )}
                     </View>
-                    {props.shouldShowCloseButton && (
-                        <Tooltip text={props.translate('common.close')}>
-                            <PressableWithFeedback
-                                onPress={props.onClose}
-                                accessibilityRole="button"
-                                accessibilityLabel={props.translate('common.close')}
-                            >
-                                <Icon src={Expensicons.Close} />
-                            </PressableWithFeedback>
-                        </Tooltip>
-                    )}
-                </View>
-            );
-        }}
-    </Hoverable>
-);
+                );
+            }}
+        </Hoverable>
+    );
+}
 
 Banner.propTypes = propTypes;
 Banner.defaultProps = defaultProps;
diff --git a/src/components/BaseMiniContextMenuItem.js b/src/components/BaseMiniContextMenuItem.js
index 47e6ab6cd7dd..67430902a947 100644
--- a/src/components/BaseMiniContextMenuItem.js
+++ b/src/components/BaseMiniContextMenuItem.js
@@ -46,26 +46,28 @@ const defaultProps = {
  * @param {Object} props
  * @returns {JSX.Element}
  */
-const BaseMiniContextMenuItem = (props) => (
-    <Tooltip text={props.tooltipText}>
-        <Pressable
-            ref={props.innerRef}
-            focusable
-            onPress={props.onPress}
-            accessibilityLabel={props.tooltipText}
-            style={({hovered, pressed}) => [
-                styles.reportActionContextMenuMiniButton,
-                StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, props.isDelayButtonStateComplete)),
-            ]}
-        >
-            {(pressableState) => (
-                <View style={[StyleUtils.getWidthAndHeightStyle(variables.iconSizeNormal), styles.alignItemsCenter, styles.justifyContentCenter]}>
-                    {_.isFunction(props.children) ? props.children(pressableState) : props.children}
-                </View>
-            )}
-        </Pressable>
-    </Tooltip>
-);
+function BaseMiniContextMenuItem(props) {
+    return (
+        <Tooltip text={props.tooltipText}>
+            <Pressable
+                ref={props.innerRef}
+                focusable
+                onPress={props.onPress}
+                accessibilityLabel={props.tooltipText}
+                style={({hovered, pressed}) => [
+                    styles.reportActionContextMenuMiniButton,
+                    StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, props.isDelayButtonStateComplete)),
+                ]}
+            >
+                {(pressableState) => (
+                    <View style={[StyleUtils.getWidthAndHeightStyle(variables.iconSizeNormal), styles.alignItemsCenter, styles.justifyContentCenter]}>
+                        {_.isFunction(props.children) ? props.children(pressableState) : props.children}
+                    </View>
+                )}
+            </Pressable>
+        </Tooltip>
+    );
+}
 
 BaseMiniContextMenuItem.propTypes = propTypes;
 BaseMiniContextMenuItem.defaultProps = defaultProps;
diff --git a/src/components/BlockingViews/BlockingView.js b/src/components/BlockingViews/BlockingView.js
index 0ac4ec4a9e13..d02fa55a6434 100644
--- a/src/components/BlockingViews/BlockingView.js
+++ b/src/components/BlockingViews/BlockingView.js
@@ -49,29 +49,31 @@ const defaultProps = {
     onLinkPress: () => Navigation.dismissModal(),
 };
 
-const BlockingView = (props) => (
-    <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter, styles.ph10]}>
-        <Icon
-            src={props.icon}
-            fill={props.iconColor}
-            width={props.iconWidth}
-            height={props.iconHeight}
-        />
-        <Text style={[styles.notFoundTextHeader]}>{props.title}</Text>
-        <AutoEmailLink
-            style={[styles.textAlignCenter]}
-            text={props.subtitle}
-        />
-        {props.shouldShowLink ? (
-            <TextLink
-                onPress={props.onLinkPress}
-                style={[styles.link, styles.mt2]}
-            >
-                {props.link}
-            </TextLink>
-        ) : null}
-    </View>
-);
+function BlockingView(props) {
+    return (
+        <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter, styles.ph10]}>
+            <Icon
+                src={props.icon}
+                fill={props.iconColor}
+                width={props.iconWidth}
+                height={props.iconHeight}
+            />
+            <Text style={[styles.notFoundTextHeader]}>{props.title}</Text>
+            <AutoEmailLink
+                style={[styles.textAlignCenter]}
+                text={props.subtitle}
+            />
+            {props.shouldShowLink ? (
+                <TextLink
+                    onPress={props.onLinkPress}
+                    style={[styles.link, styles.mt2]}
+                >
+                    {props.link}
+                </TextLink>
+            ) : null}
+        </View>
+    );
+}
 
 BlockingView.propTypes = propTypes;
 BlockingView.defaultProps = defaultProps;
diff --git a/src/components/BlockingViews/FullPageNotFoundView.js b/src/components/BlockingViews/FullPageNotFoundView.js
index d62f2c2203fb..93006fc8f170 100644
--- a/src/components/BlockingViews/FullPageNotFoundView.js
+++ b/src/components/BlockingViews/FullPageNotFoundView.js
@@ -50,7 +50,7 @@ const defaultProps = {
 };
 
 // eslint-disable-next-line rulesdir/no-negated-variables
-const FullPageNotFoundView = (props) => {
+function FullPageNotFoundView(props) {
     if (props.shouldShow) {
         return (
             <>
@@ -72,7 +72,7 @@ const FullPageNotFoundView = (props) => {
     }
 
     return props.children;
-};
+}
 
 FullPageNotFoundView.propTypes = propTypes;
 FullPageNotFoundView.defaultProps = defaultProps;
diff --git a/src/components/BlockingViews/FullPageOfflineBlockingView.js b/src/components/BlockingViews/FullPageOfflineBlockingView.js
index 490753c9abf4..148c7c751bee 100644
--- a/src/components/BlockingViews/FullPageOfflineBlockingView.js
+++ b/src/components/BlockingViews/FullPageOfflineBlockingView.js
@@ -18,7 +18,7 @@ const propTypes = {
     network: networkPropTypes.isRequired,
 };
 
-const FullPageOfflineBlockingView = (props) => {
+function FullPageOfflineBlockingView(props) {
     if (props.network.isOffline) {
         return (
             <BlockingView
@@ -30,7 +30,7 @@ const FullPageOfflineBlockingView = (props) => {
     }
 
     return props.children;
-};
+}
 
 FullPageOfflineBlockingView.propTypes = propTypes;
 FullPageOfflineBlockingView.displayName = 'FullPageOfflineBlockingView';
diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js
index 0d7cfc570670..a16d5044ab58 100644
--- a/src/components/ButtonWithDropdownMenu.js
+++ b/src/components/ButtonWithDropdownMenu.js
@@ -48,7 +48,7 @@ const defaultProps = {
     style: [],
 };
 
-const ButtonWithDropdownMenu = (props) => {
+function ButtonWithDropdownMenu(props) {
     const [selectedItemIndex, setSelectedItemIndex] = useState(0);
     const [isMenuVisible, setIsMenuVisible] = useState(false);
     const [popoverAnchorPosition, setPopoverAnchorPosition] = useState(null);
@@ -130,7 +130,7 @@ const ButtonWithDropdownMenu = (props) => {
             )}
         </View>
     );
-};
+}
 
 ButtonWithDropdownMenu.propTypes = propTypes;
 ButtonWithDropdownMenu.defaultProps = defaultProps;
diff --git a/src/components/CalendarPicker/ArrowIcon.js b/src/components/CalendarPicker/ArrowIcon.js
index aea61b39122e..75312c894524 100644
--- a/src/components/CalendarPicker/ArrowIcon.js
+++ b/src/components/CalendarPicker/ArrowIcon.js
@@ -20,11 +20,13 @@ const defaultProps = {
     direction: CONST.DIRECTION.RIGHT,
 };
 
-const ArrowIcon = (props) => (
-    <View style={[styles.p1, StyleUtils.getDirectionStyle(props.direction), props.disabled ? styles.buttonOpacityDisabled : {}]}>
-        <Icon src={Expensicons.ArrowRight} />
-    </View>
-);
+function ArrowIcon(props) {
+    return (
+        <View style={[styles.p1, StyleUtils.getDirectionStyle(props.direction), props.disabled ? styles.buttonOpacityDisabled : {}]}>
+            <Icon src={Expensicons.ArrowRight} />
+        </View>
+    );
+}
 
 ArrowIcon.displayName = 'ArrowIcon';
 ArrowIcon.propTypes = propTypes;
diff --git a/src/components/CardOverlay.js b/src/components/CardOverlay.js
index b1fb7d47eb2a..5a94b48ec9af 100644
--- a/src/components/CardOverlay.js
+++ b/src/components/CardOverlay.js
@@ -2,7 +2,9 @@ import React from 'react';
 import {View} from 'react-native';
 import styles from '../styles/styles';
 
-const CardOverlay = () => <View style={styles.cardOverlay} />;
+function CardOverlay() {
+    return <View style={styles.cardOverlay} />;
+}
 CardOverlay.displayName = 'CardOverlay';
 
 export default CardOverlay;
diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js
index a11af52f6887..cdf3c29ac8d1 100644
--- a/src/components/CheckboxWithLabel.js
+++ b/src/components/CheckboxWithLabel.js
@@ -78,7 +78,7 @@ const defaultProps = {
     forwardedRef: () => {},
 };
 
-const CheckboxWithLabel = (props) => {
+function CheckboxWithLabel(props) {
     // We need to pick the first value that is strictly a boolean
     // https://github.com/Expensify/App/issues/16885#issuecomment-1520846065
     const [isChecked, setIsChecked] = useState(_.find([props.value, props.defaultValue, props.isChecked], (value) => _.isBoolean(value)));
@@ -122,7 +122,7 @@ const CheckboxWithLabel = (props) => {
             <FormHelpMessage message={props.errorText} />
         </View>
     );
-};
+}
 
 CheckboxWithLabel.propTypes = propTypes;
 CheckboxWithLabel.defaultProps = defaultProps;
diff --git a/src/components/CheckboxWithTooltip/index.js b/src/components/CheckboxWithTooltip/index.js
index 06f958c0ee1a..12f67fcd8c8a 100644
--- a/src/components/CheckboxWithTooltip/index.js
+++ b/src/components/CheckboxWithTooltip/index.js
@@ -6,7 +6,7 @@ import {propTypes, defaultProps} from './checkboxWithTooltipPropTypes';
 import Tooltip from '../Tooltip';
 import withWindowDimensions from '../withWindowDimensions';
 
-const CheckboxWithTooltip = (props) => {
+function CheckboxWithTooltip(props) {
     if (props.isSmallScreenWidth || props.isMediumScreenWidth) {
         return (
             <CheckboxWithTooltipForMobileWebAndNative
@@ -37,7 +37,7 @@ const CheckboxWithTooltip = (props) => {
             )}
         </View>
     );
-};
+}
 
 CheckboxWithTooltip.propTypes = propTypes;
 CheckboxWithTooltip.defaultProps = defaultProps;
diff --git a/src/components/CheckboxWithTooltip/index.native.js b/src/components/CheckboxWithTooltip/index.native.js
index 3e007efcd3ae..56605f95ac2e 100644
--- a/src/components/CheckboxWithTooltip/index.native.js
+++ b/src/components/CheckboxWithTooltip/index.native.js
@@ -3,15 +3,17 @@ import {propTypes, defaultProps} from './checkboxWithTooltipPropTypes';
 import withWindowDimensions from '../withWindowDimensions';
 import CheckboxWithTooltipForMobileWebAndNative from './CheckboxWithTooltipForMobileWebAndNative';
 
-const CheckboxWithTooltip = (props) => (
-    <CheckboxWithTooltipForMobileWebAndNative
-        style={props.style}
-        isChecked={props.isChecked}
-        onPress={props.onPress}
-        text={props.text}
-        toggleTooltip={props.toggleTooltip}
-    />
-);
+function CheckboxWithTooltip(props) {
+    return (
+        <CheckboxWithTooltipForMobileWebAndNative
+            style={props.style}
+            isChecked={props.isChecked}
+            onPress={props.onPress}
+            text={props.text}
+            toggleTooltip={props.toggleTooltip}
+        />
+    );
+}
 
 CheckboxWithTooltip.propTypes = propTypes;
 CheckboxWithTooltip.defaultProps = defaultProps;
diff --git a/src/components/CollapsibleSection/Collapsible/index.native.js b/src/components/CollapsibleSection/Collapsible/index.native.js
index d9f2066b65c6..022d2a2a2ff9 100644
--- a/src/components/CollapsibleSection/Collapsible/index.native.js
+++ b/src/components/CollapsibleSection/Collapsible/index.native.js
@@ -14,7 +14,9 @@ const defaultProps = {
     isOpened: false,
 };
 
-const Collapsible = (props) => <CollapsibleRN collapsed={!props.isOpened}>{props.children}</CollapsibleRN>;
+function Collapsible(props) {
+    return <CollapsibleRN collapsed={!props.isOpened}>{props.children}</CollapsibleRN>;
+}
 
 Collapsible.displayName = 'Collapsible';
 Collapsible.propTypes = propTypes;
diff --git a/src/components/CommunicationsLink.js b/src/components/CommunicationsLink.js
index 1f7fe1cf5987..c8ca37f51c0f 100644
--- a/src/components/CommunicationsLink.js
+++ b/src/components/CommunicationsLink.js
@@ -25,21 +25,23 @@ const defaultProps = {
     containerStyles: [],
 };
 
-const CommunicationsLink = (props) => (
-    <View style={[styles.flexRow, styles.pRelative, ...props.containerStyles]}>
-        <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, styles.communicationsLinkHeight]}>
-            <View style={styles.flexShrink1}>{props.children}</View>
-            <ContextMenuItem
-                icon={Expensicons.Copy}
-                text={props.translate('reportActionContextMenu.copyToClipboard')}
-                successIcon={Expensicons.Checkmark}
-                successText={props.translate('reportActionContextMenu.copied')}
-                isMini
-                onPress={() => Clipboard.setString(props.value)}
-            />
+function CommunicationsLink(props) {
+    return (
+        <View style={[styles.flexRow, styles.pRelative, ...props.containerStyles]}>
+            <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, styles.communicationsLinkHeight]}>
+                <View style={styles.flexShrink1}>{props.children}</View>
+                <ContextMenuItem
+                    icon={Expensicons.Copy}
+                    text={props.translate('reportActionContextMenu.copyToClipboard')}
+                    successIcon={Expensicons.Checkmark}
+                    successText={props.translate('reportActionContextMenu.copied')}
+                    isMini
+                    onPress={() => Clipboard.setString(props.value)}
+                />
+            </View>
         </View>
-    </View>
-);
+    );
+}
 
 CommunicationsLink.propTypes = propTypes;
 CommunicationsLink.defaultProps = defaultProps;
diff --git a/src/components/ComposeProviders.js b/src/components/ComposeProviders.js
index 5291d4c961ce..edcc0a917c51 100644
--- a/src/components/ComposeProviders.js
+++ b/src/components/ComposeProviders.js
@@ -10,17 +10,19 @@ const propTypes = {
     children: PropTypes.node.isRequired,
 };
 
-const ComposeProviders = (props) => (
-    <>
-        {_.reduceRight(
-            props.components,
-            (memo, Component) => (
-                <Component>{memo}</Component>
-            ),
-            props.children,
-        )}
-    </>
-);
+function ComposeProviders(props) {
+    return (
+        <>
+            {_.reduceRight(
+                props.components,
+                (memo, Component) => (
+                    <Component>{memo}</Component>
+                ),
+                props.children,
+            )}
+        </>
+    );
+}
 
 ComposeProviders.propTypes = propTypes;
 ComposeProviders.displayName = 'ComposeProviders';
diff --git a/src/components/ConfirmContent.js b/src/components/ConfirmContent.js
index fd0eb25b030c..346a890b6dd1 100644
--- a/src/components/ConfirmContent.js
+++ b/src/components/ConfirmContent.js
@@ -54,31 +54,33 @@ const defaultProps = {
     contentStyles: [],
 };
 
-const ConfirmContent = (props) => (
-    <View style={[styles.m5, ...props.contentStyles]}>
-        <View style={[styles.flexRow, styles.mb4]}>
-            <Header title={props.title} />
-        </View>
+function ConfirmContent(props) {
+    return (
+        <View style={[styles.m5, ...props.contentStyles]}>
+            <View style={[styles.flexRow, styles.mb4]}>
+                <Header title={props.title} />
+            </View>
+
+            {_.isString(props.prompt) ? <Text>{props.prompt}</Text> : props.prompt}
 
-        {_.isString(props.prompt) ? <Text>{props.prompt}</Text> : props.prompt}
-
-        <Button
-            success={props.success}
-            danger={props.danger}
-            style={[styles.mt4]}
-            onPress={props.onConfirm}
-            pressOnEnter
-            text={props.confirmText || props.translate('common.yes')}
-        />
-        {props.shouldShowCancelButton && (
             <Button
-                style={[styles.mt3, styles.noSelect]}
-                onPress={props.onCancel}
-                text={props.cancelText || props.translate('common.no')}
+                success={props.success}
+                danger={props.danger}
+                style={[styles.mt4]}
+                onPress={props.onConfirm}
+                pressOnEnter
+                text={props.confirmText || props.translate('common.yes')}
             />
-        )}
-    </View>
-);
+            {props.shouldShowCancelButton && (
+                <Button
+                    style={[styles.mt3, styles.noSelect]}
+                    onPress={props.onCancel}
+                    text={props.cancelText || props.translate('common.no')}
+                />
+            )}
+        </View>
+    );
+}
 
 ConfirmContent.propTypes = propTypes;
 ConfirmContent.defaultProps = defaultProps;
diff --git a/src/components/ConfirmModal.js b/src/components/ConfirmModal.js
index 91952809cc84..e9e22c0fc012 100755
--- a/src/components/ConfirmModal.js
+++ b/src/components/ConfirmModal.js
@@ -58,30 +58,32 @@ const defaultProps = {
     onModalHide: () => {},
 };
 
-const ConfirmModal = (props) => (
-    <Modal
-        onSubmit={props.onConfirm}
-        onClose={props.onCancel}
-        isVisible={props.isVisible}
-        shouldSetModalVisibility={props.shouldSetModalVisibility}
-        onModalHide={props.onModalHide}
-        type={props.isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.CONFIRM}
-    >
-        <ConfirmContent
-            title={props.title}
-            /* Disable onConfirm function if the modal is being dismissed, otherwise the confirmation
+function ConfirmModal(props) {
+    return (
+        <Modal
+            onSubmit={props.onConfirm}
+            onClose={props.onCancel}
+            isVisible={props.isVisible}
+            shouldSetModalVisibility={props.shouldSetModalVisibility}
+            onModalHide={props.onModalHide}
+            type={props.isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.CONFIRM}
+        >
+            <ConfirmContent
+                title={props.title}
+                /* Disable onConfirm function if the modal is being dismissed, otherwise the confirmation
             function can be triggered multiple times if the user clicks on the button multiple times. */
-            onConfirm={() => (props.isVisible ? props.onConfirm() : null)}
-            onCancel={props.onCancel}
-            confirmText={props.confirmText}
-            cancelText={props.cancelText}
-            prompt={props.prompt}
-            success={props.success}
-            danger={props.danger}
-            shouldShowCancelButton={props.shouldShowCancelButton}
-        />
-    </Modal>
-);
+                onConfirm={() => (props.isVisible ? props.onConfirm() : null)}
+                onCancel={props.onCancel}
+                confirmText={props.confirmText}
+                cancelText={props.cancelText}
+                prompt={props.prompt}
+                success={props.success}
+                danger={props.danger}
+                shouldShowCancelButton={props.shouldShowCancelButton}
+            />
+        </Modal>
+    );
+}
 
 ConfirmModal.propTypes = propTypes;
 ConfirmModal.defaultProps = defaultProps;
diff --git a/src/components/ConfirmPopover.js b/src/components/ConfirmPopover.js
index ab2dcbdc9c3c..88df6347f850 100644
--- a/src/components/ConfirmPopover.js
+++ b/src/components/ConfirmPopover.js
@@ -55,27 +55,29 @@ const defaultProps = {
     contentStyles: [],
 };
 
-const ConfirmPopover = (props) => (
-    <Popover
-        onSubmit={props.onConfirm}
-        onClose={props.onCancel}
-        isVisible={props.isVisible}
-        anchorPosition={props.anchorPosition}
-    >
-        <ConfirmContent
-            contentStyles={props.contentStyles}
-            title={props.title}
-            prompt={props.prompt}
-            confirmText={props.confirmText}
-            cancelText={props.cancelText}
-            danger={props.danger}
-            shouldShowCancelButton={props.shouldShowCancelButton}
-            onConfirm={props.onConfirm}
-            onCancel={props.onCancel}
+function ConfirmPopover(props) {
+    return (
+        <Popover
+            onSubmit={props.onConfirm}
             onClose={props.onCancel}
-        />
-    </Popover>
-);
+            isVisible={props.isVisible}
+            anchorPosition={props.anchorPosition}
+        >
+            <ConfirmContent
+                contentStyles={props.contentStyles}
+                title={props.title}
+                prompt={props.prompt}
+                confirmText={props.confirmText}
+                cancelText={props.cancelText}
+                danger={props.danger}
+                shouldShowCancelButton={props.shouldShowCancelButton}
+                onConfirm={props.onConfirm}
+                onCancel={props.onCancel}
+                onClose={props.onCancel}
+            />
+        </Popover>
+    );
+}
 
 ConfirmPopover.propTypes = propTypes;
 ConfirmPopover.defaultProps = defaultProps;
diff --git a/src/components/ConfirmationPage.js b/src/components/ConfirmationPage.js
index 68110d6765fc..1dc56b0afa6f 100644
--- a/src/components/ConfirmationPage.js
+++ b/src/components/ConfirmationPage.js
@@ -38,31 +38,33 @@ const defaultProps = {
     shouldShowButton: false,
 };
 
-const ConfirmationPage = (props) => (
-    <>
-        <View style={[styles.screenCenteredContainer, styles.alignItemsCenter]}>
-            <Lottie
-                source={props.animation}
-                autoPlay
-                loop
-                style={styles.confirmationAnimation}
-            />
-            <Text style={[styles.textHeadline, styles.textAlignCenter, styles.mv2]}>{props.heading}</Text>
-            <Text style={styles.textAlignCenter}>{props.description}</Text>
-        </View>
-        {props.shouldShowButton && (
-            <FixedFooter>
-                <Button
-                    success
-                    text={props.buttonText}
-                    style={styles.mt6}
-                    pressOnEnter
-                    onPress={props.onButtonPress}
+function ConfirmationPage(props) {
+    return (
+        <>
+            <View style={[styles.screenCenteredContainer, styles.alignItemsCenter]}>
+                <Lottie
+                    source={props.animation}
+                    autoPlay
+                    loop
+                    style={styles.confirmationAnimation}
                 />
-            </FixedFooter>
-        )}
-    </>
-);
+                <Text style={[styles.textHeadline, styles.textAlignCenter, styles.mv2]}>{props.heading}</Text>
+                <Text style={styles.textAlignCenter}>{props.description}</Text>
+            </View>
+            {props.shouldShowButton && (
+                <FixedFooter>
+                    <Button
+                        success
+                        text={props.buttonText}
+                        style={styles.mt6}
+                        pressOnEnter
+                        onPress={props.onButtonPress}
+                    />
+                </FixedFooter>
+            )}
+        </>
+    );
+}
 
 ConfirmationPage.propTypes = propTypes;
 ConfirmationPage.defaultProps = defaultProps;
diff --git a/src/components/CopyTextToClipboard.js b/src/components/CopyTextToClipboard.js
index 1f9affab67d4..9bf846f87108 100644
--- a/src/components/CopyTextToClipboard.js
+++ b/src/components/CopyTextToClipboard.js
@@ -20,7 +20,7 @@ const defaultProps = {
     textStyles: [],
 };
 
-const CopyTextToClipboard = (props) => {
+function CopyTextToClipboard(props) {
     const copyToClipboard = useCallback(() => {
         Clipboard.setString(props.text);
     }, [props.text]);
@@ -35,7 +35,7 @@ const CopyTextToClipboard = (props) => {
             onPress={copyToClipboard}
         />
     );
-};
+}
 
 CopyTextToClipboard.propTypes = propTypes;
 CopyTextToClipboard.defaultProps = defaultProps;
diff --git a/src/components/CurrentWalletBalance.js b/src/components/CurrentWalletBalance.js
index 974e2527d0cb..642e6937f1bf 100644
--- a/src/components/CurrentWalletBalance.js
+++ b/src/components/CurrentWalletBalance.js
@@ -30,10 +30,10 @@ const defaultProps = {
     balanceStyles: [],
 };
 
-const CurrentWalletBalance = (props) => {
+function CurrentWalletBalance(props) {
     const formattedBalance = CurrencyUtils.convertToDisplayString(props.userWallet.currentBalance);
     return <Text style={[styles.pv5, styles.alignSelfCenter, styles.textHeadline, styles.textXXXLarge, ...props.balanceStyles]}>{`${formattedBalance}`}</Text>;
-};
+}
 
 CurrentWalletBalance.propTypes = propTypes;
 CurrentWalletBalance.defaultProps = defaultProps;
diff --git a/src/components/CustomDevMenu/index.native.js b/src/components/CustomDevMenu/index.native.js
index 745cd697b460..52ca0e43782c 100644
--- a/src/components/CustomDevMenu/index.native.js
+++ b/src/components/CustomDevMenu/index.native.js
@@ -2,13 +2,13 @@ import {useEffect} from 'react';
 import DevMenu from 'react-native-dev-menu';
 import toggleTestToolsModal from '../../libs/actions/TestTool';
 
-const CustomDevMenu = () => {
+function CustomDevMenu() {
     useEffect(() => {
         DevMenu.addItem('Open Test Preferences', toggleTestToolsModal);
     }, []);
 
     return null;
-};
+}
 
 CustomDevMenu.displayName = 'CustomDevMenu';
 
diff --git a/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js b/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js
index 7557519dce1d..3392b6c3c9d8 100644
--- a/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js
+++ b/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js
@@ -16,34 +16,36 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-const DeeplinkRedirectLoadingIndicator = (props) => (
-    <View style={styles.deeplinkWrapperContainer}>
-        <View style={styles.deeplinkWrapperMessage}>
-            <View style={styles.mb2}>
+function DeeplinkRedirectLoadingIndicator(props) {
+    return (
+        <View style={styles.deeplinkWrapperContainer}>
+            <View style={styles.deeplinkWrapperMessage}>
+                <View style={styles.mb2}>
+                    <Icon
+                        width={200}
+                        height={164}
+                        src={Illustrations.RocketBlue}
+                    />
+                </View>
+                <Text style={[styles.textHeadline, styles.textXXLarge]}>{props.translate('deeplinkWrapper.launching')}</Text>
+                <View style={[styles.mt2, styles.fontSizeNormal, styles.textAlignCenter]}>
+                    <Text>{props.translate('deeplinkWrapper.redirectedToDesktopApp')}</Text>
+                    <Text>
+                        {props.translate('deeplinkWrapper.youCanAlso')} <TextLink onPress={props.openLinkInBrowser}>{props.translate('deeplinkWrapper.openLinkInBrowser')}</TextLink>.
+                    </Text>
+                </View>
+            </View>
+            <View style={styles.deeplinkWrapperFooter}>
                 <Icon
-                    width={200}
-                    height={164}
-                    src={Illustrations.RocketBlue}
+                    width={154}
+                    height={34}
+                    fill={colors.green}
+                    src={Expensicons.ExpensifyWordmark}
                 />
             </View>
-            <Text style={[styles.textHeadline, styles.textXXLarge]}>{props.translate('deeplinkWrapper.launching')}</Text>
-            <View style={[styles.mt2, styles.fontSizeNormal, styles.textAlignCenter]}>
-                <Text>{props.translate('deeplinkWrapper.redirectedToDesktopApp')}</Text>
-                <Text>
-                    {props.translate('deeplinkWrapper.youCanAlso')} <TextLink onPress={props.openLinkInBrowser}>{props.translate('deeplinkWrapper.openLinkInBrowser')}</TextLink>.
-                </Text>
-            </View>
-        </View>
-        <View style={styles.deeplinkWrapperFooter}>
-            <Icon
-                width={154}
-                height={34}
-                fill={colors.green}
-                src={Expensicons.ExpensifyWordmark}
-            />
         </View>
-    </View>
-);
+    );
+}
 
 DeeplinkRedirectLoadingIndicator.propTypes = propTypes;
 DeeplinkRedirectLoadingIndicator.displayName = 'DeeplinkRedirectLoadingIndicator';
diff --git a/src/components/DisplayNames/index.native.js b/src/components/DisplayNames/index.native.js
index 4aea95c44ca7..458c6b0acf9b 100644
--- a/src/components/DisplayNames/index.native.js
+++ b/src/components/DisplayNames/index.native.js
@@ -3,15 +3,17 @@ import {propTypes, defaultProps} from './displayNamesPropTypes';
 import Text from '../Text';
 
 // As we don't have to show tooltips of the Native platform so we simply render the full display names list.
-const DisplayNames = (props) => (
-    <Text
-        accessibilityLabel={props.accessibilityLabel}
-        style={props.textStyles}
-        numberOfLines={props.numberOfLines}
-    >
-        {props.fullTitle}
-    </Text>
-);
+function DisplayNames(props) {
+    return (
+        <Text
+            accessibilityLabel={props.accessibilityLabel}
+            style={props.textStyles}
+            numberOfLines={props.numberOfLines}
+        >
+            {props.fullTitle}
+        </Text>
+    );
+}
 
 DisplayNames.propTypes = propTypes;
 DisplayNames.defaultProps = defaultProps;
diff --git a/src/components/DotIndicatorMessage.js b/src/components/DotIndicatorMessage.js
index 70304ac437e4..197c111c0ee3 100644
--- a/src/components/DotIndicatorMessage.js
+++ b/src/components/DotIndicatorMessage.js
@@ -32,7 +32,7 @@ const defaultProps = {
     style: [],
 };
 
-const DotIndicatorMessage = (props) => {
+function DotIndicatorMessage(props) {
     if (_.isEmpty(props.messages)) {
         return null;
     }
@@ -72,7 +72,7 @@ const DotIndicatorMessage = (props) => {
             </View>
         </View>
     );
-};
+}
 
 DotIndicatorMessage.propTypes = propTypes;
 DotIndicatorMessage.defaultProps = defaultProps;
diff --git a/src/components/DragAndDrop/DropZone/index.js b/src/components/DragAndDrop/DropZone/index.js
index 1fc7a921eb1d..525e5a8c1484 100644
--- a/src/components/DragAndDrop/DropZone/index.js
+++ b/src/components/DragAndDrop/DropZone/index.js
@@ -15,16 +15,18 @@ const propTypes = {
     dropZoneId: PropTypes.string.isRequired,
 };
 
-const DropZone = (props) => (
-    <Portal hostName={props.dropZoneViewHolderName}>
-        <View style={[styles.fullScreenTransparentOverlay, styles.alignItemsCenter, styles.justifyContentCenter]}>{props.children}</View>
-        {/* Necessary for blocking events on content which can publish unwanted dragleave even if we are inside dropzone  */}
-        <View
-            nativeID={props.dropZoneId}
-            style={styles.dropZoneTopInvisibleOverlay}
-        />
-    </Portal>
-);
+function DropZone(props) {
+    return (
+        <Portal hostName={props.dropZoneViewHolderName}>
+            <View style={[styles.fullScreenTransparentOverlay, styles.alignItemsCenter, styles.justifyContentCenter]}>{props.children}</View>
+            {/* Necessary for blocking events on content which can publish unwanted dragleave even if we are inside dropzone  */}
+            <View
+                nativeID={props.dropZoneId}
+                style={styles.dropZoneTopInvisibleOverlay}
+            />
+        </Portal>
+    );
+}
 
 DropZone.displayName = 'DropZone';
 DropZone.propTypes = propTypes;
diff --git a/src/components/EmojiPicker/CategoryShortcutBar.js b/src/components/EmojiPicker/CategoryShortcutBar.js
index 5cb47268d7da..00fee688f986 100644
--- a/src/components/EmojiPicker/CategoryShortcutBar.js
+++ b/src/components/EmojiPicker/CategoryShortcutBar.js
@@ -19,18 +19,20 @@ const propTypes = {
     ).isRequired,
 };
 
-const CategoryShortcutBar = (props) => (
-    <View style={[styles.ph4, styles.flexRow]}>
-        {_.map(props.headerEmojis, (headerEmoji, i) => (
-            <CategoryShortcutButton
-                icon={headerEmoji.icon}
-                onPress={() => props.onPress(headerEmoji.index)}
-                key={`categoryShortcut${i}`}
-                code={headerEmoji.code}
-            />
-        ))}
-    </View>
-);
+function CategoryShortcutBar(props) {
+    return (
+        <View style={[styles.ph4, styles.flexRow]}>
+            {_.map(props.headerEmojis, (headerEmoji, i) => (
+                <CategoryShortcutButton
+                    icon={headerEmoji.icon}
+                    onPress={() => props.onPress(headerEmoji.index)}
+                    key={`categoryShortcut${i}`}
+                    code={headerEmoji.code}
+                />
+            ))}
+        </View>
+    );
+}
 
 CategoryShortcutBar.propTypes = propTypes;
 CategoryShortcutBar.displayName = 'CategoryShortcutBar';
diff --git a/src/components/EmojiPicker/EmojiPickerButton.js b/src/components/EmojiPicker/EmojiPickerButton.js
index a6a92cf44cc4..47dc93ac138a 100644
--- a/src/components/EmojiPicker/EmojiPickerButton.js
+++ b/src/components/EmojiPicker/EmojiPickerButton.js
@@ -25,7 +25,7 @@ const defaultProps = {
     nativeID: '',
 };
 
-const EmojiPickerButton = (props) => {
+function EmojiPickerButton(props) {
     let emojiPopoverAnchor = null;
     return (
         <Tooltip text={props.translate('reportActionCompose.emoji')}>
@@ -46,7 +46,7 @@ const EmojiPickerButton = (props) => {
             </PressableWithoutFeedback>
         </Tooltip>
     );
-};
+}
 
 EmojiPickerButton.propTypes = propTypes;
 EmojiPickerButton.defaultProps = defaultProps;
diff --git a/src/components/EmojiSuggestions.js b/src/components/EmojiSuggestions.js
index 2af9dfc99368..98cd871a7250 100644
--- a/src/components/EmojiSuggestions.js
+++ b/src/components/EmojiSuggestions.js
@@ -57,7 +57,7 @@ const defaultProps = {highlightedEmojiIndex: 0};
  */
 const keyExtractor = (item, index) => `${item.name}+${index}}`;
 
-const EmojiSuggestions = (props) => {
+function EmojiSuggestions(props) {
     /**
      * Render an emoji suggestion menu item component.
      * @param {Object} item
@@ -97,7 +97,7 @@ const EmojiSuggestions = (props) => {
             accessibilityLabelExtractor={keyExtractor}
         />
     );
-};
+}
 
 EmojiSuggestions.propTypes = propTypes;
 EmojiSuggestions.defaultProps = defaultProps;
diff --git a/src/components/EnvironmentBadge.js b/src/components/EnvironmentBadge.js
index 73d97e8060cb..7602de8dbb87 100644
--- a/src/components/EnvironmentBadge.js
+++ b/src/components/EnvironmentBadge.js
@@ -13,7 +13,7 @@ const ENVIRONMENT_SHORT_FORM = {
     [CONST.ENVIRONMENT.ADHOC]: 'ADHOC',
 };
 
-const EnvironmentBadge = (props) => {
+function EnvironmentBadge(props) {
     // If we are on production, don't show any badge
     if (props.environment === CONST.ENVIRONMENT.PRODUCTION) {
         return null;
@@ -31,7 +31,7 @@ const EnvironmentBadge = (props) => {
             environment={props.environment}
         />
     );
-};
+}
 
 EnvironmentBadge.displayName = 'EnvironmentBadge';
 EnvironmentBadge.propTypes = environmentPropTypes;
diff --git a/src/components/ExpensifyCashLogo.js b/src/components/ExpensifyCashLogo.js
index b7cc7da39779..8e6648407751 100644
--- a/src/components/ExpensifyCashLogo.js
+++ b/src/components/ExpensifyCashLogo.js
@@ -24,7 +24,7 @@ const logoComponents = {
     [CONST.ENVIRONMENT.ADHOC]: AdhocLogo,
 };
 
-const ExpensifyCashLogo = (props) => {
+function ExpensifyCashLogo(props) {
     // PascalCase is required for React components, so capitalize the const here
     const LogoComponent = logoComponents[props.environment];
     return (
@@ -33,7 +33,7 @@ const ExpensifyCashLogo = (props) => {
             height={props.height}
         />
     );
-};
+}
 
 ExpensifyCashLogo.displayName = 'ExpensifyCashLogo';
 ExpensifyCashLogo.propTypes = propTypes;
diff --git a/src/components/ExpensifyWordmark.js b/src/components/ExpensifyWordmark.js
index a2766dc0bcc4..adff27376207 100644
--- a/src/components/ExpensifyWordmark.js
+++ b/src/components/ExpensifyWordmark.js
@@ -33,7 +33,7 @@ const logoComponents = {
     [CONST.ENVIRONMENT.PRODUCTION]: ProductionLogo,
 };
 
-const ExpensifyWordmark = (props) => {
+function ExpensifyWordmark(props) {
     // PascalCase is required for React components, so capitalize the const here
     const LogoComponent = logoComponents[props.environment] || AdHocLogo;
     return (
@@ -50,7 +50,7 @@ const ExpensifyWordmark = (props) => {
             </View>
         </>
     );
-};
+}
 
 ExpensifyWordmark.displayName = 'ExpensifyWordmark';
 ExpensifyWordmark.defaultProps = defaultProps;
diff --git a/src/components/FixedFooter.js b/src/components/FixedFooter.js
index ccff806d4508..bad2639ae7e8 100644
--- a/src/components/FixedFooter.js
+++ b/src/components/FixedFooter.js
@@ -16,7 +16,9 @@ const defaultProps = {
     style: [],
 };
 
-const FixedFooter = (props) => <View style={[styles.ph5, styles.pb5, styles.flexShrink0, ...props.style]}>{props.children}</View>;
+function FixedFooter(props) {
+    return <View style={[styles.ph5, styles.pb5, styles.flexShrink0, ...props.style]}>{props.children}</View>;
+}
 
 FixedFooter.propTypes = propTypes;
 FixedFooter.defaultProps = defaultProps;
diff --git a/src/components/Form.js b/src/components/Form.js
index 88a9adb3e11a..afc50d24763c 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -88,7 +88,7 @@ const defaultProps = {
     validate: () => ({}),
 };
 
-const Form = (props) => {
+function Form(props) {
     const [errors, setErrors] = useState({});
     const [inputValues, setInputValues] = useState({...props.draftValues});
     const formRef = useRef(null);
@@ -403,7 +403,7 @@ const Form = (props) => {
             }
         </SafeAreaConsumer>
     );
-};
+}
 
 Form.displayName = 'Form';
 Form.propTypes = propTypes;
diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js
index c64df80d433c..beb97f36c665 100644
--- a/src/components/FormAlertWithSubmitButton.js
+++ b/src/components/FormAlertWithSubmitButton.js
@@ -60,40 +60,42 @@ const defaultProps = {
     footerContent: null,
 };
 
-const FormAlertWithSubmitButton = (props) => (
-    <FormAlertWrapper
-        containerStyles={[styles.mh5, styles.mb5, styles.justifyContentEnd, ...props.containerStyles]}
-        isAlertVisible={props.isAlertVisible}
-        isMessageHtml={props.isMessageHtml}
-        message={props.message}
-        onFixTheErrorsLinkPressed={props.onFixTheErrorsLinkPressed}
-    >
-        {(isOffline) => (
-            <View>
-                {isOffline && !props.enabledWhenOffline ? (
-                    <Button
-                        success
-                        isDisabled
-                        text={props.buttonText}
-                        style={[styles.mb3]}
-                        danger={props.isSubmitActionDangerous}
-                    />
-                ) : (
-                    <Button
-                        success
-                        pressOnEnter={!props.disablePressOnEnter}
-                        text={props.buttonText}
-                        onPress={props.onSubmit}
-                        isDisabled={props.isDisabled}
-                        isLoading={props.isLoading}
-                        danger={props.isSubmitActionDangerous}
-                    />
-                )}
-                {props.footerContent}
-            </View>
-        )}
-    </FormAlertWrapper>
-);
+function FormAlertWithSubmitButton(props) {
+    return (
+        <FormAlertWrapper
+            containerStyles={[styles.mh5, styles.mb5, styles.justifyContentEnd, ...props.containerStyles]}
+            isAlertVisible={props.isAlertVisible}
+            isMessageHtml={props.isMessageHtml}
+            message={props.message}
+            onFixTheErrorsLinkPressed={props.onFixTheErrorsLinkPressed}
+        >
+            {(isOffline) => (
+                <View>
+                    {isOffline && !props.enabledWhenOffline ? (
+                        <Button
+                            success
+                            isDisabled
+                            text={props.buttonText}
+                            style={[styles.mb3]}
+                            danger={props.isSubmitActionDangerous}
+                        />
+                    ) : (
+                        <Button
+                            success
+                            pressOnEnter={!props.disablePressOnEnter}
+                            text={props.buttonText}
+                            onPress={props.onSubmit}
+                            isDisabled={props.isDisabled}
+                            isLoading={props.isLoading}
+                            danger={props.isSubmitActionDangerous}
+                        />
+                    )}
+                    {props.footerContent}
+                </View>
+            )}
+        </FormAlertWrapper>
+    );
+}
 
 FormAlertWithSubmitButton.propTypes = propTypes;
 FormAlertWithSubmitButton.defaultProps = defaultProps;
diff --git a/src/components/FormAlertWrapper.js b/src/components/FormAlertWrapper.js
index 5e98fa7f5932..704d9b5a241c 100644
--- a/src/components/FormAlertWrapper.js
+++ b/src/components/FormAlertWrapper.js
@@ -50,7 +50,7 @@ const defaultProps = {
 //
 // This component takes other components as a child prop. It will then render any wrapped components as a function using "render props",
 // and passes it a (bool) isOffline parameter. Child components can then use the isOffline variable to determine offline behavior.
-const FormAlertWrapper = (props) => {
+function FormAlertWrapper(props) {
     let children;
     if (_.isEmpty(props.message)) {
         children = (
@@ -81,7 +81,7 @@ const FormAlertWrapper = (props) => {
             {props.children(props.network.isOffline)}
         </View>
     );
-};
+}
 
 FormAlertWrapper.propTypes = propTypes;
 FormAlertWrapper.defaultProps = defaultProps;
diff --git a/src/components/FormHelpMessage.js b/src/components/FormHelpMessage.js
index 1463b8ca745d..24d78267766b 100644
--- a/src/components/FormHelpMessage.js
+++ b/src/components/FormHelpMessage.js
@@ -31,7 +31,7 @@ const defaultProps = {
     style: [],
 };
 
-const FormHelpMessage = (props) => {
+function FormHelpMessage(props) {
     if (_.isEmpty(props.message) && _.isEmpty(props.children)) {
         return null;
     }
@@ -50,7 +50,7 @@ const FormHelpMessage = (props) => {
             </View>
         </View>
     );
-};
+}
 
 FormHelpMessage.propTypes = propTypes;
 FormHelpMessage.defaultProps = defaultProps;
diff --git a/src/components/FullscreenLoadingIndicator.js b/src/components/FullscreenLoadingIndicator.js
index 7fb23840f0f5..5c212b6dc29e 100644
--- a/src/components/FullscreenLoadingIndicator.js
+++ b/src/components/FullscreenLoadingIndicator.js
@@ -14,7 +14,7 @@ const defaultProps = {
     style: [],
 };
 
-const FullScreenLoadingIndicator = (props) => {
+function FullScreenLoadingIndicator(props) {
     const additionalStyles = _.isArray(props.style) ? props.style : [props.style];
     return (
         <View style={[StyleSheet.absoluteFillObject, styles.fullScreenLoading, ...additionalStyles]}>
@@ -24,7 +24,7 @@ const FullScreenLoadingIndicator = (props) => {
             />
         </View>
     );
-};
+}
 
 FullScreenLoadingIndicator.propTypes = propTypes;
 FullScreenLoadingIndicator.defaultProps = defaultProps;
diff --git a/src/components/GrowlNotification/GrowlNotificationContainer/index.js b/src/components/GrowlNotification/GrowlNotificationContainer/index.js
index 0b361780a619..477448ffbcdc 100644
--- a/src/components/GrowlNotification/GrowlNotificationContainer/index.js
+++ b/src/components/GrowlNotification/GrowlNotificationContainer/index.js
@@ -9,13 +9,20 @@ const propTypes = {
     ...windowDimensionsPropTypes,
 };
 
-const GrowlNotificationContainer = (props) => (
-    <Animated.View
-        style={[styles.growlNotificationContainer, styles.growlNotificationDesktopContainer, styles.growlNotificationTranslateY(props.translateY), props.isSmallScreenWidth && styles.mwn]}
-    >
-        {props.children}
-    </Animated.View>
-);
+function GrowlNotificationContainer(props) {
+    return (
+        <Animated.View
+            style={[
+                styles.growlNotificationContainer,
+                styles.growlNotificationDesktopContainer,
+                styles.growlNotificationTranslateY(props.translateY),
+                props.isSmallScreenWidth && styles.mwn,
+            ]}
+        >
+            {props.children}
+        </Animated.View>
+    );
+}
 
 GrowlNotificationContainer.propTypes = propTypes;
 GrowlNotificationContainer.displayName = 'GrowlNotificationContainer';
diff --git a/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js b/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js
index 536f0e9d06a5..ddc3636ed15b 100644
--- a/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js
+++ b/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js
@@ -9,15 +9,17 @@ const propTypes = {
     ...growlNotificationContainerPropTypes,
 };
 
-const GrowlNotificationContainer = (props) => (
-    <SafeAreaInsetsContext.Consumer>
-        {(insets) => (
-            <Animated.View style={[StyleUtils.getSafeAreaPadding(insets), styles.growlNotificationContainer, styles.growlNotificationTranslateY(props.translateY)]}>
-                {props.children}
-            </Animated.View>
-        )}
-    </SafeAreaInsetsContext.Consumer>
-);
+function GrowlNotificationContainer(props) {
+    return (
+        <SafeAreaInsetsContext.Consumer>
+            {(insets) => (
+                <Animated.View style={[StyleUtils.getSafeAreaPadding(insets), styles.growlNotificationContainer, styles.growlNotificationTranslateY(props.translateY)]}>
+                    {props.children}
+                </Animated.View>
+            )}
+        </SafeAreaInsetsContext.Consumer>
+    );
+}
 
 GrowlNotificationContainer.propTypes = propTypes;
 GrowlNotificationContainer.displayName = 'GrowlNotificationContainer';
diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
index dd8a06927a07..5417f7af6820 100755
--- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
+++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
@@ -55,7 +55,7 @@ const defaultViewProps = {style: [styles.alignItemsStart, styles.userSelectText]
 // context to RenderHTMLSource components. See https://git.io/JRcZb
 // Beware that each prop should be referentialy stable between renders to avoid
 // costly invalidations and commits.
-const BaseHTMLEngineProvider = (props) => {
+function BaseHTMLEngineProvider(props) {
     // We need to memoize this prop to make it referentially stable.
     const defaultTextProps = useMemo(() => ({selectable: props.textSelectable, allowFontScaling: false}), [props.textSelectable]);
 
@@ -83,7 +83,7 @@ const BaseHTMLEngineProvider = (props) => {
             </RenderHTMLConfigProvider>
         </TRenderEngineProvider>
     );
-};
+}
 
 BaseHTMLEngineProvider.displayName = 'BaseHTMLEngineProvider';
 BaseHTMLEngineProvider.propTypes = propTypes;
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js
index 1933cea1e3c9..f7086486637d 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js
@@ -16,7 +16,7 @@ import * as Url from '../../../libs/Url';
 import ROUTES from '../../../ROUTES';
 import tryResolveUrlFromApiRoot from '../../../libs/tryResolveUrlFromApiRoot';
 
-const AnchorRenderer = (props) => {
+function AnchorRenderer(props) {
     const htmlAttribs = props.tnode.attributes;
 
     // An auth token is needed to download Expensify chat attachments
@@ -104,7 +104,7 @@ const AnchorRenderer = (props) => {
             <TNodeChildrenRenderer tnode={props.tnode} />
         </AnchorForCommentsOnly>
     );
-};
+}
 
 AnchorRenderer.propTypes = htmlRendererPropTypes;
 AnchorRenderer.displayName = 'AnchorRenderer';
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.js
index 1a351447d4ec..b72725076953 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.js
@@ -5,7 +5,7 @@ import htmlRendererPropTypes from './htmlRendererPropTypes';
 import * as StyleUtils from '../../../styles/StyleUtils';
 import InlineCodeBlock from '../../InlineCodeBlock';
 
-const CodeRenderer = (props) => {
+function CodeRenderer(props) {
     // We split wrapper and inner styles
     // "boxModelStyle" corresponds to border, margin, padding and backgroundColor
     const {boxModelStyle, otherStyle: textStyle} = splitBoxModelStyle(props.style);
@@ -37,7 +37,7 @@ const CodeRenderer = (props) => {
             key={props.key}
         />
     );
-};
+}
 
 CodeRenderer.propTypes = htmlRendererPropTypes;
 CodeRenderer.displayName = 'CodeRenderer';
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js
index b79ca3f54dbf..d91510c3ec6a 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js
@@ -13,7 +13,7 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-const EditedRenderer = (props) => {
+function EditedRenderer(props) {
     const defaultRendererProps = _.omit(props, ['TDefaultRenderer', 'style', 'tnode']);
     const isPendingDelete = Boolean(props.tnode.attributes.deleted !== undefined);
     return (
@@ -34,7 +34,7 @@ const EditedRenderer = (props) => {
             {props.translate('reportActionCompose.edited')}
         </Text>
     );
-};
+}
 
 EditedRenderer.propTypes = propTypes;
 EditedRenderer.displayName = 'EditedRenderer';
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js
index 35e846dbbb3a..4cbc778e40b9 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js
@@ -9,7 +9,7 @@ import {ShowContextMenuContext, showContextMenuForReport} from '../../ShowContex
 import tryResolveUrlFromApiRoot from '../../../libs/tryResolveUrlFromApiRoot';
 import * as ReportUtils from '../../../libs/ReportUtils';
 
-const ImageRenderer = (props) => {
+function ImageRenderer(props) {
     const htmlAttribs = props.tnode.attributes;
 
     // There are two kinds of images that need to be displayed:
@@ -77,7 +77,7 @@ const ImageRenderer = (props) => {
             )}
         </ShowContextMenuContext.Consumer>
     );
-};
+}
 
 ImageRenderer.propTypes = htmlRendererPropTypes;
 ImageRenderer.displayName = 'ImageRenderer';
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js
index e536904e4da3..35ace6814703 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js
@@ -5,17 +5,19 @@ import htmlRendererPropTypes from './htmlRendererPropTypes';
 import Text from '../../Text';
 import * as StyleUtils from '../../../styles/StyleUtils';
 
-const MentionHereRenderer = (props) => (
-    <Text>
-        <Text
-            // Passing the true value to the function as here mention is always for the current user
-            color={StyleUtils.getMentionTextColor(true)}
-            style={[_.omit(props.style, 'color'), StyleUtils.getMentionStyle(true)]}
-        >
-            <TNodeChildrenRenderer tnode={props.tnode} />
+function MentionHereRenderer(props) {
+    return (
+        <Text>
+            <Text
+                // Passing the true value to the function as here mention is always for the current user
+                color={StyleUtils.getMentionTextColor(true)}
+                style={[_.omit(props.style, 'color'), StyleUtils.getMentionStyle(true)]}
+            >
+                <TNodeChildrenRenderer tnode={props.tnode} />
+            </Text>
         </Text>
-    </Text>
-);
+    );
+}
 
 MentionHereRenderer.propTypes = htmlRendererPropTypes;
 MentionHereRenderer.displayName = 'HereMentionRenderer';
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
index 81f723e66aef..c56e529e1a94 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
@@ -26,7 +26,7 @@ const propTypes = {
  * */
 const showUserDetails = (email) => Navigation.navigate(ROUTES.getDetailsRoute(email));
 
-const MentionUserRenderer = (props) => {
+function MentionUserRenderer(props) {
     const defaultRendererProps = _.omit(props, ['TDefaultRenderer', 'style']);
 
     // We need to remove the leading @ from data as it is not part of the login
@@ -49,7 +49,7 @@ const MentionUserRenderer = (props) => {
             </Tooltip>
         </Text>
     );
-};
+}
 
 MentionUserRenderer.propTypes = propTypes;
 MentionUserRenderer.displayName = 'MentionUserRenderer';
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.native.js b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.native.js
index 60171f37b383..385f396de812 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.native.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.native.js
@@ -3,10 +3,10 @@ import withLocalize from '../../../withLocalize';
 import htmlRendererPropTypes from '../htmlRendererPropTypes';
 import BasePreRenderer from './BasePreRenderer';
 
-const PreRenderer = (props) => (
+function PreRenderer(props) {
     // eslint-disable-next-line react/jsx-props-no-spreading
-    <BasePreRenderer {...props} />
-);
+    return <BasePreRenderer {...props} />;
+}
 
 PreRenderer.propTypes = htmlRendererPropTypes;
 PreRenderer.displayName = 'PreRenderer';
diff --git a/src/components/HTMLEngineProvider/index.js b/src/components/HTMLEngineProvider/index.js
index dc1f39859ed4..6cb08a6dfe97 100755
--- a/src/components/HTMLEngineProvider/index.js
+++ b/src/components/HTMLEngineProvider/index.js
@@ -4,14 +4,16 @@ import {defaultProps, propTypes} from './htmlEnginePropTypes';
 import withWindowDimensions from '../withWindowDimensions';
 import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
 
-const HTMLEngineProvider = (props) => (
-    <BaseHTMLEngineProvider
-        debug={props.debug}
-        textSelectable={!DeviceCapabilities.canUseTouchScreen() || !props.isSmallScreenWidth}
-    >
-        {props.children}
-    </BaseHTMLEngineProvider>
-);
+function HTMLEngineProvider(props) {
+    return (
+        <BaseHTMLEngineProvider
+            debug={props.debug}
+            textSelectable={!DeviceCapabilities.canUseTouchScreen() || !props.isSmallScreenWidth}
+        >
+            {props.children}
+        </BaseHTMLEngineProvider>
+    );
+}
 
 HTMLEngineProvider.displayName = 'HTMLEngineProvider';
 HTMLEngineProvider.propTypes = propTypes;
diff --git a/src/components/HTMLEngineProvider/index.native.js b/src/components/HTMLEngineProvider/index.native.js
index 005001c925db..162edda66f1f 100755
--- a/src/components/HTMLEngineProvider/index.native.js
+++ b/src/components/HTMLEngineProvider/index.native.js
@@ -2,14 +2,16 @@ import React from 'react';
 import BaseHTMLEngineProvider from './BaseHTMLEngineProvider';
 import {propTypes, defaultProps} from './htmlEnginePropTypes';
 
-const HTMLEngineProvider = (props) => (
-    <BaseHTMLEngineProvider
-        debug={props.debug}
-        enableExperimentalBRCollapsing
-    >
-        {props.children}
-    </BaseHTMLEngineProvider>
-);
+function HTMLEngineProvider(props) {
+    return (
+        <BaseHTMLEngineProvider
+            debug={props.debug}
+            enableExperimentalBRCollapsing
+        >
+            {props.children}
+        </BaseHTMLEngineProvider>
+    );
+}
 
 HTMLEngineProvider.displayName = 'HTMLEngineProvider';
 HTMLEngineProvider.propTypes = propTypes;
diff --git a/src/components/Header.js b/src/components/Header.js
index 1605231994ba..a54ef93db804 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -27,34 +27,36 @@ const defaultProps = {
     textStyles: [],
     shouldShowEnvironmentBadge: false,
 };
-const Header = (props) => (
-    <View style={[styles.flex1, styles.flexRow]}>
-        <View style={styles.mw100}>
-            {_.isString(props.title)
-                ? Boolean(props.title) && (
-                      <Text
-                          numberOfLines={2}
-                          style={[styles.headerText, styles.textLarge, ...props.textStyles]}
-                      >
-                          {props.title}
-                      </Text>
-                  )
-                : props.title}
-            {/* If there's no subtitle then display a fragment to avoid an empty space which moves the main title */}
-            {_.isString(props.subtitle)
-                ? Boolean(props.subtitle) && (
-                      <Text
-                          style={[styles.mutedTextLabel, styles.pre]}
-                          numberOfLines={1}
-                      >
-                          {props.subtitle}
-                      </Text>
-                  )
-                : props.subtitle}
+function Header(props) {
+    return (
+        <View style={[styles.flex1, styles.flexRow]}>
+            <View style={styles.mw100}>
+                {_.isString(props.title)
+                    ? Boolean(props.title) && (
+                          <Text
+                              numberOfLines={2}
+                              style={[styles.headerText, styles.textLarge, ...props.textStyles]}
+                          >
+                              {props.title}
+                          </Text>
+                      )
+                    : props.title}
+                {/* If there's no subtitle then display a fragment to avoid an empty space which moves the main title */}
+                {_.isString(props.subtitle)
+                    ? Boolean(props.subtitle) && (
+                          <Text
+                              style={[styles.mutedTextLabel, styles.pre]}
+                              numberOfLines={1}
+                          >
+                              {props.subtitle}
+                          </Text>
+                      )
+                    : props.subtitle}
+            </View>
+            {props.shouldShowEnvironmentBadge && <EnvironmentBadge />}
         </View>
-        {props.shouldShowEnvironmentBadge && <EnvironmentBadge />}
-    </View>
-);
+    );
+}
 
 Header.displayName = 'Header';
 Header.propTypes = propTypes;
diff --git a/src/components/Hoverable/index.native.js b/src/components/Hoverable/index.native.js
index e33ca3fa654f..26d1d98863d6 100644
--- a/src/components/Hoverable/index.native.js
+++ b/src/components/Hoverable/index.native.js
@@ -10,10 +10,10 @@ import {propTypes, defaultProps} from './hoverablePropTypes';
  * @param {Object} props
  * @returns {React.Component}
  */
-const Hoverable = (props) => {
+function Hoverable(props) {
     const childrenWithHoverState = _.isFunction(props.children) ? props.children(false) : props.children;
     return <View style={props.containerStyles}>{childrenWithHoverState}</View>;
-};
+}
 
 Hoverable.propTypes = propTypes;
 Hoverable.defaultProps = defaultProps;
diff --git a/src/components/Image/index.native.js b/src/components/Image/index.native.js
index c7cc2e026063..e9dfe4d1a2e1 100644
--- a/src/components/Image/index.native.js
+++ b/src/components/Image/index.native.js
@@ -7,7 +7,7 @@ import ONYXKEYS from '../../ONYXKEYS';
 import {defaultProps, imagePropTypes} from './imagePropTypes';
 import RESIZE_MODES from './resizeModes';
 
-const Image = (props) => {
+function Image(props) {
     // eslint-disable-next-line react/destructuring-assignment
     const {source, isAuthTokenRequired, session, ...rest} = props;
 
@@ -31,7 +31,7 @@ const Image = (props) => {
             source={imageSource}
         />
     );
-};
+}
 
 Image.propTypes = imagePropTypes;
 Image.defaultProps = defaultProps;
diff --git a/src/components/InlineCodeBlock/WrappedText.js b/src/components/InlineCodeBlock/WrappedText.js
index c13b007e0b1b..14bab44f2126 100644
--- a/src/components/InlineCodeBlock/WrappedText.js
+++ b/src/components/InlineCodeBlock/WrappedText.js
@@ -38,7 +38,7 @@ const defaultProps = {
     wordStyles: [],
 };
 
-const WrappedText = (props) => {
+function WrappedText(props) {
     if (!_.isString(props.children)) {
         return null;
     }
@@ -67,7 +67,7 @@ const WrappedText = (props) => {
             ))}
         </>
     );
-};
+}
 
 WrappedText.propTypes = propTypes;
 WrappedText.defaultProps = defaultProps;
diff --git a/src/components/InlineCodeBlock/index.js b/src/components/InlineCodeBlock/index.js
index 654f2b9c0860..7610ba4fa583 100644
--- a/src/components/InlineCodeBlock/index.js
+++ b/src/components/InlineCodeBlock/index.js
@@ -3,7 +3,7 @@ import _ from 'lodash';
 import inlineCodeBlockPropTypes from './inlineCodeBlockPropTypes';
 import Text from '../Text';
 
-const InlineCodeBlock = (props) => {
+function InlineCodeBlock(props) {
     const TDefaultRenderer = props.TDefaultRenderer;
     const textStyles = _.omit(props.textStyle, 'textDecorationLine');
 
@@ -15,7 +15,7 @@ const InlineCodeBlock = (props) => {
             <Text style={{...props.boxModelStyle, ...textStyles}}>{props.defaultRendererProps.tnode.data}</Text>
         </TDefaultRenderer>
     );
-};
+}
 
 InlineCodeBlock.propTypes = inlineCodeBlockPropTypes;
 InlineCodeBlock.displayName = 'InlineCodeBlock';
diff --git a/src/components/InlineCodeBlock/index.native.js b/src/components/InlineCodeBlock/index.native.js
index c8d5095ff002..2aa718832180 100644
--- a/src/components/InlineCodeBlock/index.native.js
+++ b/src/components/InlineCodeBlock/index.native.js
@@ -3,7 +3,7 @@ import styles from '../../styles/styles';
 import WrappedText from './WrappedText';
 import inlineCodeBlockPropTypes from './inlineCodeBlockPropTypes';
 
-const InlineCodeBlock = (props) => {
+function InlineCodeBlock(props) {
     const TDefaultRenderer = props.TDefaultRenderer;
     return (
         <TDefaultRenderer
@@ -18,7 +18,7 @@ const InlineCodeBlock = (props) => {
             </WrappedText>
         </TDefaultRenderer>
     );
-};
+}
 
 InlineCodeBlock.propTypes = inlineCodeBlockPropTypes;
 InlineCodeBlock.displayName = 'InlineCodeBlock';
diff --git a/src/components/InlineErrorText.js b/src/components/InlineErrorText.js
index aae793f74645..ea701a3f6e8e 100644
--- a/src/components/InlineErrorText.js
+++ b/src/components/InlineErrorText.js
@@ -17,13 +17,13 @@ const defaultProps = {
     styles: [],
 };
 
-const InlineErrorText = (props) => {
+function InlineErrorText(props) {
     if (_.isEmpty(props.children)) {
         return null;
     }
 
     return <Text style={[...props.styles, styles.formError, styles.mt1]}>{props.children}</Text>;
-};
+}
 
 InlineErrorText.propTypes = propTypes;
 InlineErrorText.defaultProps = defaultProps;
diff --git a/src/components/InlineSystemMessage.js b/src/components/InlineSystemMessage.js
index 3d3a843b4a15..a6866fb5a887 100644
--- a/src/components/InlineSystemMessage.js
+++ b/src/components/InlineSystemMessage.js
@@ -16,7 +16,7 @@ const defaultProps = {
     message: '',
 };
 
-const InlineSystemMessage = (props) => {
+function InlineSystemMessage(props) {
     if (props.message.length === 0) {
         return null;
     }
@@ -29,7 +29,7 @@ const InlineSystemMessage = (props) => {
             <Text style={[styles.inlineSystemMessage]}>{props.message}</Text>
         </View>
     );
-};
+}
 
 InlineSystemMessage.propTypes = propTypes;
 InlineSystemMessage.defaultProps = defaultProps;
diff --git a/src/components/InvertedFlatList/index.android.js b/src/components/InvertedFlatList/index.android.js
index 287a5975df9f..47d75c84cc8b 100644
--- a/src/components/InvertedFlatList/index.android.js
+++ b/src/components/InvertedFlatList/index.android.js
@@ -3,13 +3,15 @@ import {View} from 'react-native';
 import BaseInvertedFlatList from './BaseInvertedFlatList';
 import styles from '../../styles/styles';
 
-const InvertedCell = (props) => (
-    <View
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        style={styles.invert}
-    />
-);
+function InvertedCell(props) {
+    return (
+        <View
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            style={styles.invert}
+        />
+    );
+}
 
 export default forwardRef((props, ref) => (
     <BaseInvertedFlatList
diff --git a/src/components/KYCWall/index.js b/src/components/KYCWall/index.js
index edc1febdb825..81e7a2d37481 100644
--- a/src/components/KYCWall/index.js
+++ b/src/components/KYCWall/index.js
@@ -2,13 +2,15 @@ import React from 'react';
 import {propTypes, defaultProps} from './kycWallPropTypes';
 import BaseKYCWall from './BaseKYCWall';
 
-const KYCWall = (props) => (
-    <BaseKYCWall
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        shouldListenForResize
-    />
-);
+function KYCWall(props) {
+    return (
+        <BaseKYCWall
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            shouldListenForResize
+        />
+    );
+}
 
 KYCWall.propTypes = propTypes;
 KYCWall.defaultProps = defaultProps;
diff --git a/src/components/KeyboardAvoidingView/index.ios.js b/src/components/KeyboardAvoidingView/index.ios.js
index f7b41e815858..c1ea8687f793 100644
--- a/src/components/KeyboardAvoidingView/index.ios.js
+++ b/src/components/KeyboardAvoidingView/index.ios.js
@@ -4,10 +4,10 @@
 import React from 'react';
 import {KeyboardAvoidingView as KeyboardAvoidingViewComponent} from 'react-native';
 
-const KeyboardAvoidingView = (props) => (
+function KeyboardAvoidingView(props) {
     // eslint-disable-next-line react/jsx-props-no-spreading
-    <KeyboardAvoidingViewComponent {...props} />
-);
+    return <KeyboardAvoidingViewComponent {...props} />;
+}
 
 KeyboardAvoidingView.displayName = 'KeyboardAvoidingView';
 
diff --git a/src/components/KeyboardAvoidingView/index.js b/src/components/KeyboardAvoidingView/index.js
index 94c0369c0f5c..3483b2d007ac 100644
--- a/src/components/KeyboardAvoidingView/index.js
+++ b/src/components/KeyboardAvoidingView/index.js
@@ -5,13 +5,13 @@ import React from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 
-const KeyboardAvoidingView = (props) => {
+function KeyboardAvoidingView(props) {
     const viewProps = _.omit(props, ['behavior', 'contentContainerStyle', 'enabled', 'keyboardVerticalOffset']);
     return (
         // eslint-disable-next-line react/jsx-props-no-spreading
         <View {...viewProps} />
     );
-};
+}
 
 KeyboardAvoidingView.displayName = 'KeyboardAvoidingView';
 
diff --git a/src/components/KeyboardDismissingFlatList/index.native.js b/src/components/KeyboardDismissingFlatList/index.native.js
index d9d6e96953b0..97297528ac77 100644
--- a/src/components/KeyboardDismissingFlatList/index.native.js
+++ b/src/components/KeyboardDismissingFlatList/index.native.js
@@ -1,13 +1,15 @@
 import React from 'react';
 import {FlatList, Keyboard} from 'react-native';
 
-const KeyboardDismissingFlatList = (props) => (
-    <FlatList
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        onScrollBeginDrag={() => Keyboard.dismiss()}
-    />
-);
+function KeyboardDismissingFlatList(props) {
+    return (
+        <FlatList
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            onScrollBeginDrag={() => Keyboard.dismiss()}
+        />
+    );
+}
 
 KeyboardDismissingFlatList.displayName = 'KeyboardDismissingFlatList';
 
diff --git a/src/components/KeyboardSpacer/index.android.js b/src/components/KeyboardSpacer/index.android.js
index 217fdbd9b18c..15755be70e31 100644
--- a/src/components/KeyboardSpacer/index.android.js
+++ b/src/components/KeyboardSpacer/index.android.js
@@ -7,13 +7,15 @@ import StatusBar from '../../libs/StatusBar';
 import BaseKeyboardSpacer from './BaseKeyboardSpacer';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
 
-const KeyboardSpacer = () => (
-    <BaseKeyboardSpacer
-        topSpacing={StatusBar.currentHeight}
-        keyboardShowMethod="keyboardDidShow"
-        keyboardHideMethod="keyboardDidHide"
-    />
-);
+function KeyboardSpacer() {
+    return (
+        <BaseKeyboardSpacer
+            topSpacing={StatusBar.currentHeight}
+            keyboardShowMethod="keyboardDidShow"
+            keyboardHideMethod="keyboardDidHide"
+        />
+    );
+}
 
 KeyboardSpacer.propTypes = windowDimensionsPropTypes;
 KeyboardSpacer.displayName = 'KeyboardSpacer';
diff --git a/src/components/KeyboardSpacer/index.ios.js b/src/components/KeyboardSpacer/index.ios.js
index 0dd50339d813..63cae305c362 100644
--- a/src/components/KeyboardSpacer/index.ios.js
+++ b/src/components/KeyboardSpacer/index.ios.js
@@ -8,13 +8,15 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDime
 import * as StyleUtils from '../../styles/StyleUtils';
 import CONST from '../../CONST';
 
-const KeyboardSpacer = (props) => (
-    <BaseKeyboardSpacer
-        topSpacing={StyleUtils.hasSafeAreas(props.windowWidth, props.windowHeight) ? CONST.IOS_KEYBOARD_SPACE_OFFSET : 0}
-        keyboardShowMethod="keyboardWillShow"
-        keyboardHideMethod="keyboardWillHide"
-    />
-);
+function KeyboardSpacer(props) {
+    return (
+        <BaseKeyboardSpacer
+            topSpacing={StyleUtils.hasSafeAreas(props.windowWidth, props.windowHeight) ? CONST.IOS_KEYBOARD_SPACE_OFFSET : 0}
+            keyboardShowMethod="keyboardWillShow"
+            keyboardHideMethod="keyboardWillHide"
+        />
+    );
+}
 
 KeyboardSpacer.propTypes = windowDimensionsPropTypes;
 KeyboardSpacer.displayName = 'KeyboardSpacer';
diff --git a/src/components/KeyboardSpacer/index.js b/src/components/KeyboardSpacer/index.js
index bee4d13e51e9..77e1cc978337 100644
--- a/src/components/KeyboardSpacer/index.js
+++ b/src/components/KeyboardSpacer/index.js
@@ -4,6 +4,8 @@
  * @returns {null}
  * @constructor
  */
-const KeyboardSpacer = () => null;
+function KeyboardSpacer() {
+    return null;
+}
 
 export default KeyboardSpacer;
diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js
index d5759c3f3b1c..4d5e19299e5c 100644
--- a/src/components/LHNOptionsList/OptionRowLHN.js
+++ b/src/components/LHNOptionsList/OptionRowLHN.js
@@ -54,7 +54,7 @@ const defaultProps = {
     style: null,
 };
 
-const OptionRowLHN = (props) => {
+function OptionRowLHN(props) {
     const optionItem = SidebarUtils.getOptionData(props.reportID);
 
     if (!optionItem) {
@@ -244,7 +244,7 @@ const OptionRowLHN = (props) => {
             </Hoverable>
         </OfflineWithFeedback>
     );
-};
+}
 
 OptionRowLHN.propTypes = propTypes;
 OptionRowLHN.defaultProps = defaultProps;
diff --git a/src/components/LocalePicker.js b/src/components/LocalePicker.js
index 5e5662440147..532c29535e50 100644
--- a/src/components/LocalePicker.js
+++ b/src/components/LocalePicker.js
@@ -26,7 +26,7 @@ const defaultProps = {
     size: 'normal',
 };
 
-const LocalePicker = (props) => {
+function LocalePicker(props) {
     const localesToLanguages = _.map(props.translate('languagePage.languages'), (language, key) => ({
         value: key,
         label: language.label,
@@ -48,7 +48,7 @@ const LocalePicker = (props) => {
             backgroundColor={themeColors.signInPage}
         />
     );
-};
+}
 
 LocalePicker.defaultProps = defaultProps;
 LocalePicker.propTypes = propTypes;
diff --git a/src/components/MentionSuggestions.js b/src/components/MentionSuggestions.js
index 48e1520d736a..e8fc3003bf56 100644
--- a/src/components/MentionSuggestions.js
+++ b/src/components/MentionSuggestions.js
@@ -56,7 +56,7 @@ const defaultProps = {
  */
 const keyExtractor = (item) => item.alternateText;
 
-const MentionSuggestions = (props) => {
+function MentionSuggestions(props) {
     /**
      * Render a suggestion menu item component.
      * @param {Object} item
@@ -120,7 +120,7 @@ const MentionSuggestions = (props) => {
             accessibilityLabelExtractor={keyExtractor}
         />
     );
-};
+}
 
 MentionSuggestions.propTypes = propTypes;
 MentionSuggestions.defaultProps = defaultProps;
diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 635334354d67..fed55eb8b5e0 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -69,7 +69,7 @@ const defaultProps = {
     furtherDetailsIcon: undefined,
 };
 
-const MenuItem = (props) => {
+function MenuItem(props) {
     const isDeleted = _.contains(props.style, styles.offlineFeedback.deleted);
     const descriptionVerticalMargin = props.shouldShowDescriptionOnTop ? styles.mb1 : styles.mt1;
     const titleTextStyle = StyleUtils.combineStyles(
@@ -278,7 +278,7 @@ const MenuItem = (props) => {
             )}
         </PressableWithSecondaryInteraction>
     );
-};
+}
 
 MenuItem.propTypes = propTypes;
 MenuItem.displayName = 'MenuItem';
diff --git a/src/components/MenuItemList.js b/src/components/MenuItemList.js
index 95364c3f5d5a..90f863ba2bc7 100644
--- a/src/components/MenuItemList.js
+++ b/src/components/MenuItemList.js
@@ -14,7 +14,7 @@ const defaultProps = {
     menuItems: [],
 };
 
-const MenuItemList = (props) => {
+function MenuItemList(props) {
     let popoverAnchor;
 
     /**
@@ -45,7 +45,7 @@ const MenuItemList = (props) => {
             ))}
         </>
     );
-};
+}
 
 MenuItemList.displayName = 'MenuItemList';
 MenuItemList.propTypes = propTypes;
diff --git a/src/components/MenuItemWithTopDescription.js b/src/components/MenuItemWithTopDescription.js
index 5ffc4752b02d..4bd426d80f0c 100644
--- a/src/components/MenuItemWithTopDescription.js
+++ b/src/components/MenuItemWithTopDescription.js
@@ -6,14 +6,16 @@ const propTypes = {
     ...menuItemPropTypes,
 };
 
-const MenuItemWithTopDescription = (props) => (
-    <MenuItem
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        shouldShowBasicTitle
-        shouldShowDescriptionOnTop
-    />
-);
+function MenuItemWithTopDescription(props) {
+    return (
+        <MenuItem
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            shouldShowBasicTitle
+            shouldShowDescriptionOnTop
+        />
+    );
+}
 
 MenuItemWithTopDescription.propTypes = propTypes;
 MenuItemWithTopDescription.displayName = 'MenuItemWithTopDescription';
diff --git a/src/components/Modal/index.android.js b/src/components/Modal/index.android.js
index 83f3fbffdc7d..09df74329b20 100644
--- a/src/components/Modal/index.android.js
+++ b/src/components/Modal/index.android.js
@@ -5,15 +5,17 @@ import {propTypes, defaultProps} from './modalPropTypes';
 
 // Only want to use useNativeDriver on Android. It has strange flashes issue on IOS
 // https://github.com/react-native-modal/react-native-modal#the-modal-flashes-in-a-weird-way-when-animating
-const Modal = (props) => (
-    <BaseModal
-        useNativeDriver
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-    >
-        {props.children}
-    </BaseModal>
-);
+function Modal(props) {
+    return (
+        <BaseModal
+            useNativeDriver
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+        >
+            {props.children}
+        </BaseModal>
+    );
+}
 
 Modal.propTypes = propTypes;
 Modal.defaultProps = defaultProps;
diff --git a/src/components/Modal/index.ios.js b/src/components/Modal/index.ios.js
index a44ae11f94ef..d8206d12532d 100644
--- a/src/components/Modal/index.ios.js
+++ b/src/components/Modal/index.ios.js
@@ -3,14 +3,16 @@ import withWindowDimensions from '../withWindowDimensions';
 import BaseModal from './BaseModal';
 import {propTypes, defaultProps} from './modalPropTypes';
 
-const Modal = (props) => (
-    <BaseModal
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-    >
-        {props.children}
-    </BaseModal>
-);
+function Modal(props) {
+    return (
+        <BaseModal
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+        >
+            {props.children}
+        </BaseModal>
+    );
+}
 
 Modal.propTypes = propTypes;
 Modal.defaultProps = defaultProps;
diff --git a/src/components/Modal/index.web.js b/src/components/Modal/index.web.js
index 00a208db4f85..7d01efd652c2 100644
--- a/src/components/Modal/index.web.js
+++ b/src/components/Modal/index.web.js
@@ -6,7 +6,7 @@ import * as StyleUtils from '../../styles/StyleUtils';
 import themeColors from '../../styles/themes/default';
 import StatusBar from '../../libs/StatusBar';
 
-const Modal = (props) => {
+function Modal(props) {
     const setStatusBarColor = (color = themeColors.appBG) => {
         if (!props.fullscreen) {
             return;
@@ -36,7 +36,7 @@ const Modal = (props) => {
             {props.children}
         </BaseModal>
     );
-};
+}
 
 Modal.propTypes = propTypes;
 Modal.defaultProps = defaultProps;
diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js
index 600a96aede18..f9d9982e3708 100644
--- a/src/components/MoneyRequestHeader.js
+++ b/src/components/MoneyRequestHeader.js
@@ -69,7 +69,7 @@ const defaultProps = {
     parentReport: {},
 };
 
-const MoneyRequestHeader = (props) => {
+function MoneyRequestHeader(props) {
     // These are only used for the single transaction view and not for expense and iou reports
     const {amount: transactionAmount, currency: transactionCurrency, comment: transactionDescription} = ReportUtils.getMoneyRequestAction(props.parentReportAction);
     const formattedTransactionAmount = transactionAmount && transactionCurrency && CurrencyUtils.convertToDisplayString(transactionAmount, transactionCurrency);
@@ -200,7 +200,7 @@ const MoneyRequestHeader = (props) => {
             )}
         </View>
     );
-};
+}
 
 MoneyRequestHeader.displayName = 'MoneyRequestHeader';
 MoneyRequestHeader.propTypes = propTypes;
diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js
index c65e6ff8ed9b..523c786f0245 100644
--- a/src/components/MultipleAvatars.js
+++ b/src/components/MultipleAvatars.js
@@ -65,7 +65,7 @@ const defaultProps = {
     shouldUseCardBackground: false,
 };
 
-const MultipleAvatars = (props) => {
+function MultipleAvatars(props) {
     let avatarContainerStyles = props.size === CONST.AVATAR_SIZE.SMALL ? [styles.emptyAvatarSmall, styles.emptyAvatarMarginSmall] : [styles.emptyAvatar, styles.emptyAvatarMargin];
     const singleAvatarStyles = props.size === CONST.AVATAR_SIZE.SMALL ? styles.singleAvatarSmall : styles.singleAvatar;
     const secondAvatarStyles = [props.size === CONST.AVATAR_SIZE.SMALL ? styles.secondAvatarSmall : styles.secondAvatar, ...props.secondAvatarStyle];
@@ -227,7 +227,7 @@ const MultipleAvatars = (props) => {
             )}
         </View>
     );
-};
+}
 
 MultipleAvatars.defaultProps = defaultProps;
 MultipleAvatars.propTypes = propTypes;
diff --git a/src/components/OfflineIndicator.js b/src/components/OfflineIndicator.js
index bfd29d9fe362..43cd374421ea 100644
--- a/src/components/OfflineIndicator.js
+++ b/src/components/OfflineIndicator.js
@@ -38,7 +38,7 @@ const setStyles = (containerStyles, isSmallScreenWidth) => {
     return isSmallScreenWidth ? styles.offlineIndicatorMobile : styles.offlineIndicator;
 };
 
-const OfflineIndicator = (props) => {
+function OfflineIndicator(props) {
     if (!props.network.isOffline) {
         return null;
     }
@@ -53,7 +53,7 @@ const OfflineIndicator = (props) => {
             <Text style={[styles.ml3, styles.chatItemComposeSecondaryRowSubText]}>{props.translate('common.youAppearToBeOffline')}</Text>
         </View>
     );
-};
+}
 
 OfflineIndicator.propTypes = propTypes;
 OfflineIndicator.defaultProps = defaultProps;
diff --git a/src/components/OfflineWithFeedback.js b/src/components/OfflineWithFeedback.js
index 6b95b1b36ffa..f6052f7d1dfa 100644
--- a/src/components/OfflineWithFeedback.js
+++ b/src/components/OfflineWithFeedback.js
@@ -87,7 +87,7 @@ function applyStrikeThrough(children) {
     });
 }
 
-const OfflineWithFeedback = (props) => {
+function OfflineWithFeedback(props) {
     const hasErrors = !_.isEmpty(props.errors);
     const isOfflinePendingAction = props.network.isOffline && props.pendingAction;
     const isUpdateOrDeleteError = hasErrors && (props.pendingAction === 'delete' || props.pendingAction === 'update');
@@ -132,7 +132,7 @@ const OfflineWithFeedback = (props) => {
             )}
         </View>
     );
-};
+}
 
 OfflineWithFeedback.propTypes = propTypes;
 OfflineWithFeedback.defaultProps = defaultProps;
diff --git a/src/components/OnyxProvider.js b/src/components/OnyxProvider.js
index 6cee7e5b7a62..e708ed8056b5 100644
--- a/src/components/OnyxProvider.js
+++ b/src/components/OnyxProvider.js
@@ -18,11 +18,13 @@ const propTypes = {
     children: PropTypes.node.isRequired,
 };
 
-const OnyxProvider = (props) => (
-    <ComposeProviders components={[NetworkProvider, PersonalDetailsProvider, ReportActionsDraftsProvider, CurrentDateProvider, BlockedFromConciergeProvider, BetasProvider]}>
-        {props.children}
-    </ComposeProviders>
-);
+function OnyxProvider(props) {
+    return (
+        <ComposeProviders components={[NetworkProvider, PersonalDetailsProvider, ReportActionsDraftsProvider, CurrentDateProvider, BlockedFromConciergeProvider, BetasProvider]}>
+            {props.children}
+        </ComposeProviders>
+    );
+}
 
 OnyxProvider.displayName = 'OnyxProvider';
 OnyxProvider.propTypes = propTypes;
diff --git a/src/components/OpacityView.js b/src/components/OpacityView.js
index 241d83973cf8..c36c9257b4b0 100644
--- a/src/components/OpacityView.js
+++ b/src/components/OpacityView.js
@@ -35,7 +35,7 @@ const defaultProps = {
     dimmingValue: variables.hoverDimValue,
 };
 
-const OpacityView = (props) => {
+function OpacityView(props) {
     const opacity = useSharedValue(1);
     const opacityStyle = useAnimatedStyle(() => ({
         opacity: opacity.value,
@@ -54,7 +54,7 @@ const OpacityView = (props) => {
             <View style={StyleUtils.parseStyleAsArray(props.style)}>{props.children}</View>
         </Animated.View>
     );
-};
+}
 
 OpacityView.displayName = 'OpacityView';
 OpacityView.propTypes = propTypes;
diff --git a/src/components/PDFView/PDFInfoMessage.js b/src/components/PDFView/PDFInfoMessage.js
index 60999be7099f..b3c50596bb1b 100644
--- a/src/components/PDFView/PDFInfoMessage.js
+++ b/src/components/PDFView/PDFInfoMessage.js
@@ -16,22 +16,24 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-const PDFInfoMessage = (props) => (
-    <View style={styles.alignItemsCenter}>
-        <Icon
-            src={Expensicons.EyeDisabled}
-            width={variables.iconSizeSuperLarge}
-            height={variables.iconSizeSuperLarge}
-        />
-        <Text style={[styles.textHeadline, styles.mb3, styles.mt3]}>{props.translate('attachmentView.pdfPasswordForm.title')}</Text>
-        <Text>{props.translate('attachmentView.pdfPasswordForm.infoText')}</Text>
-        <Text>
-            {props.translate('attachmentView.pdfPasswordForm.beforeLinkText')}
-            <TextLink onPress={props.onShowForm}>{` ${props.translate('attachmentView.pdfPasswordForm.linkText')} `}</TextLink>
-            {props.translate('attachmentView.pdfPasswordForm.afterLinkText')}
-        </Text>
-    </View>
-);
+function PDFInfoMessage(props) {
+    return (
+        <View style={styles.alignItemsCenter}>
+            <Icon
+                src={Expensicons.EyeDisabled}
+                width={variables.iconSizeSuperLarge}
+                height={variables.iconSizeSuperLarge}
+            />
+            <Text style={[styles.textHeadline, styles.mb3, styles.mt3]}>{props.translate('attachmentView.pdfPasswordForm.title')}</Text>
+            <Text>{props.translate('attachmentView.pdfPasswordForm.infoText')}</Text>
+            <Text>
+                {props.translate('attachmentView.pdfPasswordForm.beforeLinkText')}
+                <TextLink onPress={props.onShowForm}>{` ${props.translate('attachmentView.pdfPasswordForm.linkText')} `}</TextLink>
+                {props.translate('attachmentView.pdfPasswordForm.afterLinkText')}
+            </Text>
+        </View>
+    );
+}
 
 PDFInfoMessage.propTypes = propTypes;
 PDFInfoMessage.displayName = 'PDFInfoMessage';
diff --git a/src/components/PinButton.js b/src/components/PinButton.js
index 00d9ae3a6077..6292123faa39 100644
--- a/src/components/PinButton.js
+++ b/src/components/PinButton.js
@@ -20,19 +20,21 @@ const defaultProps = {
     report: null,
 };
 
-const PinButton = (props) => (
-    <Tooltip text={props.report.isPinned ? props.translate('common.unPin') : props.translate('common.pin')}>
-        <Pressable
-            onPress={Session.checkIfActionIsAllowed(() => Report.togglePinnedState(props.report.reportID, props.report.isPinned))}
-            style={[styles.touchableButtonImage]}
-        >
-            <Icon
-                src={Expensicons.Pin}
-                fill={props.report.isPinned ? themeColors.heading : themeColors.icon}
-            />
-        </Pressable>
-    </Tooltip>
-);
+function PinButton(props) {
+    return (
+        <Tooltip text={props.report.isPinned ? props.translate('common.unPin') : props.translate('common.pin')}>
+            <Pressable
+                onPress={Session.checkIfActionIsAllowed(() => Report.togglePinnedState(props.report.reportID, props.report.isPinned))}
+                style={[styles.touchableButtonImage]}
+            >
+                <Icon
+                    src={Expensicons.Pin}
+                    fill={props.report.isPinned ? themeColors.heading : themeColors.icon}
+                />
+            </Pressable>
+        </Tooltip>
+    );
+}
 
 PinButton.displayName = 'PinButton';
 PinButton.propTypes = propTypes;
diff --git a/src/components/PlaidLink/index.js b/src/components/PlaidLink/index.js
index b399e3dd662a..f1227bd15c68 100644
--- a/src/components/PlaidLink/index.js
+++ b/src/components/PlaidLink/index.js
@@ -3,7 +3,7 @@ import {usePlaidLink} from 'react-plaid-link';
 import {plaidLinkPropTypes, plaidLinkDefaultProps} from './plaidLinkPropTypes';
 import Log from '../../libs/Log';
 
-const PlaidLink = (props) => {
+function PlaidLink(props) {
     const [isPlaidLoaded, setIsPlaidLoaded] = useState(false);
     const onSuccess = props.onSuccess;
     const onError = props.onError;
@@ -49,7 +49,7 @@ const PlaidLink = (props) => {
     }, [ready, error, isPlaidLoaded, open, onError]);
 
     return null;
-};
+}
 
 PlaidLink.propTypes = plaidLinkPropTypes;
 PlaidLink.defaultProps = plaidLinkDefaultProps;
diff --git a/src/components/PlaidLink/index.native.js b/src/components/PlaidLink/index.native.js
index 35af8f217091..402fbe22d64c 100644
--- a/src/components/PlaidLink/index.native.js
+++ b/src/components/PlaidLink/index.native.js
@@ -4,7 +4,7 @@ import Log from '../../libs/Log';
 import CONST from '../../CONST';
 import {plaidLinkPropTypes, plaidLinkDefaultProps} from './plaidLinkPropTypes';
 
-const PlaidLink = (props) => {
+function PlaidLink(props) {
     useDeepLinkRedirector();
     usePlaidEmitter((event) => {
         Log.info('[PlaidLink] Handled Plaid Event: ', false, event);
@@ -30,7 +30,7 @@ const PlaidLink = (props) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return null;
-};
+}
 
 PlaidLink.propTypes = plaidLinkPropTypes;
 PlaidLink.defaultProps = plaidLinkDefaultProps;
diff --git a/src/components/Popover/index.js b/src/components/Popover/index.js
index 2c3adf263cc5..af0ca708f58f 100644
--- a/src/components/Popover/index.js
+++ b/src/components/Popover/index.js
@@ -9,7 +9,7 @@ import withWindowDimensions from '../withWindowDimensions';
  * This is a convenience wrapper around the Modal component for a responsive Popover.
  * On small screen widths, it uses BottomDocked modal type, and a Popover type on wide screen widths.
  */
-const Popover = (props) => {
+function Popover(props) {
     if (!props.fullscreen && !props.isSmallScreenWidth) {
         return createPortal(
             <Modal
@@ -37,7 +37,7 @@ const Popover = (props) => {
             onLayout={props.onLayout}
         />
     );
-};
+}
 
 Popover.propTypes = propTypes;
 Popover.defaultProps = defaultProps;
diff --git a/src/components/Popover/index.native.js b/src/components/Popover/index.native.js
index 1133006b7a1a..b4ca194e7483 100644
--- a/src/components/Popover/index.native.js
+++ b/src/components/Popover/index.native.js
@@ -13,7 +13,7 @@ const propTypes = {
  * This is a convenience wrapper around the Modal component for a responsive Popover.
  * On small screen widths, it uses BottomDocked modal type, and a Popover type on wide screen widths.
  */
-const Popover = (props) => {
+function Popover(props) {
     const propsWithoutAnimation = _.omit(props, ['animationIn', 'animationOut', 'popoverAnchorPosition', 'disableAnimation']);
     return (
         <Modal
@@ -26,7 +26,7 @@ const Popover = (props) => {
             fullscreen
         />
     );
-};
+}
 
 Popover.propTypes = propTypes;
 Popover.defaultProps = defaultProps;
diff --git a/src/components/PopoverMenu/index.js b/src/components/PopoverMenu/index.js
index 330a6a8b61f5..4de4a2341283 100644
--- a/src/components/PopoverMenu/index.js
+++ b/src/components/PopoverMenu/index.js
@@ -38,7 +38,7 @@ const defaultProps = {
     },
 };
 
-const PopoverMenu = (props) => {
+function PopoverMenu(props) {
     const {isSmallScreenWidth} = useWindowDimensions();
     const [selectedItemIndex, setSelectedItemIndex] = useState(null);
 
@@ -97,7 +97,7 @@ const PopoverMenu = (props) => {
             </View>
         </PopoverWithMeasuredContent>
     );
-};
+}
 
 PopoverMenu.propTypes = propTypes;
 PopoverMenu.defaultProps = defaultProps;
diff --git a/src/components/PressableWithSecondaryInteraction/index.native.js b/src/components/PressableWithSecondaryInteraction/index.native.js
index 7768430c363d..8a7771b00853 100644
--- a/src/components/PressableWithSecondaryInteraction/index.native.js
+++ b/src/components/PressableWithSecondaryInteraction/index.native.js
@@ -11,7 +11,7 @@ import HapticFeedback from '../../libs/HapticFeedback';
  * @param {Object} props
  * @returns {React.Component}
  */
-const PressableWithSecondaryInteraction = (props) => {
+function PressableWithSecondaryInteraction(props) {
     // Use Text node for inline mode to prevent content overflow.
     const Node = props.inline ? Text : Pressable;
     return (
@@ -35,7 +35,7 @@ const PressableWithSecondaryInteraction = (props) => {
             {props.children}
         </Node>
     );
-};
+}
 
 PressableWithSecondaryInteraction.propTypes = pressableWithSecondaryInteractionPropTypes.propTypes;
 PressableWithSecondaryInteraction.defaultProps = pressableWithSecondaryInteractionPropTypes.defaultProps;
diff --git a/src/components/RNTextInput.js b/src/components/RNTextInput.js
index 4d4d54adbdc5..869ca24ae760 100644
--- a/src/components/RNTextInput.js
+++ b/src/components/RNTextInput.js
@@ -13,19 +13,21 @@ const defaultProps = {
     forwardedRef: () => {},
 };
 
-const RNTextInput = (props) => (
-    <TextInput
-        allowFontScaling={false}
-        ref={(ref) => {
-            if (!_.isFunction(props.forwardedRef)) {
-                return;
-            }
-            props.forwardedRef(ref);
-        }}
-        // eslint-disable-next-line
-        {...props}
-    />
-);
+function RNTextInput(props) {
+    return (
+        <TextInput
+            allowFontScaling={false}
+            ref={(ref) => {
+                if (!_.isFunction(props.forwardedRef)) {
+                    return;
+                }
+                props.forwardedRef(ref);
+            }}
+            // eslint-disable-next-line
+            {...props}
+        />
+    );
+}
 
 RNTextInput.propTypes = propTypes;
 RNTextInput.defaultProps = defaultProps;
diff --git a/src/components/RadioButton.js b/src/components/RadioButton.js
index 1111acc591be..613f3d97d747 100644
--- a/src/components/RadioButton.js
+++ b/src/components/RadioButton.js
@@ -28,25 +28,27 @@ const defaultProps = {
     disabled: false,
 };
 
-const RadioButton = (props) => (
-    <PressableWithFeedback
-        disabled={props.disabled}
-        onPress={props.onPress}
-        hoverDimmingValue={1}
-        pressDimmingValue={1}
-        accessibilityLabel={props.accessibilityLabel}
-        accessibilityRole="radio"
-    >
-        <View style={[styles.radioButtonContainer, props.isChecked && styles.checkedContainer, props.hasError && styles.borderColorDanger, props.disabled && styles.cursorDisabled]}>
-            <Icon
-                src={Expensicons.Checkmark}
-                fill="white"
-                height={14}
-                width={14}
-            />
-        </View>
-    </PressableWithFeedback>
-);
+function RadioButton(props) {
+    return (
+        <PressableWithFeedback
+            disabled={props.disabled}
+            onPress={props.onPress}
+            hoverDimmingValue={1}
+            pressDimmingValue={1}
+            accessibilityLabel={props.accessibilityLabel}
+            accessibilityRole="radio"
+        >
+            <View style={[styles.radioButtonContainer, props.isChecked && styles.checkedContainer, props.hasError && styles.borderColorDanger, props.disabled && styles.cursorDisabled]}>
+                <Icon
+                    src={Expensicons.Checkmark}
+                    fill="white"
+                    height={14}
+                    width={14}
+                />
+            </View>
+        </PressableWithFeedback>
+    );
+}
 
 RadioButton.propTypes = propTypes;
 RadioButton.defaultProps = defaultProps;
diff --git a/src/components/RadioButtonWithLabel.js b/src/components/RadioButtonWithLabel.js
index 7dbcb5676ce9..6175b29c01db 100644
--- a/src/components/RadioButtonWithLabel.js
+++ b/src/components/RadioButtonWithLabel.js
@@ -41,7 +41,7 @@ const defaultProps = {
 
 const PressableWithFeedback = Pressables.PressableWithFeedback;
 
-const RadioButtonWithLabel = (props) => {
+function RadioButtonWithLabel(props) {
     const LabelComponent = props.LabelComponent;
     const defaultStyles = [styles.flexRow, styles.alignItemsCenter];
     const wrapperStyles = _.isArray(props.style) ? [...defaultStyles, ...props.style] : [...defaultStyles, props.style];
@@ -75,7 +75,7 @@ const RadioButtonWithLabel = (props) => {
             <FormHelpMessage message={props.errorText} />
         </>
     );
-};
+}
 
 RadioButtonWithLabel.propTypes = propTypes;
 RadioButtonWithLabel.defaultProps = defaultProps;
diff --git a/src/components/Reactions/AddReactionBubble.js b/src/components/Reactions/AddReactionBubble.js
index 7704ee4c25c4..a3568d046bed 100644
--- a/src/components/Reactions/AddReactionBubble.js
+++ b/src/components/Reactions/AddReactionBubble.js
@@ -43,7 +43,7 @@ const defaultProps = {
     onPressOpenPicker: undefined,
 };
 
-const AddReactionBubble = (props) => {
+function AddReactionBubble(props) {
     const ref = useRef();
 
     const onPress = () => {
@@ -94,7 +94,7 @@ const AddReactionBubble = (props) => {
             </Pressable>
         </Tooltip>
     );
-};
+}
 
 AddReactionBubble.propTypes = propTypes;
 AddReactionBubble.defaultProps = defaultProps;
diff --git a/src/components/Reactions/EmojiReactionBubble.js b/src/components/Reactions/EmojiReactionBubble.js
index dc60d60c2f30..d8e8caf5847e 100644
--- a/src/components/Reactions/EmojiReactionBubble.js
+++ b/src/components/Reactions/EmojiReactionBubble.js
@@ -48,21 +48,23 @@ const defaultProps = {
     ...withCurrentUserPersonalDetailsDefaultProps,
 };
 
-const EmojiReactionBubble = (props) => (
-    <PressableWithSecondaryInteraction
-        style={({hovered, pressed}) => [styles.emojiReactionBubble, StyleUtils.getEmojiReactionBubbleStyle(hovered || pressed, props.hasUserReacted, props.isContextMenu)]}
-        onPress={props.onPress}
-        onLongPress={props.onReactionListOpen}
-        onSecondaryInteraction={props.onReactionListOpen}
-        ref={props.forwardedRef}
-        enableLongPressWithHover={props.isSmallScreenWidth}
-        // Prevent text input blur when emoji reaction is clicked
-        onMouseDown={(e) => e.preventDefault()}
-    >
-        <Text style={[styles.emojiReactionBubbleText, styles.userSelectNone, StyleUtils.getEmojiReactionBubbleTextStyle(props.isContextMenu)]}>{props.emojiCodes.join('')}</Text>
-        {props.count > 0 && <Text style={[styles.reactionCounterText, styles.userSelectNone, StyleUtils.getEmojiReactionCounterTextStyle(props.hasUserReacted)]}>{props.count}</Text>}
-    </PressableWithSecondaryInteraction>
-);
+function EmojiReactionBubble(props) {
+    return (
+        <PressableWithSecondaryInteraction
+            style={({hovered, pressed}) => [styles.emojiReactionBubble, StyleUtils.getEmojiReactionBubbleStyle(hovered || pressed, props.hasUserReacted, props.isContextMenu)]}
+            onPress={props.onPress}
+            onLongPress={props.onReactionListOpen}
+            onSecondaryInteraction={props.onReactionListOpen}
+            ref={props.forwardedRef}
+            enableLongPressWithHover={props.isSmallScreenWidth}
+            // Prevent text input blur when emoji reaction is clicked
+            onMouseDown={(e) => e.preventDefault()}
+        >
+            <Text style={[styles.emojiReactionBubbleText, styles.userSelectNone, StyleUtils.getEmojiReactionBubbleTextStyle(props.isContextMenu)]}>{props.emojiCodes.join('')}</Text>
+            {props.count > 0 && <Text style={[styles.reactionCounterText, styles.userSelectNone, StyleUtils.getEmojiReactionCounterTextStyle(props.hasUserReacted)]}>{props.count}</Text>}
+        </PressableWithSecondaryInteraction>
+    );
+}
 
 EmojiReactionBubble.propTypes = propTypes;
 EmojiReactionBubble.defaultProps = defaultProps;
diff --git a/src/components/Reactions/MiniQuickEmojiReactions.js b/src/components/Reactions/MiniQuickEmojiReactions.js
index 373444022e46..91fa8817172c 100644
--- a/src/components/Reactions/MiniQuickEmojiReactions.js
+++ b/src/components/Reactions/MiniQuickEmojiReactions.js
@@ -45,7 +45,7 @@ const defaultProps = {
  * @param {Props} props
  * @returns {JSX.Element}
  */
-const MiniQuickEmojiReactions = (props) => {
+function MiniQuickEmojiReactions(props) {
     const ref = useRef();
 
     const openEmojiPicker = () => {
@@ -87,7 +87,7 @@ const MiniQuickEmojiReactions = (props) => {
             </BaseMiniContextMenuItem>
         </View>
     );
-};
+}
 
 MiniQuickEmojiReactions.displayName = 'MiniQuickEmojiReactions';
 MiniQuickEmojiReactions.propTypes = propTypes;
diff --git a/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js b/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js
index e5b7e062a0a9..7a0eb42a0ebd 100644
--- a/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js
+++ b/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js
@@ -46,30 +46,32 @@ const defaultProps = {
     preferredSkinTone: CONST.EMOJI_DEFAULT_SKIN_TONE,
 };
 
-const BaseQuickEmojiReactions = (props) => (
-    <View style={styles.quickReactionsContainer}>
-        {_.map(CONST.QUICK_REACTIONS, (emoji) => (
-            <Tooltip
-                text={`:${emoji.name}:`}
-                key={emoji.name}
-            >
-                <View>
-                    <EmojiReactionBubble
-                        emojiCodes={[EmojiUtils.getPreferredEmojiCode(emoji, props.preferredSkinTone)]}
-                        isContextMenu
-                        onPress={Session.checkIfActionIsAllowed(() => props.onEmojiSelected(emoji))}
-                    />
-                </View>
-            </Tooltip>
-        ))}
-        <AddReactionBubble
-            isContextMenu
-            onPressOpenPicker={props.onPressOpenPicker}
-            onWillShowPicker={props.onWillShowPicker}
-            onSelectEmoji={props.onEmojiSelected}
-        />
-    </View>
-);
+function BaseQuickEmojiReactions(props) {
+    return (
+        <View style={styles.quickReactionsContainer}>
+            {_.map(CONST.QUICK_REACTIONS, (emoji) => (
+                <Tooltip
+                    text={`:${emoji.name}:`}
+                    key={emoji.name}
+                >
+                    <View>
+                        <EmojiReactionBubble
+                            emojiCodes={[EmojiUtils.getPreferredEmojiCode(emoji, props.preferredSkinTone)]}
+                            isContextMenu
+                            onPress={Session.checkIfActionIsAllowed(() => props.onEmojiSelected(emoji))}
+                        />
+                    </View>
+                </Tooltip>
+            ))}
+            <AddReactionBubble
+                isContextMenu
+                onPressOpenPicker={props.onPressOpenPicker}
+                onWillShowPicker={props.onWillShowPicker}
+                onSelectEmoji={props.onEmojiSelected}
+            />
+        </View>
+    );
+}
 
 BaseQuickEmojiReactions.displayName = 'BaseQuickEmojiReactions';
 BaseQuickEmojiReactions.propTypes = propTypes;
diff --git a/src/components/Reactions/QuickEmojiReactions/index.js b/src/components/Reactions/QuickEmojiReactions/index.js
index fbeb0b5867d3..dd05c4f2cea3 100644
--- a/src/components/Reactions/QuickEmojiReactions/index.js
+++ b/src/components/Reactions/QuickEmojiReactions/index.js
@@ -15,7 +15,7 @@ const propTypes = {
     closeContextMenu: PropTypes.func.isRequired,
 };
 
-const QuickEmojiReactions = (props) => {
+function QuickEmojiReactions(props) {
     const onPressOpenPicker = (openPicker) => {
         openPicker(contextMenuRef.current.contentRef.current, {
             horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
@@ -31,7 +31,7 @@ const QuickEmojiReactions = (props) => {
             onWillShowPicker={props.closeContextMenu}
         />
     );
-};
+}
 
 QuickEmojiReactions.displayName = 'QuickEmojiReactions';
 QuickEmojiReactions.propTypes = propTypes;
diff --git a/src/components/Reactions/QuickEmojiReactions/index.native.js b/src/components/Reactions/QuickEmojiReactions/index.native.js
index aa829597d1d0..5ad8e0097e0e 100644
--- a/src/components/Reactions/QuickEmojiReactions/index.native.js
+++ b/src/components/Reactions/QuickEmojiReactions/index.native.js
@@ -14,7 +14,7 @@ const propTypes = {
     closeContextMenu: PropTypes.func.isRequired,
 };
 
-const QuickEmojiReactions = (props) => {
+function QuickEmojiReactions(props) {
     const onPressOpenPicker = (openPicker) => {
         // We first need to close the menu as it's a popover.
         // The picker is a popover as well and on mobile there can only
@@ -34,7 +34,7 @@ const QuickEmojiReactions = (props) => {
             onPressOpenPicker={onPressOpenPicker}
         />
     );
-};
+}
 
 QuickEmojiReactions.displayName = 'QuickEmojiReactions';
 QuickEmojiReactions.propTypes = propTypes;
diff --git a/src/components/Reactions/ReactionTooltipContent.js b/src/components/Reactions/ReactionTooltipContent.js
index 42c2a1f0fa61..981441925906 100644
--- a/src/components/Reactions/ReactionTooltipContent.js
+++ b/src/components/Reactions/ReactionTooltipContent.js
@@ -31,7 +31,7 @@ const defaultProps = {
     ...withCurrentUserPersonalDetailsDefaultProps,
 };
 
-const ReactionTooltipContent = (props) => {
+function ReactionTooltipContent(props) {
     const users = useMemo(
         () => PersonalDetailsUtils.getPersonalDetailsByIDs(props.accountIDs, props.currentUserPersonalDetails.accountID, true),
         [props.currentUserPersonalDetails.accountID, props.accountIDs],
@@ -58,7 +58,7 @@ const ReactionTooltipContent = (props) => {
             <Text style={[styles.textMicro, styles.fontColorReactionLabel]}>{`${props.translate('emojiReactions.reactedWith')} :${props.emojiName}:`}</Text>
         </View>
     );
-};
+}
 
 ReactionTooltipContent.propTypes = propTypes;
 ReactionTooltipContent.defaultProps = defaultProps;
diff --git a/src/components/Reactions/ReportActionItemReactions.js b/src/components/Reactions/ReportActionItemReactions.js
index 053bdafc5c2b..b1194daef773 100644
--- a/src/components/Reactions/ReportActionItemReactions.js
+++ b/src/components/Reactions/ReportActionItemReactions.js
@@ -46,7 +46,7 @@ const defaultProps = {
     ...withCurrentUserPersonalDetailsDefaultProps,
 };
 
-const ReportActionItemReactions = (props) => {
+function ReportActionItemReactions(props) {
     const popoverReactionListAnchor = useRef(null);
     const reactionsWithCount = _.filter(props.reactions, (reaction) => reaction.users.length > 0);
 
@@ -100,7 +100,7 @@ const ReportActionItemReactions = (props) => {
             {reactionsWithCount.length > 0 && <AddReactionBubble onSelectEmoji={props.toggleReaction} />}
         </View>
     );
-};
+}
 
 ReportActionItemReactions.displayName = 'ReportActionItemReactions';
 ReportActionItemReactions.propTypes = propTypes;
diff --git a/src/components/ReimbursementAccountLoadingIndicator.js b/src/components/ReimbursementAccountLoadingIndicator.js
index a110d3c747ba..c8b12eb8592d 100644
--- a/src/components/ReimbursementAccountLoadingIndicator.js
+++ b/src/components/ReimbursementAccountLoadingIndicator.js
@@ -22,31 +22,33 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-const ReimbursementAccountLoadingIndicator = (props) => (
-    <ScreenWrapper style={[StyleSheet.absoluteFillObject, styles.reimbursementAccountFullScreenLoading]}>
-        <HeaderWithBackButton
-            title={props.translate('reimbursementAccountLoadingAnimation.oneMoment')}
-            onBackButtonPress={props.onBackButtonPress}
-        />
-        <FullPageOfflineBlockingView>
-            {props.isSubmittingVerificationsData ? (
-                <View style={[styles.pageWrapper]}>
-                    <Lottie
-                        source={ReviewingBankInfoAnimation}
-                        autoPlay
-                        loop
-                        style={styles.loadingVBAAnimation}
-                    />
-                    <View style={[styles.ph6]}>
-                        <Text style={[styles.textAlignCenter]}>{props.translate('reimbursementAccountLoadingAnimation.explanationLine')}</Text>
+function ReimbursementAccountLoadingIndicator(props) {
+    return (
+        <ScreenWrapper style={[StyleSheet.absoluteFillObject, styles.reimbursementAccountFullScreenLoading]}>
+            <HeaderWithBackButton
+                title={props.translate('reimbursementAccountLoadingAnimation.oneMoment')}
+                onBackButtonPress={props.onBackButtonPress}
+            />
+            <FullPageOfflineBlockingView>
+                {props.isSubmittingVerificationsData ? (
+                    <View style={[styles.pageWrapper]}>
+                        <Lottie
+                            source={ReviewingBankInfoAnimation}
+                            autoPlay
+                            loop
+                            style={styles.loadingVBAAnimation}
+                        />
+                        <View style={[styles.ph6]}>
+                            <Text style={[styles.textAlignCenter]}>{props.translate('reimbursementAccountLoadingAnimation.explanationLine')}</Text>
+                        </View>
                     </View>
-                </View>
-            ) : (
-                <FullScreenLoadingIndicator style={[styles.flex1, styles.pRelative]} />
-            )}
-        </FullPageOfflineBlockingView>
-    </ScreenWrapper>
-);
+                ) : (
+                    <FullScreenLoadingIndicator style={[styles.flex1, styles.pRelative]} />
+                )}
+            </FullPageOfflineBlockingView>
+        </ScreenWrapper>
+    );
+}
 
 ReimbursementAccountLoadingIndicator.propTypes = propTypes;
 ReimbursementAccountLoadingIndicator.displayName = 'ReimbursementAccountLoadingIndicator';
diff --git a/src/components/RenderHTML.js b/src/components/RenderHTML.js
index 203c78de4b25..d2d4f0b58e71 100644
--- a/src/components/RenderHTML.js
+++ b/src/components/RenderHTML.js
@@ -12,7 +12,7 @@ const propTypes = {
 // Configuration for RenderHTML is handled in a top-level component providing
 // context to RenderHTMLSource components. See https://git.io/JRcZb
 // The provider is available at src/components/HTMLEngineProvider/
-const RenderHTML = (props) => {
+function RenderHTML(props) {
     const {windowWidth} = useWindowDimensions();
     return (
         <RenderHTMLSource
@@ -20,7 +20,7 @@ const RenderHTML = (props) => {
             source={{html: props.html}}
         />
     );
-};
+}
 
 RenderHTML.displayName = 'RenderHTML';
 RenderHTML.propTypes = propTypes;
diff --git a/src/components/ReportActionItem/ChronosOOOListActions.js b/src/components/ReportActionItem/ChronosOOOListActions.js
index 6cb166e4a5bd..3c9c65d8f254 100644
--- a/src/components/ReportActionItem/ChronosOOOListActions.js
+++ b/src/components/ReportActionItem/ChronosOOOListActions.js
@@ -22,7 +22,7 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-const ChronosOOOListActions = (props) => {
+function ChronosOOOListActions(props) {
     const events = lodashGet(props.action, 'originalMessage.events', []);
 
     if (!events.length) {
@@ -70,7 +70,7 @@ const ChronosOOOListActions = (props) => {
             </View>
         </OfflineWithFeedback>
     );
-};
+}
 
 ChronosOOOListActions.propTypes = propTypes;
 ChronosOOOListActions.displayName = 'ChronosOOOListActions';
diff --git a/src/components/ReportActionItem/IOUPreview.js b/src/components/ReportActionItem/IOUPreview.js
index a4e4561bd6db..6281706da2f3 100644
--- a/src/components/ReportActionItem/IOUPreview.js
+++ b/src/components/ReportActionItem/IOUPreview.js
@@ -124,7 +124,7 @@ const defaultProps = {
     shouldShowPendingConversionMessage: false,
 };
 
-const IOUPreview = (props) => {
+function IOUPreview(props) {
     if (_.isEmpty(props.iouReport) && !props.isBillSplit) {
         return null;
     }
@@ -257,7 +257,7 @@ const IOUPreview = (props) => {
             {childContainer}
         </PressableWithFeedback>
     );
-};
+}
 
 IOUPreview.propTypes = propTypes;
 IOUPreview.defaultProps = defaultProps;
diff --git a/src/components/ReportActionItem/MoneyRequestAction.js b/src/components/ReportActionItem/MoneyRequestAction.js
index 1f11eeae780e..b9bebeb94193 100644
--- a/src/components/ReportActionItem/MoneyRequestAction.js
+++ b/src/components/ReportActionItem/MoneyRequestAction.js
@@ -90,7 +90,7 @@ const defaultProps = {
     style: [],
 };
 
-const MoneyRequestAction = (props) => {
+function MoneyRequestAction(props) {
     const isSplitBillAction = lodashGet(props.action, 'originalMessage.type', '') === CONST.IOU.REPORT_ACTION_TYPE.SPLIT;
 
     const onIOUPreviewPressed = () => {
@@ -158,7 +158,7 @@ const MoneyRequestAction = (props) => {
             />
         </>
     );
-};
+}
 
 MoneyRequestAction.propTypes = propTypes;
 MoneyRequestAction.defaultProps = defaultProps;
diff --git a/src/components/ReportActionItem/RenameAction.js b/src/components/ReportActionItem/RenameAction.js
index b444e705adbe..369f4da10b39 100644
--- a/src/components/ReportActionItem/RenameAction.js
+++ b/src/components/ReportActionItem/RenameAction.js
@@ -13,7 +13,7 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-const RenameAction = (props) => {
+function RenameAction(props) {
     const displayName = lodashGet(props.action, ['message', 0, 'text']);
     const oldName = lodashGet(props.action, 'originalMessage.oldName', '');
     const newName = lodashGet(props.action, 'originalMessage.newName', '');
@@ -24,7 +24,7 @@ const RenameAction = (props) => {
             {props.translate('newRoomPage.renamedRoomAction', {oldName, newName})}
         </Text>
     );
-};
+}
 
 RenameAction.propTypes = propTypes;
 RenameAction.displayName = 'RenameAction';
diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index e7ba7fde70d5..585e91c3f559 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -94,7 +94,7 @@ const defaultProps = {
     },
 };
 
-const ReportPreview = (props) => {
+function ReportPreview(props) {
     const reportAmount = CurrencyUtils.convertToDisplayString(ReportUtils.getMoneyRequestTotal(props.iouReport), props.iouReport.currency);
     const managerEmail = props.iouReport.managerEmail || '';
     const managerName = ReportUtils.isPolicyExpenseChat(props.chatReport) ? ReportUtils.getPolicyName(props.chatReport) : ReportUtils.getDisplayNameForParticipant(managerEmail, true);
@@ -156,7 +156,7 @@ const ReportPreview = (props) => {
             )}
         </View>
     );
-};
+}
 
 ReportPreview.propTypes = propTypes;
 ReportPreview.defaultProps = defaultProps;
diff --git a/src/components/ReportActionItem/TaskAction.js b/src/components/ReportActionItem/TaskAction.js
index 90483e9dff3b..bdf8f374dde3 100644
--- a/src/components/ReportActionItem/TaskAction.js
+++ b/src/components/ReportActionItem/TaskAction.js
@@ -35,7 +35,7 @@ const propTypes = {
 const defaultProps = {
     taskReport: {},
 };
-const TaskAction = (props) => {
+function TaskAction(props) {
     const taskReportName = props.taskReport.reportName || '';
 
     let messageLinkText = '';
@@ -61,7 +61,7 @@ const TaskAction = (props) => {
             </View>
         </>
     );
-};
+}
 
 TaskAction.propTypes = propTypes;
 TaskAction.defaultProps = defaultProps;
diff --git a/src/components/ReportActionItem/TaskPreview.js b/src/components/ReportActionItem/TaskPreview.js
index 3f66c211d476..2ddf2def5e89 100644
--- a/src/components/ReportActionItem/TaskPreview.js
+++ b/src/components/ReportActionItem/TaskPreview.js
@@ -49,7 +49,7 @@ const defaultProps = {
     isHovered: false,
 };
 
-const TaskPreview = (props) => {
+function TaskPreview(props) {
     // The reportAction might not contain details regarding the taskReport
     // Only the direct parent reportAction will contain details about the taskReport
     // Other linked reportActions will only contain the taskReportID and we will grab the details from there
@@ -87,7 +87,7 @@ const TaskPreview = (props) => {
             />
         </Pressable>
     );
-};
+}
 
 TaskPreview.propTypes = propTypes;
 TaskPreview.defaultProps = defaultProps;
diff --git a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js
index 87a06cde8552..f87ae176e3ac 100644
--- a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js
+++ b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js
@@ -16,49 +16,51 @@ const defaultTypes = {
     shouldAnimate: true,
 };
 
-const SkeletonViewLines = (props) => (
-    <SkeletonViewContentLoader
-        animate={props.shouldAnimate}
-        height={CONST.CHAT_SKELETON_VIEW.HEIGHT_FOR_ROW_COUNT[props.numberOfRows]}
-        backgroundColor={themeColors.highlightBG}
-        foregroundColor={themeColors.border}
-        style={styles.mr5}
-    >
-        <Circle
-            cx="40"
-            cy="26"
-            r="20"
-        />
-        <Rect
-            x="67"
-            y="11"
-            width="20%"
-            height="8"
-        />
-        <Rect
-            x="67"
-            y="31"
-            width="100%"
-            height="8"
-        />
-        {props.numberOfRows > 1 && (
+function SkeletonViewLines(props) {
+    return (
+        <SkeletonViewContentLoader
+            animate={props.shouldAnimate}
+            height={CONST.CHAT_SKELETON_VIEW.HEIGHT_FOR_ROW_COUNT[props.numberOfRows]}
+            backgroundColor={themeColors.highlightBG}
+            foregroundColor={themeColors.border}
+            style={styles.mr5}
+        >
+            <Circle
+                cx="40"
+                cy="26"
+                r="20"
+            />
             <Rect
                 x="67"
-                y="51"
-                width="50%"
+                y="11"
+                width="20%"
                 height="8"
             />
-        )}
-        {props.numberOfRows > 2 && (
             <Rect
                 x="67"
-                y="71"
-                width="50%"
+                y="31"
+                width="100%"
                 height="8"
             />
-        )}
-    </SkeletonViewContentLoader>
-);
+            {props.numberOfRows > 1 && (
+                <Rect
+                    x="67"
+                    y="51"
+                    width="50%"
+                    height="8"
+                />
+            )}
+            {props.numberOfRows > 2 && (
+                <Rect
+                    x="67"
+                    y="71"
+                    width="50%"
+                    height="8"
+                />
+            )}
+        </SkeletonViewContentLoader>
+    );
+}
 
 SkeletonViewLines.displayName = 'SkeletonViewLines';
 SkeletonViewLines.propTypes = propTypes;
diff --git a/src/components/ReportActionsSkeletonView/index.js b/src/components/ReportActionsSkeletonView/index.js
index 7cce81ff5eae..2fe7e590afef 100644
--- a/src/components/ReportActionsSkeletonView/index.js
+++ b/src/components/ReportActionsSkeletonView/index.js
@@ -16,7 +16,7 @@ const defaultProps = {
     shouldAnimate: true,
 };
 
-const ReportActionsSkeletonView = (props) => {
+function ReportActionsSkeletonView(props) {
     // Determines the number of content items based on container height
     const possibleVisibleContentItems = Math.ceil(props.containerHeight / CONST.CHAT_SKELETON_VIEW.AVERAGE_ROW_HEIGHT);
     const skeletonViewLines = [];
@@ -52,7 +52,7 @@ const ReportActionsSkeletonView = (props) => {
         }
     }
     return <View>{skeletonViewLines}</View>;
-};
+}
 
 ReportActionsSkeletonView.displayName = 'ReportActionsSkeletonView';
 ReportActionsSkeletonView.propTypes = propTypes;
diff --git a/src/components/ReportHeaderSkeletonView.js b/src/components/ReportHeaderSkeletonView.js
index a2f9aee5c8e4..a5d0b285ee32 100644
--- a/src/components/ReportHeaderSkeletonView.js
+++ b/src/components/ReportHeaderSkeletonView.js
@@ -23,47 +23,49 @@ const defaultProps = {
     shouldAnimate: true,
 };
 
-const ReportHeaderSkeletonView = (props) => (
-    <View style={[styles.appContentHeader]}>
-        <View style={[styles.appContentHeaderTitle, !props.isSmallScreenWidth && styles.pl5]}>
-            {props.isSmallScreenWidth && (
-                <PressableWithFeedback
-                    onPress={() => {}}
-                    style={[styles.LHNToggle]}
-                    accessibilityRole="button"
-                    accessibilityLabel={props.translate('common.back')}
+function ReportHeaderSkeletonView(props) {
+    return (
+        <View style={[styles.appContentHeader]}>
+            <View style={[styles.appContentHeaderTitle, !props.isSmallScreenWidth && styles.pl5]}>
+                {props.isSmallScreenWidth && (
+                    <PressableWithFeedback
+                        onPress={() => {}}
+                        style={[styles.LHNToggle]}
+                        accessibilityRole="button"
+                        accessibilityLabel={props.translate('common.back')}
+                    >
+                        <Icon src={Expensicons.BackArrow} />
+                    </PressableWithFeedback>
+                )}
+                <SkeletonViewContentLoader
+                    animate={props.shouldAnimate}
+                    width={styles.w100.width}
+                    height={variables.contentHeaderHeight}
+                    backgroundColor={themeColors.highlightBG}
+                    foregroundColor={themeColors.border}
                 >
-                    <Icon src={Expensicons.BackArrow} />
-                </PressableWithFeedback>
-            )}
-            <SkeletonViewContentLoader
-                animate={props.shouldAnimate}
-                width={styles.w100.width}
-                height={variables.contentHeaderHeight}
-                backgroundColor={themeColors.highlightBG}
-                foregroundColor={themeColors.border}
-            >
-                <Circle
-                    cx="20"
-                    cy="33"
-                    r="20"
-                />
-                <Rect
-                    x="55"
-                    y="20"
-                    width="30%"
-                    height="8"
-                />
-                <Rect
-                    x="55"
-                    y="40"
-                    width="40%"
-                    height="8"
-                />
-            </SkeletonViewContentLoader>
+                    <Circle
+                        cx="20"
+                        cy="33"
+                        r="20"
+                    />
+                    <Rect
+                        x="55"
+                        y="20"
+                        width="30%"
+                        height="8"
+                    />
+                    <Rect
+                        x="55"
+                        y="40"
+                        width="40%"
+                        height="8"
+                    />
+                </SkeletonViewContentLoader>
+            </View>
         </View>
-    </View>
-);
+    );
+}
 
 ReportHeaderSkeletonView.propTypes = propTypes;
 ReportHeaderSkeletonView.defaultProps = defaultProps;
diff --git a/src/components/ReportWelcomeText.js b/src/components/ReportWelcomeText.js
index dc38a4560b25..0607f0713fbb 100644
--- a/src/components/ReportWelcomeText.js
+++ b/src/components/ReportWelcomeText.js
@@ -50,7 +50,7 @@ const defaultProps = {
     betas: [],
 };
 
-const ReportWelcomeText = (props) => {
+function ReportWelcomeText(props) {
     const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(props.report);
     const isChatRoom = ReportUtils.isChatRoom(props.report);
     const isDefault = !(isChatRoom || isPolicyExpenseChat);
@@ -121,7 +121,7 @@ const ReportWelcomeText = (props) => {
             </Text>
         </>
     );
-};
+}
 
 ReportWelcomeText.defaultProps = defaultProps;
 ReportWelcomeText.propTypes = propTypes;
diff --git a/src/components/RoomHeaderAvatars.js b/src/components/RoomHeaderAvatars.js
index b095563785d3..6f78e6ace66d 100644
--- a/src/components/RoomHeaderAvatars.js
+++ b/src/components/RoomHeaderAvatars.js
@@ -18,7 +18,7 @@ const defaultProps = {
     icons: [],
 };
 
-const RoomHeaderAvatars = (props) => {
+function RoomHeaderAvatars(props) {
     if (!props.icons.length) {
         return null;
     }
@@ -79,7 +79,7 @@ const RoomHeaderAvatars = (props) => {
             </View>
         </View>
     );
-};
+}
 
 RoomHeaderAvatars.defaultProps = defaultProps;
 RoomHeaderAvatars.propTypes = propTypes;
diff --git a/src/components/SVGImage/index.js b/src/components/SVGImage/index.js
index a546cc4f575a..7374539509e2 100644
--- a/src/components/SVGImage/index.js
+++ b/src/components/SVGImage/index.js
@@ -3,13 +3,15 @@ import {Image} from 'react-native';
 import * as StyleUtils from '../../styles/StyleUtils';
 import propTypes from './propTypes';
 
-const SVGImage = (props) => (
-    <Image
-        style={StyleUtils.getWidthAndHeightStyle(props.width, props.height)}
-        source={props.src}
-        resizeMode={props.resizeMode}
-    />
-);
+function SVGImage(props) {
+    return (
+        <Image
+            style={StyleUtils.getWidthAndHeightStyle(props.width, props.height)}
+            source={props.src}
+            resizeMode={props.resizeMode}
+        />
+    );
+}
 
 SVGImage.propTypes = propTypes;
 SVGImage.displayName = 'SVGImage';
diff --git a/src/components/SVGImage/index.native.js b/src/components/SVGImage/index.native.js
index dbf09ef4db06..78b1f8ef7e78 100644
--- a/src/components/SVGImage/index.native.js
+++ b/src/components/SVGImage/index.native.js
@@ -2,13 +2,15 @@ import React from 'react';
 import {SvgCssUri} from 'react-native-svg';
 import propTypes from './propTypes';
 
-const SVGImage = (props) => (
-    <SvgCssUri
-        width={props.width}
-        height={props.height}
-        uri={props.src}
-    />
-);
+function SVGImage(props) {
+    return (
+        <SvgCssUri
+            width={props.width}
+            height={props.height}
+            uri={props.src}
+        />
+    );
+}
 
 SVGImage.propTypes = propTypes;
 SVGImage.displayName = 'SVGImage';
diff --git a/src/components/SafeArea/index.ios.js b/src/components/SafeArea/index.ios.js
index 871c761e0866..ba9b1f01e298 100644
--- a/src/components/SafeArea/index.ios.js
+++ b/src/components/SafeArea/index.ios.js
@@ -3,14 +3,16 @@ import {SafeAreaView} from 'react-native-safe-area-context';
 import PropTypes from 'prop-types';
 import styles from '../../styles/styles';
 
-const SafeArea = (props) => (
-    <SafeAreaView
-        style={[styles.iPhoneXSafeArea]}
-        edges={['left', 'right']}
-    >
-        {props.children}
-    </SafeAreaView>
-);
+function SafeArea(props) {
+    return (
+        <SafeAreaView
+            style={[styles.iPhoneXSafeArea]}
+            edges={['left', 'right']}
+        >
+            {props.children}
+        </SafeAreaView>
+    );
+}
 
 SafeArea.propTypes = {
     /** App content */
diff --git a/src/components/SafeAreaConsumer.js b/src/components/SafeAreaConsumer.js
index c49048ad04a4..78d7426ba380 100644
--- a/src/components/SafeAreaConsumer.js
+++ b/src/components/SafeAreaConsumer.js
@@ -15,19 +15,21 @@ const propTypes = {
  * @param {Object} props
  * @returns {React.Component}
  */
-const SafeAreaConsumer = (props) => (
-    <SafeAreaInsetsContext.Consumer>
-        {(insets) => {
-            const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(insets);
-            return props.children({
-                paddingTop,
-                paddingBottom,
-                insets,
-                safeAreaPaddingBottomStyle: {paddingBottom},
-            });
-        }}
-    </SafeAreaInsetsContext.Consumer>
-);
+function SafeAreaConsumer(props) {
+    return (
+        <SafeAreaInsetsContext.Consumer>
+            {(insets) => {
+                const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(insets);
+                return props.children({
+                    paddingTop,
+                    paddingBottom,
+                    insets,
+                    safeAreaPaddingBottomStyle: {paddingBottom},
+                });
+            }}
+        </SafeAreaInsetsContext.Consumer>
+    );
+}
 
 SafeAreaConsumer.displayName = 'SafeAreaConsumer';
 SafeAreaConsumer.propTypes = propTypes;
diff --git a/src/components/Section.js b/src/components/Section.js
index 3849e50c7126..cd390be0d00b 100644
--- a/src/components/Section.js
+++ b/src/components/Section.js
@@ -41,7 +41,7 @@ const defaultProps = {
     iconContainerStyles: [],
 };
 
-const Section = (props) => {
+function Section(props) {
     const IconComponent = props.IconComponent;
     return (
         <>
@@ -68,7 +68,7 @@ const Section = (props) => {
             </View>
         </>
     );
-};
+}
 
 Section.displayName = 'Section';
 Section.propTypes = propTypes;
diff --git a/src/components/SelectCircle.js b/src/components/SelectCircle.js
index aef320dd7785..93cf285eab59 100644
--- a/src/components/SelectCircle.js
+++ b/src/components/SelectCircle.js
@@ -15,16 +15,18 @@ const defaultProps = {
     isChecked: false,
 };
 
-const SelectCircle = (props) => (
-    <View style={[styles.selectCircle, styles.alignSelfCenter]}>
-        {props.isChecked && (
-            <Icon
-                src={Expensicons.Checkmark}
-                fill={themeColors.iconSuccessFill}
-            />
-        )}
-    </View>
-);
+function SelectCircle(props) {
+    return (
+        <View style={[styles.selectCircle, styles.alignSelfCenter]}>
+            {props.isChecked && (
+                <Icon
+                    src={Expensicons.Checkmark}
+                    fill={themeColors.iconSuccessFill}
+                />
+            )}
+        </View>
+    );
+}
 
 SelectCircle.propTypes = propTypes;
 SelectCircle.defaultProps = defaultProps;
diff --git a/src/components/SignInPageForm/index.native.js b/src/components/SignInPageForm/index.native.js
index 115abe2b444b..acd1dfe0d197 100644
--- a/src/components/SignInPageForm/index.native.js
+++ b/src/components/SignInPageForm/index.native.js
@@ -1,8 +1,10 @@
 import React from 'react';
 import FormElement from '../FormElement';
 
-// eslint-disable-next-line react/jsx-props-no-spreading
-const Form = (props) => <FormElement {...props} />;
+function Form(props) {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <FormElement {...props} />;
+}
 
 Form.displayName = 'Form';
 export default Form;
diff --git a/src/components/SplashScreenHider/index.js b/src/components/SplashScreenHider/index.js
index cf8745715572..a3f3647ede81 100644
--- a/src/components/SplashScreenHider/index.js
+++ b/src/components/SplashScreenHider/index.js
@@ -11,7 +11,7 @@ const defaultProps = {
     onHide: () => {},
 };
 
-const SplashScreenHider = (props) => {
+function SplashScreenHider(props) {
     const {onHide} = props;
 
     useEffect(() => {
@@ -19,7 +19,7 @@ const SplashScreenHider = (props) => {
     }, [onHide]);
 
     return null;
-};
+}
 
 SplashScreenHider.displayName = 'SplashScreenHider';
 SplashScreenHider.propTypes = propTypes;
diff --git a/src/components/SplashScreenHider/index.native.js b/src/components/SplashScreenHider/index.native.js
index 6b626ceaaf1f..ad3b97ae7c12 100644
--- a/src/components/SplashScreenHider/index.native.js
+++ b/src/components/SplashScreenHider/index.native.js
@@ -15,7 +15,7 @@ const defaultProps = {
     onHide: () => {},
 };
 
-const SplashScreenHider = (props) => {
+function SplashScreenHider(props) {
     const {onHide} = props;
 
     const opacity = useSharedValue(1);
@@ -77,7 +77,7 @@ const SplashScreenHider = (props) => {
             </Reanimated.View>
         </Reanimated.View>
     );
-};
+}
 
 SplashScreenHider.displayName = 'SplashScreenHider';
 SplashScreenHider.propTypes = propTypes;
diff --git a/src/components/SubscriptAvatar.js b/src/components/SubscriptAvatar.js
index 6c65bb17ce69..b94bf4dffd25 100644
--- a/src/components/SubscriptAvatar.js
+++ b/src/components/SubscriptAvatar.js
@@ -43,7 +43,7 @@ const defaultProps = {
     noMargin: false,
 };
 
-const SubscriptAvatar = (props) => {
+function SubscriptAvatar(props) {
     const containerStyle = props.size === CONST.AVATAR_SIZE.SMALL ? styles.emptyAvatarSmall : styles.emptyAvatar;
 
     // Default the margin style to what is normal for small or normal sized avatars
@@ -84,7 +84,7 @@ const SubscriptAvatar = (props) => {
             </Tooltip>
         </View>
     );
-};
+}
 
 SubscriptAvatar.displayName = 'SubscriptAvatar';
 SubscriptAvatar.propTypes = propTypes;
diff --git a/src/components/TestToolMenu.js b/src/components/TestToolMenu.js
index 2e9c7fd4027c..474e4c9bb10c 100644
--- a/src/components/TestToolMenu.js
+++ b/src/components/TestToolMenu.js
@@ -36,65 +36,67 @@ const defaultProps = {
     },
 };
 
-const TestToolMenu = (props) => (
-    <>
-        <Text
-            style={[styles.textLabelSupporting, styles.mb4]}
-            numberOfLines={1}
-        >
-            Test Preferences
-        </Text>
+function TestToolMenu(props) {
+    return (
+        <>
+            <Text
+                style={[styles.textLabelSupporting, styles.mb4]}
+                numberOfLines={1}
+            >
+                Test Preferences
+            </Text>
 
-        {/* Option to switch between staging and default api endpoints.
+            {/* Option to switch between staging and default api endpoints.
         This enables QA, internal testers and external devs to take advantage of sandbox environments for 3rd party services like Plaid and Onfido.
         This toggle is not rendered for internal devs as they make environment changes directly to the .env file. */}
-        {!CONFIG.IS_USING_LOCAL_WEB && (
-            <TestToolRow title="Use Staging Server">
+            {!CONFIG.IS_USING_LOCAL_WEB && (
+                <TestToolRow title="Use Staging Server">
+                    <Switch
+                        accessibilityLabel="Use Staging Server"
+                        isOn={lodashGet(props, 'user.shouldUseStagingServer', ApiUtils.isUsingStagingApi())}
+                        onToggle={() => User.setShouldUseStagingServer(!lodashGet(props, 'user.shouldUseStagingServer', ApiUtils.isUsingStagingApi()))}
+                    />
+                </TestToolRow>
+            )}
+
+            {/* When toggled the app will be forced offline. */}
+            <TestToolRow title="Force offline">
                 <Switch
-                    accessibilityLabel="Use Staging Server"
-                    isOn={lodashGet(props, 'user.shouldUseStagingServer', ApiUtils.isUsingStagingApi())}
-                    onToggle={() => User.setShouldUseStagingServer(!lodashGet(props, 'user.shouldUseStagingServer', ApiUtils.isUsingStagingApi()))}
+                    accessibilityLabel="Force offline"
+                    isOn={Boolean(props.network.shouldForceOffline)}
+                    onToggle={() => Network.setShouldForceOffline(!props.network.shouldForceOffline)}
                 />
             </TestToolRow>
-        )}
-
-        {/* When toggled the app will be forced offline. */}
-        <TestToolRow title="Force offline">
-            <Switch
-                accessibilityLabel="Force offline"
-                isOn={Boolean(props.network.shouldForceOffline)}
-                onToggle={() => Network.setShouldForceOffline(!props.network.shouldForceOffline)}
-            />
-        </TestToolRow>
 
-        {/* When toggled all network requests will fail. */}
-        <TestToolRow title="Simulate failing network requests">
-            <Switch
-                accessibilityLabel="Simulate failing network requests"
-                isOn={Boolean(props.network.shouldFailAllRequests)}
-                onToggle={() => Network.setShouldFailAllRequests(!props.network.shouldFailAllRequests)}
-            />
-        </TestToolRow>
+            {/* When toggled all network requests will fail. */}
+            <TestToolRow title="Simulate failing network requests">
+                <Switch
+                    accessibilityLabel="Simulate failing network requests"
+                    isOn={Boolean(props.network.shouldFailAllRequests)}
+                    onToggle={() => Network.setShouldFailAllRequests(!props.network.shouldFailAllRequests)}
+                />
+            </TestToolRow>
 
-        {/* Instantly invalidates a user's local authToken. Useful for testing flows related to reauthentication. */}
-        <TestToolRow title="Authentication status">
-            <Button
-                small
-                text="Invalidate"
-                onPress={() => Session.invalidateAuthToken()}
-            />
-        </TestToolRow>
+            {/* Instantly invalidates a user's local authToken. Useful for testing flows related to reauthentication. */}
+            <TestToolRow title="Authentication status">
+                <Button
+                    small
+                    text="Invalidate"
+                    onPress={() => Session.invalidateAuthToken()}
+                />
+            </TestToolRow>
 
-        {/* Invalidate stored user auto-generated credentials. Useful for manually testing sign out logic. */}
-        <TestToolRow title="Device credentials">
-            <Button
-                small
-                text="Destroy"
-                onPress={() => Session.invalidateCredentials()}
-            />
-        </TestToolRow>
-    </>
-);
+            {/* Invalidate stored user auto-generated credentials. Useful for manually testing sign out logic. */}
+            <TestToolRow title="Device credentials">
+                <Button
+                    small
+                    text="Destroy"
+                    onPress={() => Session.invalidateCredentials()}
+                />
+            </TestToolRow>
+        </>
+    );
+}
 
 TestToolMenu.propTypes = propTypes;
 TestToolMenu.defaultProps = defaultProps;
diff --git a/src/components/TestToolRow.js b/src/components/TestToolRow.js
index b199cad3bc21..8dcd1ba35f43 100644
--- a/src/components/TestToolRow.js
+++ b/src/components/TestToolRow.js
@@ -12,14 +12,16 @@ const propTypes = {
     children: PropTypes.node.isRequired,
 };
 
-const TestToolRow = (props) => (
-    <View style={[styles.flexRow, styles.mb6, styles.justifyContentBetween, styles.alignItemsCenter, styles.mnw120]}>
-        <View style={styles.flex2}>
-            <Text>{props.title}</Text>
+function TestToolRow(props) {
+    return (
+        <View style={[styles.flexRow, styles.mb6, styles.justifyContentBetween, styles.alignItemsCenter, styles.mnw120]}>
+            <View style={styles.flex2}>
+                <Text>{props.title}</Text>
+            </View>
+            <View style={[styles.flex1, styles.alignItemsEnd]}>{props.children}</View>
         </View>
-        <View style={[styles.flex1, styles.alignItemsEnd]}>{props.children}</View>
-    </View>
-);
+    );
+}
 
 TestToolRow.propTypes = propTypes;
 TestToolRow.displayName = 'TestToolRow';
diff --git a/src/components/TestToolsModal.js b/src/components/TestToolsModal.js
index 4308d0b44cc4..43a74e48df5d 100644
--- a/src/components/TestToolsModal.js
+++ b/src/components/TestToolsModal.js
@@ -25,17 +25,19 @@ const defaultProps = {
     isTestToolsModalOpen: false,
 };
 
-const TestToolsModal = (props) => (
-    <Modal
-        isVisible={props.isTestToolsModalOpen}
-        type={CONST.MODAL.MODAL_TYPE.CENTERED_SMALL}
-        onClose={toggleTestToolsModal}
-    >
-        <View style={[styles.settingsPageBody, styles.p5]}>
-            <TestToolMenu />
-        </View>
-    </Modal>
-);
+function TestToolsModal(props) {
+    return (
+        <Modal
+            isVisible={props.isTestToolsModalOpen}
+            type={CONST.MODAL.MODAL_TYPE.CENTERED_SMALL}
+            onClose={toggleTestToolsModal}
+        >
+            <View style={[styles.settingsPageBody, styles.p5]}>
+                <TestToolMenu />
+            </View>
+        </Modal>
+    );
+}
 
 TestToolsModal.propTypes = propTypes;
 TestToolsModal.defaultProps = defaultProps;
diff --git a/src/components/TextLink.js b/src/components/TextLink.js
index f075002058ab..07690600cb0d 100644
--- a/src/components/TextLink.js
+++ b/src/components/TextLink.js
@@ -30,7 +30,7 @@ const defaultProps = {
     onMouseDown: (event) => event.preventDefault(),
 };
 
-const TextLink = (props) => {
+function TextLink(props) {
     const additionalStyles = _.isArray(props.style) ? props.style : [props.style];
 
     /**
@@ -68,7 +68,7 @@ const TextLink = (props) => {
             {props.children}
         </Text>
     );
-};
+}
 
 TextLink.defaultProps = defaultProps;
 TextLink.propTypes = propTypes;
diff --git a/src/components/TextPill.js b/src/components/TextPill.js
index 306d4f659185..a8a4f35b64fb 100644
--- a/src/components/TextPill.js
+++ b/src/components/TextPill.js
@@ -16,7 +16,7 @@ const defaultProps = {
     style: [],
 };
 
-const TextPill = (props) => {
+function TextPill(props) {
     const propsStyle = StyleUtils.parseStyleAsArray(props.style);
 
     return (
@@ -29,7 +29,7 @@ const TextPill = (props) => {
             {props.text}
         </Text>
     );
-};
+}
 
 TextPill.propTypes = propTypes;
 TextPill.defaultProps = defaultProps;
diff --git a/src/components/TextWithEllipsis/index.js b/src/components/TextWithEllipsis/index.js
index 3fe6d6291767..1734e24b03b6 100644
--- a/src/components/TextWithEllipsis/index.js
+++ b/src/components/TextWithEllipsis/index.js
@@ -29,21 +29,23 @@ const defaultProps = {
     wrapperStyle: {},
 };
 
-const TextWithEllipsis = (props) => (
-    <View style={[styles.flexRow, ...StyleUtils.parseStyleAsArray(props.wrapperStyle)]}>
-        <View style={[styles.flexShrink1, ...StyleUtils.parseStyleAsArray(props.leadingTextParentStyle)]}>
-            <Text
-                style={[...StyleUtils.parseStyleAsArray(props.textStyle)]}
-                numberOfLines={1}
-            >
-                {props.leadingText}
-            </Text>
+function TextWithEllipsis(props) {
+    return (
+        <View style={[styles.flexRow, ...StyleUtils.parseStyleAsArray(props.wrapperStyle)]}>
+            <View style={[styles.flexShrink1, ...StyleUtils.parseStyleAsArray(props.leadingTextParentStyle)]}>
+                <Text
+                    style={[...StyleUtils.parseStyleAsArray(props.textStyle)]}
+                    numberOfLines={1}
+                >
+                    {props.leadingText}
+                </Text>
+            </View>
+            <View style={styles.flexShrink0}>
+                <Text style={props.textStyle}>{props.trailingText}</Text>
+            </View>
         </View>
-        <View style={styles.flexShrink0}>
-            <Text style={props.textStyle}>{props.trailingText}</Text>
-        </View>
-    </View>
-);
+    );
+}
 
 TextWithEllipsis.propTypes = propTypes;
 TextWithEllipsis.defaultProps = defaultProps;
diff --git a/src/components/UnorderedList.js b/src/components/UnorderedList.js
index 486fc557262e..4500d9fc3538 100644
--- a/src/components/UnorderedList.js
+++ b/src/components/UnorderedList.js
@@ -13,19 +13,21 @@ const defaultProps = {
     items: [],
 };
 
-const UnorderedList = (props) => (
-    <>
-        {_.map(props.items, (itemText) => (
-            <View
-                key={itemText}
-                style={[styles.flexRow, styles.alignItemsStart, styles.ml2]}
-            >
-                <Text style={[styles.mr2]}>{'\u2022'}</Text>
-                <Text>{itemText}</Text>
-            </View>
-        ))}
-    </>
-);
+function UnorderedList(props) {
+    return (
+        <>
+            {_.map(props.items, (itemText) => (
+                <View
+                    key={itemText}
+                    style={[styles.flexRow, styles.alignItemsStart, styles.ml2]}
+                >
+                    <Text style={[styles.mr2]}>{'\u2022'}</Text>
+                    <Text>{itemText}</Text>
+                </View>
+            ))}
+        </>
+    );
+}
 
 UnorderedList.displayName = 'UnorderedList';
 UnorderedList.propTypes = propTypes;
diff --git a/src/components/UnreadActionIndicator.js b/src/components/UnreadActionIndicator.js
index 0d45c90aa441..5273ab52ec28 100755
--- a/src/components/UnreadActionIndicator.js
+++ b/src/components/UnreadActionIndicator.js
@@ -5,17 +5,19 @@ import Text from './Text';
 import CONST from '../CONST';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 
-const UnreadActionIndicator = (props) => (
-    <View
-        accessibilityLabel={props.translate('accessibilityHints.newMessageLineIndicator')}
-        data-action-id={props.reportActionID}
-        style={[styles.unreadIndicatorContainer, styles.userSelectNone]}
-        dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
-    >
-        <View style={styles.unreadIndicatorLine} />
-        <Text style={styles.unreadIndicatorText}>{props.translate('common.new')}</Text>
-    </View>
-);
+function UnreadActionIndicator(props) {
+    return (
+        <View
+            accessibilityLabel={props.translate('accessibilityHints.newMessageLineIndicator')}
+            data-action-id={props.reportActionID}
+            style={[styles.unreadIndicatorContainer, styles.userSelectNone]}
+            dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
+        >
+            <View style={styles.unreadIndicatorLine} />
+            <Text style={styles.unreadIndicatorText}>{props.translate('common.new')}</Text>
+        </View>
+    );
+}
 
 UnreadActionIndicator.propTypes = {...withLocalizePropTypes};
 
diff --git a/src/components/UpdateAppModal/index.desktop.js b/src/components/UpdateAppModal/index.desktop.js
index bf3af752501b..424b7a616e39 100644
--- a/src/components/UpdateAppModal/index.desktop.js
+++ b/src/components/UpdateAppModal/index.desktop.js
@@ -3,7 +3,7 @@ import BaseUpdateAppModal from './BaseUpdateAppModal';
 import {propTypes} from './updateAppModalPropTypes';
 import ELECTRON_EVENTS from '../../../desktop/ELECTRON_EVENTS';
 
-const UpdateAppModal = (props) => {
+function UpdateAppModal(props) {
     const updateApp = () => {
         if (props.onSubmit) {
             props.onSubmit();
@@ -11,7 +11,7 @@ const UpdateAppModal = (props) => {
         window.electron.send(ELECTRON_EVENTS.START_UPDATE);
     };
     return <BaseUpdateAppModal onSubmit={updateApp} />;
-};
+}
 UpdateAppModal.propTypes = propTypes;
 UpdateAppModal.displayName = 'UpdateAppModal';
 export default UpdateAppModal;
diff --git a/src/components/UpdateAppModal/index.js b/src/components/UpdateAppModal/index.js
index 271c4bcc15f3..488f69f66385 100644
--- a/src/components/UpdateAppModal/index.js
+++ b/src/components/UpdateAppModal/index.js
@@ -2,12 +2,14 @@ import React from 'react';
 import BaseUpdateAppModal from './BaseUpdateAppModal';
 import {propTypes} from './updateAppModalPropTypes';
 
-const UpdateAppModal = (props) => (
-    <BaseUpdateAppModal
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-    />
-);
+function UpdateAppModal(props) {
+    return (
+        <BaseUpdateAppModal
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+        />
+    );
+}
 UpdateAppModal.propTypes = propTypes;
 UpdateAppModal.displayName = 'UpdateAppModal';
 export default UpdateAppModal;
diff --git a/src/components/VideoChatButtonAndMenu/index.android.js b/src/components/VideoChatButtonAndMenu/index.android.js
index 88fa5a3fc31b..53f43b73d600 100644
--- a/src/components/VideoChatButtonAndMenu/index.android.js
+++ b/src/components/VideoChatButtonAndMenu/index.android.js
@@ -6,13 +6,15 @@ import BaseVideoChatButtonAndMenu from './BaseVideoChatButtonAndMenu';
 // On Android creating a new google meet meeting requires the CALL_PHONE permission in some cases
 // so we're just opening the google meet app instead, more details:
 // https://github.com/Expensify/App/issues/8851#issuecomment-1120236904
-const VideoChatButtonAndMenu = (props) => (
-    <BaseVideoChatButtonAndMenu
-        googleMeetURL={CONST.GOOGLE_MEET_URL_ANDROID}
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-    />
-);
+function VideoChatButtonAndMenu(props) {
+    return (
+        <BaseVideoChatButtonAndMenu
+            googleMeetURL={CONST.GOOGLE_MEET_URL_ANDROID}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+        />
+    );
+}
 
 VideoChatButtonAndMenu.propTypes = propTypes;
 VideoChatButtonAndMenu.defaultProps = defaultProps;
diff --git a/src/components/VideoChatButtonAndMenu/index.js b/src/components/VideoChatButtonAndMenu/index.js
index 876a11df822d..bf3be904103a 100644
--- a/src/components/VideoChatButtonAndMenu/index.js
+++ b/src/components/VideoChatButtonAndMenu/index.js
@@ -3,13 +3,15 @@ import CONST from '../../CONST';
 import {propTypes, defaultProps} from './videoChatButtonAndMenuPropTypes';
 import BaseVideoChatButtonAndMenu from './BaseVideoChatButtonAndMenu';
 
-const VideoChatButtonAndMenu = (props) => (
-    <BaseVideoChatButtonAndMenu
-        googleMeetURL={CONST.NEW_GOOGLE_MEET_MEETING_URL}
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-    />
-);
+function VideoChatButtonAndMenu(props) {
+    return (
+        <BaseVideoChatButtonAndMenu
+            googleMeetURL={CONST.NEW_GOOGLE_MEET_MEETING_URL}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+        />
+    );
+}
 
 VideoChatButtonAndMenu.propTypes = propTypes;
 VideoChatButtonAndMenu.defaultProps = defaultProps;
diff --git a/src/components/createOnyxContext.js b/src/components/createOnyxContext.js
index 8208dcaf56e2..3dbc07a7032e 100644
--- a/src/components/createOnyxContext.js
+++ b/src/components/createOnyxContext.js
@@ -11,7 +11,9 @@ const propTypes = {
 
 export default (onyxKeyName, defaultValue) => {
     const Context = createContext();
-    const Provider = (props) => <Context.Provider value={props[onyxKeyName]}>{props.children}</Context.Provider>;
+    function Provider(props) {
+        return <Context.Provider value={props[onyxKeyName]}>{props.children}</Context.Provider>;
+    }
 
     Provider.propTypes = propTypes;
     Provider.displayName = `${Str.UCFirst(onyxKeyName)}Provider`;
diff --git a/src/components/withCurrentUserPersonalDetails.js b/src/components/withCurrentUserPersonalDetails.js
index 52a822a5096a..f46281b1dbbb 100644
--- a/src/components/withCurrentUserPersonalDetails.js
+++ b/src/components/withCurrentUserPersonalDetails.js
@@ -35,7 +35,7 @@ export default function (WrappedComponent) {
         },
     };
 
-    const WithCurrentUserPersonalDetails = (props) => {
+    function WithCurrentUserPersonalDetails(props) {
         const currentUserEmail = props.session.email;
         const accountID = props.session.accountID;
         const currentUserPersonalDetails = useMemo(() => ({...props.personalDetails[currentUserEmail], accountID}), [props.personalDetails, currentUserEmail, accountID]);
@@ -47,7 +47,7 @@ export default function (WrappedComponent) {
                 currentUserPersonalDetails={currentUserPersonalDetails}
             />
         );
-    };
+    }
 
     WithCurrentUserPersonalDetails.displayName = `WithCurrentUserPersonalDetails(${getComponentDisplayName(WrappedComponent)})`;
     WithCurrentUserPersonalDetails.propTypes = propTypes;
diff --git a/src/components/withNavigation.js b/src/components/withNavigation.js
index 609665ace05a..31e971daad7e 100644
--- a/src/components/withNavigation.js
+++ b/src/components/withNavigation.js
@@ -8,7 +8,7 @@ const withNavigationPropTypes = {
 };
 
 export default function withNavigation(WrappedComponent) {
-    const WithNavigation = (props) => {
+    function WithNavigation(props) {
         const navigation = useNavigation();
         return (
             <WrappedComponent
@@ -18,7 +18,7 @@ export default function withNavigation(WrappedComponent) {
                 navigation={navigation}
             />
         );
-    };
+    }
 
     WithNavigation.displayName = `withNavigation(${getComponentDisplayName(WrappedComponent)})`;
     WithNavigation.propTypes = {
diff --git a/src/components/withNavigationFocus.js b/src/components/withNavigationFocus.js
index 0de770c09ba6..e15f795832c6 100644
--- a/src/components/withNavigationFocus.js
+++ b/src/components/withNavigationFocus.js
@@ -8,7 +8,7 @@ const withNavigationFocusPropTypes = {
 };
 
 export default function withNavigationFocus(WrappedComponent) {
-    const WithNavigationFocus = (props) => {
+    function WithNavigationFocus(props) {
         const isFocused = useIsFocused();
         return (
             <WrappedComponent
@@ -18,7 +18,7 @@ export default function withNavigationFocus(WrappedComponent) {
                 isFocused={isFocused}
             />
         );
-    };
+    }
 
     WithNavigationFocus.displayName = `withNavigationFocus(${getComponentDisplayName(WrappedComponent)})`;
     WithNavigationFocus.propTypes = {
diff --git a/src/components/withToggleVisibilityView.js b/src/components/withToggleVisibilityView.js
index 9d0620cbff1e..4537db2b7777 100644
--- a/src/components/withToggleVisibilityView.js
+++ b/src/components/withToggleVisibilityView.js
@@ -10,16 +10,18 @@ const toggleVisibilityViewPropTypes = {
 };
 
 export default function (WrappedComponent) {
-    const WithToggleVisibilityView = (props) => (
-        <View style={!props.isVisible && styles.visuallyHidden}>
-            <WrappedComponent
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {...props}
-                ref={props.forwardedRef}
-                isVisible={props.isVisible}
-            />
-        </View>
-    );
+    function WithToggleVisibilityView(props) {
+        return (
+            <View style={!props.isVisible && styles.visuallyHidden}>
+                <WrappedComponent
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...props}
+                    ref={props.forwardedRef}
+                    isVisible={props.isVisible}
+                />
+            </View>
+        );
+    }
 
     WithToggleVisibilityView.displayName = `WithToggleVisibilityView(${getComponentDisplayName(WrappedComponent)})`;
     WithToggleVisibilityView.propTypes = {
diff --git a/src/libs/Navigation/AppNavigator/PublicScreens.js b/src/libs/Navigation/AppNavigator/PublicScreens.js
index 0e84de5c4dd5..d74c4473a260 100644
--- a/src/libs/Navigation/AppNavigator/PublicScreens.js
+++ b/src/libs/Navigation/AppNavigator/PublicScreens.js
@@ -9,30 +9,32 @@ import UnlinkLoginPage from '../../../pages/UnlinkLoginPage';
 
 const RootStack = createStackNavigator();
 
-const PublicScreens = () => (
-    <RootStack.Navigator>
-        <RootStack.Screen
-            name={SCREENS.HOME}
-            options={defaultScreenOptions}
-            component={SignInPage}
-        />
-        <RootStack.Screen
-            name={SCREENS.TRANSITION_FROM_OLD_DOT}
-            options={defaultScreenOptions}
-            component={LogInWithShortLivedAuthTokenPage}
-        />
-        <RootStack.Screen
-            name="ValidateLogin"
-            options={defaultScreenOptions}
-            component={ValidateLoginPage}
-        />
-        <RootStack.Screen
-            name="UnlinkLogin"
-            options={defaultScreenOptions}
-            component={UnlinkLoginPage}
-        />
-    </RootStack.Navigator>
-);
+function PublicScreens() {
+    return (
+        <RootStack.Navigator>
+            <RootStack.Screen
+                name={SCREENS.HOME}
+                options={defaultScreenOptions}
+                component={SignInPage}
+            />
+            <RootStack.Screen
+                name={SCREENS.TRANSITION_FROM_OLD_DOT}
+                options={defaultScreenOptions}
+                component={LogInWithShortLivedAuthTokenPage}
+            />
+            <RootStack.Screen
+                name="ValidateLogin"
+                options={defaultScreenOptions}
+                component={ValidateLoginPage}
+            />
+            <RootStack.Screen
+                name="UnlinkLogin"
+                options={defaultScreenOptions}
+                component={UnlinkLoginPage}
+            />
+        </RootStack.Navigator>
+    );
+}
 
 PublicScreens.displayName = 'PublicScreens';
 export default PublicScreens;
diff --git a/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js b/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js
index 1d03d419fdbd..d5555b83ea94 100644
--- a/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js
+++ b/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js
@@ -22,7 +22,7 @@ const propTypes = {
     ...withNavigationPropTypes,
 };
 
-const ThreePaneView = (props) => {
+function ThreePaneView(props) {
     const lastCentralPaneIndex = _.findLastIndex(props.state.routes, {name: NAVIGATORS.CENTRAL_PANE_NAVIGATOR});
 
     return (
@@ -80,7 +80,7 @@ const ThreePaneView = (props) => {
             })}
         </View>
     );
-};
+}
 
 ThreePaneView.propTypes = propTypes;
 ThreePaneView.displayName = 'ThreePaneView';
diff --git a/src/libs/Navigation/AppNavigator/index.js b/src/libs/Navigation/AppNavigator/index.js
index c86f2d219455..dee8027b2f30 100644
--- a/src/libs/Navigation/AppNavigator/index.js
+++ b/src/libs/Navigation/AppNavigator/index.js
@@ -6,7 +6,7 @@ const propTypes = {
     authenticated: PropTypes.bool.isRequired,
 };
 
-const AppNavigator = (props) => {
+function AppNavigator(props) {
     if (props.authenticated) {
         const AuthScreens = require('./AuthScreens').default;
 
@@ -15,7 +15,7 @@ const AppNavigator = (props) => {
     }
     const PublicScreens = require('./PublicScreens').default;
     return <PublicScreens />;
-};
+}
 
 AppNavigator.propTypes = propTypes;
 AppNavigator.displayName = 'AppNavigator';
diff --git a/src/libs/Navigation/NavigationRoot.js b/src/libs/Navigation/NavigationRoot.js
index 5d60d1e4d2fb..f81a9fd2336d 100644
--- a/src/libs/Navigation/NavigationRoot.js
+++ b/src/libs/Navigation/NavigationRoot.js
@@ -51,7 +51,7 @@ function parseAndLogRoute(state) {
     Navigation.setIsNavigationReady();
 }
 
-const NavigationRoot = (props) => {
+function NavigationRoot(props) {
     useFlipper(navigationRef);
     const navigationStateRef = useRef(undefined);
 
@@ -77,7 +77,7 @@ const NavigationRoot = (props) => {
             <AppNavigator authenticated={props.authenticated} />
         </NavigationContainer>
     );
-};
+}
 
 NavigationRoot.displayName = 'NavigationRoot';
 NavigationRoot.propTypes = propTypes;
diff --git a/src/pages/ConciergePage.js b/src/pages/ConciergePage.js
index d6dc48def6fe..610fa3587b7a 100644
--- a/src/pages/ConciergePage.js
+++ b/src/pages/ConciergePage.js
@@ -27,7 +27,7 @@ const defaultProps = {
  *     - If the user is authenticated, find their concierge chat and re-route to it
  *     - Else re-route to the login page
  */
-const ConciergePage = (props) => {
+function ConciergePage(props) {
     useFocusEffect(() => {
         if (_.has(props.session, 'authToken')) {
             // Pop the concierge loading page before opening the concierge report.
@@ -39,7 +39,7 @@ const ConciergePage = (props) => {
     });
 
     return <FullScreenLoadingIndicator />;
-};
+}
 
 ConciergePage.propTypes = propTypes;
 ConciergePage.defaultProps = defaultProps;
diff --git a/src/pages/EnablePayments/ActivateStep.js b/src/pages/EnablePayments/ActivateStep.js
index 736cdf4af059..fc772f1a4d51 100644
--- a/src/pages/EnablePayments/ActivateStep.js
+++ b/src/pages/EnablePayments/ActivateStep.js
@@ -29,7 +29,7 @@ const defaultProps = {
     },
 };
 
-const ActivateStep = (props) => {
+function ActivateStep(props) {
     const isGoldWallet = props.userWallet.tierName === CONST.WALLET.TIER_NAME.GOLD;
     const animation = isGoldWallet ? FireworksAnimation : ReviewingBankInfoAnimation;
     const continueButtonText = props.walletTerms.chatReportID ? props.translate('activateStep.continueToPayment') : props.translate('activateStep.continueToTransfer');
@@ -47,7 +47,7 @@ const ActivateStep = (props) => {
             />
         </>
     );
-};
+}
 
 ActivateStep.propTypes = propTypes;
 ActivateStep.defaultProps = defaultProps;
diff --git a/src/pages/EnablePayments/FailedKYC.js b/src/pages/EnablePayments/FailedKYC.js
index a9e1e4e7779e..26b0625a780a 100644
--- a/src/pages/EnablePayments/FailedKYC.js
+++ b/src/pages/EnablePayments/FailedKYC.js
@@ -10,22 +10,24 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-const FailedKYC = (props) => (
-    <View style={[styles.flex1]}>
-        <View style={[styles.ph5]}>
-            <Text style={styles.mb3}>
-                {props.translate('additionalDetailsStep.failedKYCTextBefore')}
-                <TextLink
-                    href={`mailto:${CONST.EMAIL.CONCIERGE}`}
-                    style={[styles.link]}
-                >
-                    {CONST.EMAIL.CONCIERGE}
-                </TextLink>
-                {props.translate('additionalDetailsStep.failedKYCTextAfter')}
-            </Text>
+function FailedKYC(props) {
+    return (
+        <View style={[styles.flex1]}>
+            <View style={[styles.ph5]}>
+                <Text style={styles.mb3}>
+                    {props.translate('additionalDetailsStep.failedKYCTextBefore')}
+                    <TextLink
+                        href={`mailto:${CONST.EMAIL.CONCIERGE}`}
+                        style={[styles.link]}
+                    >
+                        {CONST.EMAIL.CONCIERGE}
+                    </TextLink>
+                    {props.translate('additionalDetailsStep.failedKYCTextAfter')}
+                </Text>
+            </View>
         </View>
-    </View>
-);
+    );
+}
 
 FailedKYC.propTypes = propTypes;
 FailedKYC.displayName = 'FailedKYC';
diff --git a/src/pages/EnablePayments/TermsPage/LongTermsForm.js b/src/pages/EnablePayments/TermsPage/LongTermsForm.js
index 45ea79ffd4c9..4b68635d8ec8 100644
--- a/src/pages/EnablePayments/TermsPage/LongTermsForm.js
+++ b/src/pages/EnablePayments/TermsPage/LongTermsForm.js
@@ -76,38 +76,41 @@ const getLongTermsSections = () =>
         </View>
     ));
 
-const LongTermsForm = () => (
-    <>
-        <CollapsibleSection title={Localize.translateLocal('termsStep.longTermsForm.listOfAllFees')}>{getLongTermsSections()}</CollapsibleSection>
+function LongTermsForm() {
+    return (
+        <>
+            <CollapsibleSection title={Localize.translateLocal('termsStep.longTermsForm.listOfAllFees')}>{getLongTermsSections()}</CollapsibleSection>
 
-        <Text style={[styles.mb4, styles.mt6, styles.textMicroSupporting]}>
-            {Localize.translateLocal('termsStep.longTermsForm.fdicInsuranceBancorp')} {CONST.TERMS.FDIC_PREPAID} {Localize.translateLocal('termsStep.longTermsForm.fdicInsuranceBancorp2')}
-        </Text>
-        <Text style={[styles.mb4, styles.textMicroSupporting]}>{Localize.translateLocal('termsStep.noOverdraftOrCredit')}</Text>
-        <Text style={[styles.mb4, styles.textMicroSupporting]}>
-            {Localize.translateLocal('termsStep.longTermsForm.contactExpensifyPayments')} {CONST.EMAIL.CONCIERGE}{' '}
-            {Localize.translateLocal('termsStep.longTermsForm.contactExpensifyPayments2')} {CONST.NEW_EXPENSIFY_URL}.
-        </Text>
-        <Text style={[styles.mb6, styles.textMicroSupporting]}>
-            {Localize.translateLocal('termsStep.longTermsForm.generalInformation')} {CONST.TERMS.CFPB_PREPAID}
-            {'. '}
-            {Localize.translateLocal('termsStep.longTermsForm.generalInformation2')} {CONST.TERMS.CFPB_COMPLAINT}.
-        </Text>
+            <Text style={[styles.mb4, styles.mt6, styles.textMicroSupporting]}>
+                {Localize.translateLocal('termsStep.longTermsForm.fdicInsuranceBancorp')} {CONST.TERMS.FDIC_PREPAID}{' '}
+                {Localize.translateLocal('termsStep.longTermsForm.fdicInsuranceBancorp2')}
+            </Text>
+            <Text style={[styles.mb4, styles.textMicroSupporting]}>{Localize.translateLocal('termsStep.noOverdraftOrCredit')}</Text>
+            <Text style={[styles.mb4, styles.textMicroSupporting]}>
+                {Localize.translateLocal('termsStep.longTermsForm.contactExpensifyPayments')} {CONST.EMAIL.CONCIERGE}{' '}
+                {Localize.translateLocal('termsStep.longTermsForm.contactExpensifyPayments2')} {CONST.NEW_EXPENSIFY_URL}.
+            </Text>
+            <Text style={[styles.mb6, styles.textMicroSupporting]}>
+                {Localize.translateLocal('termsStep.longTermsForm.generalInformation')} {CONST.TERMS.CFPB_PREPAID}
+                {'. '}
+                {Localize.translateLocal('termsStep.longTermsForm.generalInformation2')} {CONST.TERMS.CFPB_COMPLAINT}.
+            </Text>
 
-        <View style={styles.flexRow}>
-            <Icon
-                style={styles.flex1}
-                src={Expensicons.Printer}
-            />
-            <TextLink
-                style={styles.ml1}
-                href={CONST.FEES_URL}
-            >
-                {Localize.translateLocal('termsStep.longTermsForm.printerFriendlyView')}
-            </TextLink>
-        </View>
-    </>
-);
+            <View style={styles.flexRow}>
+                <Icon
+                    style={styles.flex1}
+                    src={Expensicons.Printer}
+                />
+                <TextLink
+                    style={styles.ml1}
+                    href={CONST.FEES_URL}
+                >
+                    {Localize.translateLocal('termsStep.longTermsForm.printerFriendlyView')}
+                </TextLink>
+            </View>
+        </>
+    );
+}
 
 LongTermsForm.displayName = 'LongTermsForm';
 export default LongTermsForm;
diff --git a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js
index 6e508042d9e8..cce62414d743 100644
--- a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js
+++ b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js
@@ -6,129 +6,131 @@ import * as Localize from '../../../libs/Localize';
 import CONST from '../../../CONST';
 import TextLink from '../../../components/TextLink';
 
-const ShortTermsForm = () => (
-    <>
-        <Text style={styles.mb5}>{Localize.translateLocal('termsStep.shortTermsForm.expensifyPaymentsAccount')}</Text>
+function ShortTermsForm() {
+    return (
+        <>
+            <Text style={styles.mb5}>{Localize.translateLocal('termsStep.shortTermsForm.expensifyPaymentsAccount')}</Text>
 
-        <View style={[styles.shortTermsBorder, styles.p2, styles.mb6]}>
-            <View style={[styles.shortTermsRow, styles.mb4]}>
-                <View style={[styles.flex2]}>
-                    <View style={[styles.flexRow, styles.mb1]}>
-                        <Text style={styles.textLarge}>{Localize.translateLocal('termsStep.monthlyFee')}</Text>
-                    </View>
-                    <View style={styles.flexRow}>
-                        <Text style={[styles.textHeadline, styles.textXXXLarge]}>{Localize.translateLocal('termsStep.feeAmountZero')}</Text>
-                    </View>
-                </View>
-                <View style={[styles.flex2]}>
+            <View style={[styles.shortTermsBorder, styles.p2, styles.mb6]}>
+                <View style={[styles.shortTermsRow, styles.mb4]}>
                     <View style={[styles.flex2]}>
                         <View style={[styles.flexRow, styles.mb1]}>
-                            <Text style={styles.textLarge}>{Localize.translateLocal('termsStep.shortTermsForm.perPurchase')}</Text>
+                            <Text style={styles.textLarge}>{Localize.translateLocal('termsStep.monthlyFee')}</Text>
                         </View>
                         <View style={styles.flexRow}>
                             <Text style={[styles.textHeadline, styles.textXXXLarge]}>{Localize.translateLocal('termsStep.feeAmountZero')}</Text>
                         </View>
                     </View>
-                </View>
-            </View>
-
-            <View style={[styles.shortTermsRow, styles.mb6]}>
-                <View style={[styles.flex2]}>
-                    <View style={[styles.flexRow, styles.mb1]}>
-                        <Text style={styles.textLarge}>{Localize.translateLocal('termsStep.shortTermsForm.atmWithdrawal')}</Text>
-                    </View>
-                    <View style={styles.flexRow}>
-                        <Text style={[styles.textHeadline, styles.textXXXLarge]}>{Localize.translateLocal('common.na')}</Text>
-                    </View>
-                    <View style={styles.flexRow}>
-                        <Text style={styles.textLabelSupporting}>{Localize.translateLocal('termsStep.shortTermsForm.inNetwork')}</Text>
-                    </View>
-                    <View style={[styles.flexRow, styles.mt1]}>
-                        <Text style={[styles.textHeadline, styles.textXXXLarge]}>{Localize.translateLocal('common.na')}</Text>
-                    </View>
-                    <View style={styles.flexRow}>
-                        <Text style={styles.textLabelSupporting}>{Localize.translateLocal('termsStep.shortTermsForm.outOfNetwork')}</Text>
+                    <View style={[styles.flex2]}>
+                        <View style={[styles.flex2]}>
+                            <View style={[styles.flexRow, styles.mb1]}>
+                                <Text style={styles.textLarge}>{Localize.translateLocal('termsStep.shortTermsForm.perPurchase')}</Text>
+                            </View>
+                            <View style={styles.flexRow}>
+                                <Text style={[styles.textHeadline, styles.textXXXLarge]}>{Localize.translateLocal('termsStep.feeAmountZero')}</Text>
+                            </View>
+                        </View>
                     </View>
                 </View>
-                <View style={[styles.flex2]}>
+
+                <View style={[styles.shortTermsRow, styles.mb6]}>
                     <View style={[styles.flex2]}>
                         <View style={[styles.flexRow, styles.mb1]}>
-                            <Text style={styles.textLarge}>{Localize.translateLocal('termsStep.shortTermsForm.cashReload')}</Text>
+                            <Text style={styles.textLarge}>{Localize.translateLocal('termsStep.shortTermsForm.atmWithdrawal')}</Text>
                         </View>
                         <View style={styles.flexRow}>
                             <Text style={[styles.textHeadline, styles.textXXXLarge]}>{Localize.translateLocal('common.na')}</Text>
                         </View>
+                        <View style={styles.flexRow}>
+                            <Text style={styles.textLabelSupporting}>{Localize.translateLocal('termsStep.shortTermsForm.inNetwork')}</Text>
+                        </View>
+                        <View style={[styles.flexRow, styles.mt1]}>
+                            <Text style={[styles.textHeadline, styles.textXXXLarge]}>{Localize.translateLocal('common.na')}</Text>
+                        </View>
+                        <View style={styles.flexRow}>
+                            <Text style={styles.textLabelSupporting}>{Localize.translateLocal('termsStep.shortTermsForm.outOfNetwork')}</Text>
+                        </View>
+                    </View>
+                    <View style={[styles.flex2]}>
+                        <View style={[styles.flex2]}>
+                            <View style={[styles.flexRow, styles.mb1]}>
+                                <Text style={styles.textLarge}>{Localize.translateLocal('termsStep.shortTermsForm.cashReload')}</Text>
+                            </View>
+                            <View style={styles.flexRow}>
+                                <Text style={[styles.textHeadline, styles.textXXXLarge]}>{Localize.translateLocal('common.na')}</Text>
+                            </View>
+                        </View>
                     </View>
                 </View>
-            </View>
 
-            <View style={styles.shortTermsHorizontalRule} />
-            <View style={styles.shortTermsRow}>
-                <View style={[styles.flex3, styles.pr4]}>
-                    <Text>
-                        {Localize.translateLocal('termsStep.shortTermsForm.atmBalanceInquiry')} {Localize.translateLocal('termsStep.shortTermsForm.inOrOutOfNetwork')}
-                    </Text>
-                </View>
-                <View style={styles.flex1}>
-                    <Text>{Localize.translateLocal('common.na')}</Text>
+                <View style={styles.shortTermsHorizontalRule} />
+                <View style={styles.shortTermsRow}>
+                    <View style={[styles.flex3, styles.pr4]}>
+                        <Text>
+                            {Localize.translateLocal('termsStep.shortTermsForm.atmBalanceInquiry')} {Localize.translateLocal('termsStep.shortTermsForm.inOrOutOfNetwork')}
+                        </Text>
+                    </View>
+                    <View style={styles.flex1}>
+                        <Text>{Localize.translateLocal('common.na')}</Text>
+                    </View>
                 </View>
-            </View>
 
-            <View style={styles.shortTermsHorizontalRule} />
-            <View style={styles.shortTermsRow}>
-                <View style={[styles.flex3, styles.pr4]}>
-                    <Text>
-                        {Localize.translateLocal('termsStep.shortTermsForm.customerService')} {Localize.translateLocal('termsStep.shortTermsForm.automatedOrLive')}
-                    </Text>
-                </View>
-                <View style={styles.flex1}>
-                    <Text style={styles.label}>{Localize.translateLocal('termsStep.feeAmountZero')}</Text>
+                <View style={styles.shortTermsHorizontalRule} />
+                <View style={styles.shortTermsRow}>
+                    <View style={[styles.flex3, styles.pr4]}>
+                        <Text>
+                            {Localize.translateLocal('termsStep.shortTermsForm.customerService')} {Localize.translateLocal('termsStep.shortTermsForm.automatedOrLive')}
+                        </Text>
+                    </View>
+                    <View style={styles.flex1}>
+                        <Text style={styles.label}>{Localize.translateLocal('termsStep.feeAmountZero')}</Text>
+                    </View>
                 </View>
-            </View>
 
-            <View style={styles.shortTermsHorizontalRule} />
-            <View style={[styles.shortTermsRow, styles.mb4]}>
-                <View style={[styles.flex3, styles.pr4]}>
-                    <Text>
-                        {Localize.translateLocal('termsStep.inactivity')} {Localize.translateLocal('termsStep.shortTermsForm.afterTwelveMonths')}
-                    </Text>
-                </View>
-                <View style={styles.flex1}>
-                    <Text>{Localize.translateLocal('termsStep.feeAmountZero')}</Text>
+                <View style={styles.shortTermsHorizontalRule} />
+                <View style={[styles.shortTermsRow, styles.mb4]}>
+                    <View style={[styles.flex3, styles.pr4]}>
+                        <Text>
+                            {Localize.translateLocal('termsStep.inactivity')} {Localize.translateLocal('termsStep.shortTermsForm.afterTwelveMonths')}
+                        </Text>
+                    </View>
+                    <View style={styles.flex1}>
+                        <Text>{Localize.translateLocal('termsStep.feeAmountZero')}</Text>
+                    </View>
                 </View>
-            </View>
 
-            <View style={styles.shortTermsLargeHorizontalRule} />
-            <View style={[styles.shortTermsBoldHeadingSection, styles.mb3]}>
-                <Text style={styles.textStrong}>{Localize.translateLocal('termsStep.shortTermsForm.weChargeOneFee')}</Text>
-            </View>
+                <View style={styles.shortTermsLargeHorizontalRule} />
+                <View style={[styles.shortTermsBoldHeadingSection, styles.mb3]}>
+                    <Text style={styles.textStrong}>{Localize.translateLocal('termsStep.shortTermsForm.weChargeOneFee')}</Text>
+                </View>
 
-            <View style={styles.shortTermsHorizontalRule} />
-            <View style={styles.shortTermsRow}>
-                <View style={[styles.flex3, styles.pr4]}>
+                <View style={styles.shortTermsHorizontalRule} />
+                <View style={styles.shortTermsRow}>
+                    <View style={[styles.flex3, styles.pr4]}>
+                        <Text>
+                            {Localize.translateLocal('termsStep.electronicFundsWithdrawal')} {Localize.translateLocal('termsStep.shortTermsForm.instant')}
+                        </Text>
+                    </View>
+                    <View style={[styles.flex1, styles.termsCenterRight]}>
+                        <Text style={styles.label}>{Localize.translateLocal('termsStep.electronicFundsInstantFee')} </Text>
+                        <Text style={styles.label}>{Localize.translateLocal('termsStep.shortTermsForm.electronicFundsInstantFeeMin')}</Text>
+                    </View>
+                </View>
+                <View style={[styles.shortTermsBoldHeadingSection, styles.mb4]}>
+                    <Text style={[styles.textStrong, styles.mb3]}>{Localize.translateLocal('termsStep.noOverdraftOrCredit')}</Text>
+                    <Text style={styles.mb3}>{Localize.translateLocal('termsStep.shortTermsForm.fdicInsurance')}</Text>
+                    <Text style={styles.mb3}>
+                        {Localize.translateLocal('termsStep.shortTermsForm.generalInfo')} <TextLink href={CONST.CFPB_PREPAID_URL}>{CONST.TERMS.CFPB_PREPAID}</TextLink>.
+                    </Text>
                     <Text>
-                        {Localize.translateLocal('termsStep.electronicFundsWithdrawal')} {Localize.translateLocal('termsStep.shortTermsForm.instant')}
+                        {Localize.translateLocal('termsStep.shortTermsForm.conditionsDetails')} <TextLink href={CONST.FEES_URL}>{CONST.TERMS.USE_EXPENSIFY_FEES}</TextLink>{' '}
+                        {Localize.translateLocal('termsStep.shortTermsForm.conditionsPhone')}
                     </Text>
                 </View>
-                <View style={[styles.flex1, styles.termsCenterRight]}>
-                    <Text style={styles.label}>{Localize.translateLocal('termsStep.electronicFundsInstantFee')} </Text>
-                    <Text style={styles.label}>{Localize.translateLocal('termsStep.shortTermsForm.electronicFundsInstantFeeMin')}</Text>
-                </View>
-            </View>
-            <View style={[styles.shortTermsBoldHeadingSection, styles.mb4]}>
-                <Text style={[styles.textStrong, styles.mb3]}>{Localize.translateLocal('termsStep.noOverdraftOrCredit')}</Text>
-                <Text style={styles.mb3}>{Localize.translateLocal('termsStep.shortTermsForm.fdicInsurance')}</Text>
-                <Text style={styles.mb3}>
-                    {Localize.translateLocal('termsStep.shortTermsForm.generalInfo')} <TextLink href={CONST.CFPB_PREPAID_URL}>{CONST.TERMS.CFPB_PREPAID}</TextLink>.
-                </Text>
-                <Text>
-                    {Localize.translateLocal('termsStep.shortTermsForm.conditionsDetails')} <TextLink href={CONST.FEES_URL}>{CONST.TERMS.USE_EXPENSIFY_FEES}</TextLink>{' '}
-                    {Localize.translateLocal('termsStep.shortTermsForm.conditionsPhone')}
-                </Text>
             </View>
-        </View>
-    </>
-);
+        </>
+    );
+}
 
 ShortTermsForm.displayName = 'ShortTermsForm';
 
diff --git a/src/pages/ErrorPage/ErrorBodyText/index.js b/src/pages/ErrorPage/ErrorBodyText/index.js
index ac789343047e..9410d5fe5c1d 100644
--- a/src/pages/ErrorPage/ErrorBodyText/index.js
+++ b/src/pages/ErrorPage/ErrorBodyText/index.js
@@ -9,17 +9,19 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-const ErrorBodyText = (props) => (
-    <Text>
-        {`${props.translate('genericErrorPage.body.helpTextMobile')} `}
-        <TextLink
-            href={CONST.NEW_EXPENSIFY_URL}
-            style={[styles.link]}
-        >
-            {props.translate('genericErrorPage.body.helpTextWeb')}
-        </TextLink>
-    </Text>
-);
+function ErrorBodyText(props) {
+    return (
+        <Text>
+            {`${props.translate('genericErrorPage.body.helpTextMobile')} `}
+            <TextLink
+                href={CONST.NEW_EXPENSIFY_URL}
+                style={[styles.link]}
+            >
+                {props.translate('genericErrorPage.body.helpTextWeb')}
+            </TextLink>
+        </Text>
+    );
+}
 
 ErrorBodyText.displayName = 'ErrorBodyText';
 ErrorBodyText.propTypes = propTypes;
diff --git a/src/pages/ErrorPage/GenericErrorPage.js b/src/pages/ErrorPage/GenericErrorPage.js
index a64805ec7a48..3ff3bc686419 100644
--- a/src/pages/ErrorPage/GenericErrorPage.js
+++ b/src/pages/ErrorPage/GenericErrorPage.js
@@ -24,69 +24,71 @@ const propTypes = {
     onRefresh: PropTypes.func.isRequired,
 };
 
-const GenericErrorPage = (props) => (
-    <SafeAreaConsumer>
-        {({paddingBottom}) => (
-            <View style={[styles.flex1, styles.pt10, styles.ph5, StyleUtils.getErrorPageContainerStyle(paddingBottom)]}>
-                <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>
-                    <View>
-                        <View style={styles.mb5}>
-                            <Icon
-                                src={Expensicons.Bug}
-                                height={variables.componentSizeNormal}
-                                width={variables.componentSizeNormal}
-                                fill={defaultTheme.iconSuccessFill}
-                            />
-                        </View>
-                        <View style={styles.mb5}>
-                            <Text style={[styles.textHeadline]}>{props.translate('genericErrorPage.title')}</Text>
-                        </View>
-                        <View style={styles.mb5}>
-                            <ErrorBodyText />
-                            <Text>
-                                {`${props.translate('genericErrorPage.body.helpTextConcierge')} `}
-                                <TextLink
-                                    href={`mailto:${CONST.EMAIL.CONCIERGE}`}
-                                    style={[styles.link]}
-                                >
-                                    {CONST.EMAIL.CONCIERGE}
-                                </TextLink>
-                            </Text>
-                        </View>
-                        <View style={[styles.flexRow]}>
-                            <View style={[styles.flex1, styles.flexRow]}>
-                                <Button
-                                    success
-                                    medium
-                                    onPress={props.onRefresh}
-                                    text={props.translate('genericErrorPage.refresh')}
-                                    style={styles.mr3}
-                                />
-                                <Button
-                                    medium
-                                    onPress={() => {
-                                        Session.signOutAndRedirectToSignIn();
-                                        props.onRefresh();
-                                    }}
-                                    text={props.translate('initialSettingsPage.signOut')}
+function GenericErrorPage(props) {
+    return (
+        <SafeAreaConsumer>
+            {({paddingBottom}) => (
+                <View style={[styles.flex1, styles.pt10, styles.ph5, StyleUtils.getErrorPageContainerStyle(paddingBottom)]}>
+                    <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>
+                        <View>
+                            <View style={styles.mb5}>
+                                <Icon
+                                    src={Expensicons.Bug}
+                                    height={variables.componentSizeNormal}
+                                    width={variables.componentSizeNormal}
+                                    fill={defaultTheme.iconSuccessFill}
                                 />
                             </View>
+                            <View style={styles.mb5}>
+                                <Text style={[styles.textHeadline]}>{props.translate('genericErrorPage.title')}</Text>
+                            </View>
+                            <View style={styles.mb5}>
+                                <ErrorBodyText />
+                                <Text>
+                                    {`${props.translate('genericErrorPage.body.helpTextConcierge')} `}
+                                    <TextLink
+                                        href={`mailto:${CONST.EMAIL.CONCIERGE}`}
+                                        style={[styles.link]}
+                                    >
+                                        {CONST.EMAIL.CONCIERGE}
+                                    </TextLink>
+                                </Text>
+                            </View>
+                            <View style={[styles.flexRow]}>
+                                <View style={[styles.flex1, styles.flexRow]}>
+                                    <Button
+                                        success
+                                        medium
+                                        onPress={props.onRefresh}
+                                        text={props.translate('genericErrorPage.refresh')}
+                                        style={styles.mr3}
+                                    />
+                                    <Button
+                                        medium
+                                        onPress={() => {
+                                            Session.signOutAndRedirectToSignIn();
+                                            props.onRefresh();
+                                        }}
+                                        text={props.translate('initialSettingsPage.signOut')}
+                                    />
+                                </View>
+                            </View>
                         </View>
                     </View>
-                </View>
-                <View styles={styles.alignSelfEnd}>
-                    <View style={[styles.flex1, styles.flexRow, styles.justifyContentCenter]}>
-                        <LogoWordmark
-                            height={30}
-                            width={80}
-                            fill={defaultTheme.textLight}
-                        />
+                    <View styles={styles.alignSelfEnd}>
+                        <View style={[styles.flex1, styles.flexRow, styles.justifyContentCenter]}>
+                            <LogoWordmark
+                                height={30}
+                                width={80}
+                                fill={defaultTheme.textLight}
+                            />
+                        </View>
                     </View>
                 </View>
-            </View>
-        )}
-    </SafeAreaConsumer>
-);
+            )}
+        </SafeAreaConsumer>
+    );
+}
 
 GenericErrorPage.propTypes = propTypes;
 GenericErrorPage.displayName = 'ErrorPage';
diff --git a/src/pages/ErrorPage/NotFoundPage.js b/src/pages/ErrorPage/NotFoundPage.js
index 3cc26896a57d..98d8d77cf821 100644
--- a/src/pages/ErrorPage/NotFoundPage.js
+++ b/src/pages/ErrorPage/NotFoundPage.js
@@ -3,14 +3,16 @@ import ScreenWrapper from '../../components/ScreenWrapper';
 import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
 
 // eslint-disable-next-line rulesdir/no-negated-variables
-const NotFoundPage = () => (
-    <ScreenWrapper>
-        <FullPageNotFoundView
-            shouldShow
-            shouldShowLink
-        />
-    </ScreenWrapper>
-);
+function NotFoundPage() {
+    return (
+        <ScreenWrapper>
+            <FullPageNotFoundView
+                shouldShow
+                shouldShowLink
+            />
+        </ScreenWrapper>
+    );
+}
 
 NotFoundPage.displayName = 'NotFoundPage';
 
diff --git a/src/pages/GetAssistancePage.js b/src/pages/GetAssistancePage.js
index d4cf8d0362f6..6281b8cd769f 100644
--- a/src/pages/GetAssistancePage.js
+++ b/src/pages/GetAssistancePage.js
@@ -43,7 +43,7 @@ const defaultProps = {
     },
 };
 
-const GetAssistancePage = (props) => {
+function GetAssistancePage(props) {
     const menuItems = [
         {
             title: props.translate('getAssistancePage.chatWithConcierge'),
@@ -96,7 +96,7 @@ const GetAssistancePage = (props) => {
             </ScrollView>
         </ScreenWrapper>
     );
-};
+}
 
 GetAssistancePage.propTypes = propTypes;
 GetAssistancePage.defaultProps = defaultProps;
diff --git a/src/pages/LogInWithShortLivedAuthTokenPage.js b/src/pages/LogInWithShortLivedAuthTokenPage.js
index f13bce3fc4f3..4f28b7d99898 100644
--- a/src/pages/LogInWithShortLivedAuthTokenPage.js
+++ b/src/pages/LogInWithShortLivedAuthTokenPage.js
@@ -43,7 +43,7 @@ const defaultProps = {
     isTokenValid: true,
 };
 
-const LogInWithShortLivedAuthTokenPage = (props) => {
+function LogInWithShortLivedAuthTokenPage(props) {
     useEffect(() => {
         const email = lodashGet(props, 'route.params.email', '');
 
@@ -94,7 +94,7 @@ const LogInWithShortLivedAuthTokenPage = (props) => {
             </View>
         </View>
     );
-};
+}
 
 LogInWithShortLivedAuthTokenPage.propTypes = propTypes;
 LogInWithShortLivedAuthTokenPage.defaultProps = defaultProps;
diff --git a/src/pages/NewGroupPage.js b/src/pages/NewGroupPage.js
index 559214312f93..63f90016e63e 100755
--- a/src/pages/NewGroupPage.js
+++ b/src/pages/NewGroupPage.js
@@ -1,13 +1,15 @@
 import React from 'react';
 import NewChatPage from './NewChatPage';
 
-const NewGroupPage = (props) => (
-    <NewChatPage
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        isGroupChat
-    />
-);
+function NewGroupPage(props) {
+    return (
+        <NewChatPage
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            isGroupChat
+        />
+    );
+}
 
 NewGroupPage.displayName = 'NewGroupPage';
 
diff --git a/src/pages/ReimbursementAccount/AddressForm.js b/src/pages/ReimbursementAccount/AddressForm.js
index f36771bbc9f9..136befbe697c 100644
--- a/src/pages/ReimbursementAccount/AddressForm.js
+++ b/src/pages/ReimbursementAccount/AddressForm.js
@@ -91,58 +91,60 @@ const defaultProps = {
     onFieldChange: () => {},
 };
 
-const AddressForm = (props) => (
-    <>
-        <View>
-            <AddressSearch
-                inputID={props.inputKeys.street}
+function AddressForm(props) {
+    return (
+        <>
+            <View>
+                <AddressSearch
+                    inputID={props.inputKeys.street}
+                    shouldSaveDraft={props.shouldSaveDraft}
+                    label={props.translate(props.streetTranslationKey)}
+                    containerStyles={[styles.mt4]}
+                    value={props.values.street}
+                    defaultValue={props.defaultValues.street}
+                    onInputChange={props.onFieldChange}
+                    errorText={props.errors.street ? props.translate('bankAccount.error.addressStreet') : ''}
+                    hint={props.translate('common.noPO')}
+                    renamedInputKeys={props.inputKeys}
+                    maxInputLength={CONST.FORM_CHARACTER_LIMIT}
+                />
+            </View>
+            <TextInput
+                inputID={props.inputKeys.city}
                 shouldSaveDraft={props.shouldSaveDraft}
-                label={props.translate(props.streetTranslationKey)}
+                label={props.translate('common.city')}
+                value={props.values.city}
+                defaultValue={props.defaultValues.city}
+                onChangeText={(value) => props.onFieldChange({city: value})}
+                errorText={props.errors.city ? props.translate('bankAccount.error.addressCity') : ''}
                 containerStyles={[styles.mt4]}
-                value={props.values.street}
-                defaultValue={props.defaultValues.street}
-                onInputChange={props.onFieldChange}
-                errorText={props.errors.street ? props.translate('bankAccount.error.addressStreet') : ''}
-                hint={props.translate('common.noPO')}
-                renamedInputKeys={props.inputKeys}
-                maxInputLength={CONST.FORM_CHARACTER_LIMIT}
             />
-        </View>
-        <TextInput
-            inputID={props.inputKeys.city}
-            shouldSaveDraft={props.shouldSaveDraft}
-            label={props.translate('common.city')}
-            value={props.values.city}
-            defaultValue={props.defaultValues.city}
-            onChangeText={(value) => props.onFieldChange({city: value})}
-            errorText={props.errors.city ? props.translate('bankAccount.error.addressCity') : ''}
-            containerStyles={[styles.mt4]}
-        />
-        <View style={styles.mt4}>
-            <StatePicker
-                inputID={props.inputKeys.state}
+            <View style={styles.mt4}>
+                <StatePicker
+                    inputID={props.inputKeys.state}
+                    shouldSaveDraft={props.shouldSaveDraft}
+                    value={props.values.state}
+                    defaultValue={props.defaultValues.state}
+                    onInputChange={(value) => props.onFieldChange({state: value})}
+                    errorText={props.errors.state ? props.translate('bankAccount.error.addressState') : ''}
+                />
+            </View>
+            <TextInput
+                inputID={props.inputKeys.zipCode}
                 shouldSaveDraft={props.shouldSaveDraft}
-                value={props.values.state}
-                defaultValue={props.defaultValues.state}
-                onInputChange={(value) => props.onFieldChange({state: value})}
-                errorText={props.errors.state ? props.translate('bankAccount.error.addressState') : ''}
+                label={props.translate('common.zip')}
+                containerStyles={[styles.mt4]}
+                keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
+                value={props.values.zipCode}
+                defaultValue={props.defaultValues.zipCode}
+                onChangeText={(value) => props.onFieldChange({zipCode: value})}
+                errorText={props.errors.zipCode ? props.translate('bankAccount.error.zipCode') : ''}
+                maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.ZIP_CODE}
+                hint={props.translate('common.zipCodeExampleFormat', {zipSampleFormat: CONST.COUNTRY_ZIP_REGEX_DATA.US.samples})}
             />
-        </View>
-        <TextInput
-            inputID={props.inputKeys.zipCode}
-            shouldSaveDraft={props.shouldSaveDraft}
-            label={props.translate('common.zip')}
-            containerStyles={[styles.mt4]}
-            keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
-            value={props.values.zipCode}
-            defaultValue={props.defaultValues.zipCode}
-            onChangeText={(value) => props.onFieldChange({zipCode: value})}
-            errorText={props.errors.zipCode ? props.translate('bankAccount.error.zipCode') : ''}
-            maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.ZIP_CODE}
-            hint={props.translate('common.zipCodeExampleFormat', {zipSampleFormat: CONST.COUNTRY_ZIP_REGEX_DATA.US.samples})}
-        />
-    </>
-);
+        </>
+    );
+}
 
 AddressForm.propTypes = propTypes;
 AddressForm.defaultProps = defaultProps;
diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js
index 608dec2dabd1..9617fbf46419 100644
--- a/src/pages/ReimbursementAccount/BankAccountStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountStep.js
@@ -58,7 +58,7 @@ const defaultProps = {
     policyName: '',
 };
 
-const BankAccountStep = (props) => {
+function BankAccountStep(props) {
     let subStep = lodashGet(props.reimbursementAccount, 'achData.subStep', '');
     const shouldReinitializePlaidLink = props.plaidLinkOAuthToken && props.receivedRedirectURI && subStep !== CONST.BANK_ACCOUNT.SUBSTEP.MANUAL;
     if (shouldReinitializePlaidLink) {
@@ -167,7 +167,7 @@ const BankAccountStep = (props) => {
             </View>
         </ScreenWrapper>
     );
-};
+}
 
 BankAccountStep.propTypes = propTypes;
 BankAccountStep.defaultProps = defaultProps;
diff --git a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js
index ca5ec39782e3..4eca196d328a 100644
--- a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js
+++ b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js
@@ -42,7 +42,7 @@ const propTypes = {
 
 const defaultProps = {policyName: ''};
 
-const ContinueBankAccountSetup = (props) => {
+function ContinueBankAccountSetup(props) {
     const errors = lodashGet(props.reimbursementAccount, 'errors', {});
     const pendingAction = lodashGet(props.reimbursementAccount, 'pendingAction', null);
     return (
@@ -93,7 +93,7 @@ const ContinueBankAccountSetup = (props) => {
             {props.reimbursementAccount.shouldShowResetModal && <WorkspaceResetBankAccountModal reimbursementAccount={props.reimbursementAccount} />}
         </ScreenWrapper>
     );
-};
+}
 
 ContinueBankAccountSetup.propTypes = propTypes;
 ContinueBankAccountSetup.defaultProps = defaultProps;
diff --git a/src/pages/ReimbursementAccount/Enable2FAPrompt.js b/src/pages/ReimbursementAccount/Enable2FAPrompt.js
index 650cf17eb84f..e27cba2b51a0 100644
--- a/src/pages/ReimbursementAccount/Enable2FAPrompt.js
+++ b/src/pages/ReimbursementAccount/Enable2FAPrompt.js
@@ -13,7 +13,7 @@ import themeColors from '../../styles/themes/default';
 const propTypes = {
     ...withLocalizePropTypes,
 };
-const Enable2FAPrompt = (props) => {
+function Enable2FAPrompt(props) {
     const secureYourAccountUrl = encodeURI(`settings?param={"section":"account","action":"enableTwoFactorAuth","exitTo":"${ROUTES.getBankAccountRoute()}","isFromNewDot":"true"}`);
 
     return (
@@ -40,7 +40,7 @@ const Enable2FAPrompt = (props) => {
             </View>
         </Section>
     );
-};
+}
 
 Enable2FAPrompt.propTypes = propTypes;
 Enable2FAPrompt.displayName = 'Enable2FAPrompt';
diff --git a/src/pages/ReimbursementAccount/EnableStep.js b/src/pages/ReimbursementAccount/EnableStep.js
index 5319ecec2616..977f5f3bdfdf 100644
--- a/src/pages/ReimbursementAccount/EnableStep.js
+++ b/src/pages/ReimbursementAccount/EnableStep.js
@@ -43,7 +43,7 @@ const defaultProps = {
     policyName: '',
 };
 
-const EnableStep = (props) => {
+function EnableStep(props) {
     const isUsingExpensifyCard = props.user.isUsingExpensifyCard;
     const achData = lodashGet(props.reimbursementAccount, 'achData') || {};
     const {icon, iconSize} = getBankIcon(achData.bankName);
@@ -117,7 +117,7 @@ const EnableStep = (props) => {
             {props.reimbursementAccount.shouldShowResetModal && <WorkspaceResetBankAccountModal reimbursementAccount={props.reimbursementAccount} />}
         </ScreenWrapper>
     );
-};
+}
 
 EnableStep.displayName = 'EnableStep';
 EnableStep.propTypes = propTypes;
diff --git a/src/pages/ReimbursementAccount/IdentityForm.js b/src/pages/ReimbursementAccount/IdentityForm.js
index 6c92350cc2f7..516c94c8c4bf 100644
--- a/src/pages/ReimbursementAccount/IdentityForm.js
+++ b/src/pages/ReimbursementAccount/IdentityForm.js
@@ -129,7 +129,7 @@ const defaultProps = {
     onFieldChange: () => {},
 };
 
-const IdentityForm = (props) => {
+function IdentityForm(props) {
     // dob field has multiple validations/errors, we are handling it temporarily like this.
     const dobErrorText = (props.errors.dob ? props.translate('bankAccount.error.dob') : '') || (props.errors.dobAge ? props.translate('bankAccount.error.age') : '');
     const identityFormInputKeys = ['firstName', 'lastName', 'dob', 'ssnLast4'];
@@ -198,7 +198,7 @@ const IdentityForm = (props) => {
             />
         </View>
     );
-};
+}
 
 IdentityForm.propTypes = propTypes;
 IdentityForm.defaultProps = defaultProps;
diff --git a/src/pages/ReportDetailsPage.js b/src/pages/ReportDetailsPage.js
index df594f1d9cfd..28449426d922 100644
--- a/src/pages/ReportDetailsPage.js
+++ b/src/pages/ReportDetailsPage.js
@@ -58,7 +58,7 @@ const defaultProps = {
     personalDetails: {},
 };
 
-const ReportDetailsPage = (props) => {
+function ReportDetailsPage(props) {
     const policy = useMemo(() => props.policies[`${ONYXKEYS.COLLECTION.POLICY}${props.report.policyID}`], [props.policies, props.report.policyID]);
     const isPolicyAdmin = useMemo(() => PolicyUtils.isPolicyAdmin(policy), [policy]);
     const isPolicyExpenseChat = useMemo(() => ReportUtils.isPolicyExpenseChat(props.report), [props.report]);
@@ -189,7 +189,7 @@ const ReportDetailsPage = (props) => {
             </FullPageNotFoundView>
         </ScreenWrapper>
     );
-};
+}
 
 ReportDetailsPage.displayName = 'ReportDetailsPage';
 ReportDetailsPage.propTypes = propTypes;
diff --git a/src/pages/ReportParticipantsPage.js b/src/pages/ReportParticipantsPage.js
index 0f9d070aaec3..5994e3830705 100755
--- a/src/pages/ReportParticipantsPage.js
+++ b/src/pages/ReportParticipantsPage.js
@@ -83,7 +83,7 @@ const getAllParticipants = (report, personalDetails) => {
         .value();
 };
 
-const ReportParticipantsPage = (props) => {
+function ReportParticipantsPage(props) {
     const participants = getAllParticipants(props.report, props.personalDetails);
 
     return (
@@ -125,7 +125,7 @@ const ReportParticipantsPage = (props) => {
             )}
         </ScreenWrapper>
     );
-};
+}
 
 ReportParticipantsPage.propTypes = propTypes;
 ReportParticipantsPage.defaultProps = defaultProps;
diff --git a/src/pages/UnlinkLoginPage.js b/src/pages/UnlinkLoginPage.js
index ad84cf33c12f..ee77bb2d2045 100644
--- a/src/pages/UnlinkLoginPage.js
+++ b/src/pages/UnlinkLoginPage.js
@@ -15,14 +15,14 @@ const defaultProps = {
     route: validateLinkDefaultProps,
 };
 
-const UnlinkLoginPage = (props) => {
+function UnlinkLoginPage(props) {
     const accountID = lodashGet(props.route.params, 'accountID', '');
     const validateCode = lodashGet(props.route.params, 'validateCode', '');
 
     Session.unlinkLogin(accountID, validateCode);
     Navigation.navigate(ROUTES.HOME);
     return <FullScreenLoadingIndicator />;
-};
+}
 
 UnlinkLoginPage.propTypes = propTypes;
 UnlinkLoginPage.defaultProps = defaultProps;
diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index d834a0f7a088..e982955b6127 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -68,7 +68,7 @@ const defaultProps = {
     parentReport: {},
 };
 
-const HeaderView = (props) => {
+function HeaderView(props) {
     const participants = lodashGet(props.report, 'participants', []);
     const participantPersonalDetails = OptionsListUtils.getPersonalDetailsForLogins(participants, props.personalDetails);
     const isMultipleParticipant = participants.length > 1;
@@ -213,7 +213,7 @@ const HeaderView = (props) => {
             </View>
         </View>
     );
-};
+}
 HeaderView.propTypes = propTypes;
 HeaderView.displayName = 'HeaderView';
 HeaderView.defaultProps = defaultProps;
diff --git a/src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js b/src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js
index 2c0f2ff65561..60ed7ed989b0 100644
--- a/src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js
+++ b/src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js
@@ -20,18 +20,20 @@ const defaultProps = {
     displayAsGroup: false,
 };
 
-const MiniReportActionContextMenu = (props) => (
-    <View
-        style={StyleUtils.getMiniReportActionContextMenuWrapperStyle(props.displayAsGroup)}
-        dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: props.isVisible}}
-    >
-        <BaseReportActionContextMenu
-            isMini
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-        />
-    </View>
-);
+function MiniReportActionContextMenu(props) {
+    return (
+        <View
+            style={StyleUtils.getMiniReportActionContextMenuWrapperStyle(props.displayAsGroup)}
+            dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: props.isVisible}}
+        >
+            <BaseReportActionContextMenu
+                isMini
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+            />
+        </View>
+    );
+}
 
 MiniReportActionContextMenu.propTypes = propTypes;
 MiniReportActionContextMenu.defaultProps = defaultProps;
diff --git a/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.android.js b/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.android.js
index f7945d623bbc..c533a9ca1e3b 100644
--- a/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.android.js
+++ b/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.android.js
@@ -3,11 +3,13 @@ import {View, Animated} from 'react-native';
 import styles from '../../../../../styles/styles';
 import floatingMessageCounterContainerPropTypes from './floatingMessageCounterContainerPropTypes';
 
-const FloatingMessageCounterContainer = (props) => (
-    <Animated.View style={[styles.floatingMessageCounterWrapperAndroid, ...props.containerStyles]}>
-        <View style={styles.floatingMessageCounterSubWrapperAndroid}>{props.children}</View>
-    </Animated.View>
-);
+function FloatingMessageCounterContainer(props) {
+    return (
+        <Animated.View style={[styles.floatingMessageCounterWrapperAndroid, ...props.containerStyles]}>
+            <View style={styles.floatingMessageCounterSubWrapperAndroid}>{props.children}</View>
+        </Animated.View>
+    );
+}
 
 FloatingMessageCounterContainer.propTypes = floatingMessageCounterContainerPropTypes;
 FloatingMessageCounterContainer.displayName = 'FloatingMessageCounterContainer';
diff --git a/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.js b/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.js
index 08ec3c6f754e..134312aa7af5 100644
--- a/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.js
+++ b/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.js
@@ -3,14 +3,16 @@ import {Animated} from 'react-native';
 import styles from '../../../../../styles/styles';
 import floatingMessageCounterContainerPropTypes from './floatingMessageCounterContainerPropTypes';
 
-const FloatingMessageCounterContainer = (props) => (
-    <Animated.View
-        accessibilityHint={props.accessibilityHint}
-        style={[styles.floatingMessageCounterWrapper, ...props.containerStyles]}
-    >
-        {props.children}
-    </Animated.View>
-);
+function FloatingMessageCounterContainer(props) {
+    return (
+        <Animated.View
+            accessibilityHint={props.accessibilityHint}
+            style={[styles.floatingMessageCounterWrapper, ...props.containerStyles]}
+        >
+            {props.children}
+        </Animated.View>
+    );
+}
 
 FloatingMessageCounterContainer.propTypes = floatingMessageCounterContainerPropTypes;
 FloatingMessageCounterContainer.displayName = 'FloatingMessageCounterContainer';
diff --git a/src/pages/home/report/ReactionList/BaseReactionList.js b/src/pages/home/report/ReactionList/BaseReactionList.js
index 7b3453072994..56ea9b23708e 100755
--- a/src/pages/home/report/ReactionList/BaseReactionList.js
+++ b/src/pages/home/report/ReactionList/BaseReactionList.js
@@ -57,7 +57,7 @@ const getItemLayout = (_, index) => ({
     offset: variables.listItemHeightNormal * index,
 });
 
-const BaseReactionList = (props) => {
+function BaseReactionList(props) {
     if (!props.isVisible) {
         return null;
     }
@@ -116,7 +116,7 @@ const BaseReactionList = (props) => {
             />
         </>
     );
-};
+}
 
 BaseReactionList.propTypes = propTypes;
 BaseReactionList.defaultProps = defaultProps;
diff --git a/src/pages/home/report/ReactionList/HeaderReactionList.js b/src/pages/home/report/ReactionList/HeaderReactionList.js
index ed6be9ab956f..aef32aa2b7e6 100644
--- a/src/pages/home/report/ReactionList/HeaderReactionList.js
+++ b/src/pages/home/report/ReactionList/HeaderReactionList.js
@@ -24,17 +24,19 @@ const defaultProps = {
     hasUserReacted: false,
 };
 
-const HeaderReactionList = (props) => (
-    <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.emojiReactionListHeader, !props.isSmallScreenWidth && styles.pt4]}>
-        <View style={styles.flexRow}>
-            <View style={[styles.emojiReactionListHeaderBubble, StyleUtils.getEmojiReactionBubbleStyle(false, props.hasUserReacted)]}>
-                <Text style={[styles.miniQuickEmojiReactionText, StyleUtils.getEmojiReactionBubbleTextStyle(true)]}>{props.emojiCodes.join('')}</Text>
-                <Text style={[styles.reactionCounterText, StyleUtils.getEmojiReactionCounterTextStyle(props.hasUserReacted)]}>{props.emojiCount}</Text>
+function HeaderReactionList(props) {
+    return (
+        <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.emojiReactionListHeader, !props.isSmallScreenWidth && styles.pt4]}>
+            <View style={styles.flexRow}>
+                <View style={[styles.emojiReactionListHeaderBubble, StyleUtils.getEmojiReactionBubbleStyle(false, props.hasUserReacted)]}>
+                    <Text style={[styles.miniQuickEmojiReactionText, StyleUtils.getEmojiReactionBubbleTextStyle(true)]}>{props.emojiCodes.join('')}</Text>
+                    <Text style={[styles.reactionCounterText, StyleUtils.getEmojiReactionCounterTextStyle(props.hasUserReacted)]}>{props.emojiCount}</Text>
+                </View>
+                <Text style={styles.reactionListHeaderText}>{`:${props.emojiName}:`}</Text>
             </View>
-            <Text style={styles.reactionListHeaderText}>{`:${props.emojiName}:`}</Text>
         </View>
-    </View>
-);
+    );
+}
 
 HeaderReactionList.propTypes = propTypes;
 HeaderReactionList.defaultProps = defaultProps;
diff --git a/src/pages/home/report/ReportActionItemCreated.js b/src/pages/home/report/ReportActionItemCreated.js
index a00e557ea613..2d09636090bf 100644
--- a/src/pages/home/report/ReportActionItemCreated.js
+++ b/src/pages/home/report/ReportActionItemCreated.js
@@ -36,7 +36,7 @@ const defaultProps = {
     personalDetails: {},
 };
 
-const ReportActionItemCreated = (props) => {
+function ReportActionItemCreated(props) {
     if (!ReportUtils.isChatReport(props.report)) {
         return null;
     }
@@ -75,7 +75,7 @@ const ReportActionItemCreated = (props) => {
             </View>
         </OfflineWithFeedback>
     );
-};
+}
 
 ReportActionItemCreated.defaultProps = defaultProps;
 ReportActionItemCreated.propTypes = propTypes;
diff --git a/src/pages/home/report/ReportActionItemDate.js b/src/pages/home/report/ReportActionItemDate.js
index e49445fdefaf..0e6af2e95636 100644
--- a/src/pages/home/report/ReportActionItemDate.js
+++ b/src/pages/home/report/ReportActionItemDate.js
@@ -12,7 +12,9 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-const ReportActionItemDate = (props) => <Text style={[styles.chatItemMessageHeaderTimestamp]}>{props.datetimeToCalendarTime(props.created)}</Text>;
+function ReportActionItemDate(props) {
+    return <Text style={[styles.chatItemMessageHeaderTimestamp]}>{props.datetimeToCalendarTime(props.created)}</Text>;
+}
 
 ReportActionItemDate.propTypes = propTypes;
 ReportActionItemDate.displayName = 'ReportActionItemDate';
diff --git a/src/pages/home/report/ReportActionItemDraft.js b/src/pages/home/report/ReportActionItemDraft.js
index e1663ed13bc4..b3b66994fb9c 100644
--- a/src/pages/home/report/ReportActionItemDraft.js
+++ b/src/pages/home/report/ReportActionItemDraft.js
@@ -8,11 +8,13 @@ const propTypes = {
     children: PropTypes.node.isRequired,
 };
 
-const ReportActionItemDraft = (props) => (
-    <View style={[styles.chatItemDraft]}>
-        <View style={styles.flex1}>{props.children}</View>
-    </View>
-);
+function ReportActionItemDraft(props) {
+    return (
+        <View style={[styles.chatItemDraft]}>
+            <View style={styles.flex1}>{props.children}</View>
+        </View>
+    );
+}
 
 ReportActionItemDraft.propTypes = propTypes;
 ReportActionItemDraft.displayName = 'ReportActionItemDraft';
diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js
index 07b00590306e..2a5fbc880777 100644
--- a/src/pages/home/report/ReportActionItemFragment.js
+++ b/src/pages/home/report/ReportActionItemFragment.js
@@ -77,7 +77,7 @@ const defaultProps = {
     style: [],
 };
 
-const ReportActionItemFragment = (props) => {
+function ReportActionItemFragment(props) {
     switch (props.fragment.type) {
         case 'COMMENT': {
             // If this is an attachment placeholder, return the placeholder component
@@ -171,7 +171,7 @@ const ReportActionItemFragment = (props) => {
         default:
             return <Text>props.fragment.text</Text>;
     }
-};
+}
 
 ReportActionItemFragment.propTypes = propTypes;
 ReportActionItemFragment.defaultProps = defaultProps;
diff --git a/src/pages/home/report/ReportActionItemGrouped.js b/src/pages/home/report/ReportActionItemGrouped.js
index ea8458340204..e60bf01835f8 100644
--- a/src/pages/home/report/ReportActionItemGrouped.js
+++ b/src/pages/home/report/ReportActionItemGrouped.js
@@ -16,11 +16,13 @@ const defaultProps = {
     wrapperStyles: [styles.chatItem],
 };
 
-const ReportActionItemGrouped = (props) => (
-    <View style={props.wrapperStyles}>
-        <View style={[styles.chatItemRightGrouped]}>{props.children}</View>
-    </View>
-);
+function ReportActionItemGrouped(props) {
+    return (
+        <View style={props.wrapperStyles}>
+            <View style={[styles.chatItemRightGrouped]}>{props.children}</View>
+        </View>
+    );
+}
 
 ReportActionItemGrouped.propTypes = propTypes;
 ReportActionItemGrouped.defaultProps = defaultProps;
diff --git a/src/pages/home/report/ReportActionItemMessage.js b/src/pages/home/report/ReportActionItemMessage.js
index fef1bb0377c9..e6bcdffe1e8d 100644
--- a/src/pages/home/report/ReportActionItemMessage.js
+++ b/src/pages/home/report/ReportActionItemMessage.js
@@ -28,28 +28,30 @@ const defaultProps = {
     isHidden: false,
 };
 
-const ReportActionItemMessage = (props) => (
-    <View style={[styles.chatItemMessage, ...props.style]}>
-        {!props.isHidden ? (
-            _.map(_.compact(props.action.previousMessage || props.action.message), (fragment, index) => (
-                <ReportActionItemFragment
-                    key={`actionFragment-${props.action.reportActionID}-${index}`}
-                    fragment={fragment}
-                    isAttachment={props.action.isAttachment}
-                    hasCommentThread={ReportActionsUtils.hasCommentThread(props.action)}
-                    attachmentInfo={props.action.attachmentInfo}
-                    pendingAction={props.action.pendingAction}
-                    source={lodashGet(props.action, 'originalMessage.source')}
-                    accountID={String(props.action.actorAccountID)}
-                    loading={props.action.isLoading}
-                    style={props.style}
-                />
-            ))
-        ) : (
-            <Text style={[styles.textLabelSupporting, styles.lh20]}>{props.translate('moderation.flaggedContent')}</Text>
-        )}
-    </View>
-);
+function ReportActionItemMessage(props) {
+    return (
+        <View style={[styles.chatItemMessage, ...props.style]}>
+            {!props.isHidden ? (
+                _.map(_.compact(props.action.previousMessage || props.action.message), (fragment, index) => (
+                    <ReportActionItemFragment
+                        key={`actionFragment-${props.action.reportActionID}-${index}`}
+                        fragment={fragment}
+                        isAttachment={props.action.isAttachment}
+                        hasCommentThread={ReportActionsUtils.hasCommentThread(props.action)}
+                        attachmentInfo={props.action.attachmentInfo}
+                        pendingAction={props.action.pendingAction}
+                        source={lodashGet(props.action, 'originalMessage.source')}
+                        accountID={String(props.action.actorAccountID)}
+                        loading={props.action.isLoading}
+                        style={props.style}
+                    />
+                ))
+            ) : (
+                <Text style={[styles.textLabelSupporting, styles.lh20]}>{props.translate('moderation.flaggedContent')}</Text>
+            )}
+        </View>
+    );
+}
 
 ReportActionItemMessage.propTypes = propTypes;
 ReportActionItemMessage.defaultProps = defaultProps;
diff --git a/src/pages/home/report/ReportActionItemParentAction.js b/src/pages/home/report/ReportActionItemParentAction.js
index 9ce119494b56..2af66779309e 100644
--- a/src/pages/home/report/ReportActionItemParentAction.js
+++ b/src/pages/home/report/ReportActionItemParentAction.js
@@ -44,7 +44,7 @@ const defaultProps = {
     shouldHideThreadDividerLine: false,
 };
 
-const ReportActionItemParentAction = (props) => {
+function ReportActionItemParentAction(props) {
     const parentReportAction = props.parentReportActions[`${props.report.parentReportActionID}`];
 
     // In case of transaction threads, we do not want to render the parent report action.
@@ -74,7 +74,7 @@ const ReportActionItemParentAction = (props) => {
             {!props.shouldHideThreadDividerLine && <View style={[styles.threadDividerLine]} />}
         </OfflineWithFeedback>
     );
-};
+}
 
 ReportActionItemParentAction.defaultProps = defaultProps;
 ReportActionItemParentAction.propTypes = propTypes;
diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js
index 84a89bf7475f..e6f7cbc95410 100644
--- a/src/pages/home/report/ReportActionItemSingle.js
+++ b/src/pages/home/report/ReportActionItemSingle.js
@@ -65,7 +65,7 @@ const showUserDetails = (accountID) => {
     Navigation.navigate(ROUTES.getProfileRoute(accountID));
 };
 
-const ReportActionItemSingle = (props) => {
+function ReportActionItemSingle(props) {
     const actorEmail = props.action.actorEmail.replace(CONST.REGEX.MERGED_ACCOUNT_PREFIX, '');
     const {accountID, avatar, displayName, pendingFields} = props.personalDetails[actorEmail] || {};
     const avatarSource = UserUtils.getAvatar(avatar, actorEmail);
@@ -138,7 +138,7 @@ const ReportActionItemSingle = (props) => {
             </View>
         </View>
     );
-};
+}
 
 ReportActionItemSingle.propTypes = propTypes;
 ReportActionItemSingle.defaultProps = defaultProps;
diff --git a/src/pages/home/report/ReportActionItemThread.js b/src/pages/home/report/ReportActionItemThread.js
index 2db575ec0c9c..835c31cf4df4 100644
--- a/src/pages/home/report/ReportActionItemThread.js
+++ b/src/pages/home/report/ReportActionItemThread.js
@@ -31,7 +31,7 @@ const propTypes = {
     ...windowDimensionsPropTypes,
 };
 
-const ReportActionItemThread = (props) => {
+function ReportActionItemThread(props) {
     const numberOfRepliesText = props.numberOfReplies > CONST.MAX_THREAD_REPLIES_PREVIEW ? `${CONST.MAX_THREAD_REPLIES_PREVIEW}+` : `${props.numberOfReplies}`;
     const replyText = props.numberOfReplies === 1 ? props.translate('threads.reply') : props.translate('threads.replies');
 
@@ -71,7 +71,7 @@ const ReportActionItemThread = (props) => {
             </PressableWithoutFeedback>
         </View>
     );
-};
+}
 
 ReportActionItemThread.propTypes = propTypes;
 ReportActionItemThread.displayName = 'ReportActionItemThread';
diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js
index edbfcc7eee47..367f81895fd0 100644
--- a/src/pages/home/report/ReportActionsList.js
+++ b/src/pages/home/report/ReportActionsList.js
@@ -77,7 +77,7 @@ function keyExtractor(item) {
     return item.reportActionID;
 }
 
-const ReportActionsList = (props) => {
+function ReportActionsList(props) {
     const opacity = useSharedValue(0);
     const animatedStyles = useAnimatedStyle(() => ({
         opacity: opacity.value,
@@ -191,7 +191,7 @@ const ReportActionsList = (props) => {
             />
         </Animated.View>
     );
-};
+}
 
 ReportActionsList.propTypes = propTypes;
 ReportActionsList.defaultProps = defaultProps;
diff --git a/src/pages/home/report/ReportDropUI.js b/src/pages/home/report/ReportDropUI.js
index 87e0696cb71f..f59d0a31135d 100644
--- a/src/pages/home/report/ReportDropUI.js
+++ b/src/pages/home/report/ReportDropUI.js
@@ -12,21 +12,23 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-const ReportDropUI = (props) => (
-    <DropZone
-        dropZoneViewHolderName={CONST.REPORT.DROP_HOST_NAME}
-        dropZoneId={CONST.REPORT.ACTIVE_DROP_NATIVE_ID}
-    >
-        <View style={styles.mb3}>
-            <Icon
-                src={Expensicons.DragAndDrop}
-                width={100}
-                height={100}
-            />
-        </View>
-        <Text style={[styles.textHeadline]}>{props.translate('reportActionCompose.dropToUpload')}</Text>
-    </DropZone>
-);
+function ReportDropUI(props) {
+    return (
+        <DropZone
+            dropZoneViewHolderName={CONST.REPORT.DROP_HOST_NAME}
+            dropZoneId={CONST.REPORT.ACTIVE_DROP_NATIVE_ID}
+        >
+            <View style={styles.mb3}>
+                <Icon
+                    src={Expensicons.DragAndDrop}
+                    width={100}
+                    height={100}
+                />
+            </View>
+            <Text style={[styles.textHeadline]}>{props.translate('reportActionCompose.dropToUpload')}</Text>
+        </DropZone>
+    );
+}
 
 ReportDropUI.displayName = 'ReportDropUI';
 ReportDropUI.propTypes = propTypes;
diff --git a/src/pages/home/sidebar/SidebarScreen/index.js b/src/pages/home/sidebar/SidebarScreen/index.js
index e93c20ad9815..20eb62d0ddd6 100755
--- a/src/pages/home/sidebar/SidebarScreen/index.js
+++ b/src/pages/home/sidebar/SidebarScreen/index.js
@@ -5,7 +5,7 @@ import FloatingActionButtonAndPopover from './FloatingActionButtonAndPopover';
 import FreezeWrapper from '../../../../libs/Navigation/FreezeWrapper';
 import withWindowDimensions from '../../../../components/withWindowDimensions';
 
-const SidebarScreen = (props) => {
+function SidebarScreen(props) {
     const popoverModal = useRef(null);
 
     /**
@@ -36,7 +36,7 @@ const SidebarScreen = (props) => {
             </BaseSidebarScreen>
         </FreezeWrapper>
     );
-};
+}
 
 SidebarScreen.propTypes = sidebarPropTypes;
 SidebarScreen.displayName = 'SidebarScreen';
diff --git a/src/pages/home/sidebar/SidebarScreen/index.native.js b/src/pages/home/sidebar/SidebarScreen/index.native.js
index 971ea8d8f816..8ed41233bdb5 100755
--- a/src/pages/home/sidebar/SidebarScreen/index.native.js
+++ b/src/pages/home/sidebar/SidebarScreen/index.native.js
@@ -5,16 +5,18 @@ import FloatingActionButtonAndPopover from './FloatingActionButtonAndPopover';
 import FreezeWrapper from '../../../../libs/Navigation/FreezeWrapper';
 import withWindowDimensions from '../../../../components/withWindowDimensions';
 
-const SidebarScreen = (props) => (
-    <FreezeWrapper keepVisible={!props.isSmallScreenWidth}>
-        <BaseSidebarScreen
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-        >
-            <FloatingActionButtonAndPopover />
-        </BaseSidebarScreen>
-    </FreezeWrapper>
-);
+function SidebarScreen(props) {
+    return (
+        <FreezeWrapper keepVisible={!props.isSmallScreenWidth}>
+            <BaseSidebarScreen
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+            >
+                <FloatingActionButtonAndPopover />
+            </BaseSidebarScreen>
+        </FreezeWrapper>
+    );
+}
 
 SidebarScreen.propTypes = sidebarPropTypes;
 SidebarScreen.displayName = 'SidebarScreen';
diff --git a/src/pages/iou/IOUBillPage.js b/src/pages/iou/IOUBillPage.js
index 433dd1697b0b..a3a9d4932bd4 100644
--- a/src/pages/iou/IOUBillPage.js
+++ b/src/pages/iou/IOUBillPage.js
@@ -1,12 +1,14 @@
 import React from 'react';
 import MoneyRequestModal from './MoneyRequestModal';
 
-const IOUBillPage = (props) => (
-    <MoneyRequestModal
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        hasMultipleParticipants
-    />
-);
+function IOUBillPage(props) {
+    return (
+        <MoneyRequestModal
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            hasMultipleParticipants
+        />
+    );
+}
 IOUBillPage.displayName = 'IOUBillPage';
 export default IOUBillPage;
diff --git a/src/pages/iou/IOURequestPage.js b/src/pages/iou/IOURequestPage.js
index 86b1e1a4dab9..8311e188c666 100644
--- a/src/pages/iou/IOURequestPage.js
+++ b/src/pages/iou/IOURequestPage.js
@@ -1,7 +1,9 @@
 import React from 'react';
 import MoneyRequestModal from './MoneyRequestModal';
 
-// eslint-disable-next-line react/jsx-props-no-spreading
-const IOURequestPage = (props) => <MoneyRequestModal {...props} />;
+function IOURequestPage(props) {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <MoneyRequestModal {...props} />;
+}
 IOURequestPage.displayName = 'IOURequestPage';
 export default IOURequestPage;
diff --git a/src/pages/iou/IOUSendPage.js b/src/pages/iou/IOUSendPage.js
index 19af6d44dea6..e53fd273a2f2 100644
--- a/src/pages/iou/IOUSendPage.js
+++ b/src/pages/iou/IOUSendPage.js
@@ -2,12 +2,14 @@ import React from 'react';
 import CONST from '../../CONST';
 import MoneyRequestModal from './MoneyRequestModal';
 
-const IOUSendPage = (props) => (
-    <MoneyRequestModal
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        iouType={CONST.IOU.MONEY_REQUEST_TYPE.SEND}
-    />
-);
+function IOUSendPage(props) {
+    return (
+        <MoneyRequestModal
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            iouType={CONST.IOU.MONEY_REQUEST_TYPE.SEND}
+        />
+    );
+}
 IOUSendPage.displayName = 'IOUSendPage';
 export default IOUSendPage;
diff --git a/src/pages/iou/MoneyRequestModal.js b/src/pages/iou/MoneyRequestModal.js
index 729a4ed27227..8b08c36359b5 100644
--- a/src/pages/iou/MoneyRequestModal.js
+++ b/src/pages/iou/MoneyRequestModal.js
@@ -95,7 +95,7 @@ const Steps = {
     MoneyRequestConfirm: 'moneyRequest.confirm',
 };
 
-const MoneyRequestModal = (props) => {
+function MoneyRequestModal(props) {
     // Skip MoneyRequestParticipants step if participants are passed in
     const reportParticipants = lodashGet(props, 'report.participants', []);
     const steps = useMemo(
@@ -394,7 +394,7 @@ const MoneyRequestModal = (props) => {
             )}
         </ScreenWrapper>
     );
-};
+}
 
 MoneyRequestModal.displayName = 'MoneyRequestModal';
 MoneyRequestModal.propTypes = propTypes;
diff --git a/src/pages/iou/SplitBillDetailsPage.js b/src/pages/iou/SplitBillDetailsPage.js
index d4e5cc85d3fb..f892e57c3e06 100644
--- a/src/pages/iou/SplitBillDetailsPage.js
+++ b/src/pages/iou/SplitBillDetailsPage.js
@@ -62,7 +62,7 @@ function getReportID(route) {
     return route.params.reportID.toString();
 }
 
-const SplitBillDetailsPage = (props) => {
+function SplitBillDetailsPage(props) {
     const reportAction = props.reportActions[`${props.route.params.reportActionID.toString()}`];
     const personalDetails = OptionsListUtils.getPersonalDetailsForLogins(reportAction.originalMessage.participants, props.personalDetails);
     const participants = OptionsListUtils.getParticipantsOptions(reportAction.originalMessage, personalDetails);
@@ -97,7 +97,7 @@ const SplitBillDetailsPage = (props) => {
             </FullPageNotFoundView>
         </ScreenWrapper>
     );
-};
+}
 
 SplitBillDetailsPage.propTypes = propTypes;
 SplitBillDetailsPage.defaultProps = defaultProps;
diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index daa5af83bbd6..8ed80aab7bcd 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -54,22 +54,24 @@ const defaultProps = {
     },
 };
 
-const MoneyRequestConfirmPage = (props) => (
-    <MoneyRequestConfirmationList
-        hasMultipleParticipants={props.hasMultipleParticipants}
-        participants={props.participants}
-        iouAmount={props.iouAmount}
-        iouComment={props.iou.comment}
-        iouCurrencyCode={props.iou.selectedCurrencyCode}
-        onConfirm={props.onConfirm}
-        onSendMoney={props.onSendMoney}
-        iouType={props.iouType}
-        canModifyParticipants={props.canModifyParticipants}
-        navigateToStep={props.navigateToStep}
-        policyID={props.policyID}
-        bankAccountRoute={props.bankAccountRoute}
-    />
-);
+function MoneyRequestConfirmPage(props) {
+    return (
+        <MoneyRequestConfirmationList
+            hasMultipleParticipants={props.hasMultipleParticipants}
+            participants={props.participants}
+            iouAmount={props.iouAmount}
+            iouComment={props.iou.comment}
+            iouCurrencyCode={props.iou.selectedCurrencyCode}
+            onConfirm={props.onConfirm}
+            onSendMoney={props.onSendMoney}
+            iouType={props.iouType}
+            canModifyParticipants={props.canModifyParticipants}
+            navigateToStep={props.navigateToStep}
+            policyID={props.policyID}
+            bankAccountRoute={props.bankAccountRoute}
+        />
+    );
+}
 
 MoneyRequestConfirmPage.displayName = 'MoneyRequestConfirmPage';
 MoneyRequestConfirmPage.propTypes = propTypes;
diff --git a/src/pages/settings/AboutPage/AboutPage.js b/src/pages/settings/AboutPage/AboutPage.js
index 8ec8ea447f0b..0b5074bfc0ce 100644
--- a/src/pages/settings/AboutPage/AboutPage.js
+++ b/src/pages/settings/AboutPage/AboutPage.js
@@ -28,7 +28,7 @@ const propTypes = {
     ...windowDimensionsPropTypes,
 };
 
-const AboutPage = (props) => {
+function AboutPage(props) {
     let popoverAnchor;
     const menuItems = [
         {
@@ -136,7 +136,7 @@ const AboutPage = (props) => {
             )}
         </ScreenWrapper>
     );
-};
+}
 
 AboutPage.propTypes = propTypes;
 AboutPage.displayName = 'AboutPage';
diff --git a/src/pages/settings/AppDownloadLinks.js b/src/pages/settings/AppDownloadLinks.js
index 3c42e4901616..c6c8035e5477 100644
--- a/src/pages/settings/AppDownloadLinks.js
+++ b/src/pages/settings/AppDownloadLinks.js
@@ -21,7 +21,7 @@ const propTypes = {
     ...windowDimensionsPropTypes,
 };
 
-const AppDownloadLinksPage = (props) => {
+function AppDownloadLinksPage(props) {
     let popoverAnchor;
 
     const menuItems = [
@@ -80,7 +80,7 @@ const AppDownloadLinksPage = (props) => {
             </ScrollView>
         </ScreenWrapper>
     );
-};
+}
 
 AppDownloadLinksPage.propTypes = propTypes;
 AppDownloadLinksPage.displayName = 'AppDownloadLinksPage';
diff --git a/src/pages/settings/NewPasswordForm.js b/src/pages/settings/NewPasswordForm.js
index a2f02972dcad..224b0d5a0892 100644
--- a/src/pages/settings/NewPasswordForm.js
+++ b/src/pages/settings/NewPasswordForm.js
@@ -21,7 +21,7 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-const NewPasswordForm = (props) => {
+function NewPasswordForm(props) {
     const [passwordHintError, setPasswordHintError] = useState(false);
 
     const isValidPassword = () => props.password.match(CONST.PASSWORD_COMPLEXITY_REGEX_STRING);
@@ -61,7 +61,7 @@ const NewPasswordForm = (props) => {
             <Text style={[styles.formHelp, styles.mt1, isInvalidPassword() && styles.formError]}>{props.translate('setPasswordPage.newPasswordPrompt')}</Text>
         </View>
     );
-};
+}
 
 NewPasswordForm.propTypes = propTypes;
 NewPasswordForm.displayName = 'NewPasswordForm';
diff --git a/src/pages/settings/Payments/AddPayPalMePage.js b/src/pages/settings/Payments/AddPayPalMePage.js
index cbb437ea00e6..ec5476a9162e 100644
--- a/src/pages/settings/Payments/AddPayPalMePage.js
+++ b/src/pages/settings/Payments/AddPayPalMePage.js
@@ -21,7 +21,7 @@ import * as Expensicons from '../../../components/Icon/Expensicons';
 import variables from '../../../styles/variables';
 import PressableWithoutFeedback from '../../../components/Pressable/PressableWithoutFeedback';
 
-const AddPayPalMePage = (props) => {
+function AddPayPalMePage(props) {
     const [payPalMeUsername, setPayPalMeUsername] = useState('');
     const [payPalMeUsernameError, setPayPalMeUsernameError] = useState(false);
     const payPalMeInput = useRef(null);
@@ -107,7 +107,7 @@ const AddPayPalMePage = (props) => {
             </FixedFooter>
         </ScreenWrapper>
     );
-};
+}
 
 AddPayPalMePage.propTypes = {...withLocalizePropTypes};
 AddPayPalMePage.displayName = 'AddPayPalMePage';
diff --git a/src/pages/settings/Payments/ChooseTransferAccountPage.js b/src/pages/settings/Payments/ChooseTransferAccountPage.js
index 224b727bf4e5..0443401a62f1 100644
--- a/src/pages/settings/Payments/ChooseTransferAccountPage.js
+++ b/src/pages/settings/Payments/ChooseTransferAccountPage.js
@@ -28,7 +28,7 @@ const defaultProps = {
     walletTransfer: {},
 };
 
-const ChooseTransferAccountPage = (props) => {
+function ChooseTransferAccountPage(props) {
     /**
      * Go back to transfer balance screen with the selected bank account set
      * @param {Object} event Click event object
@@ -77,7 +77,7 @@ const ChooseTransferAccountPage = (props) => {
             />
         </ScreenWrapper>
     );
-};
+}
 
 ChooseTransferAccountPage.propTypes = propTypes;
 ChooseTransferAccountPage.defaultProps = defaultProps;
diff --git a/src/pages/settings/Payments/PaymentsPage/index.js b/src/pages/settings/Payments/PaymentsPage/index.js
index c22511e4f160..df81f1f1b39b 100644
--- a/src/pages/settings/Payments/PaymentsPage/index.js
+++ b/src/pages/settings/Payments/PaymentsPage/index.js
@@ -1,7 +1,9 @@
 import React from 'react';
 import BasePaymentsPage from './BasePaymentsPage';
 
-const PaymentsPage = () => <BasePaymentsPage shouldListenForResize />;
+function PaymentsPage() {
+    return <BasePaymentsPage shouldListenForResize />;
+}
 
 PaymentsPage.displayName = 'PaymentsPage';
 
diff --git a/src/pages/settings/Preferences/LanguagePage.js b/src/pages/settings/Preferences/LanguagePage.js
index 23f36e6e44e3..e449b43b22b7 100644
--- a/src/pages/settings/Preferences/LanguagePage.js
+++ b/src/pages/settings/Preferences/LanguagePage.js
@@ -21,7 +21,7 @@ const propTypes = {
     preferredLocale: PropTypes.string.isRequired,
 };
 
-const LanguagePage = (props) => {
+function LanguagePage(props) {
     const localesToLanguages = _.map(props.translate('languagePage.languages'), (language, key) => ({
         value: key,
         text: language.label,
@@ -55,7 +55,7 @@ const LanguagePage = (props) => {
             />
         </ScreenWrapper>
     );
-};
+}
 
 LanguagePage.displayName = 'LanguagePage';
 LanguagePage.propTypes = propTypes;
diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js
index 8cf39f23f9f8..81b129439e96 100755
--- a/src/pages/settings/Preferences/PreferencesPage.js
+++ b/src/pages/settings/Preferences/PreferencesPage.js
@@ -42,7 +42,7 @@ const defaultProps = {
     user: {},
 };
 
-const PreferencesPage = (props) => {
+function PreferencesPage(props) {
     const priorityModes = props.translate('priorityModePage.priorityModes');
     const languages = props.translate('languagePage.languages');
 
@@ -96,7 +96,7 @@ const PreferencesPage = (props) => {
             </ScrollView>
         </ScreenWrapper>
     );
-};
+}
 
 PreferencesPage.propTypes = propTypes;
 PreferencesPage.defaultProps = defaultProps;
diff --git a/src/pages/settings/Preferences/PriorityModePage.js b/src/pages/settings/Preferences/PriorityModePage.js
index e044d906e862..cf48e63d015d 100644
--- a/src/pages/settings/Preferences/PriorityModePage.js
+++ b/src/pages/settings/Preferences/PriorityModePage.js
@@ -29,7 +29,7 @@ const defaultProps = {
     priorityMode: CONST.PRIORITY_MODE.DEFAULT,
 };
 
-const PriorityModePage = (props) => {
+function PriorityModePage(props) {
     const priorityModes = _.map(props.translate('priorityModePage.priorityModes'), (mode, key) => ({
         value: key,
         text: mode.label,
@@ -68,7 +68,7 @@ const PriorityModePage = (props) => {
             />
         </ScreenWrapper>
     );
-};
+}
 
 PriorityModePage.displayName = 'PriorityModePage';
 PriorityModePage.propTypes = propTypes;
diff --git a/src/pages/settings/Profile/Contacts/ContactMethodsPage.js b/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
index aa27771beeec..3100af19c4e9 100644
--- a/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
+++ b/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
@@ -58,7 +58,7 @@ const defaultProps = {
     },
 };
 
-const ContactMethodsPage = (props) => {
+function ContactMethodsPage(props) {
     const loginNames = _.keys(props.loginList);
 
     // Sort the login names by placing the one corresponding to the default contact method as the first item before displaying the contact methods.
@@ -139,7 +139,7 @@ const ContactMethodsPage = (props) => {
             </FixedFooter>
         </ScreenWrapper>
     );
-};
+}
 
 ContactMethodsPage.propTypes = propTypes;
 ContactMethodsPage.defaultProps = defaultProps;
diff --git a/src/pages/settings/Profile/Contacts/ValidateCodeForm/index.android.js b/src/pages/settings/Profile/Contacts/ValidateCodeForm/index.android.js
index 8128b2077012..30c5517b8375 100644
--- a/src/pages/settings/Profile/Contacts/ValidateCodeForm/index.android.js
+++ b/src/pages/settings/Profile/Contacts/ValidateCodeForm/index.android.js
@@ -1,13 +1,15 @@
 import React from 'react';
 import BaseValidateCodeForm from './BaseValidateCodeForm';
 
-const ValidateCodeForm = (props) => (
-    <BaseValidateCodeForm
-        autoComplete="sms-otp"
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-    />
-);
+function ValidateCodeForm(props) {
+    return (
+        <BaseValidateCodeForm
+            autoComplete="sms-otp"
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+        />
+    );
+}
 
 ValidateCodeForm.displayName = 'ValidateCodeForm';
 
diff --git a/src/pages/settings/Profile/Contacts/ValidateCodeForm/index.js b/src/pages/settings/Profile/Contacts/ValidateCodeForm/index.js
index 80691a931185..6ef0c91b6d37 100644
--- a/src/pages/settings/Profile/Contacts/ValidateCodeForm/index.js
+++ b/src/pages/settings/Profile/Contacts/ValidateCodeForm/index.js
@@ -1,13 +1,15 @@
 import React from 'react';
 import BaseValidateCodeForm from './BaseValidateCodeForm';
 
-const ValidateCodeForm = (props) => (
-    <BaseValidateCodeForm
-        autoComplete="one-time-code"
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-    />
-);
+function ValidateCodeForm(props) {
+    return (
+        <BaseValidateCodeForm
+            autoComplete="one-time-code"
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+        />
+    );
+}
 
 ValidateCodeForm.displayName = 'ValidateCodeForm';
 
diff --git a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
index cd1ed1ac0895..77413ae1e596 100644
--- a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
+++ b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
@@ -34,7 +34,7 @@ const defaultProps = {
     },
 };
 
-const DateOfBirthPage = ({translate, route, privatePersonalDetails}) => {
+function DateOfBirthPage({translate, route, privatePersonalDetails}) {
     /**
      * The year should be set on the route when navigating back from the year picker
      * This lets us pass the selected year without having to overwrite the value in Onyx
@@ -93,7 +93,7 @@ const DateOfBirthPage = ({translate, route, privatePersonalDetails}) => {
             </Form>
         </ScreenWrapper>
     );
-};
+}
 
 DateOfBirthPage.propTypes = propTypes;
 DateOfBirthPage.defaultProps = defaultProps;
diff --git a/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js b/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js
index e8eb26e120a7..a466d2091de1 100644
--- a/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js
+++ b/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js
@@ -53,7 +53,7 @@ const defaultProps = {
     },
 };
 
-const PersonalDetailsInitialPage = (props) => {
+function PersonalDetailsInitialPage(props) {
     useEffect(() => {
         if (props.network.isOffline) {
             return;
@@ -120,7 +120,7 @@ const PersonalDetailsInitialPage = (props) => {
             </ScrollView>
         </ScreenWrapper>
     );
-};
+}
 
 PersonalDetailsInitialPage.propTypes = propTypes;
 PersonalDetailsInitialPage.defaultProps = defaultProps;
diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js
index 9d0a83855be0..562b862a7fc6 100755
--- a/src/pages/settings/Profile/ProfilePage.js
+++ b/src/pages/settings/Profile/ProfilePage.js
@@ -45,7 +45,7 @@ const defaultProps = {
     ...withCurrentUserPersonalDetailsDefaultProps,
 };
 
-const ProfilePage = (props) => {
+function ProfilePage(props) {
     const getPronouns = () => {
         let pronounsKey = lodashGet(props.currentUserPersonalDetails, 'pronouns', '');
         if (pronounsKey.startsWith(CONST.PRONOUNS.PREFIX)) {
@@ -121,7 +121,7 @@ const ProfilePage = (props) => {
             </ScrollView>
         </ScreenWrapper>
     );
-};
+}
 
 ProfilePage.propTypes = propTypes;
 ProfilePage.defaultProps = defaultProps;
diff --git a/src/pages/settings/Profile/TimezoneInitialPage.js b/src/pages/settings/Profile/TimezoneInitialPage.js
index d23131305054..7dfc9fb6f9de 100644
--- a/src/pages/settings/Profile/TimezoneInitialPage.js
+++ b/src/pages/settings/Profile/TimezoneInitialPage.js
@@ -25,7 +25,7 @@ const defaultProps = {
     ...withCurrentUserPersonalDetailsDefaultProps,
 };
 
-const TimezoneInitialPage = (props) => {
+function TimezoneInitialPage(props) {
     const timezone = lodashGet(props.currentUserPersonalDetails, 'timezone', CONST.DEFAULT_TIME_ZONE);
 
     /**
@@ -69,7 +69,7 @@ const TimezoneInitialPage = (props) => {
             </View>
         </ScreenWrapper>
     );
-};
+}
 
 TimezoneInitialPage.propTypes = propTypes;
 TimezoneInitialPage.defaultProps = defaultProps;
diff --git a/src/pages/settings/Report/NotificationPreferencePage.js b/src/pages/settings/Report/NotificationPreferencePage.js
index 331ea4fe9988..915a32180ad8 100644
--- a/src/pages/settings/Report/NotificationPreferencePage.js
+++ b/src/pages/settings/Report/NotificationPreferencePage.js
@@ -22,7 +22,7 @@ const propTypes = {
 };
 const greenCheckmark = {src: Expensicons.Checkmark, color: themeColors.success};
 
-const NotificationPreferencePage = (props) => {
+function NotificationPreferencePage(props) {
     const notificationPreferenceOptions = _.map(props.translate('notificationPreferencesPage.notificationPreferences'), (preference, key) => ({
         value: key,
         text: preference,
@@ -56,7 +56,7 @@ const NotificationPreferencePage = (props) => {
             />
         </ScreenWrapper>
     );
-};
+}
 
 NotificationPreferencePage.displayName = 'NotificationPreferencePage';
 NotificationPreferencePage.propTypes = propTypes;
diff --git a/src/pages/settings/Report/RoomNamePage.js b/src/pages/settings/Report/RoomNamePage.js
index 89baaca72c79..b4bf1d0c5566 100644
--- a/src/pages/settings/Report/RoomNamePage.js
+++ b/src/pages/settings/Report/RoomNamePage.js
@@ -32,7 +32,7 @@ const defaultProps = {
     reports: {},
 };
 
-const RoomNamePage = (props) => {
+function RoomNamePage(props) {
     const report = props.report;
     const reports = props.reports;
     const translate = props.translate;
@@ -89,7 +89,7 @@ const RoomNamePage = (props) => {
             </Form>
         </ScreenWrapper>
     );
-};
+}
 
 RoomNamePage.propTypes = propTypes;
 RoomNamePage.defaultProps = defaultProps;
diff --git a/src/pages/settings/Report/WriteCapabilityPage.js b/src/pages/settings/Report/WriteCapabilityPage.js
index b71b80673da9..381d21785564 100644
--- a/src/pages/settings/Report/WriteCapabilityPage.js
+++ b/src/pages/settings/Report/WriteCapabilityPage.js
@@ -23,7 +23,7 @@ const propTypes = {
 };
 const greenCheckmark = {src: Expensicons.Checkmark, color: themeColors.success};
 
-const WriteCapabilityPage = (props) => {
+function WriteCapabilityPage(props) {
     const writeCapabilityOptions = _.map(CONST.REPORT.WRITE_CAPABILITIES, (value) => ({
         value,
         text: props.translate(`writeCapabilityPage.writeCapability.${value}`),
@@ -58,7 +58,7 @@ const WriteCapabilityPage = (props) => {
             />
         </ScreenWrapper>
     );
-};
+}
 
 WriteCapabilityPage.displayName = 'WriteCapabilityPage';
 WriteCapabilityPage.propTypes = propTypes;
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.js
index 925f6d429fa1..ea0d5e257e2f 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.js
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.js
@@ -1,7 +1,9 @@
 import React from 'react';
 import BaseTwoFactorAuthForm from './BaseTwoFactorAuthForm';
 
-const TwoFactorAuthForm = () => <BaseTwoFactorAuthForm autoComplete="sms-otp" />;
+function TwoFactorAuthForm() {
+    return <BaseTwoFactorAuthForm autoComplete="sms-otp" />;
+}
 
 TwoFactorAuthForm.displayName = 'TwoFactorAuthForm';
 
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.js
index c204978554ff..c52e65facd6d 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.js
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.js
@@ -1,7 +1,9 @@
 import React from 'react';
 import BaseTwoFactorAuthForm from './BaseTwoFactorAuthForm';
 
-const TwoFactorAuthForm = () => <BaseTwoFactorAuthForm autoComplete="one-time-code" />;
+function TwoFactorAuthForm() {
+    return <BaseTwoFactorAuthForm autoComplete="one-time-code" />;
+}
 
 TwoFactorAuthForm.displayName = 'TwoFactorAuthForm';
 
diff --git a/src/pages/signin/ChangeExpensifyLoginLink.js b/src/pages/signin/ChangeExpensifyLoginLink.js
index 0ea56a176af2..3419454d611b 100755
--- a/src/pages/signin/ChangeExpensifyLoginLink.js
+++ b/src/pages/signin/ChangeExpensifyLoginLink.js
@@ -29,22 +29,24 @@ const defaultProps = {
     },
 };
 
-const ChangeExpensifyLoginLink = (props) => (
-    <View style={[styles.changeExpensifyLoginLinkContainer, styles.mt3]}>
-        {!_.isEmpty(props.credentials.login) && <Text style={styles.mr1}>{props.translate('loginForm.notYou', {user: props.formatPhoneNumber(props.credentials.login)})}</Text>}
-        <PressableWithFeedback
-            style={[styles.link]}
-            onPress={props.onPress}
-            accessibilityRole="link"
-            accessibilityLabel={props.translate('common.goBack')}
-        >
-            <Text style={[styles.link]}>
-                {props.translate('common.goBack')}
-                {'.'}
-            </Text>
-        </PressableWithFeedback>
-    </View>
-);
+function ChangeExpensifyLoginLink(props) {
+    return (
+        <View style={[styles.changeExpensifyLoginLinkContainer, styles.mt3]}>
+            {!_.isEmpty(props.credentials.login) && <Text style={styles.mr1}>{props.translate('loginForm.notYou', {user: props.formatPhoneNumber(props.credentials.login)})}</Text>}
+            <PressableWithFeedback
+                style={[styles.link]}
+                onPress={props.onPress}
+                accessibilityRole="link"
+                accessibilityLabel={props.translate('common.goBack')}
+            >
+                <Text style={[styles.link]}>
+                    {props.translate('common.goBack')}
+                    {'.'}
+                </Text>
+            </PressableWithFeedback>
+        </View>
+    );
+}
 
 ChangeExpensifyLoginLink.propTypes = propTypes;
 ChangeExpensifyLoginLink.defaultProps = defaultProps;
diff --git a/src/pages/signin/Licenses.js b/src/pages/signin/Licenses.js
index a734579090e4..e3f1026c1e9f 100644
--- a/src/pages/signin/Licenses.js
+++ b/src/pages/signin/Licenses.js
@@ -9,25 +9,27 @@ import LocalePicker from '../../components/LocalePicker';
 
 const currentYear = new Date().getFullYear();
 
-const Licenses = (props) => (
-    <>
-        <Text style={[styles.textExtraSmallSupporting, styles.mb4]}>{`© ${currentYear} Expensify`}</Text>
-        <Text style={[styles.textExtraSmallSupporting]}>
-            {props.translate('termsOfUse.phrase5')}
-            <TextLink
-                style={[styles.textExtraSmallSupporting, styles.link]}
-                href={CONST.LICENSES_URL}
-            >
-                {' '}
-                {props.translate('termsOfUse.phrase6')}
-            </TextLink>
-            .
-        </Text>
-        <View style={[styles.mt4, styles.alignItemsCenter, styles.mb2, styles.flexRow, styles.justifyContentBetween]}>
-            <LocalePicker size="small" />
-        </View>
-    </>
-);
+function Licenses(props) {
+    return (
+        <>
+            <Text style={[styles.textExtraSmallSupporting, styles.mb4]}>{`© ${currentYear} Expensify`}</Text>
+            <Text style={[styles.textExtraSmallSupporting]}>
+                {props.translate('termsOfUse.phrase5')}
+                <TextLink
+                    style={[styles.textExtraSmallSupporting, styles.link]}
+                    href={CONST.LICENSES_URL}
+                >
+                    {' '}
+                    {props.translate('termsOfUse.phrase6')}
+                </TextLink>
+                .
+            </Text>
+            <View style={[styles.mt4, styles.alignItemsCenter, styles.mb2, styles.flexRow, styles.justifyContentBetween]}>
+                <LocalePicker size="small" />
+            </View>
+        </>
+    );
+}
 
 Licenses.propTypes = {...withLocalizePropTypes};
 Licenses.displayName = 'Licenses';
diff --git a/src/pages/signin/ResendValidationForm.js b/src/pages/signin/ResendValidationForm.js
index 993ed7d76478..091e386fb100 100755
--- a/src/pages/signin/ResendValidationForm.js
+++ b/src/pages/signin/ResendValidationForm.js
@@ -49,7 +49,7 @@ const defaultProps = {
     account: {},
 };
 
-const ResendValidationForm = (props) => {
+function ResendValidationForm(props) {
     const isSMSLogin = Str.isSMSLogin(props.credentials.login);
 
     // replacing spaces with "hard spaces" to prevent breaking the number
@@ -113,7 +113,7 @@ const ResendValidationForm = (props) => {
             </View>
         </>
     );
-};
+}
 
 ResendValidationForm.propTypes = propTypes;
 ResendValidationForm.defaultProps = defaultProps;
diff --git a/src/pages/signin/SignInHeroCopy.js b/src/pages/signin/SignInHeroCopy.js
index c06985526a42..204876c25398 100644
--- a/src/pages/signin/SignInHeroCopy.js
+++ b/src/pages/signin/SignInHeroCopy.js
@@ -13,20 +13,22 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-const SignInHeroCopy = (props) => (
-    <View style={[styles.flex1, styles.alignSelfCenter, styles.gap7]}>
-        <Text
-            style={[
-                styles.loginHeroHeader,
-                props.isMediumScreenWidth && StyleUtils.getFontSizeStyle(variables.fontSizeSignInHeroMedium),
-                props.isLargeScreenWidth && StyleUtils.getFontSizeStyle(variables.fontSizeSignInHeroLarge),
-            ]}
-        >
-            {props.translate('login.hero.header')}
-        </Text>
-        <Text style={[styles.loginHeroBody]}>{props.translate('login.hero.body')}</Text>
-    </View>
-);
+function SignInHeroCopy(props) {
+    return (
+        <View style={[styles.flex1, styles.alignSelfCenter, styles.gap7]}>
+            <Text
+                style={[
+                    styles.loginHeroHeader,
+                    props.isMediumScreenWidth && StyleUtils.getFontSizeStyle(variables.fontSizeSignInHeroMedium),
+                    props.isLargeScreenWidth && StyleUtils.getFontSizeStyle(variables.fontSizeSignInHeroLarge),
+                ]}
+            >
+                {props.translate('login.hero.header')}
+            </Text>
+            <Text style={[styles.loginHeroBody]}>{props.translate('login.hero.body')}</Text>
+        </View>
+    );
+}
 
 SignInHeroCopy.displayName = 'SignInHeroCopy';
 SignInHeroCopy.propTypes = propTypes;
diff --git a/src/pages/signin/SignInHeroImage.js b/src/pages/signin/SignInHeroImage.js
index 24f1895ed5e0..9785a66a4003 100644
--- a/src/pages/signin/SignInHeroImage.js
+++ b/src/pages/signin/SignInHeroImage.js
@@ -9,7 +9,7 @@ const propTypes = {
     ...windowDimensionsPropTypes,
 };
 
-const SignInHeroImage = (props) => {
+function SignInHeroImage(props) {
     let imageSize;
     if (props.isSmallScreenWidth) {
         imageSize = {
@@ -36,7 +36,7 @@ const SignInHeroImage = (props) => {
             style={[styles.alignSelfCenter, imageSize]}
         />
     );
-};
+}
 
 SignInHeroImage.displayName = 'SignInHeroImage';
 SignInHeroImage.propTypes = propTypes;
diff --git a/src/pages/signin/SignInPageHero.js b/src/pages/signin/SignInPageHero.js
index 5475c75c36b6..3af7a8fb1a1e 100644
--- a/src/pages/signin/SignInPageHero.js
+++ b/src/pages/signin/SignInPageHero.js
@@ -11,23 +11,25 @@ const propTypes = {
     ...windowDimensionsPropTypes,
 };
 
-const SignInPageHero = (props) => (
-    <View
-        style={[
-            StyleUtils.getHeight(props.windowHeight < variables.signInContentMinHeight ? variables.signInContentMinHeight : props.windowHeight),
-            StyleUtils.getMinimumHeight(variables.signInContentMinHeight),
-            props.windowWidth <= variables.tabletResponsiveWidthBreakpoint ? styles.flexColumn : styles.flexColumn,
-            styles.pt20,
-            StyleUtils.getMaximumWidth(variables.signInHeroContextMaxWidth),
-            styles.alignSelfCenter,
-        ]}
-    >
-        <View style={[styles.flex1, styles.alignSelfCenter, styles.gap7]}>
-            <SignInHeroImage />
-            <SignInHeroCopy />
+function SignInPageHero(props) {
+    return (
+        <View
+            style={[
+                StyleUtils.getHeight(props.windowHeight < variables.signInContentMinHeight ? variables.signInContentMinHeight : props.windowHeight),
+                StyleUtils.getMinimumHeight(variables.signInContentMinHeight),
+                props.windowWidth <= variables.tabletResponsiveWidthBreakpoint ? styles.flexColumn : styles.flexColumn,
+                styles.pt20,
+                StyleUtils.getMaximumWidth(variables.signInHeroContextMaxWidth),
+                styles.alignSelfCenter,
+            ]}
+        >
+            <View style={[styles.flex1, styles.alignSelfCenter, styles.gap7]}>
+                <SignInHeroImage />
+                <SignInHeroCopy />
+            </View>
         </View>
-    </View>
-);
+    );
+}
 
 SignInPageHero.displayName = 'SignInPageHero';
 SignInPageHero.propTypes = propTypes;
diff --git a/src/pages/signin/SignInPageLayout/Footer.js b/src/pages/signin/SignInPageLayout/Footer.js
index fb58f5292dd6..a37654fe41ff 100644
--- a/src/pages/signin/SignInPageLayout/Footer.js
+++ b/src/pages/signin/SignInPageLayout/Footer.js
@@ -149,7 +149,7 @@ const columns = ({scrollPageToTop}) => [
     },
 ];
 
-const Footer = (props) => {
+function Footer(props) {
     const isVertical = props.isSmallScreenWidth;
     const imageDirection = isVertical ? styles.flexRow : styles.flexColumn;
     const imageStyle = isVertical ? styles.pr0 : styles.alignSelfCenter;
@@ -218,7 +218,7 @@ const Footer = (props) => {
             </View>
         </View>
     );
-};
+}
 
 Footer.propTypes = propTypes;
 Footer.displayName = 'Footer';
diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js
index a1fc645fb19d..bcadeaa6558f 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageContent.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js
@@ -36,54 +36,56 @@ const propTypes = {
     ...windowDimensionsPropTypes,
 };
 
-const SignInPageContent = (props) => (
-    <ScrollView
-        contentContainerStyle={[styles.flex1, styles.signInPageLeftContainer]}
-        keyboardShouldPersistTaps="handled"
-        style={[!props.isSmallScreenWidth && styles.signInPageLeftContainerWide, styles.flex1]}
-    >
-        <View style={[styles.flex1, styles.alignSelfCenter, styles.signInPageWelcomeFormContainer]}>
-            {/* This empty view creates margin on the top of the sign in form which will shrink and grow depending on if the keyboard is open or not */}
-            <View style={[styles.flexGrow1, styles.signInPageContentTopSpacer]} />
+function SignInPageContent(props) {
+    return (
+        <ScrollView
+            contentContainerStyle={[styles.flex1, styles.signInPageLeftContainer]}
+            keyboardShouldPersistTaps="handled"
+            style={[!props.isSmallScreenWidth && styles.signInPageLeftContainerWide, styles.flex1]}
+        >
+            <View style={[styles.flex1, styles.alignSelfCenter, styles.signInPageWelcomeFormContainer]}>
+                {/* This empty view creates margin on the top of the sign in form which will shrink and grow depending on if the keyboard is open or not */}
+                <View style={[styles.flexGrow1, styles.signInPageContentTopSpacer]} />
 
-            <View style={[styles.flexGrow2, styles.mb8]}>
-                <SignInPageForm style={[styles.alignSelfStretch]}>
-                    <View style={[props.isSmallScreenWidth ? styles.mb8 : styles.mb15, props.isSmallScreenWidth ? styles.alignItemsCenter : styles.alignSelfStart]}>
-                        <ExpensifyWordmark />
+                <View style={[styles.flexGrow2, styles.mb8]}>
+                    <SignInPageForm style={[styles.alignSelfStretch]}>
+                        <View style={[props.isSmallScreenWidth ? styles.mb8 : styles.mb15, props.isSmallScreenWidth ? styles.alignItemsCenter : styles.alignSelfStart]}>
+                            <ExpensifyWordmark />
+                        </View>
+                        <View style={[styles.signInPageWelcomeTextContainer]}>
+                            {props.shouldShowWelcomeHeader && props.welcomeHeader ? (
+                                <Text
+                                    style={[
+                                        styles.loginHeroHeader,
+                                        StyleUtils.getLineHeightStyle(variables.lineHeightSignInHeroXSmall),
+                                        StyleUtils.getFontSizeStyle(variables.fontSizeSignInHeroXSmall),
+                                        !props.welcomeText ? styles.mb5 : {},
+                                        !props.isSmallScreenWidth ? styles.textAlignLeft : {},
+                                        styles.mb5,
+                                    ]}
+                                >
+                                    {props.welcomeHeader}
+                                </Text>
+                            ) : null}
+                            {props.shouldShowWelcomeText && props.welcomeText ? (
+                                <Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !props.isSmallScreenWidth ? styles.textAlignLeft : {}]}>{props.welcomeText}</Text>
+                            ) : null}
+                        </View>
+                        {props.children}
+                    </SignInPageForm>
+                    <View style={[styles.mb8, styles.signInPageWelcomeTextContainer, styles.alignSelfCenter]}>
+                        <OfflineIndicator style={[styles.m0, styles.pl0, styles.alignItemsStart]} />
                     </View>
-                    <View style={[styles.signInPageWelcomeTextContainer]}>
-                        {props.shouldShowWelcomeHeader && props.welcomeHeader ? (
-                            <Text
-                                style={[
-                                    styles.loginHeroHeader,
-                                    StyleUtils.getLineHeightStyle(variables.lineHeightSignInHeroXSmall),
-                                    StyleUtils.getFontSizeStyle(variables.fontSizeSignInHeroXSmall),
-                                    !props.welcomeText ? styles.mb5 : {},
-                                    !props.isSmallScreenWidth ? styles.textAlignLeft : {},
-                                    styles.mb5,
-                                ]}
-                            >
-                                {props.welcomeHeader}
-                            </Text>
-                        ) : null}
-                        {props.shouldShowWelcomeText && props.welcomeText ? (
-                            <Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !props.isSmallScreenWidth ? styles.textAlignLeft : {}]}>{props.welcomeText}</Text>
-                        ) : null}
-                    </View>
-                    {props.children}
-                </SignInPageForm>
-                <View style={[styles.mb8, styles.signInPageWelcomeTextContainer, styles.alignSelfCenter]}>
-                    <OfflineIndicator style={[styles.m0, styles.pl0, styles.alignItemsStart]} />
+                    {props.isSmallScreenWidth ? (
+                        <View style={[styles.mt8]}>
+                            <SignInHeroImage />
+                        </View>
+                    ) : null}
                 </View>
-                {props.isSmallScreenWidth ? (
-                    <View style={[styles.mt8]}>
-                        <SignInHeroImage />
-                    </View>
-                ) : null}
             </View>
-        </View>
-    </ScrollView>
-);
+        </ScrollView>
+    );
+}
 
 SignInPageContent.propTypes = propTypes;
 SignInPageContent.displayName = 'SignInPageContent';
diff --git a/src/pages/signin/SignInPageLayout/SignInPageGraphics.js b/src/pages/signin/SignInPageLayout/SignInPageGraphics.js
index 5448b8024a7c..67f9dd62f7ec 100644
--- a/src/pages/signin/SignInPageLayout/SignInPageGraphics.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageGraphics.js
@@ -12,22 +12,24 @@ const propTypes = {
     ...windowDimensionsPropTypes,
 };
 
-const SignInPageGraphics = (props) => (
-    <Pressable
-        style={[StyleUtils.getHeight(props.windowHeight), StyleUtils.getBackgroundColorStyle(backgroundStyle.backgroundColor)]}
-        onPress={() => {
-            Link.openExternalLink(backgroundStyle.redirectUri);
-        }}
-        disabled={_.isEmpty(backgroundStyle.redirectUri)}
-    >
-        <SVGImage
-            width="100%"
-            height="100%"
-            src={backgroundStyle.backgroundImageUri}
-            resizeMode="contain"
-        />
-    </Pressable>
-);
+function SignInPageGraphics(props) {
+    return (
+        <Pressable
+            style={[StyleUtils.getHeight(props.windowHeight), StyleUtils.getBackgroundColorStyle(backgroundStyle.backgroundColor)]}
+            onPress={() => {
+                Link.openExternalLink(backgroundStyle.redirectUri);
+            }}
+            disabled={_.isEmpty(backgroundStyle.redirectUri)}
+        >
+            <SVGImage
+                width="100%"
+                height="100%"
+                src={backgroundStyle.backgroundImageUri}
+                resizeMode="contain"
+            />
+        </Pressable>
+    );
+}
 
 SignInPageGraphics.displayName = 'SignInPageGraphics';
 SignInPageGraphics.propTypes = propTypes;
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index 9466077f488e..954f8b2ebb8a 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -37,7 +37,7 @@ const propTypes = {
     ...windowDimensionsPropTypes,
 };
 
-const SignInPageLayout = (props) => {
+function SignInPageLayout(props) {
     const scrollViewRef = useRef();
     let containerStyles = [styles.flex1, styles.signInPageInner];
     let contentContainerStyles = [styles.flex1, styles.flexRow];
@@ -133,7 +133,7 @@ const SignInPageLayout = (props) => {
             )}
         </View>
     );
-};
+}
 
 SignInPageLayout.propTypes = propTypes;
 SignInPageLayout.displayName = 'SignInPageLayout';
diff --git a/src/pages/signin/Socials.js b/src/pages/signin/Socials.js
index 83c89e5fd617..52c21890c381 100644
--- a/src/pages/signin/Socials.js
+++ b/src/pages/signin/Socials.js
@@ -34,29 +34,31 @@ const socialsList = [
     },
 ];
 
-const Socials = () => (
-    <Text>
-        {_.map(socialsList, (social) => (
-            <Hoverable key={social.link}>
-                {(hovered) => (
-                    <View>
-                        <TextLink
-                            style={styles.pr1}
-                            href={social.link}
-                        >
-                            <Icon
-                                src={social.iconURL}
-                                height={variables.iconSizeLarge}
-                                width={variables.iconSizeLarge}
-                                fill={hovered ? themeColors.link : themeColors.textLight}
-                            />
-                        </TextLink>
-                    </View>
-                )}
-            </Hoverable>
-        ))}
-    </Text>
-);
+function Socials() {
+    return (
+        <Text>
+            {_.map(socialsList, (social) => (
+                <Hoverable key={social.link}>
+                    {(hovered) => (
+                        <View>
+                            <TextLink
+                                style={styles.pr1}
+                                href={social.link}
+                            >
+                                <Icon
+                                    src={social.iconURL}
+                                    height={variables.iconSizeLarge}
+                                    width={variables.iconSizeLarge}
+                                    fill={hovered ? themeColors.link : themeColors.textLight}
+                                />
+                            </TextLink>
+                        </View>
+                    )}
+                </Hoverable>
+            ))}
+        </Text>
+    );
+}
 
 Socials.displayName = 'Socials';
 
diff --git a/src/pages/signin/Terms.js b/src/pages/signin/Terms.js
index 0cd23d780812..15f7c17a2889 100644
--- a/src/pages/signin/Terms.js
+++ b/src/pages/signin/Terms.js
@@ -7,27 +7,29 @@ import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize
 
 const linkStyles = [styles.textExtraSmallSupporting, styles.link];
 
-const Terms = (props) => (
-    <Text style={[styles.textExtraSmallSupporting, styles.mb4]}>
-        {props.translate('termsOfUse.phrase1')}
-        <TextLink
-            style={linkStyles}
-            href={CONST.TERMS_URL}
-        >
-            {' '}
-            {props.translate('termsOfUse.phrase2')}{' '}
-        </TextLink>
-        {props.translate('termsOfUse.phrase3')}
-        <TextLink
-            style={linkStyles}
-            href={CONST.PRIVACY_URL}
-        >
-            {' '}
-            {props.translate('termsOfUse.phrase4')}
-        </TextLink>
-        {'. '}
-    </Text>
-);
+function Terms(props) {
+    return (
+        <Text style={[styles.textExtraSmallSupporting, styles.mb4]}>
+            {props.translate('termsOfUse.phrase1')}
+            <TextLink
+                style={linkStyles}
+                href={CONST.TERMS_URL}
+            >
+                {' '}
+                {props.translate('termsOfUse.phrase2')}{' '}
+            </TextLink>
+            {props.translate('termsOfUse.phrase3')}
+            <TextLink
+                style={linkStyles}
+                href={CONST.PRIVACY_URL}
+            >
+                {' '}
+                {props.translate('termsOfUse.phrase4')}
+            </TextLink>
+            {'. '}
+        </Text>
+    );
+}
 
 Terms.propTypes = {...withLocalizePropTypes};
 Terms.displayName = 'Terms';
diff --git a/src/pages/signin/UnlinkLoginForm.js b/src/pages/signin/UnlinkLoginForm.js
index af108e5bbecc..6807ba74c6f9 100644
--- a/src/pages/signin/UnlinkLoginForm.js
+++ b/src/pages/signin/UnlinkLoginForm.js
@@ -50,7 +50,7 @@ const defaultProps = {
     credentials: {},
 };
 
-const UnlinkLoginForm = (props) => {
+function UnlinkLoginForm(props) {
     const primaryLogin = Str.isSMSLogin(props.account.primaryLogin) ? Str.removeSMSDomain(props.account.primaryLogin) : props.account.primaryLogin;
     const secondaryLogin = Str.isSMSLogin(props.credentials.login) ? Str.removeSMSDomain(props.credentials.login) : props.credentials.login;
 
@@ -95,7 +95,7 @@ const UnlinkLoginForm = (props) => {
             </View>
         </>
     );
-};
+}
 
 UnlinkLoginForm.propTypes = propTypes;
 UnlinkLoginForm.defaultProps = defaultProps;
diff --git a/src/pages/signin/ValidateCodeForm/index.android.js b/src/pages/signin/ValidateCodeForm/index.android.js
index 4058ee49a7b9..e0258121fad0 100644
--- a/src/pages/signin/ValidateCodeForm/index.android.js
+++ b/src/pages/signin/ValidateCodeForm/index.android.js
@@ -9,12 +9,14 @@ const defaultProps = {
 const propTypes = {
     isVisible: PropTypes.bool,
 };
-const ValidateCodeForm = (props) => (
-    <BaseValidateCodeForm
-        isVisible={props.isVisible}
-        autoComplete="sms-otp"
-    />
-);
+function ValidateCodeForm(props) {
+    return (
+        <BaseValidateCodeForm
+            isVisible={props.isVisible}
+            autoComplete="sms-otp"
+        />
+    );
+}
 
 ValidateCodeForm.displayName = 'ValidateCodeForm';
 ValidateCodeForm.propTypes = propTypes;
diff --git a/src/pages/signin/ValidateCodeForm/index.js b/src/pages/signin/ValidateCodeForm/index.js
index 21122d391ffa..e60c30bff359 100644
--- a/src/pages/signin/ValidateCodeForm/index.js
+++ b/src/pages/signin/ValidateCodeForm/index.js
@@ -9,12 +9,14 @@ const defaultProps = {
 const propTypes = {
     isVisible: PropTypes.bool,
 };
-const ValidateCodeForm = (props) => (
-    <BaseValidateCodeForm
-        isVisible={props.isVisible}
-        autoComplete="one-time-code"
-    />
-);
+function ValidateCodeForm(props) {
+    return (
+        <BaseValidateCodeForm
+            isVisible={props.isVisible}
+            autoComplete="one-time-code"
+        />
+    );
+}
 
 ValidateCodeForm.displayName = 'ValidateCodeForm';
 ValidateCodeForm.propTypes = propTypes;
diff --git a/src/pages/tasks/NewTaskDescriptionPage.js b/src/pages/tasks/NewTaskDescriptionPage.js
index cb0bfd8c2871..0a1beaa5daf2 100644
--- a/src/pages/tasks/NewTaskDescriptionPage.js
+++ b/src/pages/tasks/NewTaskDescriptionPage.js
@@ -35,7 +35,7 @@ const defaultProps = {
     },
 };
 
-const NewTaskDescriptionPage = (props) => {
+function NewTaskDescriptionPage(props) {
     const inputRef = useRef(null);
 
     // On submit, we want to call the assignTask function and wait to validate
@@ -83,7 +83,7 @@ const NewTaskDescriptionPage = (props) => {
             </Form>
         </ScreenWrapper>
     );
-};
+}
 
 NewTaskDescriptionPage.displayName = 'NewTaskDescriptionPage';
 NewTaskDescriptionPage.propTypes = propTypes;
diff --git a/src/pages/tasks/NewTaskDetailsPage.js b/src/pages/tasks/NewTaskDetailsPage.js
index 383134c434bb..04f7edc613b2 100644
--- a/src/pages/tasks/NewTaskDetailsPage.js
+++ b/src/pages/tasks/NewTaskDetailsPage.js
@@ -34,7 +34,7 @@ const defaultProps = {
     task: {},
 };
 
-const NewTaskPage = (props) => {
+function NewTaskPage(props) {
     const inputRef = useRef();
     const [taskTitle, setTaskTitle] = useState(props.task.title);
     const [taskDescription, setTaskDescription] = useState(props.task.description || '');
@@ -109,7 +109,7 @@ const NewTaskPage = (props) => {
             </Form>
         </ScreenWrapper>
     );
-};
+}
 
 NewTaskPage.displayName = 'NewTaskPage';
 NewTaskPage.propTypes = propTypes;
diff --git a/src/pages/tasks/NewTaskPage.js b/src/pages/tasks/NewTaskPage.js
index 99fb6dbc5811..4a53921ce8f6 100644
--- a/src/pages/tasks/NewTaskPage.js
+++ b/src/pages/tasks/NewTaskPage.js
@@ -66,7 +66,7 @@ const defaultProps = {
     session: {},
 };
 
-const NewTaskPage = (props) => {
+function NewTaskPage(props) {
     const [assignee, setAssignee] = React.useState({});
     const [shareDestination, setShareDestination] = React.useState({});
     const [errorMessage, setErrorMessage] = React.useState('');
@@ -184,7 +184,7 @@ const NewTaskPage = (props) => {
             </View>
         </ScreenWrapper>
     );
-};
+}
 
 NewTaskPage.displayName = 'NewTaskPage';
 NewTaskPage.propTypes = propTypes;
diff --git a/src/pages/tasks/NewTaskTitlePage.js b/src/pages/tasks/NewTaskTitlePage.js
index 82e5b14a9e3e..1e232b637de3 100644
--- a/src/pages/tasks/NewTaskTitlePage.js
+++ b/src/pages/tasks/NewTaskTitlePage.js
@@ -36,7 +36,7 @@ const defaultProps = {
     },
 };
 
-const NewTaskTitlePage = (props) => {
+function NewTaskTitlePage(props) {
     const inputRef = useRef(null);
 
     /**
@@ -101,7 +101,7 @@ const NewTaskTitlePage = (props) => {
             </Form>
         </ScreenWrapper>
     );
-};
+}
 
 NewTaskTitlePage.displayName = 'NewTaskTitlePage';
 NewTaskTitlePage.propTypes = propTypes;
diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.js b/src/pages/tasks/TaskAssigneeSelectorModal.js
index e95f6143f904..e1d5a4b5a599 100644
--- a/src/pages/tasks/TaskAssigneeSelectorModal.js
+++ b/src/pages/tasks/TaskAssigneeSelectorModal.js
@@ -69,7 +69,7 @@ const defaultProps = {
     task: {},
 };
 
-const TaskAssigneeSelectorModal = (props) => {
+function TaskAssigneeSelectorModal(props) {
     const [searchValue, setSearchValue] = useState('');
     const [headerMessage, setHeaderMessage] = useState('');
     const [filteredRecentReports, setFilteredRecentReports] = useState([]);
@@ -216,7 +216,7 @@ const TaskAssigneeSelectorModal = (props) => {
             )}
         </ScreenWrapper>
     );
-};
+}
 
 TaskAssigneeSelectorModal.displayName = 'TaskAssigneeSelectorModal';
 TaskAssigneeSelectorModal.propTypes = propTypes;
diff --git a/src/pages/tasks/TaskShareDestinationSelectorModal.js b/src/pages/tasks/TaskShareDestinationSelectorModal.js
index ed4fadd906d9..2073ca92a233 100644
--- a/src/pages/tasks/TaskShareDestinationSelectorModal.js
+++ b/src/pages/tasks/TaskShareDestinationSelectorModal.js
@@ -41,7 +41,7 @@ const defaultProps = {
     reports: {},
 };
 
-const TaskShareDestinationSelectorModal = (props) => {
+function TaskShareDestinationSelectorModal(props) {
     const [searchValue, setSearchValue] = useState('');
     const [headerMessage, setHeaderMessage] = useState('');
     const [filteredRecentReports, setFilteredRecentReports] = useState([]);
@@ -169,7 +169,7 @@ const TaskShareDestinationSelectorModal = (props) => {
             )}
         </ScreenWrapper>
     );
-};
+}
 
 TaskShareDestinationSelectorModal.displayName = 'TaskShareDestinationSelectorModal';
 TaskShareDestinationSelectorModal.propTypes = propTypes;
diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js
index e08ee256ca3c..7ced21b0e833 100644
--- a/src/pages/workspace/WorkspaceInitialPage.js
+++ b/src/pages/workspace/WorkspaceInitialPage.js
@@ -64,7 +64,7 @@ function dismissError(policyID) {
     Policy.removeWorkspace(policyID);
 }
 
-const WorkspaceInitialPage = (props) => {
+function WorkspaceInitialPage(props) {
     const policy = props.policy;
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
     const hasPolicyCreationError = Boolean(policy.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD && policy.errors);
@@ -256,7 +256,7 @@ const WorkspaceInitialPage = (props) => {
             )}
         </ScreenWrapper>
     );
-};
+}
 
 WorkspaceInitialPage.propTypes = propTypes;
 WorkspaceInitialPage.defaultProps = defaultProps;
diff --git a/src/pages/workspace/WorkspaceResetBankAccountModal.js b/src/pages/workspace/WorkspaceResetBankAccountModal.js
index 56d1fad3b1f8..d790a2503185 100644
--- a/src/pages/workspace/WorkspaceResetBankAccountModal.js
+++ b/src/pages/workspace/WorkspaceResetBankAccountModal.js
@@ -15,7 +15,7 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-const WorkspaceResetBankAccountModal = (props) => {
+function WorkspaceResetBankAccountModal(props) {
     const achData = lodashGet(props.reimbursementAccount, 'achData') || {};
     const isInOpenState = achData.state === BankAccount.STATE.OPEN;
     const bankAccountID = achData.bankAccountID;
@@ -44,7 +44,7 @@ const WorkspaceResetBankAccountModal = (props) => {
             isVisible
         />
     );
-};
+}
 
 WorkspaceResetBankAccountModal.displayName = 'WorkspaceResetBankAccountModal';
 WorkspaceResetBankAccountModal.propTypes = propTypes;
diff --git a/src/pages/workspace/bills/WorkspaceBillsFirstSection.js b/src/pages/workspace/bills/WorkspaceBillsFirstSection.js
index 12cfa47aee11..b0fc0e99c8f9 100644
--- a/src/pages/workspace/bills/WorkspaceBillsFirstSection.js
+++ b/src/pages/workspace/bills/WorkspaceBillsFirstSection.js
@@ -40,7 +40,7 @@ const defaultProps = {
     user: {},
 };
 
-const WorkspaceBillsFirstSection = (props) => {
+function WorkspaceBillsFirstSection(props) {
     const emailDomain = Str.extractEmailDomain(props.session.email);
     const manageYourBillsUrl = `reports?policyID=${props.policyID}&from=all&type=bill&showStates=Open,Processing,Approved,Reimbursed,Archived&isAdvancedFilterMode=true`;
     return (
@@ -78,7 +78,7 @@ const WorkspaceBillsFirstSection = (props) => {
             </View>
         </Section>
     );
-};
+}
 
 WorkspaceBillsFirstSection.propTypes = propTypes;
 WorkspaceBillsFirstSection.defaultProps = defaultProps;
diff --git a/src/pages/workspace/bills/WorkspaceBillsNoVBAView.js b/src/pages/workspace/bills/WorkspaceBillsNoVBAView.js
index 5022eb0c170c..e99d157a4733 100644
--- a/src/pages/workspace/bills/WorkspaceBillsNoVBAView.js
+++ b/src/pages/workspace/bills/WorkspaceBillsNoVBAView.js
@@ -18,31 +18,33 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-const WorkspaceBillsNoVBAView = (props) => (
-    <>
-        <WorkspaceBillsFirstSection policyID={props.policyID} />
+function WorkspaceBillsNoVBAView(props) {
+    return (
+        <>
+            <WorkspaceBillsFirstSection policyID={props.policyID} />
 
-        <Section
-            title={props.translate('workspace.bills.unlockOnlineBillPayment')}
-            icon={Illustrations.LockOpen}
-            containerStyles={[styles.cardSection]}
-        >
-            <View style={[styles.mv3]}>
-                <Text>{props.translate('workspace.bills.unlockNoVBACopy')}</Text>
-            </View>
-            <Button
-                text={props.translate('workspace.common.connectBankAccount')}
-                onPress={() => ReimbursementAccount.navigateToBankAccountRoute(props.policyID)}
-                icon={Expensicons.Bank}
-                style={[styles.mt4]}
-                iconStyles={[styles.buttonCTAIcon]}
-                shouldShowRightIcon
-                large
-                success
-            />
-        </Section>
-    </>
-);
+            <Section
+                title={props.translate('workspace.bills.unlockOnlineBillPayment')}
+                icon={Illustrations.LockOpen}
+                containerStyles={[styles.cardSection]}
+            >
+                <View style={[styles.mv3]}>
+                    <Text>{props.translate('workspace.bills.unlockNoVBACopy')}</Text>
+                </View>
+                <Button
+                    text={props.translate('workspace.common.connectBankAccount')}
+                    onPress={() => ReimbursementAccount.navigateToBankAccountRoute(props.policyID)}
+                    icon={Expensicons.Bank}
+                    style={[styles.mt4]}
+                    iconStyles={[styles.buttonCTAIcon]}
+                    shouldShowRightIcon
+                    large
+                    success
+                />
+            </Section>
+        </>
+    );
+}
 
 WorkspaceBillsNoVBAView.propTypes = propTypes;
 WorkspaceBillsNoVBAView.displayName = 'WorkspaceBillsNoVBAView';
diff --git a/src/pages/workspace/bills/WorkspaceBillsPage.js b/src/pages/workspace/bills/WorkspaceBillsPage.js
index 713db314a2c7..5cb590895e0d 100644
--- a/src/pages/workspace/bills/WorkspaceBillsPage.js
+++ b/src/pages/workspace/bills/WorkspaceBillsPage.js
@@ -19,21 +19,23 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-const WorkspaceBillsPage = (props) => (
-    <WorkspacePageWithSections
-        shouldUseScrollView
-        headerText={props.translate('workspace.common.bills')}
-        route={props.route}
-        guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BILLS}
-    >
-        {(hasVBA, policyID) => (
-            <>
-                {!hasVBA && <WorkspaceBillsNoVBAView policyID={policyID} />}
-                {hasVBA && <WorkspaceBillsVBAView policyID={policyID} />}
-            </>
-        )}
-    </WorkspacePageWithSections>
-);
+function WorkspaceBillsPage(props) {
+    return (
+        <WorkspacePageWithSections
+            shouldUseScrollView
+            headerText={props.translate('workspace.common.bills')}
+            route={props.route}
+            guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BILLS}
+        >
+            {(hasVBA, policyID) => (
+                <>
+                    {!hasVBA && <WorkspaceBillsNoVBAView policyID={policyID} />}
+                    {hasVBA && <WorkspaceBillsVBAView policyID={policyID} />}
+                </>
+            )}
+        </WorkspacePageWithSections>
+    );
+}
 
 WorkspaceBillsPage.propTypes = propTypes;
 WorkspaceBillsPage.displayName = 'WorkspaceBillsPage';
diff --git a/src/pages/workspace/bills/WorkspaceBillsVBAView.js b/src/pages/workspace/bills/WorkspaceBillsVBAView.js
index dcb625777c7d..c35b3400e7d1 100644
--- a/src/pages/workspace/bills/WorkspaceBillsVBAView.js
+++ b/src/pages/workspace/bills/WorkspaceBillsVBAView.js
@@ -17,7 +17,7 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-const WorkspaceBillsVBAView = (props) => {
+function WorkspaceBillsVBAView(props) {
     const reportsUrl = `reports?policyID=${props.policyID}&from=all&type=bill&showStates=Processing,Approved&isAdvancedFilterMode=true`;
 
     return (
@@ -45,7 +45,7 @@ const WorkspaceBillsVBAView = (props) => {
             </Section>
         </>
     );
-};
+}
 
 WorkspaceBillsVBAView.propTypes = propTypes;
 WorkspaceBillsVBAView.displayName = 'WorkspaceBillsVBAView';
diff --git a/src/pages/workspace/card/WorkspaceCardNoVBAView.js b/src/pages/workspace/card/WorkspaceCardNoVBAView.js
index ed7ecea68d66..da93946a6191 100644
--- a/src/pages/workspace/card/WorkspaceCardNoVBAView.js
+++ b/src/pages/workspace/card/WorkspaceCardNoVBAView.js
@@ -18,35 +18,37 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-const WorkspaceCardNoVBAView = (props) => (
-    <Section
-        title={props.translate('workspace.card.header')}
-        icon={Illustrations.CreditCardsNew}
-    >
-        <View style={[styles.mv4]}>
-            <Text>{props.translate('workspace.card.noVBACopy')}</Text>
-        </View>
+function WorkspaceCardNoVBAView(props) {
+    return (
+        <Section
+            title={props.translate('workspace.card.header')}
+            icon={Illustrations.CreditCardsNew}
+        >
+            <View style={[styles.mv4]}>
+                <Text>{props.translate('workspace.card.noVBACopy')}</Text>
+            </View>
 
-        <UnorderedList
-            items={[
-                props.translate('workspace.card.benefit1'),
-                props.translate('workspace.card.benefit2'),
-                props.translate('workspace.card.benefit3'),
-                props.translate('workspace.card.benefit4'),
-            ]}
-        />
-        <Button
-            text={props.translate('workspace.common.connectBankAccount')}
-            onPress={() => ReimbursementAccount.navigateToBankAccountRoute(props.policyID)}
-            icon={Expensicons.Bank}
-            style={[styles.mt6]}
-            iconStyles={[styles.mr5]}
-            shouldShowRightIcon
-            large
-            success
-        />
-    </Section>
-);
+            <UnorderedList
+                items={[
+                    props.translate('workspace.card.benefit1'),
+                    props.translate('workspace.card.benefit2'),
+                    props.translate('workspace.card.benefit3'),
+                    props.translate('workspace.card.benefit4'),
+                ]}
+            />
+            <Button
+                text={props.translate('workspace.common.connectBankAccount')}
+                onPress={() => ReimbursementAccount.navigateToBankAccountRoute(props.policyID)}
+                icon={Expensicons.Bank}
+                style={[styles.mt6]}
+                iconStyles={[styles.mr5]}
+                shouldShowRightIcon
+                large
+                success
+            />
+        </Section>
+    );
+}
 
 WorkspaceCardNoVBAView.propTypes = propTypes;
 WorkspaceCardNoVBAView.displayName = 'WorkspaceCardNoVBAView';
diff --git a/src/pages/workspace/card/WorkspaceCardPage.js b/src/pages/workspace/card/WorkspaceCardPage.js
index 1b2e0915eb56..2f5527c49cf0 100644
--- a/src/pages/workspace/card/WorkspaceCardPage.js
+++ b/src/pages/workspace/card/WorkspaceCardPage.js
@@ -20,24 +20,26 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-const WorkspaceCardPage = (props) => (
-    <WorkspacePageWithSections
-        shouldUseScrollView
-        headerText={props.translate('workspace.common.card')}
-        route={props.route}
-        guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_CARD}
-    >
-        {(hasVBA, policyID, isUsingECard) => (
-            <>
-                {!hasVBA && <WorkspaceCardNoVBAView policyID={policyID} />}
+function WorkspaceCardPage(props) {
+    return (
+        <WorkspacePageWithSections
+            shouldUseScrollView
+            headerText={props.translate('workspace.common.card')}
+            route={props.route}
+            guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_CARD}
+        >
+            {(hasVBA, policyID, isUsingECard) => (
+                <>
+                    {!hasVBA && <WorkspaceCardNoVBAView policyID={policyID} />}
 
-                {hasVBA && !isUsingECard && <WorkspaceCardVBANoECardView />}
+                    {hasVBA && !isUsingECard && <WorkspaceCardVBANoECardView />}
 
-                {hasVBA && isUsingECard && <WorkspaceCardVBAWithECardView />}
-            </>
-        )}
-    </WorkspacePageWithSections>
-);
+                    {hasVBA && isUsingECard && <WorkspaceCardVBAWithECardView />}
+                </>
+            )}
+        </WorkspacePageWithSections>
+    );
+}
 
 WorkspaceCardPage.propTypes = propTypes;
 WorkspaceCardPage.displayName = 'WorkspaceCardPage';
diff --git a/src/pages/workspace/card/WorkspaceCardVBANoECardView.js b/src/pages/workspace/card/WorkspaceCardVBANoECardView.js
index d68d3099fc53..5c93b8858de4 100644
--- a/src/pages/workspace/card/WorkspaceCardVBANoECardView.js
+++ b/src/pages/workspace/card/WorkspaceCardVBANoECardView.js
@@ -26,38 +26,40 @@ const defaultProps = {
     user: {},
 };
 
-const WorkspaceCardVBANoECardView = (props) => (
-    <>
-        <Section
-            title={props.translate('workspace.card.header')}
-            icon={Illustrations.CreditCardsNew}
-        >
-            <View style={[styles.mv3]}>
-                <UnorderedList
-                    items={[
-                        props.translate('workspace.card.benefit1'),
-                        props.translate('workspace.card.benefit2'),
-                        props.translate('workspace.card.benefit3'),
-                        props.translate('workspace.card.benefit4'),
-                    ]}
+function WorkspaceCardVBANoECardView(props) {
+    return (
+        <>
+            <Section
+                title={props.translate('workspace.card.header')}
+                icon={Illustrations.CreditCardsNew}
+            >
+                <View style={[styles.mv3]}>
+                    <UnorderedList
+                        items={[
+                            props.translate('workspace.card.benefit1'),
+                            props.translate('workspace.card.benefit2'),
+                            props.translate('workspace.card.benefit3'),
+                            props.translate('workspace.card.benefit4'),
+                        ]}
+                    />
+                </View>
+                <Button
+                    text={props.translate('workspace.card.addWorkEmail')}
+                    onPress={() => {
+                        Link.openOldDotLink(CONST.ADD_SECONDARY_LOGIN_URL);
+                    }}
+                    icon={Expensicons.Mail}
+                    style={[styles.mt4]}
+                    iconStyles={[styles.buttonCTAIcon]}
+                    shouldShowRightIcon
+                    large
+                    success
                 />
-            </View>
-            <Button
-                text={props.translate('workspace.card.addWorkEmail')}
-                onPress={() => {
-                    Link.openOldDotLink(CONST.ADD_SECONDARY_LOGIN_URL);
-                }}
-                icon={Expensicons.Mail}
-                style={[styles.mt4]}
-                iconStyles={[styles.buttonCTAIcon]}
-                shouldShowRightIcon
-                large
-                success
-            />
-        </Section>
-        {Boolean(props.user.isCheckingDomain) && <Text style={[styles.m5, styles.formError]}>{props.translate('workspace.card.checkingDomain')}</Text>}
-    </>
-);
+            </Section>
+            {Boolean(props.user.isCheckingDomain) && <Text style={[styles.m5, styles.formError]}>{props.translate('workspace.card.checkingDomain')}</Text>}
+        </>
+    );
+}
 
 WorkspaceCardVBANoECardView.propTypes = propTypes;
 WorkspaceCardVBANoECardView.defaultProps = defaultProps;
diff --git a/src/pages/workspace/card/WorkspaceCardVBAWithECardView.js b/src/pages/workspace/card/WorkspaceCardVBAWithECardView.js
index 4c1213800bac..7f9971f00c1b 100644
--- a/src/pages/workspace/card/WorkspaceCardVBAWithECardView.js
+++ b/src/pages/workspace/card/WorkspaceCardVBAWithECardView.js
@@ -19,7 +19,7 @@ const MENU_LINKS = {
     SETTLEMENT_FREQUENCY: encodeURI('domain_companycards?param={"section":"configureSettings"}'),
 };
 
-const WorkspaceCardVBAWithECardView = (props) => {
+function WorkspaceCardVBAWithECardView(props) {
     const menuItems = [
         {
             title: props.translate('workspace.common.issueAndManageCards'),
@@ -72,7 +72,7 @@ const WorkspaceCardVBAWithECardView = (props) => {
             </View>
         </Section>
     );
-};
+}
 
 WorkspaceCardVBAWithECardView.propTypes = propTypes;
 WorkspaceCardVBAWithECardView.displayName = 'WorkspaceCardVBAWithECardView';
diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesFirstSection.js b/src/pages/workspace/invoices/WorkspaceInvoicesFirstSection.js
index 45d28325d913..7c47476e1c7b 100644
--- a/src/pages/workspace/invoices/WorkspaceInvoicesFirstSection.js
+++ b/src/pages/workspace/invoices/WorkspaceInvoicesFirstSection.js
@@ -16,7 +16,7 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-const WorkspaceInvoicesFirstSection = (props) => {
+function WorkspaceInvoicesFirstSection(props) {
     const sendInvoiceUrl = encodeURI('reports?param={"createInvoice":true}');
     const viewAllInvoicesUrl = `reports?policyID=${props.policyID}&from=all&type=invoice&showStates=Open,Processing,Approved,Reimbursed,Archived&isAdvancedFilterMode=true`;
 
@@ -51,7 +51,7 @@ const WorkspaceInvoicesFirstSection = (props) => {
             </View>
         </Section>
     );
-};
+}
 
 WorkspaceInvoicesFirstSection.propTypes = propTypes;
 WorkspaceInvoicesFirstSection.displayName = 'WorkspaceInvoicesFirstSection';
diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.js b/src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.js
index 291011f5502b..c37e739c3b97 100644
--- a/src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.js
+++ b/src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.js
@@ -18,31 +18,33 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-const WorkspaceInvoicesNoVBAView = (props) => (
-    <>
-        <WorkspaceInvoicesFirstSection policyID={props.policyID} />
+function WorkspaceInvoicesNoVBAView(props) {
+    return (
+        <>
+            <WorkspaceInvoicesFirstSection policyID={props.policyID} />
 
-        <Section
-            title={props.translate('workspace.invoices.unlockOnlineInvoiceCollection')}
-            icon={Illustrations.MoneyIntoWallet}
-            containerStyles={[styles.cardSection]}
-        >
-            <View style={[styles.mv3]}>
-                <Text>{props.translate('workspace.invoices.unlockNoVBACopy')}</Text>
-            </View>
-            <Button
-                text={props.translate('workspace.common.connectBankAccount')}
-                onPress={() => ReimbursementAccount.navigateToBankAccountRoute(props.policyID)}
-                icon={Expensicons.Bank}
-                style={[styles.mt4]}
-                iconStyles={[styles.buttonCTAIcon]}
-                shouldShowRightIcon
-                large
-                success
-            />
-        </Section>
-    </>
-);
+            <Section
+                title={props.translate('workspace.invoices.unlockOnlineInvoiceCollection')}
+                icon={Illustrations.MoneyIntoWallet}
+                containerStyles={[styles.cardSection]}
+            >
+                <View style={[styles.mv3]}>
+                    <Text>{props.translate('workspace.invoices.unlockNoVBACopy')}</Text>
+                </View>
+                <Button
+                    text={props.translate('workspace.common.connectBankAccount')}
+                    onPress={() => ReimbursementAccount.navigateToBankAccountRoute(props.policyID)}
+                    icon={Expensicons.Bank}
+                    style={[styles.mt4]}
+                    iconStyles={[styles.buttonCTAIcon]}
+                    shouldShowRightIcon
+                    large
+                    success
+                />
+            </Section>
+        </>
+    );
+}
 
 WorkspaceInvoicesNoVBAView.propTypes = propTypes;
 WorkspaceInvoicesNoVBAView.displayName = 'WorkspaceInvoicesNoVBAView';
diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesPage.js b/src/pages/workspace/invoices/WorkspaceInvoicesPage.js
index 4273f8a6513a..bfc1988211ce 100644
--- a/src/pages/workspace/invoices/WorkspaceInvoicesPage.js
+++ b/src/pages/workspace/invoices/WorkspaceInvoicesPage.js
@@ -19,21 +19,23 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-const WorkspaceInvoicesPage = (props) => (
-    <WorkspacePageWithSections
-        shouldUseScrollView
-        headerText={props.translate('workspace.common.invoices')}
-        route={props.route}
-        guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_INVOICES}
-    >
-        {(hasVBA, policyID) => (
-            <>
-                {!hasVBA && <WorkspaceInvoicesNoVBAView policyID={policyID} />}
-                {hasVBA && <WorkspaceInvoicesVBAView policyID={policyID} />}
-            </>
-        )}
-    </WorkspacePageWithSections>
-);
+function WorkspaceInvoicesPage(props) {
+    return (
+        <WorkspacePageWithSections
+            shouldUseScrollView
+            headerText={props.translate('workspace.common.invoices')}
+            route={props.route}
+            guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_INVOICES}
+        >
+            {(hasVBA, policyID) => (
+                <>
+                    {!hasVBA && <WorkspaceInvoicesNoVBAView policyID={policyID} />}
+                    {hasVBA && <WorkspaceInvoicesVBAView policyID={policyID} />}
+                </>
+            )}
+        </WorkspacePageWithSections>
+    );
+}
 
 WorkspaceInvoicesPage.propTypes = propTypes;
 WorkspaceInvoicesPage.displayName = 'WorkspaceInvoicesPage';
diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesVBAView.js b/src/pages/workspace/invoices/WorkspaceInvoicesVBAView.js
index c4f50bb9d49d..0f7dd8b340fc 100644
--- a/src/pages/workspace/invoices/WorkspaceInvoicesVBAView.js
+++ b/src/pages/workspace/invoices/WorkspaceInvoicesVBAView.js
@@ -17,7 +17,7 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-const WorkspaceInvoicesVBAView = (props) => {
+function WorkspaceInvoicesVBAView(props) {
     const viewUnpaidInvoicesUrl = `reports?policyID=${props.policyID}&from=all&type=invoice&showStates=Processing&isAdvancedFilterMode=true`;
 
     return (
@@ -45,7 +45,7 @@ const WorkspaceInvoicesVBAView = (props) => {
             </Section>
         </>
     );
-};
+}
 
 WorkspaceInvoicesVBAView.propTypes = propTypes;
 WorkspaceInvoicesVBAView.displayName = 'WorkspaceInvoicesVBAView';
diff --git a/src/pages/workspace/reimburse/WorkspaceReimbursePage.js b/src/pages/workspace/reimburse/WorkspaceReimbursePage.js
index 61056569f8fa..9d1495c2a11f 100644
--- a/src/pages/workspace/reimburse/WorkspaceReimbursePage.js
+++ b/src/pages/workspace/reimburse/WorkspaceReimbursePage.js
@@ -21,17 +21,19 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-const WorkspaceReimbursePage = (props) => (
-    <WorkspacePageWithSections
-        shouldUseScrollView
-        headerText={props.translate('workspace.common.reimburse')}
-        route={props.route}
-        guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_REIMBURSE}
-        shouldSkipVBBACall
-    >
-        {() => <WorkspaceReimburseView policy={props.policy} />}
-    </WorkspacePageWithSections>
-);
+function WorkspaceReimbursePage(props) {
+    return (
+        <WorkspacePageWithSections
+            shouldUseScrollView
+            headerText={props.translate('workspace.common.reimburse')}
+            route={props.route}
+            guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_REIMBURSE}
+            shouldSkipVBBACall
+        >
+            {() => <WorkspaceReimburseView policy={props.policy} />}
+        </WorkspacePageWithSections>
+    );
+}
 
 WorkspaceReimbursePage.propTypes = propTypes;
 WorkspaceReimbursePage.displayName = 'WorkspaceReimbursePage';
diff --git a/src/pages/workspace/travel/WorkspaceTravelNoVBAView.js b/src/pages/workspace/travel/WorkspaceTravelNoVBAView.js
index 33758f9ecebf..8716ee930206 100644
--- a/src/pages/workspace/travel/WorkspaceTravelNoVBAView.js
+++ b/src/pages/workspace/travel/WorkspaceTravelNoVBAView.js
@@ -17,28 +17,30 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-const WorkspaceTravelNoVBAView = (props) => (
-    <>
-        <Section
-            title={props.translate('workspace.travel.unlockConciergeBookingTravel')}
-            icon={Illustrations.Luggage}
-        >
-            <View style={[styles.mv3]}>
-                <Text>{props.translate('workspace.travel.noVBACopy')}</Text>
-            </View>
-            <Button
-                text={props.translate('workspace.common.connectBankAccount')}
-                onPress={() => ReimbursementAccount.navigateToBankAccountRoute(props.policyID)}
-                icon={Expensicons.Bank}
-                style={[styles.mt4]}
-                iconStyles={[styles.buttonCTAIcon]}
-                shouldShowRightIcon
-                large
-                success
-            />
-        </Section>
-    </>
-);
+function WorkspaceTravelNoVBAView(props) {
+    return (
+        <>
+            <Section
+                title={props.translate('workspace.travel.unlockConciergeBookingTravel')}
+                icon={Illustrations.Luggage}
+            >
+                <View style={[styles.mv3]}>
+                    <Text>{props.translate('workspace.travel.noVBACopy')}</Text>
+                </View>
+                <Button
+                    text={props.translate('workspace.common.connectBankAccount')}
+                    onPress={() => ReimbursementAccount.navigateToBankAccountRoute(props.policyID)}
+                    icon={Expensicons.Bank}
+                    style={[styles.mt4]}
+                    iconStyles={[styles.buttonCTAIcon]}
+                    shouldShowRightIcon
+                    large
+                    success
+                />
+            </Section>
+        </>
+    );
+}
 
 WorkspaceTravelNoVBAView.propTypes = propTypes;
 WorkspaceTravelNoVBAView.displayName = 'WorkspaceTravelNoVBAView';
diff --git a/src/pages/workspace/travel/WorkspaceTravelPage.js b/src/pages/workspace/travel/WorkspaceTravelPage.js
index 1fc0e196aa20..8f8a174a5876 100644
--- a/src/pages/workspace/travel/WorkspaceTravelPage.js
+++ b/src/pages/workspace/travel/WorkspaceTravelPage.js
@@ -19,21 +19,23 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-const WorkspaceTravelPage = (props) => (
-    <WorkspacePageWithSections
-        shouldUseScrollView
-        headerText={props.translate('workspace.common.travel')}
-        route={props.route}
-        guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_TRAVEL}
-    >
-        {(hasVBA, policyID) => (
-            <>
-                {!hasVBA && <WorkspaceTravelNoVBAView policyID={policyID} />}
-                {hasVBA && <WorkspaceTravelVBAView />}
-            </>
-        )}
-    </WorkspacePageWithSections>
-);
+function WorkspaceTravelPage(props) {
+    return (
+        <WorkspacePageWithSections
+            shouldUseScrollView
+            headerText={props.translate('workspace.common.travel')}
+            route={props.route}
+            guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_TRAVEL}
+        >
+            {(hasVBA, policyID) => (
+                <>
+                    {!hasVBA && <WorkspaceTravelNoVBAView policyID={policyID} />}
+                    {hasVBA && <WorkspaceTravelVBAView />}
+                </>
+            )}
+        </WorkspacePageWithSections>
+    );
+}
 
 WorkspaceTravelPage.propTypes = propTypes;
 WorkspaceTravelPage.displayName = 'WorkspaceTravelPage';
diff --git a/src/pages/workspace/travel/WorkspaceTravelVBAView.js b/src/pages/workspace/travel/WorkspaceTravelVBAView.js
index 527783dcb209..8156b0334b3d 100644
--- a/src/pages/workspace/travel/WorkspaceTravelVBAView.js
+++ b/src/pages/workspace/travel/WorkspaceTravelVBAView.js
@@ -14,45 +14,47 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-const WorkspaceTravelVBAView = (props) => (
-    <Section
-        title={props.translate('workspace.travel.packYourBags')}
-        icon={Illustrations.Luggage}
-        menuItems={[
-            {
-                title: props.translate('workspace.common.issueAndManageCards'),
-                onPress: () => Link.openOldDotLink('domain_companycards'),
-                icon: Expensicons.ExpensifyCard,
-                shouldShowRightIcon: true,
-                iconRight: Expensicons.NewWindow,
-                wrapperStyle: [styles.cardMenuItem],
-                link: () => Link.buildOldDotURL('domain_companycards'),
-            },
-            {
-                title: props.translate('workspace.travel.bookTravelWithConcierge'),
-                onPress: () => {
-                    Report.navigateToConciergeChat();
+function WorkspaceTravelVBAView(props) {
+    return (
+        <Section
+            title={props.translate('workspace.travel.packYourBags')}
+            icon={Illustrations.Luggage}
+            menuItems={[
+                {
+                    title: props.translate('workspace.common.issueAndManageCards'),
+                    onPress: () => Link.openOldDotLink('domain_companycards'),
+                    icon: Expensicons.ExpensifyCard,
+                    shouldShowRightIcon: true,
+                    iconRight: Expensicons.NewWindow,
+                    wrapperStyle: [styles.cardMenuItem],
+                    link: () => Link.buildOldDotURL('domain_companycards'),
                 },
-                icon: Expensicons.Concierge,
-                shouldShowRightIcon: true,
-                wrapperStyle: [styles.cardMenuItem],
-            },
-            {
-                title: props.translate('requestorStep.learnMore'),
-                onPress: () => Link.openExternalLink(CONST.CONCIERGE_TRAVEL_URL),
-                icon: Expensicons.Info,
-                shouldShowRightIcon: true,
-                iconRight: Expensicons.NewWindow,
-                wrapperStyle: [styles.cardMenuItem],
-                link: CONST.CONCIERGE_TRAVEL_URL,
-            },
-        ]}
-    >
-        <View style={[styles.mv3]}>
-            <Text>{props.translate('workspace.travel.VBACopy')}</Text>
-        </View>
-    </Section>
-);
+                {
+                    title: props.translate('workspace.travel.bookTravelWithConcierge'),
+                    onPress: () => {
+                        Report.navigateToConciergeChat();
+                    },
+                    icon: Expensicons.Concierge,
+                    shouldShowRightIcon: true,
+                    wrapperStyle: [styles.cardMenuItem],
+                },
+                {
+                    title: props.translate('requestorStep.learnMore'),
+                    onPress: () => Link.openExternalLink(CONST.CONCIERGE_TRAVEL_URL),
+                    icon: Expensicons.Info,
+                    shouldShowRightIcon: true,
+                    iconRight: Expensicons.NewWindow,
+                    wrapperStyle: [styles.cardMenuItem],
+                    link: CONST.CONCIERGE_TRAVEL_URL,
+                },
+            ]}
+        >
+            <View style={[styles.mv3]}>
+                <Text>{props.translate('workspace.travel.VBACopy')}</Text>
+            </View>
+        </Section>
+    );
+}
 
 WorkspaceTravelVBAView.propTypes = propTypes;
 WorkspaceTravelVBAView.displayName = 'WorkspaceTravelVBAView';
diff --git a/src/pages/workspace/withPolicy.js b/src/pages/workspace/withPolicy.js
index 4458cc45ece9..17a7f0efc72d 100644
--- a/src/pages/workspace/withPolicy.js
+++ b/src/pages/workspace/withPolicy.js
@@ -84,7 +84,7 @@ export default function (WrappedComponent) {
         ...policyDefaultProps,
     };
 
-    const WithPolicy = (props) => {
+    function WithPolicy(props) {
         const currentRoute = _.last(useNavigationState((state) => state.routes || []));
         const policyID = getPolicyIDFromRoute(currentRoute);
 
@@ -100,7 +100,7 @@ export default function (WrappedComponent) {
                 ref={props.forwardedRef}
             />
         );
-    };
+    }
 
     WithPolicy.propTypes = propTypes;
     WithPolicy.defaultProps = defaultProps;
diff --git a/src/pages/workspace/withPolicyAndFullscreenLoading.js b/src/pages/workspace/withPolicyAndFullscreenLoading.js
index 1d5cc395c80e..29f1424a26f6 100644
--- a/src/pages/workspace/withPolicyAndFullscreenLoading.js
+++ b/src/pages/workspace/withPolicyAndFullscreenLoading.js
@@ -26,7 +26,7 @@ export default function (WrappedComponent) {
         ...policyDefaultProps,
     };
 
-    const WithPolicyAndFullscreenLoading = (props) => {
+    function WithPolicyAndFullscreenLoading(props) {
         if (props.isLoadingReportData && _.isEmpty(props.policy)) {
             return <FullscreenLoadingIndicator />;
         }
@@ -39,7 +39,7 @@ export default function (WrappedComponent) {
                 ref={props.forwardedRef}
             />
         );
-    };
+    }
 
     WithPolicyAndFullscreenLoading.propTypes = propTypes;
     WithPolicyAndFullscreenLoading.defaultProps = defaultProps;
diff --git a/src/stories/AddressSearch.stories.js b/src/stories/AddressSearch.stories.js
index b6d8fc4e6aa3..35f7e3a07596 100644
--- a/src/stories/AddressSearch.stories.js
+++ b/src/stories/AddressSearch.stories.js
@@ -15,7 +15,7 @@ export default {
     },
 };
 
-const Template = (args) => {
+function Template(args) {
     const [value, setValue] = useState('');
     return (
         <AddressSearch
@@ -25,7 +25,7 @@ const Template = (args) => {
             {...args}
         />
     );
-};
+}
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/src/stories/Banner.stories.js b/src/stories/Banner.stories.js
index 82a63885ae69..c7c27cb52352 100644
--- a/src/stories/Banner.stories.js
+++ b/src/stories/Banner.stories.js
@@ -11,8 +11,10 @@ const story = {
     component: Banner,
 };
 
-// eslint-disable-next-line react/jsx-props-no-spreading
-const Template = (args) => <Banner {...args} />;
+function Template(args) {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <Banner {...args} />;
+}
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/src/stories/Button.stories.js b/src/stories/Button.stories.js
index d1baf311c1fd..52212e673f0f 100644
--- a/src/stories/Button.stories.js
+++ b/src/stories/Button.stories.js
@@ -11,14 +11,16 @@ const story = {
     component: Button,
 };
 
-// eslint-disable-next-line react/jsx-props-no-spreading
-const Template = (args) => <Button {...args} />;
+function Template(args) {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <Button {...args} />;
+}
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 const Default = Template.bind({});
 const Loading = Template.bind({});
-const PressOnEnter = (props) => {
+function PressOnEnter(props) {
     const [text, setText] = useState('');
     const onPress = useCallback(() => {
         setText('Button Pressed!');
@@ -33,7 +35,7 @@ const PressOnEnter = (props) => {
             onPress={onPress}
         />
     );
-};
+}
 
 Default.args = {
     text: 'Save & Continue',
diff --git a/src/stories/ButtonWithDropdownMenu.stories.js b/src/stories/ButtonWithDropdownMenu.stories.js
index 54084be5b018..854483df4316 100644
--- a/src/stories/ButtonWithDropdownMenu.stories.js
+++ b/src/stories/ButtonWithDropdownMenu.stories.js
@@ -11,8 +11,10 @@ const story = {
     component: ButtonWithDropdownMenu,
 };
 
-// eslint-disable-next-line react/jsx-props-no-spreading
-const Template = (args) => <ButtonWithDropdownMenu {...args} />;
+function Template(args) {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <ButtonWithDropdownMenu {...args} />;
+}
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/src/stories/Checkbox.stories.js b/src/stories/Checkbox.stories.js
index 408ae6aa4548..7148281f2a7e 100644
--- a/src/stories/Checkbox.stories.js
+++ b/src/stories/Checkbox.stories.js
@@ -11,8 +11,10 @@ export default {
     component: Checkbox,
 };
 
-// eslint-disable-next-line react/jsx-props-no-spreading
-const Template = (args) => <Checkbox {...args} />;
+function Template(args) {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <Checkbox {...args} />;
+}
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/src/stories/CheckboxWithLabel.stories.js b/src/stories/CheckboxWithLabel.stories.js
index 7d52d49a8b5b..61ec66a6b2f6 100644
--- a/src/stories/CheckboxWithLabel.stories.js
+++ b/src/stories/CheckboxWithLabel.stories.js
@@ -13,8 +13,10 @@ const story = {
     component: CheckboxWithLabel,
 };
 
-// eslint-disable-next-line react/jsx-props-no-spreading
-const Template = (args) => <CheckboxWithLabel {...args} />;
+function Template(args) {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <CheckboxWithLabel {...args} />;
+}
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/src/stories/Composer.stories.js b/src/stories/Composer.stories.js
index 855527389e6d..3dfc5b0e3ead 100644
--- a/src/stories/Composer.stories.js
+++ b/src/stories/Composer.stories.js
@@ -21,7 +21,7 @@ const story = {
 
 const parser = new ExpensiMark();
 
-const Default = (args) => {
+function Default(args) {
     const [pastedFile, setPastedFile] = useState(null);
     const [comment, setComment] = useState(args.defaultValue);
     const renderedHTML = parser.replace(comment);
@@ -63,7 +63,7 @@ const Default = (args) => {
             </View>
         </View>
     );
-};
+}
 
 Default.args = {
     autoFocus: true,
diff --git a/src/stories/Datepicker.stories.js b/src/stories/Datepicker.stories.js
index 183e488c323d..c4a002c6f88d 100644
--- a/src/stories/Datepicker.stories.js
+++ b/src/stories/Datepicker.stories.js
@@ -21,8 +21,10 @@ export default {
     },
 };
 
-// eslint-disable-next-line react/jsx-props-no-spreading
-const Template = (args) => <DatePicker {...args} />;
+function Template(args) {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <DatePicker {...args} />;
+}
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/src/stories/DragAndDrop.stories.js b/src/stories/DragAndDrop.stories.js
index fbf31a70d843..0398e5af3ac2 100644
--- a/src/stories/DragAndDrop.stories.js
+++ b/src/stories/DragAndDrop.stories.js
@@ -17,7 +17,7 @@ const story = {
     component: DragAndDrop,
 };
 
-const Default = () => {
+function Default() {
     const [draggingOver, setDraggingOver] = useState(false);
 
     const [fileUrl, setFileUrl] = useState('');
@@ -80,7 +80,7 @@ const Default = () => {
             )}
         </PortalProvider>
     );
-};
+}
 
 export default story;
 export {Default};
diff --git a/src/stories/Form.stories.js b/src/stories/Form.stories.js
index bd11b6e486b2..4e126170558e 100644
--- a/src/stories/Form.stories.js
+++ b/src/stories/Form.stories.js
@@ -30,7 +30,7 @@ const story = {
     },
 };
 
-const Template = (args) => {
+function Template(args) {
     // Form consumes data from Onyx, so we initialize Onyx with the necessary data here
     NetworkConnection.setOfflineStatus(false);
     FormActions.setIsLoading(args.formID, args.formState.isLoading);
@@ -117,14 +117,14 @@ const Template = (args) => {
             />
         </Form>
     );
-};
+}
 
 /**
  * Story to exhibit the native event handlers for TextInput in the Form Component
  * @param {Object} args
  * @returns {JSX}
  */
-const WithNativeEventHandler = (args) => {
+function WithNativeEventHandler(args) {
     const [log, setLog] = useState('');
 
     // Form consumes data from Onyx, so we initialize Onyx with the necessary data here
@@ -145,7 +145,7 @@ const WithNativeEventHandler = (args) => {
             <Text>{`Entered routing number: ${log}`}</Text>
         </Form>
     );
-};
+}
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/src/stories/FormAlertWithSubmitButton.stories.js b/src/stories/FormAlertWithSubmitButton.stories.js
index 52bacaf89aeb..5ac5404f851d 100644
--- a/src/stories/FormAlertWithSubmitButton.stories.js
+++ b/src/stories/FormAlertWithSubmitButton.stories.js
@@ -11,8 +11,10 @@ const story = {
     component: FormAlertWithSubmitButton,
 };
 
-// eslint-disable-next-line react/jsx-props-no-spreading
-const Template = (args) => <FormAlertWithSubmitButton {...args} />;
+function Template(args) {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <FormAlertWithSubmitButton {...args} />;
+}
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/src/stories/Header.stories.js b/src/stories/Header.stories.js
index 1b11f9a752c1..78250fa2c35d 100644
--- a/src/stories/Header.stories.js
+++ b/src/stories/Header.stories.js
@@ -11,8 +11,10 @@ const story = {
     component: Header,
 };
 
-// eslint-disable-next-line react/jsx-props-no-spreading
-const Template = (args) => <Header {...args} />;
+function Template(args) {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <Header {...args} />;
+}
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/src/stories/HeaderWithBackButton.stories.js b/src/stories/HeaderWithBackButton.stories.js
index 82bdccfa77ca..f7d361feb8c4 100644
--- a/src/stories/HeaderWithBackButton.stories.js
+++ b/src/stories/HeaderWithBackButton.stories.js
@@ -11,8 +11,10 @@ const story = {
     component: HeaderWithBackButton,
 };
 
-// eslint-disable-next-line react/jsx-props-no-spreading
-const Template = (args) => <HeaderWithBackButton {...args} />;
+function Template(args) {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <HeaderWithBackButton {...args} />;
+}
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/src/stories/InlineSystemMessage.stories.js b/src/stories/InlineSystemMessage.stories.js
index 9f2679f374b0..9a4b034ae35b 100644
--- a/src/stories/InlineSystemMessage.stories.js
+++ b/src/stories/InlineSystemMessage.stories.js
@@ -11,8 +11,10 @@ const story = {
     component: InlineSystemMessage,
 };
 
-// eslint-disable-next-line react/jsx-props-no-spreading
-const Template = (args) => <InlineSystemMessage {...args} />;
+function Template(args) {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <InlineSystemMessage {...args} />;
+}
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/src/stories/MagicCodeInput.stories.js b/src/stories/MagicCodeInput.stories.js
index cfcf9d9db394..7d5f26eb05d8 100644
--- a/src/stories/MagicCodeInput.stories.js
+++ b/src/stories/MagicCodeInput.stories.js
@@ -11,8 +11,10 @@ const story = {
     component: MagicCodeInput,
 };
 
-// eslint-disable-next-line react/jsx-props-no-spreading
-const Template = (args) => <MagicCodeInput {...args} />;
+function Template(args) {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <MagicCodeInput {...args} />;
+}
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/src/stories/MenuItem.stories.js b/src/stories/MenuItem.stories.js
index 1b5b550a7e51..7046617fe2ae 100644
--- a/src/stories/MenuItem.stories.js
+++ b/src/stories/MenuItem.stories.js
@@ -13,8 +13,10 @@ const story = {
     component: MenuItem,
 };
 
-// eslint-disable-next-line react/jsx-props-no-spreading
-const Template = (args) => <MenuItem {...args} />;
+function Template(args) {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <MenuItem {...args} />;
+}
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/src/stories/OptionRow.stories.js b/src/stories/OptionRow.stories.js
index 3fd02033307e..d5ad27f2d939 100644
--- a/src/stories/OptionRow.stories.js
+++ b/src/stories/OptionRow.stories.js
@@ -41,11 +41,13 @@ export default {
     },
 };
 
-const Template = (args) => (
-    <OnyxProvider>
-        <OptionRow {...args} />
-    </OnyxProvider>
-);
+function Template(args) {
+    return (
+        <OnyxProvider>
+            <OptionRow {...args} />
+        </OnyxProvider>
+    );
+}
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/src/stories/Picker.stories.js b/src/stories/Picker.stories.js
index 8da92d023c84..19b04f9fa79a 100644
--- a/src/stories/Picker.stories.js
+++ b/src/stories/Picker.stories.js
@@ -12,7 +12,7 @@ const story = {
 };
 
 // eslint-disable-next-line react/jsx-props-no-spreading
-const Template = (args) => {
+function Template(args) {
     const [value, setValue] = useState('');
     return (
         <Picker
@@ -22,7 +22,7 @@ const Template = (args) => {
             {...args}
         />
     );
-};
+}
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/src/stories/PopoverMenu.stories.js b/src/stories/PopoverMenu.stories.js
index 1593638f5566..1098fa9ce226 100644
--- a/src/stories/PopoverMenu.stories.js
+++ b/src/stories/PopoverMenu.stories.js
@@ -15,7 +15,7 @@ const story = {
     component: PopoverMenu,
 };
 
-const Template = (args) => {
+function Template(args) {
     const [isVisible, setIsVisible] = React.useState(false);
     const toggleVisibility = () => setIsVisible(!isVisible);
     return (
@@ -54,7 +54,7 @@ const Template = (args) => {
             </SafeAreaProvider>
         </>
     );
-};
+}
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/src/stories/SubscriptAvatar.stories.js b/src/stories/SubscriptAvatar.stories.js
index 32a55efa4684..08941bd9c19a 100644
--- a/src/stories/SubscriptAvatar.stories.js
+++ b/src/stories/SubscriptAvatar.stories.js
@@ -24,8 +24,10 @@ export default {
     },
 };
 
-// eslint-disable-next-line react/jsx-props-no-spreading
-const Template = (args) => <SubscriptAvatar {...args} />;
+function Template(args) {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <SubscriptAvatar {...args} />;
+}
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/src/stories/TextInput.stories.js b/src/stories/TextInput.stories.js
index 1d2947c99886..64329ffed715 100644
--- a/src/stories/TextInput.stories.js
+++ b/src/stories/TextInput.stories.js
@@ -11,8 +11,10 @@ const story = {
     component: TextInput,
 };
 
-// eslint-disable-next-line react/jsx-props-no-spreading
-const Template = (args) => <TextInput {...args} />;
+function Template(args) {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <TextInput {...args} />;
+}
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
@@ -100,7 +102,7 @@ MaxLengthInput.args = {
     maxLength: 50,
 };
 
-const HintAndErrorInput = (args) => {
+function HintAndErrorInput(args) {
     const [error, setError] = useState('');
     return (
         <TextInput
@@ -116,7 +118,7 @@ const HintAndErrorInput = (args) => {
             errorText={error}
         />
     );
-};
+}
 HintAndErrorInput.args = {
     label: 'HintAndError input',
     name: 'HintAndError',
diff --git a/src/stories/Tooltip.stories.js b/src/stories/Tooltip.stories.js
index 315b429b9ec6..e88c48fcf202 100644
--- a/src/stories/Tooltip.stories.js
+++ b/src/stories/Tooltip.stories.js
@@ -11,32 +11,34 @@ const story = {
     component: Tooltip,
 };
 
-const Template = (args) => (
-    <div
-        style={{
-            width: 100,
-        }}
-    >
-        <Tooltip
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...args}
-            maxWidth={args.maxWidth || undefined}
+function Template(args) {
+    return (
+        <div
+            style={{
+                width: 100,
+            }}
         >
-            <div
-                style={{
-                    width: 100,
-                    height: 60,
-                    display: 'flex',
-                    backgroundColor: 'red',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                }}
+            <Tooltip
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...args}
+                maxWidth={args.maxWidth || undefined}
             >
-                Hover me
-            </div>
-        </Tooltip>
-    </div>
-);
+                <div
+                    style={{
+                        width: 100,
+                        height: 60,
+                        display: 'flex',
+                        backgroundColor: 'red',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }}
+                >
+                    Hover me
+                </div>
+            </Tooltip>
+        </div>
+    );
+}
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
@@ -47,7 +49,7 @@ Default.args = {
     maxWidth: 0,
 };
 
-const RenderContent = () => {
+function RenderContent() {
     const [size, setSize] = React.useState(40);
 
     const renderTooltipContent = () => (
@@ -86,7 +88,7 @@ const RenderContent = () => {
             </Tooltip>
         </div>
     );
-};
+}
 
 export default story;
 export {Default, RenderContent};
diff --git a/tests/unit/CalendarPickerTest.js b/tests/unit/CalendarPickerTest.js
index 206783447fa5..8313f8d709d5 100644
--- a/tests/unit/CalendarPickerTest.js
+++ b/tests/unit/CalendarPickerTest.js
@@ -12,7 +12,7 @@ jest.mock('@react-navigation/native', () => ({
 }));
 
 // eslint-disable-next-line arrow-body-style
-const MockedCalendarPicker = (props) => {
+function MockedCalendarPicker(props) {
     return (
         <CalendarPicker
             // eslint-disable-next-line react/jsx-props-no-spreading
@@ -21,7 +21,7 @@ const MockedCalendarPicker = (props) => {
             preferredLocale={CONST.LOCALES.EN}
         />
     );
-};
+}
 
 describe('CalendarPicker', () => {
     test('renders calendar component', () => {
