Refactor uses of react-native Text to ExpensifyText

src/components/CurrentWalletBalance.js

@@ -1,6 +1,5 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {ActivityIndicator, Text} from 'react-native';
+import {ActivityIndicator} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';
@@ -9,6 +8,7 @@ import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import compose from '../libs/compose';
 import themeColors from '../styles/themes/default';
 import ONYXKEYS from '../ONYXKEYS';
+import ExpensifyText from './ExpensifyText';
 
 const propTypes = {
     /** The user's wallet account */
@@ -40,11 +40,11 @@ const CurrentWalletBalance = (props) => {
         {style: 'currency', currency: 'USD'},
     );
     return (
-        <Text
+        <ExpensifyText
             style={[styles.textXXXLarge, styles.pv5, styles.alignSelfCenter]}
         >
             {`${formattedBalance}`}
-        </Text>
+        </ExpensifyText>
     );
 };
 

src/components/ExpensiPicker.js

@@ -1,9 +1,9 @@
 import _ from 'underscore';
 import React, {PureComponent} from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {Text, View} from 'react-native';
+import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import Picker from './Picker';
+import ExpensifyText from './ExpensifyText';
 import styles from '../styles/styles';
 import InlineErrorText from './InlineErrorText';
 
@@ -47,7 +47,7 @@ class ExpensiPicker extends PureComponent {
                     ]}
                 >
                     {this.props.label && (
-                        <Text style={[styles.expensiPickerLabel, styles.textLabelSupporting]}>{this.props.label}</Text>
+                        <ExpensifyText style={[styles.expensiPickerLabel, styles.textLabelSupporting]}>{this.props.label}</ExpensifyText>
                     )}
                     <Picker
                         onOpen={() => this.setState({isOpen: true})}

src/components/InlineCodeBlock/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {Text} from 'react-native';
 import inlineCodeBlockPropTypes from './inlineCodeBlockPropTypes';
+import ExpensifyText from '../ExpensifyText';
 
 const InlineCodeBlock = (props) => {
     const TDefaultRenderer = props.TDefaultRenderer;
@@ -10,11 +9,11 @@ const InlineCodeBlock = (props) => {
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props.defaultRendererProps}
         >
-            <Text
+            <ExpensifyText
                 style={{...props.boxModelStyle, ...props.textStyle}}
             >
                 {props.defaultRendererProps.tnode.data}
-            </Text>
+            </ExpensifyText>
         </TDefaultRenderer>
     );
 };

src/components/PressableWithSecondaryInteraction/index.android.js

@@ -1,9 +1,9 @@
 import _ from 'underscore';
 import React, {forwardRef} from 'react';
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
-// eslint-disable-next-line no-restricted-imports
-import {Pressable, Platform, Text as RNText} from 'react-native';
+import {Pressable, Platform} from 'react-native';
 import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes';
+import ExpensifyText from '../ExpensifyText';
 
 /**
  * Triggers haptic feedback, and calls onSecondaryInteraction
@@ -34,7 +34,7 @@ function handleLongPress(event, props) {
  */
 const PressableWithSecondaryInteraction = (props) => {
     // Use Text node for inline mode to prevent content overflow.
-    const Node = props.inline ? RNText : Pressable;
+    const Node = props.inline ? ExpensifyText : Pressable;
     return (
         <Node
             ref={props.forwardedRef}

src/components/PressableWithSecondaryInteraction/index.ios.js

@@ -1,9 +1,9 @@
 import _ from 'underscore';
 import React, {forwardRef} from 'react';
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
-// eslint-disable-next-line no-restricted-imports
-import {Pressable, Text as RNText} from 'react-native';
+import {Pressable} from 'react-native';
 import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes';
+import ExpensifyText from '../ExpensifyText';
 
 /**
  * This is a special Pressable that calls onSecondaryInteraction when LongPressed.
@@ -13,7 +13,7 @@ import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSeco
  */
 const PressableWithSecondaryInteraction = (props) => {
     // Use Text node for inline mode to prevent content overflow.
-    const Node = props.inline ? RNText : Pressable;
+    const Node = props.inline ? ExpensifyText : Pressable;
     return (
         <Node
             ref={props.forwardedRef}

src/pages/home/report/MarkerBadge/index.js

@@ -1,9 +1,9 @@
 import React, {PureComponent} from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {Animated, Text, View} from 'react-native';
+import {Animated, View} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../../../../styles/styles';
 import ExpensifyButton from '../../../../components/ExpensifyButton';
+import ExpensifyText from '../../../../components/ExpensifyText';
 import Icon from '../../../../components/Icon';
 import * as Expensicons from '../../../../components/Icon/Expensicons';
 import themeColors from '../../../../styles/themes/default';
@@ -85,7 +85,7 @@ class MarkerBadge extends PureComponent {
                             ContentComponent={() => (
                                 <View style={[styles.flexRow]}>
                                     <Icon small src={Expensicons.DownArrow} fill={themeColors.textReversed} />
-                                    <Text
+                                    <ExpensifyText
                                         selectable={false}
                                         style={[
                                             styles.ml2,
@@ -97,7 +97,7 @@ class MarkerBadge extends PureComponent {
                                             'reportActionsViewMarkerBadge.newMsg',
                                             {count: this.props.count},
                                         )}
-                                    </Text>
+                                    </ExpensifyText>
                                 </View>
                             )}
                             shouldRemoveRightBorderRadius

src/pages/settings/Payments/PaymentMethodList.js

@@ -1,13 +1,13 @@
 import _ from 'underscore';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-// eslint-disable-next-line no-restricted-imports
-import {FlatList, Text} from 'react-native';
+import {FlatList} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import lodashGet from 'lodash/get';
 import styles from '../../../styles/styles';
 import * as StyleUtils from '../../../styles/StyleUtils';
 import MenuItem from '../../../components/MenuItem';
+import ExpensifyText from '../../../components/ExpensifyText';
 import compose from '../../../libs/compose';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import ONYXKEYS from '../../../ONYXKEYS';
@@ -173,11 +173,11 @@ class PaymentMethodList extends Component {
         }
 
         return (
-            <Text
+            <ExpensifyText
                 style={[styles.popoverMenuItem]}
             >
                 {item.text}
-            </Text>
+            </ExpensifyText>
         );
     }