Merge pull request #34325 from dukenv0307/fix/34602

refactor: all Text component must import from @components/Text

.eslintrc.js

@@ -1,12 +1,13 @@
 const restrictedImportPaths = [
     {
         name: 'react-native',
-        importNames: ['useWindowDimensions', 'StatusBar', 'TouchableOpacity', 'TouchableWithoutFeedback', 'TouchableNativeFeedback', 'TouchableHighlight', 'Pressable'],
+        importNames: ['useWindowDimensions', 'StatusBar', 'TouchableOpacity', 'TouchableWithoutFeedback', 'TouchableNativeFeedback', 'TouchableHighlight', 'Pressable', 'Text'],
         message: [
             '',
             "For 'useWindowDimensions', please use 'src/hooks/useWindowDimensions' instead.",
             "For 'TouchableOpacity', 'TouchableWithoutFeedback', 'TouchableNativeFeedback', 'TouchableHighlight', 'Pressable', please use 'PressableWithFeedback' and/or 'PressableWithoutFeedback' from 'src/components/Pressable' instead.",
             "For 'StatusBar', please use 'src/libs/StatusBar' instead.",
+            "For 'Text', please use '@components/Text' instead.",
         ].join('\n'),
     },
     {

src/components/AddressSearch/CurrentLocationButton.js

@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import {Text} from 'react-native';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
+import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';

src/components/AddressSearch/index.js

@@ -1,13 +1,14 @@
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import {ActivityIndicator, Keyboard, LogBox, ScrollView, Text, View} from 'react-native';
+import {ActivityIndicator, Keyboard, LogBox, ScrollView, View} from 'react-native';
 import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete';
 import _ from 'underscore';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import LocationErrorMessage from '@components/LocationErrorMessage';
 import networkPropTypes from '@components/networkPropTypes';
 import {withNetwork} from '@components/OnyxProvider';
+import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';

src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.tsx

@@ -1,5 +1,6 @@
 import Str from 'expensify-common/lib/str';
 import React, {useEffect, useRef} from 'react';
+// eslint-disable-next-line no-restricted-imports
 import type {Text as RNText} from 'react-native';
 import {StyleSheet} from 'react-native';
 import PressableWithSecondaryInteraction from '@components/PressableWithSecondaryInteraction';

src/components/AnonymousReportFooter.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Text, View} from 'react-native';
+import {View} from 'react-native';
 import type {OnyxCollection} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx/lib/types';
 import useLocalize from '@hooks/useLocalize';
@@ -9,6 +9,7 @@ import type {PersonalDetails, Report} from '@src/types/onyx';
 import AvatarWithDisplayName from './AvatarWithDisplayName';
 import Button from './Button';
 import ExpensifyWordmark from './ExpensifyWordmark';
+import Text from './Text';
 
 type AnonymousReportFooterProps = {
     /** The report currently being looked at */

src/components/Composer/index.tsx

@@ -3,6 +3,7 @@ import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import type {BaseSyntheticEvent, ForwardedRef} from 'react';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {flushSync} from 'react-dom';
+// eslint-disable-next-line no-restricted-imports
 import type {DimensionValue, NativeSyntheticEvent, Text as RNText, TextInput, TextInputKeyPressEventData, TextInputProps, TextInputSelectionChangeEventData} from 'react-native';
 import {StyleSheet, View} from 'react-native';
 import type {AnimatedProps} from 'react-native-reanimated';

src/components/DisplayNames/DisplayNamesTooltipItem.tsx

@@ -1,5 +1,6 @@
 import type {RefObject} from 'react';
 import React, {useCallback} from 'react';
+// eslint-disable-next-line no-restricted-imports
 import type {Text as RNText, StyleProp, TextStyle} from 'react-native';
 import Text from '@components/Text';
 import UserDetailsTooltip from '@components/UserDetailsTooltip';

src/components/DisplayNames/DisplayNamesWithTooltip.tsx

@@ -1,4 +1,5 @@
 import React, {Fragment, useCallback, useRef} from 'react';
+// eslint-disable-next-line no-restricted-imports
 import type {Text as RNText} from 'react-native';
 import {View} from 'react-native';
 import Text from '@components/Text';

src/components/EmojiPicker/EmojiPickerMenu/BaseEmojiPickerMenu.js

@@ -1,10 +1,11 @@
 import {FlashList} from '@shopify/flash-list';
 import PropTypes from 'prop-types';
 import React, {useMemo} from 'react';
-import {StyleSheet, Text, View} from 'react-native';
+import {StyleSheet, View} from 'react-native';
 import CategoryShortcutBar from '@components/EmojiPicker/CategoryShortcutBar';
 import EmojiSkinToneList from '@components/EmojiPicker/EmojiSkinToneList';
 import refPropTypes from '@components/refPropTypes';
+import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';

src/components/MoneyReportHeaderStatusBar.tsx

@@ -1,11 +1,12 @@
 import React, {useMemo} from 'react';
-import {Text, View} from 'react-native';
+import {View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as NextStepUtils from '@libs/NextStepUtils';
 import CONST from '@src/CONST';
 import type ReportNextStep from '@src/types/onyx/ReportNextStep';
 import RenderHTML from './RenderHTML';
+import Text from './Text';
 
 type MoneyReportHeaderStatusBarProps = {
     /** The next step for the report */

src/components/ShowMoreButton/index.js

@@ -1,9 +1,10 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import {Text, View} from 'react-native';
+import {View} from 'react-native';
 import _ from 'underscore';
 import Button from '@components/Button';
 import * as Expensicons from '@components/Icon/Expensicons';
+import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';

src/components/SingleChoiceQuestion.tsx

@@ -1,5 +1,6 @@
 import type {ForwardedRef} from 'react';
 import React, {forwardRef} from 'react';
+// eslint-disable-next-line no-restricted-imports
 import type {Text as RNText} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {MaybePhraseKey} from '@libs/Localize';

src/components/Text.tsx

@@ -1,5 +1,6 @@
 import type {ForwardedRef} from 'react';
 import React from 'react';
+// eslint-disable-next-line no-restricted-imports
 import {Text as RNText, StyleSheet} from 'react-native';
 import type {TextProps as RNTextProps, TextStyle} from 'react-native';
 import useTheme from '@hooks/useTheme';

src/components/TextInput/TextInputLabel/index.tsx

@@ -1,4 +1,5 @@
 import React, {useEffect, useRef} from 'react';
+// eslint-disable-next-line no-restricted-imports
 import type {Text} from 'react-native';
 import {Animated} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';

src/components/TextLink.tsx

@@ -1,5 +1,6 @@
 import type {ForwardedRef, KeyboardEventHandler, MouseEventHandler} from 'react';
 import React, {forwardRef} from 'react';
+// eslint-disable-next-line no-restricted-imports
 import type {GestureResponderEvent, Text as RNText, StyleProp, TextStyle} from 'react-native';
 import useEnvironment from '@hooks/useEnvironment';
 import useThemeStyles from '@hooks/useThemeStyles';

src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx

@@ -1,8 +1,9 @@
 import Str from 'expensify-common/lib/str';
 import React, {useCallback} from 'react';
-import {Text, View} from 'react-native';
+import {View} from 'react-native';
 import Avatar from '@components/Avatar';
 import {usePersonalDetails} from '@components/OnyxProvider';
+import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import type UserDetailsTooltipProps from '@components/UserDetailsTooltip/types';
 import useLocalize from '@hooks/useLocalize';

src/pages/home/report/ContextMenu/ReportActionContextMenu.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type {RefObject} from 'react';
+// eslint-disable-next-line no-restricted-imports
 import type {GestureResponderEvent, Text as RNText, View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';

src/pages/home/report/ReportActionItemMessage.tsx

@@ -1,7 +1,8 @@
 import type {ReactElement} from 'react';
 import React from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
-import {Text, View} from 'react-native';
+import {View} from 'react-native';
+import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';

src/pages/home/report/ReportActionItemThread.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import {Text, View} from 'react-native';
+import {View} from 'react-native';
 import MultipleAvatars from '@components/MultipleAvatars';
 import PressableWithSecondaryInteraction from '@components/PressableWithSecondaryInteraction';
+import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Report from '@userActions/Report';

src/pages/iou/ReceiptDropUI.js

@@ -1,9 +1,10 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import {Text, View} from 'react-native';
+import {View} from 'react-native';
 import ReceiptUpload from '@assets/images/receipt-upload.svg';
 import DragAndDropConsumer from '@components/DragAndDrop/Consumer';
 import ImageSVG from '@components/ImageSVG';
+import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';

src/pages/iou/request/step/IOURequestStepScan/index.js

@@ -1,6 +1,6 @@
 import lodashGet from 'lodash/get';
 import React, {useCallback, useContext, useReducer, useRef, useState} from 'react';
-import {ActivityIndicator, PanResponder, PixelRatio, Text, View} from 'react-native';
+import {ActivityIndicator, PanResponder, PixelRatio, View} from 'react-native';
 import Hand from '@assets/images/hand.svg';
 import ReceiptUpload from '@assets/images/receipt-upload.svg';
 import Shutter from '@assets/images/shutter.svg';
@@ -12,6 +12,7 @@ import {DragAndDropContext} from '@components/DragAndDrop/Provider';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
+import Text from '@components/Text';
 import transactionPropTypes from '@components/transactionPropTypes';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';

src/pages/iou/request/step/IOURequestStepScan/index.native.js

@@ -1,6 +1,6 @@
 import lodashGet from 'lodash/get';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
-import {ActivityIndicator, Alert, AppState, Text, View} from 'react-native';
+import {ActivityIndicator, Alert, AppState, View} from 'react-native';
 import {RESULTS} from 'react-native-permissions';
 import {useCameraDevices} from 'react-native-vision-camera';
 import Hand from '@assets/images/hand.svg';
@@ -11,6 +11,7 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import ImageSVG from '@components/ImageSVG';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
+import Text from '@components/Text';
 import transactionPropTypes from '@components/transactionPropTypes';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';

src/pages/settings/Security/TwoFactorAuth/Steps/EnabledStep.js

@@ -1,9 +1,10 @@
 import React, {useState} from 'react';
-import {ScrollView, Text, View} from 'react-native';
+import {ScrollView, View} from 'react-native';
 import ConfirmModal from '@components/ConfirmModal';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
 import Section from '@components/Section';
+import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';

src/pages/settings/Wallet/Card/BaseGetPhysicalCard.js

@@ -1,11 +1,11 @@
 import PropTypes from 'prop-types';
 import React, {useCallback, useEffect, useRef} from 'react';
-import {Text} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import FormProvider from '@components/Form/FormProvider';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
+import Text from '@components/Text';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as FormActions from '@libs/actions/FormActions';
 import * as Wallet from '@libs/actions/Wallet';

src/types/utils/textRef.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import type {Text} from 'react-native';
 
 const textRef = (ref: React.RefObject<Text | HTMLDivElement>) => ref as React.RefObject<Text>;