From cb7ccb1841510ed1ca8fad4d8f1c7dd2f36823c7 Mon Sep 17 00:00:00 2001
From: Puneet Lath <puneet@expensify.com>
Date: Tue, 30 Nov 2021 11:13:11 -0500
Subject: [PATCH 01/14] Rename our custom Button component to ExpensifyButton

---
 src/components/{Button.js => ExpensifyButton.js} | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)
 rename src/components/{Button.js => ExpensifyButton.js} (97%)

diff --git a/src/components/Button.js b/src/components/ExpensifyButton.js
similarity index 97%
rename from src/components/Button.js
rename to src/components/ExpensifyButton.js
index 8e346c96358e..27a812296133 100644
--- a/src/components/Button.js
+++ b/src/components/ExpensifyButton.js
@@ -78,7 +78,7 @@ const defaultProps = {
     shouldRemoveLeftBorderRadius: false,
 };
 
-class Button extends Component {
+class ExpensifyButton extends Component {
     constructor(props) {
         super(props);
         this.additionalStyles = _.isArray(this.props.style) ? this.props.style : [this.props.style];
@@ -190,7 +190,7 @@ class Button extends Component {
     }
 }
 
-Button.propTypes = propTypes;
-Button.defaultProps = defaultProps;
+ExpensifyButton.propTypes = propTypes;
+ExpensifyButton.defaultProps = defaultProps;
 
-export default Button;
+export default ExpensifyButton;

From ed5291dd725dda5e1ca8409cf1f8e72f8ba1dfe7 Mon Sep 17 00:00:00 2001
From: Puneet Lath <puneet@expensify.com>
Date: Tue, 30 Nov 2021 11:22:38 -0500
Subject: [PATCH 02/14] Update components that use Button to use
 ExpensifyButton

---
 src/components/AttachmentModal.js           | 4 ++--
 src/components/BigNumberPad.js              | 4 ++--
 src/components/ButtonWithDropdown.js        | 6 +++---
 src/components/ButtonWithMenu.js            | 4 ++--
 src/components/ConfirmModal.js              | 6 +++---
 src/components/FormAlertWithSubmitButton.js | 4 ++--
 src/components/InboxCallButton.js           | 4 ++--
 7 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index 437127e429b0..fd81a1a478bb 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -11,7 +11,7 @@ import themeColors from '../styles/themes/default';
 import addEncryptedAuthTokenToURL from '../libs/addEncryptedAuthTokenToURL';
 import compose from '../libs/compose';
 import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
-import Button from './Button';
+import ExpensifyButton from './ExpensifyButton';
 import HeaderWithCloseButton from './HeaderWithCloseButton';
 import fileDownload from '../libs/fileDownload';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
@@ -153,7 +153,7 @@ class AttachmentModal extends PureComponent {
 
                     {/* If we have an onConfirm method show a confirmation button */}
                     {this.props.onConfirm && (
-                        <Button
+                        <ExpensifyButton
                             success
                             style={[styles.buttonConfirm]}
                             textStyles={[styles.buttonConfirmText]}
diff --git a/src/components/BigNumberPad.js b/src/components/BigNumberPad.js
index 26299c661b8f..f5c6d8eee3fe 100644
--- a/src/components/BigNumberPad.js
+++ b/src/components/BigNumberPad.js
@@ -3,7 +3,7 @@ import {View} from 'react-native';
 import _ from 'underscore';
 import PropTypes from 'prop-types';
 import styles from '../styles/styles';
-import Button from './Button';
+import ExpensifyButton from './ExpensifyButton';
 
 const propTypes = {
     /** Callback to inform parent modal with key pressed */
@@ -26,7 +26,7 @@ const BigNumberPad = props => (
                     // avoid unccessary space before the first column.
                     const marginLeft = columnIndex > 0 ? styles.ml3 : {};
                     return (
-                        <Button
+                        <ExpensifyButton
                             key={column}
                             style={[styles.flex1, marginLeft]}
                             text={column}
diff --git a/src/components/ButtonWithDropdown.js b/src/components/ButtonWithDropdown.js
index f2193629b5b0..cb2691b56ba6 100644
--- a/src/components/ButtonWithDropdown.js
+++ b/src/components/ButtonWithDropdown.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
 import styles from '../styles/styles';
-import Button from './Button';
+import ExpensifyButton from './ExpensifyButton';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import themeColors from '../styles/themes/default';
@@ -29,7 +29,7 @@ const defaultProps = {
 
 const ButtonWithDropdown = props => (
     <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
-        <Button
+        <ExpensifyButton
             success
             onPress={props.onButtonPress}
             text={props.buttonText}
@@ -37,7 +37,7 @@ const ButtonWithDropdown = props => (
             shouldRemoveRightBorderRadius
             style={[styles.flex1]}
         />
-        <Button
+        <ExpensifyButton
             success
             style={[styles.buttonDropdown]}
             onPress={props.onDropdownPress}
diff --git a/src/components/ButtonWithMenu.js b/src/components/ButtonWithMenu.js
index 24b214f90c4a..0bc54435e7f9 100644
--- a/src/components/ButtonWithMenu.js
+++ b/src/components/ButtonWithMenu.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {View} from 'react-native';
 import _ from 'underscore';
 import styles from '../styles/styles';
-import Button from './Button';
+import ExpensifyButton from './ExpensifyButton';
 import ButtonWithDropdown from './ButtonWithDropdown';
 import PopoverMenu from './PopoverMenu';
 
@@ -69,7 +69,7 @@ class ButtonWithMenu extends PureComponent {
                         }}
                     />
                 ) : (
-                    <Button
+                    <ExpensifyButton
                         success
                         isDisabled={this.props.isDisabled}
                         style={[styles.w100]}
diff --git a/src/components/ConfirmModal.js b/src/components/ConfirmModal.js
index 3dcc904e65d4..1b895afffc66 100755
--- a/src/components/ConfirmModal.js
+++ b/src/components/ConfirmModal.js
@@ -9,7 +9,7 @@ import CONST from '../CONST';
 import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import compose from '../libs/compose';
-import Button from './Button';
+import ExpensifyButton from './ExpensifyButton';
 import Text from './Text';
 
 const propTypes = {
@@ -75,7 +75,7 @@ const ConfirmModal = props => (
                     </Text>
                 ) : (props.prompt)}
 
-            <Button
+            <ExpensifyButton
                 success
                 danger={props.danger}
                 style={[styles.mt4]}
@@ -85,7 +85,7 @@ const ConfirmModal = props => (
             />
             {props.shouldShowCancelButton
             && (
-                <Button
+                <ExpensifyButton
                     style={[styles.mt3]}
                     onPress={props.onCancel}
                     text={props.cancelText || props.translate('common.no')}
diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js
index 9c90472b016c..83cf08b527f9 100644
--- a/src/components/FormAlertWithSubmitButton.js
+++ b/src/components/FormAlertWithSubmitButton.js
@@ -6,7 +6,7 @@ import styles from '../styles/styles';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import colors from '../styles/colors';
-import Button from './Button';
+import ExpensifyButton from './ExpensifyButton';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import TextLink from './TextLink';
 import Text from './Text';
@@ -102,7 +102,7 @@ const FormAlertWithSubmitButton = (props) => {
                     {getAlertPrompt()}
                 </View>
             )}
-            <Button
+            <ExpensifyButton
                 success
                 pressOnEnter
                 text={props.buttonText}
diff --git a/src/components/InboxCallButton.js b/src/components/InboxCallButton.js
index 770a73c4d2eb..9b86add42ae4 100644
--- a/src/components/InboxCallButton.js
+++ b/src/components/InboxCallButton.js
@@ -5,7 +5,7 @@ import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import Navigation from '../libs/Navigation/Navigation';
 import ROUTES from '../ROUTES';
 import Tooltip from './Tooltip';
-import Button from './Button';
+import ExpensifyButton from './ExpensifyButton';
 import * as Expensicons from './Icon/Expensicons';
 
 const propTypes = {
@@ -24,7 +24,7 @@ const InboxCallButton = props => (
         text={props.translate('requestCallPage.callButtonTooltip')}
         containerStyles={[styles.justifyContentCenter, styles.alignItemsCenter]}
     >
-        <Button
+        <ExpensifyButton
             onPress={() => {
                 Navigation.navigate(ROUTES.getRequestCallRoute(props.taskID));
             }}

From 9725cc55bc15adc809e5c80bf5dd9200621f7c2a Mon Sep 17 00:00:00 2001
From: Puneet Lath <puneet@expensify.com>
Date: Tue, 30 Nov 2021 11:25:22 -0500
Subject: [PATCH 03/14] Update stories that use Button to use ExpensifyButton

---
 STORYBOOK.md                  | 8 ++++----
 src/stories/Button.stories.js | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/STORYBOOK.md b/STORYBOOK.md
index cb4cf290a77a..3139b5493a3c 100644
--- a/STORYBOOK.md
+++ b/STORYBOOK.md
@@ -36,16 +36,16 @@ Here's an example story:
 
 ```javascript
 import React from 'react';
-import Button from '../components/Button';
+import ExpensifyButton from '../components/ExpensifyButton';
 
 const story = {
 	// Title field will determine how the story displays in the sidebar
-    title: 'Components/Button',
-    component: Button,
+    title: 'Components/ExpensifyButton',
+    component: ExpensifyButton,
 };
 
 // Optional `args` are passed which determine the props the example component will have
-const Template = args => <Button {...args} />;
+const Template = args => <ExpensifyButton {...args} />;
 
 // Each story must be exported with a named export
 const Default = Template.bind({});
diff --git a/src/stories/Button.stories.js b/src/stories/Button.stories.js
index c951ba89c0bf..04e500e91ca3 100644
--- a/src/stories/Button.stories.js
+++ b/src/stories/Button.stories.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import Button from '../components/Button';
+import ExpensifyButton from '../components/ExpensifyButton';
 
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
@@ -7,12 +7,12 @@ import Button from '../components/Button';
  * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
  */
 const story = {
-    title: 'Components/Button',
-    component: Button,
+    title: 'Components/ExpensifyButton',
+    component: ExpensifyButton,
 };
 
 // eslint-disable-next-line react/jsx-props-no-spreading
-const Template = args => <Button {...args} />;
+const Template = args => <ExpensifyButton {...args} />;
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args

From 0c4278e435813e1af18de04722f32d0cb69c2d89 Mon Sep 17 00:00:00 2001
From: Puneet Lath <puneet@expensify.com>
Date: Tue, 30 Nov 2021 12:00:28 -0500
Subject: [PATCH 04/14] Update pages that use Button to use ExpensifyButton

---
 src/pages/EnablePayments/AdditionalDetailsStep.js           | 4 ++--
 src/pages/EnablePayments/OnfidoStep.js                      | 6 +++---
 src/pages/EnablePayments/TermsStep.js                       | 4 ++--
 src/pages/NewChatPage.js                                    | 4 ++--
 src/pages/RequestCallPage.js                                | 4 ++--
 src/pages/SetPasswordPage.js                                | 4 ++--
 src/pages/home/report/MarkerBadge/index.js                  | 6 +++---
 src/pages/home/report/ReportActionItemMessageEdit.js        | 6 +++---
 src/pages/iou/IOUCurrencySelection.js                       | 4 ++--
 src/pages/iou/IOUDetailsModal.js                            | 4 ++--
 src/pages/iou/steps/IOUAmountPage.js                        | 4 ++--
 .../iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js   | 4 ++--
 src/pages/settings/AddSecondaryLoginPage.js                 | 4 ++--
 src/pages/settings/PasswordPage.js                          | 4 ++--
 src/pages/settings/Payments/AddPayPalMePage.js              | 4 ++--
 src/pages/settings/Profile/LoginField.js                    | 4 ++--
 src/pages/settings/Profile/ProfilePage.js                   | 4 ++--
 src/pages/signin/LoginForm.js                               | 4 ++--
 src/pages/signin/PasswordForm.js                            | 4 ++--
 src/pages/signin/ResendValidationForm.js                    | 4 ++--
 src/pages/workspace/WorkspaceMembersPage.js                 | 6 +++---
 src/pages/workspace/WorkspaceSettingsPage.js                | 4 ++--
 22 files changed, 48 insertions(+), 48 deletions(-)

diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js
index 3d80857894a0..766f329f6a66 100644
--- a/src/pages/EnablePayments/AdditionalDetailsStep.js
+++ b/src/pages/EnablePayments/AdditionalDetailsStep.js
@@ -10,7 +10,7 @@ import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import Navigation from '../../libs/Navigation/Navigation';
 import styles from '../../styles/styles';
-import Button from '../../components/Button';
+import ExpensifyButton from '../../components/ExpensifyButton';
 import Text from '../../components/Text';
 import * as BankAccounts from '../../libs/actions/BankAccounts';
 import CONST from '../../CONST';
@@ -150,7 +150,7 @@ class AdditionalDetailsStep extends React.Component {
                                     {this.props.walletAdditionalDetails.additionalErrorMessage}
                                 </Text>
                             )}
-                            <Button
+                            <ExpensifyButton
                                 success
                                 text={this.props.translate('common.saveAndContinue')}
                                 isLoading={this.props.walletAdditionalDetails.loading}
diff --git a/src/pages/EnablePayments/OnfidoStep.js b/src/pages/EnablePayments/OnfidoStep.js
index e39dad6a1ff1..a86e62e0bc33 100644
--- a/src/pages/EnablePayments/OnfidoStep.js
+++ b/src/pages/EnablePayments/OnfidoStep.js
@@ -8,7 +8,7 @@ import ONYXKEYS from '../../ONYXKEYS';
 import * as BankAccounts from '../../libs/actions/BankAccounts';
 import Navigation from '../../libs/Navigation/Navigation';
 import CONST from '../../CONST';
-import Button from '../../components/Button';
+import ExpensifyButton from '../../components/ExpensifyButton';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import styles from '../../styles/styles';
 import TextLink from '../../components/TextLink';
@@ -113,7 +113,7 @@ class OnfidoStep extends React.Component {
                                             .
                                         </Text>
                                     </View>
-                                    <Button
+                                    <ExpensifyButton
                                         success
                                         text={this.props.translate('common.continue')}
                                         isLoading={this.props.walletOnfidoData.loading}
@@ -130,7 +130,7 @@ class OnfidoStep extends React.Component {
                                     <Text style={[styles.h3, styles.textStrong, styles.mb2]}>
                                         {this.props.walletOnfidoData.error}
                                     </Text>
-                                    <Button
+                                    <ExpensifyButton
                                         success
                                         text={this.props.translate('onfidoStep.tryAgain')}
                                         onPress={() => {
diff --git a/src/pages/EnablePayments/TermsStep.js b/src/pages/EnablePayments/TermsStep.js
index 0c7c541fa052..48bb484a418b 100644
--- a/src/pages/EnablePayments/TermsStep.js
+++ b/src/pages/EnablePayments/TermsStep.js
@@ -6,7 +6,7 @@ import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import Navigation from '../../libs/Navigation/Navigation';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import styles from '../../styles/styles';
-import Button from '../../components/Button';
+import ExpensifyButton from '../../components/ExpensifyButton';
 import * as BankAccounts from '../../libs/actions/BankAccounts';
 import CONST from '../../CONST';
 import TextLink from '../../components/TextLink';
@@ -109,7 +109,7 @@ class TermsStep extends React.Component {
                     </Text>
                 )}
                 <FixedFooter>
-                    <Button
+                    <ExpensifyButton
                         success
                         text={this.props.translate('termsStep.enablePayments')}
                         isLoading={this.props.walletTerms.loading}
diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js
index 3771931f3237..8dc1a806e7fd 100755
--- a/src/pages/NewChatPage.js
+++ b/src/pages/NewChatPage.js
@@ -17,7 +17,7 @@ import ScreenWrapper from '../components/ScreenWrapper';
 import FullScreenLoadingIndicator from '../components/FullscreenLoadingIndicator';
 import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
 import compose from '../libs/compose';
-import Button from '../components/Button';
+import ExpensifyButton from '../components/ExpensifyButton';
 import KeyboardAvoidingView from '../components/KeyboardAvoidingView';
 import FixedFooter from '../components/FixedFooter';
 import personalDetailsPropType from './personalDetailsPropType';
@@ -265,7 +265,7 @@ class NewChatPage extends Component {
                                     />
                                     {this.props.isGroupChat && lodashGet(this.state, 'selectedOptions', []).length > 0 && (
                                         <FixedFooter>
-                                            <Button
+                                            <ExpensifyButton
                                                 success
                                                 onPress={this.createGroup}
                                                 style={[styles.w100]}
diff --git a/src/pages/RequestCallPage.js b/src/pages/RequestCallPage.js
index 56ae6597f9a8..0da76f30d62c 100644
--- a/src/pages/RequestCallPage.js
+++ b/src/pages/RequestCallPage.js
@@ -12,7 +12,7 @@ import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
 import ONYXKEYS from '../ONYXKEYS';
 import compose from '../libs/compose';
 import FullNameInputRow from '../components/FullNameInputRow';
-import Button from '../components/Button';
+import ExpensifyButton from '../components/ExpensifyButton';
 import FixedFooter from '../components/FixedFooter';
 import CONST from '../CONST';
 import Growl from '../libs/Growl';
@@ -243,7 +243,7 @@ class RequestCallPage extends Component {
                         </View>
                     </ScrollView>
                     <FixedFooter>
-                        <Button
+                        <ExpensifyButton
                             success
                             onPress={this.onSubmit}
                             style={[styles.w100]}
diff --git a/src/pages/SetPasswordPage.js b/src/pages/SetPasswordPage.js
index 67a3828c1b32..7df7157e56d8 100755
--- a/src/pages/SetPasswordPage.js
+++ b/src/pages/SetPasswordPage.js
@@ -14,7 +14,7 @@ import {
 import styles from '../styles/styles';
 import * as Session from '../libs/actions/Session';
 import ONYXKEYS from '../ONYXKEYS';
-import Button from '../components/Button';
+import ExpensifyButton from '../components/ExpensifyButton';
 import SignInPageLayout from './signin/SignInPageLayout';
 import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
 import compose from '../libs/compose';
@@ -106,7 +106,7 @@ class SetPasswordPage extends Component {
                         />
                     </View>
                     <View>
-                        <Button
+                        <ExpensifyButton
                             success
                             style={[styles.mb2]}
                             text={this.props.translate('setPasswordPage.setPassword')}
diff --git a/src/pages/home/report/MarkerBadge/index.js b/src/pages/home/report/MarkerBadge/index.js
index 07eb5179751e..2ffaa61ed4bd 100644
--- a/src/pages/home/report/MarkerBadge/index.js
+++ b/src/pages/home/report/MarkerBadge/index.js
@@ -2,7 +2,7 @@ import React, {PureComponent} from 'react';
 import {Animated, Text, View} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../../../../styles/styles';
-import Button from '../../../../components/Button';
+import ExpensifyButton from '../../../../components/ExpensifyButton';
 import Icon from '../../../../components/Icon';
 import * as Expensicons from '../../../../components/Icon/Expensicons';
 import themeColors from '../../../../styles/themes/default';
@@ -77,7 +77,7 @@ class MarkerBadge extends PureComponent {
                         styles.alignItemsCenter,
                     ]}
                     >
-                        <Button
+                        <ExpensifyButton
                             success
                             small
                             onPress={this.props.onClick}
@@ -101,7 +101,7 @@ class MarkerBadge extends PureComponent {
                             )}
                             shouldRemoveRightBorderRadius
                         />
-                        <Button
+                        <ExpensifyButton
                             success
                             small
                             style={[styles.buttonDropdown]}
diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index df9679bba1c0..a18d3877d33e 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -11,7 +11,7 @@ import * as ReportScrollManager from '../../../libs/ReportScrollManager';
 import toggleReportActionComposeView from '../../../libs/toggleReportActionComposeView';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
-import Button from '../../../components/Button';
+import ExpensifyButton from '../../../components/ExpensifyButton';
 import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFocusManager';
 import compose from '../../../libs/compose';
 
@@ -150,13 +150,13 @@ class ReportActionItemMessageEdit extends React.Component {
                     />
                 </View>
                 <View style={[styles.flexRow, styles.mt1]}>
-                    <Button
+                    <ExpensifyButton
                         small
                         style={[styles.mr2]}
                         onPress={this.deleteDraft}
                         text={this.props.translate('common.cancel')}
                     />
-                    <Button
+                    <ExpensifyButton
                         small
                         success
                         style={[styles.mr2]}
diff --git a/src/pages/iou/IOUCurrencySelection.js b/src/pages/iou/IOUCurrencySelection.js
index 3adfeba4a99d..523d52aa8f3c 100644
--- a/src/pages/iou/IOUCurrencySelection.js
+++ b/src/pages/iou/IOUCurrencySelection.js
@@ -18,7 +18,7 @@ import compose from '../../libs/compose';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import CONST from '../../CONST';
 import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
-import Button from '../../components/Button';
+import ExpensifyButton from '../../components/ExpensifyButton';
 import FixedFooter from '../../components/FixedFooter';
 import * as IOU from '../../libs/actions/IOU';
 
@@ -218,7 +218,7 @@ class IOUCurrencySelection extends Component {
                         </View>
                     </View>
                     <FixedFooter>
-                        <Button
+                        <ExpensifyButton
                             success
                             isDisabled={!this.props.iou.selectedCurrencyCode}
                             style={[styles.w100]}
diff --git a/src/pages/iou/IOUDetailsModal.js b/src/pages/iou/IOUDetailsModal.js
index 5c8206e3eb95..36e613ee6d57 100644
--- a/src/pages/iou/IOUDetailsModal.js
+++ b/src/pages/iou/IOUDetailsModal.js
@@ -20,7 +20,7 @@ import compose from '../../libs/compose';
 import CONST from '../../CONST';
 import PopoverMenu from '../../components/PopoverMenu';
 import isAppInstalled from '../../libs/isAppInstalled';
-import Button from '../../components/Button';
+import ExpensifyButton from '../../components/ExpensifyButton';
 import Permissions from '../../libs/Permissions';
 import * as Expensicons from '../../components/Icon/Expensicons';
 import * as ValidationUtils from '../../libs/ValidationUtils';
@@ -243,7 +243,7 @@ class IOUDetailsModal extends Component {
                                         }}
                                     />
                                 ) : (
-                                    <Button
+                                    <ExpensifyButton
                                         success
                                         text={selectedPaymentType}
                                         isLoading={this.props.iou.loading}
diff --git a/src/pages/iou/steps/IOUAmountPage.js b/src/pages/iou/steps/IOUAmountPage.js
index 5f5c2a0ff71a..565fbe1735cd 100755
--- a/src/pages/iou/steps/IOUAmountPage.js
+++ b/src/pages/iou/steps/IOUAmountPage.js
@@ -16,7 +16,7 @@ import Navigation from '../../../libs/Navigation/Navigation';
 import ROUTES from '../../../ROUTES';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import compose from '../../../libs/compose';
-import Button from '../../../components/Button';
+import ExpensifyButton from '../../../components/ExpensifyButton';
 import Text from '../../../components/Text';
 import CONST from '../../../CONST';
 
@@ -214,7 +214,7 @@ class IOUAmountPage extends React.Component {
                             />
                         ) : <View />}
 
-                    <Button
+                    <ExpensifyButton
                         success
                         style={[styles.w100, styles.mt5]}
                         onPress={() => this.props.onStepComplete(this.state.amount)}
diff --git a/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js b/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js
index 46c048e819a6..6b6ec2fcca53 100755
--- a/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js
+++ b/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js
@@ -11,7 +11,7 @@ import * as OptionsListUtils from '../../../../libs/OptionsListUtils';
 import CONST from '../../../../CONST';
 import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
 import compose from '../../../../libs/compose';
-import Button from '../../../../components/Button';
+import ExpensifyButton from '../../../../components/ExpensifyButton';
 import Text from '../../../../components/Text';
 import FixedFooter from '../../../../components/FixedFooter';
 import personalDetailsPropType from '../../../personalDetailsPropType';
@@ -239,7 +239,7 @@ class IOUParticipantsSplit extends Component {
                                 {this.props.translate('iou.maxParticipantsReached', {count: CONST.REPORT.MAXIMUM_PARTICIPANTS})}
                             </Text>
                         )}
-                        <Button
+                        <ExpensifyButton
                             success
                             style={[styles.w100]}
                             onPress={this.finalizeParticipants}
diff --git a/src/pages/settings/AddSecondaryLoginPage.js b/src/pages/settings/AddSecondaryLoginPage.js
index 98d7573ee44b..f29e7001631e 100755
--- a/src/pages/settings/AddSecondaryLoginPage.js
+++ b/src/pages/settings/AddSecondaryLoginPage.js
@@ -11,7 +11,7 @@ import Text from '../../components/Text';
 import styles from '../../styles/styles';
 import * as User from '../../libs/actions/User';
 import ONYXKEYS from '../../ONYXKEYS';
-import Button from '../../components/Button';
+import ExpensifyButton from '../../components/ExpensifyButton';
 import ROUTES from '../../ROUTES';
 import CONST from '../../CONST';
 import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
@@ -147,7 +147,7 @@ class AddSecondaryLoginPage extends Component {
                         )}
                     </ScrollView>
                     <FixedFooter style={[styles.flexGrow0]}>
-                        <Button
+                        <ExpensifyButton
                             success
                             isDisabled={this.validateForm()}
                             isLoading={this.props.user.loading}
diff --git a/src/pages/settings/PasswordPage.js b/src/pages/settings/PasswordPage.js
index 743a50563429..6c4dab77cbe3 100755
--- a/src/pages/settings/PasswordPage.js
+++ b/src/pages/settings/PasswordPage.js
@@ -11,7 +11,7 @@ import ScreenWrapper from '../../components/ScreenWrapper';
 import Text from '../../components/Text';
 import styles from '../../styles/styles';
 import ONYXKEYS from '../../ONYXKEYS';
-import Button from '../../components/Button';
+import ExpensifyButton from '../../components/ExpensifyButton';
 import * as ValidationUtils from '../../libs/ValidationUtils';
 import * as User from '../../libs/actions/User';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
@@ -234,7 +234,7 @@ class PasswordPage extends Component {
                         )}
                     </ScrollView>
                     <FixedFooter style={[styles.flexGrow0]}>
-                        <Button
+                        <ExpensifyButton
                             success
                             style={[styles.mb2]}
                             isLoading={this.props.account.loading}
diff --git a/src/pages/settings/Payments/AddPayPalMePage.js b/src/pages/settings/Payments/AddPayPalMePage.js
index 647200c4c322..e5ab38a9d2ba 100644
--- a/src/pages/settings/Payments/AddPayPalMePage.js
+++ b/src/pages/settings/Payments/AddPayPalMePage.js
@@ -14,7 +14,7 @@ import Navigation from '../../../libs/Navigation/Navigation';
 import styles from '../../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import compose from '../../../libs/compose';
-import Button from '../../../components/Button';
+import ExpensifyButton from '../../../components/ExpensifyButton';
 import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView';
 import FixedFooter from '../../../components/FixedFooter';
 import Growl from '../../../libs/Growl';
@@ -100,7 +100,7 @@ class AddPayPalMePage extends React.Component {
                         </View>
                     </View>
                     <FixedFooter>
-                        <Button
+                        <ExpensifyButton
                             success
                             onPress={this.setPayPalMeUsername}
                             pressOnEnter
diff --git a/src/pages/settings/Profile/LoginField.js b/src/pages/settings/Profile/LoginField.js
index 8f304112fce4..017df9881f8c 100755
--- a/src/pages/settings/Profile/LoginField.js
+++ b/src/pages/settings/Profile/LoginField.js
@@ -11,7 +11,7 @@ import CONST from '../../../CONST';
 import Navigation from '../../../libs/Navigation/Navigation';
 import * as User from '../../../libs/actions/User';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
-import Button from '../../../components/Button';
+import ExpensifyButton from '../../../components/ExpensifyButton';
 import MenuItem from '../../../components/MenuItem';
 
 const propTypes = {
@@ -104,7 +104,7 @@ class LoginField extends Component {
                                 : this.props.login.partnerUserID}
                         </Text>
                         {!this.props.login.validatedDate && (
-                            <Button
+                            <ExpensifyButton
                                 style={[styles.mb2]}
                                 onPress={this.onResendClicked}
                                 ContentComponent={() => (this.state.showCheckmarkIcon ? (
diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js
index 85294fae504a..06717385c80d 100755
--- a/src/pages/settings/Profile/ProfilePage.js
+++ b/src/pages/settings/Profile/ProfilePage.js
@@ -18,7 +18,7 @@ import Text from '../../../components/Text';
 import LoginField from './LoginField';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import compose from '../../../libs/compose';
-import Button from '../../../components/Button';
+import ExpensifyButton from '../../../components/ExpensifyButton';
 import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView';
 import FixedFooter from '../../../components/FixedFooter';
 import ExpensiTextInput from '../../../components/ExpensiTextInput';
@@ -271,7 +271,7 @@ class ProfilePage extends Component {
                         />
                     </ScrollView>
                     <FixedFooter>
-                        <Button
+                        <ExpensifyButton
                             success
                             isDisabled={isButtonDisabled}
                             onPress={this.updatePersonalDetails}
diff --git a/src/pages/signin/LoginForm.js b/src/pages/signin/LoginForm.js
index 3ce6a7673f03..65144aa1327d 100755
--- a/src/pages/signin/LoginForm.js
+++ b/src/pages/signin/LoginForm.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import _ from 'underscore';
 import Str from 'expensify-common/lib/str';
 import styles from '../../styles/styles';
-import Button from '../../components/Button';
+import ExpensifyButton from '../../components/ExpensifyButton';
 import Text from '../../components/Text';
 import * as Session from '../../libs/actions/Session';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -135,7 +135,7 @@ class LoginForm extends React.Component {
                     </Text>
                 )}
                 <View style={[styles.mt5]}>
-                    <Button
+                    <ExpensifyButton
                         success
                         text={this.props.translate('common.continue')}
                         isLoading={this.props.account.loading}
diff --git a/src/pages/signin/PasswordForm.js b/src/pages/signin/PasswordForm.js
index b92c0373fcda..9ecf2eeb6c9d 100755
--- a/src/pages/signin/PasswordForm.js
+++ b/src/pages/signin/PasswordForm.js
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import styles from '../../styles/styles';
-import Button from '../../components/Button';
+import ExpensifyButton from '../../components/ExpensifyButton';
 import Text from '../../components/Text';
 import themeColors from '../../styles/themes/default';
 import * as Session from '../../libs/actions/Session';
@@ -135,7 +135,7 @@ class PasswordForm extends React.Component {
                     </Text>
                 )}
                 <View>
-                    <Button
+                    <ExpensifyButton
                         success
                         style={[styles.mv3]}
                         text={this.props.translate('common.signIn')}
diff --git a/src/pages/signin/ResendValidationForm.js b/src/pages/signin/ResendValidationForm.js
index f92ffc6f84b7..c596ae552671 100755
--- a/src/pages/signin/ResendValidationForm.js
+++ b/src/pages/signin/ResendValidationForm.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import _ from 'underscore';
 import Str from 'expensify-common/lib/str';
 import styles from '../../styles/styles';
-import Button from '../../components/Button';
+import ExpensifyButton from '../../components/ExpensifyButton';
 import Text from '../../components/Text';
 import * as Session from '../../libs/actions/Session';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -136,7 +136,7 @@ class ResendValidationForm extends React.Component {
                             {this.props.translate('common.back')}
                         </Text>
                     </TouchableOpacity>
-                    <Button
+                    <ExpensifyButton
                         success
                         text={this.props.translate('resendValidationForm.resendLink')}
                         isLoading={this.props.account.loading}
diff --git a/src/pages/workspace/WorkspaceMembersPage.js b/src/pages/workspace/WorkspaceMembersPage.js
index 6b90b4077561..5733ca8a7a47 100644
--- a/src/pages/workspace/WorkspaceMembersPage.js
+++ b/src/pages/workspace/WorkspaceMembersPage.js
@@ -16,7 +16,7 @@ import ScreenWrapper from '../../components/ScreenWrapper';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import compose from '../../libs/compose';
 import * as Policy from '../../libs/actions/Policy';
-import Button from '../../components/Button';
+import ExpensifyButton from '../../components/ExpensifyButton';
 import Checkbox from '../../components/Checkbox';
 import Text from '../../components/Text';
 import ROUTES from '../../ROUTES';
@@ -272,13 +272,13 @@ class WorkspaceMembersPage extends React.Component {
                 />
                 <View style={[styles.pageWrapper, styles.flex1]}>
                     <View style={[styles.w100, styles.flexRow]}>
-                        <Button
+                        <ExpensifyButton
                             small
                             success
                             text={this.props.translate('common.invite')}
                             onPress={this.inviteUser}
                         />
-                        <Button
+                        <ExpensifyButton
                             small
                             danger
                             style={[styles.ml2]}
diff --git a/src/pages/workspace/WorkspaceSettingsPage.js b/src/pages/workspace/WorkspaceSettingsPage.js
index e0873f2631ee..6e06a2c9ae95 100644
--- a/src/pages/workspace/WorkspaceSettingsPage.js
+++ b/src/pages/workspace/WorkspaceSettingsPage.js
@@ -9,7 +9,7 @@ import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize
 import Navigation from '../../libs/Navigation/Navigation';
 import Permissions from '../../libs/Permissions';
 import styles from '../../styles/styles';
-import Button from '../../components/Button';
+import ExpensifyButton from '../../components/ExpensifyButton';
 import Text from '../../components/Text';
 import compose from '../../libs/compose';
 import * as Policy from '../../libs/actions/Policy';
@@ -124,7 +124,7 @@ class WorkspaceSettingsPage extends React.Component {
                 route={this.props.route}
                 footer={(
                     <FixedFooter style={[styles.w100]}>
-                        <Button
+                        <ExpensifyButton
                             success
                             isLoading={this.props.policy.isPolicyUpdating}
                             text={this.props.translate('workspace.editor.save')}

From 3ec2544c2c68c224f31fdd3a4e98f284400d5a90 Mon Sep 17 00:00:00 2001
From: Puneet Lath <puneet@expensify.com>
Date: Tue, 30 Nov 2021 12:14:30 -0500
Subject: [PATCH 05/14] Rename our custom Text component to ExpensifyText

---
 src/components/Text.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Text.js b/src/components/Text.js
index 2aebe5b69ce1..2540645fd7d0 100644
--- a/src/components/Text.js
+++ b/src/components/Text.js
@@ -36,7 +36,7 @@ const defaultProps = {
     style: {},
 };
 
-const Text = React.forwardRef(({
+const ExpensifyText = React.forwardRef(({
     color,
     fontSize,
     textAlign,
@@ -68,8 +68,8 @@ const Text = React.forwardRef(({
     );
 });
 
-Text.propTypes = propTypes;
-Text.defaultProps = defaultProps;
-Text.displayName = 'Text';
+ExpensifyText.propTypes = propTypes;
+ExpensifyText.defaultProps = defaultProps;
+ExpensifyText.displayName = 'ExpensifyText';
 
-export default Text;
+export default ExpensifyText;

From e5a824295fc9196056ea5e4958ad5f761705e1a9 Mon Sep 17 00:00:00 2001
From: Puneet Lath <puneet@expensify.com>
Date: Tue, 30 Nov 2021 12:19:26 -0500
Subject: [PATCH 06/14] Update references to <Button> component in
 documentation to be <ExpensifyButton>

---
 STYLING.md                                                   | 2 +-
 src/components/AttachmentPicker/attachmentPickerPropTypes.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/STYLING.md b/STYLING.md
index ea402f162373..321389c2d89a 100644
--- a/STYLING.md
+++ b/STYLING.md
@@ -46,7 +46,7 @@ Any array of styles associated with a single type of React element that has at l
 - If a reusable style has 3 or more modifiers it should be refactored into a component with props to modify the styles e.g.
 
 ```jsx
-<Button title="Submit" success large />
+<ExpensifyButton title="Submit" success large />
 ```
 
 ## Inline Styles
diff --git a/src/components/AttachmentPicker/attachmentPickerPropTypes.js b/src/components/AttachmentPicker/attachmentPickerPropTypes.js
index 8338ad9bb9f3..d5a233ca751c 100644
--- a/src/components/AttachmentPicker/attachmentPickerPropTypes.js
+++ b/src/components/AttachmentPicker/attachmentPickerPropTypes.js
@@ -8,7 +8,7 @@ const propTypes = {
      * @example
      * <AttachmentPicker>
      * {({openPicker}) => (
-     *     <Button
+     *     <ExpensifyButton
      *         onPress={() => {
      *             openPicker({
      *                 onPicked: (file) => {

From 75507787adea15e7d5126934347ffea251f601ba Mon Sep 17 00:00:00 2001
From: Puneet Lath <puneet@expensify.com>
Date: Tue, 30 Nov 2021 12:20:44 -0500
Subject: [PATCH 07/14] Update stories that use Text to use ExpensifyText

---
 src/stories/CheckboxWithLabel.stories.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/stories/CheckboxWithLabel.stories.js b/src/stories/CheckboxWithLabel.stories.js
index 8b157a64d067..794ea12633be 100644
--- a/src/stories/CheckboxWithLabel.stories.js
+++ b/src/stories/CheckboxWithLabel.stories.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import CheckboxWithLabel from '../components/CheckboxWithLabel';
-import Text from '../components/Text';
+import ExpensifyText from '../components/ExpensifyText';
 import styles from '../styles/styles';
 
 /**
@@ -32,9 +32,9 @@ WithLabelComponent.args = {
     onPress: () => {},
     LabelComponent: () => (
         <>
-            <Text style={[styles.textLarge]}>Test</Text>
-            <Text style={[styles.textMicroBold]}> Test </Text>
-            <Text style={[styles.textMicroSupporting]}>Test</Text>
+            <ExpensifyText style={[styles.textLarge]}>Test</ExpensifyText>
+            <ExpensifyText style={[styles.textMicroBold]}> Test </ExpensifyText>
+            <ExpensifyText style={[styles.textMicroSupporting]}>Test</ExpensifyText>
         </>
     ),
 };

From 8dae44db122f8c5de47268793a7e4e95f737c866 Mon Sep 17 00:00:00 2001
From: Puneet Lath <puneet@expensify.com>
Date: Tue, 30 Nov 2021 12:31:42 -0500
Subject: [PATCH 08/14] Rename file from Text.js to ExpensifyText.js

---
 src/components/ExpensifyText.js | 75 +++++++++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 src/components/ExpensifyText.js

diff --git a/src/components/ExpensifyText.js b/src/components/ExpensifyText.js
new file mode 100644
index 000000000000..2540645fd7d0
--- /dev/null
+++ b/src/components/ExpensifyText.js
@@ -0,0 +1,75 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'underscore';
+import {Text as RNText} from 'react-native';
+import fontFamily from '../styles/fontFamily';
+import themeColors from '../styles/themes/default';
+import variables from '../styles/variables';
+
+const propTypes = {
+    /** The color of the text */
+    color: PropTypes.string,
+
+    /** The size of the text */
+    fontSize: PropTypes.number,
+
+    /** The alignment of the text */
+    // eslint-disable-next-line react/forbid-prop-types
+    textAlign: PropTypes.any,
+
+    /** Any children to display */
+    children: PropTypes.node,
+
+    /** The family of the font to use */
+    family: PropTypes.string,
+
+    /** Any additional styles to apply */
+    // eslint-disable-next-line react/forbid-prop-types
+    style: PropTypes.any,
+};
+const defaultProps = {
+    color: themeColors.text,
+    fontSize: variables.fontSizeNormal,
+    family: 'GTA',
+    textAlign: null,
+    children: null,
+    style: {},
+};
+
+const ExpensifyText = React.forwardRef(({
+    color,
+    fontSize,
+    textAlign,
+    children,
+    family,
+    style,
+    ...props
+}, ref) => {
+    // If the style prop is an array of styles, we need to mix them all together
+    const mergedStyles = !_.isArray(style) ? style : _.reduce(style, (finalStyles, s) => ({
+        ...finalStyles,
+        ...s,
+    }), {});
+    const componentStyle = {
+        color,
+        fontSize,
+        textAlign,
+        fontFamily: fontFamily[family],
+        ...mergedStyles,
+    };
+
+    if (!componentStyle.lineHeight && componentStyle.fontSize === variables.fontSizeNormal) {
+        componentStyle.lineHeight = variables.fontSizeNormalHeight;
+    }
+
+    return (
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        <RNText ref={ref} style={[componentStyle]} {...props}>{children}</RNText>
+    );
+});
+
+ExpensifyText.propTypes = propTypes;
+ExpensifyText.defaultProps = defaultProps;
+ExpensifyText.displayName = 'ExpensifyText';
+
+export default ExpensifyText;

From d2dd12ffe7312982baffadfa9b3aeda2f95ae770 Mon Sep 17 00:00:00 2001
From: Puneet Lath <puneet@expensify.com>
Date: Tue, 30 Nov 2021 12:32:37 -0500
Subject: [PATCH 09/14] Remove old Text.js file

---
 src/components/Text.js | 75 ------------------------------------------
 1 file changed, 75 deletions(-)
 delete mode 100644 src/components/Text.js

diff --git a/src/components/Text.js b/src/components/Text.js
deleted file mode 100644
index 2540645fd7d0..000000000000
--- a/src/components/Text.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import _ from 'underscore';
-import {Text as RNText} from 'react-native';
-import fontFamily from '../styles/fontFamily';
-import themeColors from '../styles/themes/default';
-import variables from '../styles/variables';
-
-const propTypes = {
-    /** The color of the text */
-    color: PropTypes.string,
-
-    /** The size of the text */
-    fontSize: PropTypes.number,
-
-    /** The alignment of the text */
-    // eslint-disable-next-line react/forbid-prop-types
-    textAlign: PropTypes.any,
-
-    /** Any children to display */
-    children: PropTypes.node,
-
-    /** The family of the font to use */
-    family: PropTypes.string,
-
-    /** Any additional styles to apply */
-    // eslint-disable-next-line react/forbid-prop-types
-    style: PropTypes.any,
-};
-const defaultProps = {
-    color: themeColors.text,
-    fontSize: variables.fontSizeNormal,
-    family: 'GTA',
-    textAlign: null,
-    children: null,
-    style: {},
-};
-
-const ExpensifyText = React.forwardRef(({
-    color,
-    fontSize,
-    textAlign,
-    children,
-    family,
-    style,
-    ...props
-}, ref) => {
-    // If the style prop is an array of styles, we need to mix them all together
-    const mergedStyles = !_.isArray(style) ? style : _.reduce(style, (finalStyles, s) => ({
-        ...finalStyles,
-        ...s,
-    }), {});
-    const componentStyle = {
-        color,
-        fontSize,
-        textAlign,
-        fontFamily: fontFamily[family],
-        ...mergedStyles,
-    };
-
-    if (!componentStyle.lineHeight && componentStyle.fontSize === variables.fontSizeNormal) {
-        componentStyle.lineHeight = variables.fontSizeNormalHeight;
-    }
-
-    return (
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        <RNText ref={ref} style={[componentStyle]} {...props}>{children}</RNText>
-    );
-});
-
-ExpensifyText.propTypes = propTypes;
-ExpensifyText.defaultProps = defaultProps;
-ExpensifyText.displayName = 'ExpensifyText';
-
-export default ExpensifyText;

From 19ac6478abb8f22c0b7ce3b58359ef693321e0f9 Mon Sep 17 00:00:00 2001
From: Puneet Lath <puneet@expensify.com>
Date: Tue, 30 Nov 2021 13:16:16 -0500
Subject: [PATCH 10/14] Update components that use Text to use ExpensifyText

---
 src/components/AddPlaidBankAccount.js         |  6 ++--
 .../BaseAnchorForCommentsOnly/index.js        |  6 ++--
 .../BaseAnchorForCommentsOnly/index.native.js |  6 ++--
 src/components/AttachmentView.js              |  4 +--
 src/components/Badge.js                       |  6 ++--
 src/components/CheckboxWithLabel.js           |  6 ++--
 src/components/CollapsibleSection/index.js    |  6 ++--
 src/components/ConfirmModal.js                |  6 ++--
 src/components/CopyTextToClipboard.js         |  8 ++---
 src/components/DisplayNames/index.js          | 20 ++++++-------
 src/components/DisplayNames/index.native.js   |  6 ++--
 src/components/EmptyStateAvatars.js           |  6 ++--
 src/components/ExpensifyButton.js             |  6 ++--
 src/components/FormAlertWithSubmitButton.js   | 12 ++++----
 src/components/GrowlNotification/index.js     |  6 ++--
 .../BaseHTMLEngineProvider.js                 | 18 +++++------
 src/components/Header.js                      |  8 ++---
 src/components/IOUConfirmationList.js         |  6 ++--
 src/components/InlineCodeBlock/WrappedText.js |  4 +--
 src/components/InlineErrorText.js             |  4 +--
 src/components/KeyboardShortcutsModal.js      |  8 ++---
 src/components/MenuItem.js                    | 14 ++++-----
 src/components/MultipleAvatars.js             |  6 ++--
 src/components/OptionsList/BaseOptionsList.js | 10 +++----
 src/components/PopoverMenu/BasePopoverMenu.js |  6 ++--
 .../ReimbursementAccountLoadingIndicator.js   |  6 ++--
 src/components/ReportActionItem/IOUPreview.js | 14 ++++-----
 src/components/ReportActionItem/IOUQuote.js   | 10 +++----
 src/components/ReportTransaction.js           | 10 +++----
 src/components/ReportWelcomeText.js           | 30 +++++++++----------
 src/components/TextInputAutoWidth.js          |  8 ++---
 src/components/TextInputWithLabel.js          |  6 ++--
 src/components/TextLink.js                    |  6 ++--
 .../Tooltip/TooltipRenderedOnPageBody.js      |  4 +--
 src/components/UnorderedList.js               |  6 ++--
 src/components/UnreadActionIndicator.js       |  6 ++--
 src/components/WelcomeText.js                 | 10 +++----
 37 files changed, 155 insertions(+), 155 deletions(-)

diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js
index af3f95c3b458..a49959cdc2dd 100644
--- a/src/components/AddPlaidBankAccount.js
+++ b/src/components/AddPlaidBankAccount.js
@@ -16,7 +16,7 @@ import themeColors from '../styles/themes/default';
 import compose from '../libs/compose';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import ExpensiPicker from './ExpensiPicker';
-import Text from './Text';
+import ExpensifyText from './ExpensifyText';
 import * as ReimbursementAccountUtils from '../libs/ReimbursementAccountUtils';
 import ReimbursementAccountForm from '../pages/ReimbursementAccount/ReimbursementAccountForm';
 import getBankIcon from './Icon/BankIcons';
@@ -176,7 +176,7 @@ class AddPlaidBankAccount extends React.Component {
                         onSubmit={this.selectAccount}
                     >
                         {!_.isEmpty(this.props.text) && (
-                            <Text style={[styles.mb5]}>{this.props.text}</Text>
+                            <ExpensifyText style={[styles.mb5]}>{this.props.text}</ExpensifyText>
                         )}
                         <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb5]}>
                             <Icon
@@ -184,7 +184,7 @@ class AddPlaidBankAccount extends React.Component {
                                 height={iconSize}
                                 width={iconSize}
                             />
-                            <Text style={[styles.ml3, styles.textStrong]}>{this.state.institution.name}</Text>
+                            <ExpensifyText style={[styles.ml3, styles.textStrong]}>{this.state.institution.name}</ExpensifyText>
                         </View>
                         <View style={[styles.mb5]}>
                             <ExpensiPicker
diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.js
index ef9347c2f20b..13f26d3d38f9 100644
--- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.js
+++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.js
@@ -2,7 +2,7 @@ import _ from 'underscore';
 import React from 'react';
 import {Pressable, StyleSheet} from 'react-native';
 import lodashGet from 'lodash/get';
-import Text from '../../Text';
+import ExpensifyText from '../../ExpensifyText';
 import * as anchorForCommentsOnlyPropTypes from '../anchorForCommentsOnlyPropTypes';
 import PressableWithSecondaryInteraction from '../../PressableWithSecondaryInteraction';
 import * as ReportActionContextMenu from '../../../pages/home/report/ContextMenu/ReportActionContextMenu';
@@ -45,7 +45,7 @@ const BaseAnchorForCommentsOnly = (props) => {
                         }
                     }
                 >
-                    <Text
+                    <ExpensifyText
                         ref={el => linkRef = el}
                         style={StyleSheet.flatten(props.style)}
                         accessibilityRole="link"
@@ -58,7 +58,7 @@ const BaseAnchorForCommentsOnly = (props) => {
                         {...rest}
                     >
                         {props.children}
-                    </Text>
+                    </ExpensifyText>
                 </PressableWithSecondaryInteraction>
             )
 
diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.native.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.native.js
index a15b74ea93b4..e1a451be7bce 100644
--- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.native.js
+++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.native.js
@@ -4,7 +4,7 @@ import lodashGet from 'lodash/get';
 import {Linking, StyleSheet, Pressable} from 'react-native';
 import * as anchorForCommentsOnlyPropTypes from '../anchorForCommentsOnlyPropTypes';
 import fileDownload from '../../../libs/fileDownload';
-import Text from '../../Text';
+import ExpensifyText from '../../ExpensifyText';
 import PressableWithSecondaryInteraction from '../../PressableWithSecondaryInteraction';
 import * as ReportActionContextMenu from '../../../pages/home/report/ContextMenu/ReportActionContextMenu';
 import * as ContextMenuActions from '../../../pages/home/report/ContextMenu/ContextMenuActions';
@@ -49,14 +49,14 @@ const BaseAnchorForCommentsOnly = (props) => {
                     }
                     onPress={() => Linking.openURL(props.href)}
                 >
-                    <Text
+                    <ExpensifyText
                         ref={el => linkRef = el}
                         style={StyleSheet.flatten(props.style)}
                         // eslint-disable-next-line react/jsx-props-no-spreading
                         {...rest}
                     >
                         {props.children}
-                    </Text>
+                    </ExpensifyText>
                 </PressableWithSecondaryInteraction>
             )
     );
diff --git a/src/components/AttachmentView.js b/src/components/AttachmentView.js
index 46a793602781..b92c66fc4984 100755
--- a/src/components/AttachmentView.js
+++ b/src/components/AttachmentView.js
@@ -9,7 +9,7 @@ import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import compose from '../libs/compose';
-import Text from './Text';
+import ExpensifyText from './ExpensifyText';
 import Tooltip from './Tooltip';
 
 const propTypes = {
@@ -62,7 +62,7 @@ const AttachmentView = (props) => {
             <View style={styles.mr2}>
                 <Icon src={Expensicons.Paperclip} />
             </View>
-            <Text style={[styles.textStrong, styles.flexShrink1, styles.breakAll, styles.flexWrap, styles.mw100]}>{props.file && props.file.name}</Text>
+            <ExpensifyText style={[styles.textStrong, styles.flexShrink1, styles.breakAll, styles.flexWrap, styles.mw100]}>{props.file && props.file.name}</ExpensifyText>
             {props.shouldShowDownloadIcon && (
                 <View style={styles.ml2}>
                     <Tooltip text={props.translate('common.download')}>
diff --git a/src/components/Badge.js b/src/components/Badge.js
index ee840af8d5ae..afa6e88eae43 100644
--- a/src/components/Badge.js
+++ b/src/components/Badge.js
@@ -3,7 +3,7 @@ import {Pressable, View} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../styles/styles';
 import * as StyleUtils from '../styles/StyleUtils';
-import Text from './Text';
+import ExpensifyText from './ExpensifyText';
 
 const propTypes = {
     /** Is Success type */
@@ -48,12 +48,12 @@ const Badge = (props) => {
             style={props.pressable ? wrapperStyles : wrapperStyles(false)}
             onPress={props.onPress}
         >
-            <Text
+            <ExpensifyText
                 style={[styles.badgeText, textStyles]}
                 numberOfLines={1}
             >
                 {props.text}
-            </Text>
+            </ExpensifyText>
         </Wrapper>
     );
 };
diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js
index 623bbce3af4a..737baa6bc86e 100644
--- a/src/components/CheckboxWithLabel.js
+++ b/src/components/CheckboxWithLabel.js
@@ -4,7 +4,7 @@ import {View, TouchableOpacity} from 'react-native';
 import _ from 'underscore';
 import styles from '../styles/styles';
 import Checkbox from './Checkbox';
-import Text from './Text';
+import ExpensifyText from './ExpensifyText';
 import InlineErrorText from './InlineErrorText';
 
 const propTypes = {
@@ -68,9 +68,9 @@ const CheckboxWithLabel = (props) => {
                     ]}
                 >
                     {props.label && (
-                        <Text style={[styles.ml2]}>
+                        <ExpensifyText style={[styles.ml2]}>
                             {props.label}
-                        </Text>
+                        </ExpensifyText>
                     )}
                     {LabelComponent && (<LabelComponent />)}
                 </TouchableOpacity>
diff --git a/src/components/CollapsibleSection/index.js b/src/components/CollapsibleSection/index.js
index 2a423e568930..4f36fc72ef6c 100644
--- a/src/components/CollapsibleSection/index.js
+++ b/src/components/CollapsibleSection/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import {View, TouchableOpacity} from 'react-native';
 import PropTypes from 'prop-types';
 import Collapsible from './Collapsible';
-import Text from '../Text';
+import ExpensifyText from '../ExpensifyText';
 import styles from '../../styles/styles';
 import Icon from '../Icon';
 import * as Expensicons from '../Icon/Expensicons';
@@ -39,9 +39,9 @@ class CollapsibleSection extends React.Component {
         return (
             <View style={styles.mt4}>
                 <TouchableOpacity onPress={this.toggleSection} style={[styles.pb4, styles.flexRow]}>
-                    <Text style={[styles.flex1, styles.textStrong]}>
+                    <ExpensifyText style={[styles.flex1, styles.textStrong]}>
                         {this.props.title}
-                    </Text>
+                    </ExpensifyText>
                     <Icon src={src} />
                 </TouchableOpacity>
                 <View style={styles.collapsibleSectionBorder} />
diff --git a/src/components/ConfirmModal.js b/src/components/ConfirmModal.js
index 1b895afffc66..c15ad92cc96b 100755
--- a/src/components/ConfirmModal.js
+++ b/src/components/ConfirmModal.js
@@ -10,7 +10,7 @@ import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimen
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import compose from '../libs/compose';
 import ExpensifyButton from './ExpensifyButton';
-import Text from './Text';
+import ExpensifyText from './ExpensifyText';
 
 const propTypes = {
     /** Title of the modal */
@@ -70,9 +70,9 @@ const ConfirmModal = props => (
 
             {_.isString(props.prompt)
                 ? (
-                    <Text>
+                    <ExpensifyText>
                         {props.prompt}
-                    </Text>
+                    </ExpensifyText>
                 ) : (props.prompt)}
 
             <ExpensifyButton
diff --git a/src/components/CopyTextToClipboard.js b/src/components/CopyTextToClipboard.js
index b7c6b3a04d81..d907313a9382 100644
--- a/src/components/CopyTextToClipboard.js
+++ b/src/components/CopyTextToClipboard.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Text from './Text';
+import ExpensifyText from './ExpensifyText';
 import * as Expensicons from './Icon/Expensicons';
 import Clipboard from '../libs/Clipboard';
 import Icon from './Icon';
@@ -48,11 +48,11 @@ class CopyTextToClipboard extends React.Component {
 
     render() {
         return (
-            <Text
+            <ExpensifyText
                 onPress={this.copyToClipboard}
                 style={[styles.flexRow, styles.cursorPointer]}
             >
-                <Text style={this.props.textStyles}>{this.props.text}</Text>
+                <ExpensifyText style={this.props.textStyles}>{this.props.text}</ExpensifyText>
                 <Icon
                     src={this.state.showCheckmark ? Expensicons.Checkmark : Expensicons.Clipboard}
                     fill={this.state.showCheckmark ? themeColors.iconSuccessFill : themeColors.icon}
@@ -60,7 +60,7 @@ class CopyTextToClipboard extends React.Component {
                     height={variables.iconSizeSmall}
                     inline
                 />
-            </Text>
+            </ExpensifyText>
         );
     }
 }
diff --git a/src/components/DisplayNames/index.js b/src/components/DisplayNames/index.js
index e58b08561d6a..29bd4d9612b4 100644
--- a/src/components/DisplayNames/index.js
+++ b/src/components/DisplayNames/index.js
@@ -4,7 +4,7 @@ import {View} from 'react-native';
 import {propTypes, defaultProps} from './displayNamesPropTypes';
 import styles from '../../styles/styles';
 import Tooltip from '../Tooltip';
-import Text from '../Text';
+import ExpensifyText from '../ExpensifyText';
 
 class DisplayNames extends PureComponent {
     constructor(props) {
@@ -69,21 +69,21 @@ class DisplayNames extends PureComponent {
 
     render() {
         if (!this.props.tooltipEnabled) {
-            // No need for any complex text-splitting, just return a simple text component
+            // No need for any complex text-splitting, just return a simple ExpensifyText component
             return (
-                <Text
+                <ExpensifyText
                     style={this.props.textStyles}
                     numberOfLines={this.props.numberOfLines}
                 >
                     {this.props.fullTitle}
-                </Text>
+                </ExpensifyText>
             );
         }
 
         return (
 
             // Tokenization of string only support 1 numberOfLines on Web
-            <Text
+            <ExpensifyText
                 style={[...this.props.textStyles, styles.pRelative]}
                 onLayout={this.setContainerLayout}
                 numberOfLines={1}
@@ -101,11 +101,11 @@ class DisplayNames extends PureComponent {
                             >
                                 {/*  // We need to get the refs to all the names which will be used to correct
                                     the horizontal position of the tooltip */}
-                                <Text ref={el => this.childRefs[index] = el}>
+                                <ExpensifyText ref={el => this.childRefs[index] = el}>
                                     {displayName}
-                                </Text>
+                                </ExpensifyText>
                             </Tooltip>
-                            {index < this.props.displayNamesWithTooltips.length - 1 && <Text>,&nbsp;</Text>}
+                            {index < this.props.displayNamesWithTooltips.length - 1 && <ExpensifyText>,&nbsp;</ExpensifyText>}
                         </Fragment>
                     ))}
                 {this.props.displayNamesWithTooltips.length > 1 && this.state.isEllipsisActive
@@ -113,11 +113,11 @@ class DisplayNames extends PureComponent {
                         <View style={styles.displayNameTooltipEllipsis}>
                             <Tooltip text={this.props.fullTitle}>
                                 {/* There is some Gap for real ellipsis so we are adding 4 `.` to cover */}
-                                <Text>....</Text>
+                                <ExpensifyText>....</ExpensifyText>
                             </Tooltip>
                         </View>
                     )}
-            </Text>
+            </ExpensifyText>
         );
     }
 }
diff --git a/src/components/DisplayNames/index.native.js b/src/components/DisplayNames/index.native.js
index 6ccb53888fd6..20ecd3e70029 100644
--- a/src/components/DisplayNames/index.native.js
+++ b/src/components/DisplayNames/index.native.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import {propTypes, defaultProps} from './displayNamesPropTypes';
-import Text from '../Text';
+import ExpensifyText from '../ExpensifyText';
 
 // 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 style={props.textStyles} numberOfLines={props.numberOfLines}>
+    <ExpensifyText style={props.textStyles} numberOfLines={props.numberOfLines}>
         {props.fullTitle}
-    </Text>
+    </ExpensifyText>
 );
 
 DisplayNames.propTypes = propTypes;
diff --git a/src/components/EmptyStateAvatars.js b/src/components/EmptyStateAvatars.js
index 9fb5624b6c3f..fec82515b17f 100644
--- a/src/components/EmptyStateAvatars.js
+++ b/src/components/EmptyStateAvatars.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {Image, View} from 'react-native';
 import _ from 'underscore';
 import styles from '../styles/styles';
-import Text from './Text';
+import ExpensifyText from './ExpensifyText';
 import CONST from '../CONST';
 import Avatar from './Avatar';
 
@@ -53,9 +53,9 @@ const EmptyStateAvatars = (props) => {
                                         styles.screenBlur,
                                     ]}
                                 />
-                                <Text style={styles.avatarInnerTextChat}>
+                                <ExpensifyText style={styles.avatarInnerTextChat}>
                                     {`+${props.avatarImageURLs.length - CONST.REPORT.MAX_PREVIEW_AVATARS}`}
-                                </Text>
+                                </ExpensifyText>
                             </>
                         )}
                     </View>
diff --git a/src/components/ExpensifyButton.js b/src/components/ExpensifyButton.js
index 27a812296133..5655508b2834 100644
--- a/src/components/ExpensifyButton.js
+++ b/src/components/ExpensifyButton.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
 import OpacityView from './OpacityView';
-import Text from './Text';
+import ExpensifyText from './ExpensifyText';
 import KeyboardShortcut from '../libs/KeyboardShortcut';
 import Icon from './Icon';
 import CONST from '../CONST';
@@ -121,7 +121,7 @@ class ExpensifyButton extends Component {
         }
 
         const textComponent = (
-            <Text
+            <ExpensifyText
                 selectable={false}
                 style={[
                     styles.buttonText,
@@ -133,7 +133,7 @@ class ExpensifyButton extends Component {
                 ]}
             >
                 {this.props.text}
-            </Text>
+            </ExpensifyText>
         );
 
         if (this.props.icon) {
diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js
index 83cf08b527f9..c3071c1b7ed1 100644
--- a/src/components/FormAlertWithSubmitButton.js
+++ b/src/components/FormAlertWithSubmitButton.js
@@ -9,7 +9,7 @@ import colors from '../styles/colors';
 import ExpensifyButton from './ExpensifyButton';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import TextLink from './TextLink';
-import Text from './Text';
+import ExpensifyText from './ExpensifyText';
 import RenderHTML from './RenderHTML';
 
 const propTypes = {
@@ -65,24 +65,24 @@ const FormAlertWithSubmitButton = (props) => {
                 );
             } else {
                 error = (
-                    <Text style={styles.mutedTextLabel}>{props.message}</Text>
+                    <ExpensifyText style={styles.mutedTextLabel}>{props.message}</ExpensifyText>
                 );
             }
         } else {
             error = (
                 <>
-                    <Text style={styles.mutedTextLabel}>
+                    <ExpensifyText style={styles.mutedTextLabel}>
                         {`${props.translate('common.please')} `}
-                    </Text>
+                    </ExpensifyText>
                     <TextLink
                         style={styles.label}
                         onPress={props.onFixTheErrorsLinkPressed}
                     >
                         {props.translate('common.fixTheErrors')}
                     </TextLink>
-                    <Text style={styles.mutedTextLabel}>
+                    <ExpensifyText style={styles.mutedTextLabel}>
                         {` ${props.translate('common.inTheFormBeforeContinuing')}.`}
-                    </Text>
+                    </ExpensifyText>
                 </>
             );
         }
diff --git a/src/components/GrowlNotification/index.js b/src/components/GrowlNotification/index.js
index d5d8659d307b..1d243dd3699e 100644
--- a/src/components/GrowlNotification/index.js
+++ b/src/components/GrowlNotification/index.js
@@ -6,7 +6,7 @@ import {
     Directions, FlingGestureHandler, State, TouchableWithoutFeedback,
 } from 'react-native-gesture-handler';
 import colors from '../../styles/colors';
-import Text from '../Text';
+import ExpensifyText from '../ExpensifyText';
 import Icon from '../Icon';
 import * as Expensicons from '../Icon/Expensicons';
 import styles from '../../styles/styles';
@@ -92,9 +92,9 @@ class GrowlNotification extends Component {
                     <GrowlNotificationContainer translateY={this.state.translateY}>
                         <TouchableWithoutFeedback onPress={this.fling}>
                             <View style={styles.growlNotificationBox}>
-                                <Text style={styles.growlNotificationText}>
+                                <ExpensifyText style={styles.growlNotificationText}>
                                     {this.state.bodyText}
-                                </Text>
+                                </ExpensifyText>
                                 <Icon src={types[this.state.type].icon} fill={types[this.state.type].iconColor} />
                             </View>
                         </TouchableWithoutFeedback>
diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
index a97b8a70e18d..dde03521f639 100755
--- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
+++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
@@ -21,7 +21,7 @@ import AttachmentModal from '../AttachmentModal';
 import ThumbnailImage from '../ThumbnailImage';
 import variables from '../../styles/variables';
 import themeColors from '../../styles/themes/default';
-import Text from '../Text';
+import ExpensifyText from '../ExpensifyText';
 import withLocalize from '../withLocalize';
 import Navigation from '../../libs/Navigation/Navigation';
 import CONST from '../../CONST';
@@ -99,28 +99,28 @@ function AnchorRenderer(props) {
     // instead of in a new tab or with a page refresh (which is the default behavior of an anchor tag)
     if (internalExpensifyPath) {
         return (
-            <Text
+            <ExpensifyText
                 style={styles.link}
                 onPress={() => Navigation.navigate(internalExpensifyPath)}
             >
                 <TNodeChildrenRenderer tnode={props.tnode} />
-            </Text>
+            </ExpensifyText>
         );
     }
 
     if (!isInsideComment(props.tnode)) {
         // This is not a comment from a chat, the AnchorForCommentsOnly uses a Pressable to create a context menu on right click.
         // We don't have this behaviour in other links in NewDot
-        // TODO: We should use TextLink, but I'm leaving it as Text for now because TextLink breaks the alignment in Android.
+        // TODO: We should use TextLink, but I'm leaving it as ExpensifyText for now because TextLink breaks the alignment in Android.
         return (
-            <Text
+            <ExpensifyText
                 style={styles.link}
                 onPress={() => {
                     Linking.openURL(attrHref);
                 }}
             >
                 <TNodeChildrenRenderer tnode={props.tnode} />
-            </Text>
+            </ExpensifyText>
         );
     }
 
@@ -182,16 +182,16 @@ function CodeRenderer(props) {
 function EditedRenderer(props) {
     const defaultRendererProps = _.omit(props, ['TDefaultRenderer', 'style', 'tnode']);
     return (
-        <Text
+        <ExpensifyText
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...defaultRendererProps}
             fontSize={variables.fontSizeSmall}
             color={themeColors.textSupporting}
         >
             {/* Native devices do not support margin between nested text */}
-            <Text style={styles.w1}>{' '}</Text>
+            <ExpensifyText style={styles.w1}>{' '}</ExpensifyText>
             {props.translate('reportActionCompose.edited')}
-        </Text>
+        </ExpensifyText>
     );
 }
 
diff --git a/src/components/Header.js b/src/components/Header.js
index c692b028fab3..ea95f00af229 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -2,7 +2,7 @@ import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../styles/styles';
-import Text from './Text';
+import ExpensifyText from './ExpensifyText';
 import EnvironmentBadge from './EnvironmentBadge';
 
 const propTypes = {
@@ -23,11 +23,11 @@ const defaultProps = {
 const Header = props => (
     <View style={[styles.flex1, styles.flexRow]}>
         <View>
-            <Text numberOfLines={2} style={[styles.headerText, styles.textLarge]}>
+            <ExpensifyText numberOfLines={2} style={[styles.headerText, styles.textLarge]}>
                 {props.title}
-            </Text>
+            </ExpensifyText>
             {/* If there's no subtitle then display a fragment to avoid an empty space which moves the main title */}
-            {props.subtitle ? <Text style={[styles.mutedTextLabel]}>{props.subtitle}</Text> : <></> }
+            {props.subtitle ? <ExpensifyText style={[styles.mutedTextLabel]}>{props.subtitle}</ExpensifyText> : <></> }
         </View>
         {props.shouldShowEnvironmentBadge && (
             <EnvironmentBadge />
diff --git a/src/components/IOUConfirmationList.js b/src/components/IOUConfirmationList.js
index 391ed1cc986b..d4afada746ac 100755
--- a/src/components/IOUConfirmationList.js
+++ b/src/components/IOUConfirmationList.js
@@ -5,7 +5,7 @@ import {ScrollView} from 'react-native-gesture-handler';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import styles from '../styles/styles';
-import Text from './Text';
+import ExpensifyText from './ExpensifyText';
 import themeColors from '../styles/themes/default';
 import * as OptionsListUtils from '../libs/OptionsListUtils';
 import OptionsList from './OptionsList';
@@ -431,9 +431,9 @@ class IOUConfirmationList extends Component {
                 </View>
                 <FixedFooter>
                     {this.props.network.isOffline && (
-                        <Text style={[styles.formError, styles.pb2]}>
+                        <ExpensifyText style={[styles.formError, styles.pb2]}>
                             {this.props.translate('session.offlineMessage')}
-                        </Text>
+                        </ExpensifyText>
                     )}
                     <ButtonWithMenu
                         options={this.state.confirmationButtonOptions}
diff --git a/src/components/InlineCodeBlock/WrappedText.js b/src/components/InlineCodeBlock/WrappedText.js
index be693e534b11..c93f4733dd30 100644
--- a/src/components/InlineCodeBlock/WrappedText.js
+++ b/src/components/InlineCodeBlock/WrappedText.js
@@ -3,7 +3,7 @@ import React, {Fragment} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../../styles/styles';
-import Text from '../Text';
+import ExpensifyText from '../ExpensifyText';
 
 /**
  * Breaks the text into matrix
@@ -59,7 +59,7 @@ const WrappedText = (props) => {
                                     colIndex === rowText.length - 1 && styles.codeLastWordStyle,
                                 ]}
                             >
-                                <Text style={props.textStyles}>{colText}</Text>
+                                <ExpensifyText style={props.textStyles}>{colText}</ExpensifyText>
                             </View>
                         </View>
                     ))}
diff --git a/src/components/InlineErrorText.js b/src/components/InlineErrorText.js
index 90f6838e19bc..432eb969c31f 100644
--- a/src/components/InlineErrorText.js
+++ b/src/components/InlineErrorText.js
@@ -2,7 +2,7 @@ import _ from 'underscore';
 import React from 'react';
 import PropTypes from 'prop-types';
 import styles from '../styles/styles';
-import Text from './Text';
+import ExpensifyText from './ExpensifyText';
 
 const propTypes = {
     /** Text to display */
@@ -19,7 +19,7 @@ const InlineErrorText = (props) => {
     }
 
     return (
-        <Text style={[styles.formError, styles.mt1]}>{props.children}</Text>
+        <ExpensifyText style={[styles.formError, styles.mt1]}>{props.children}</ExpensifyText>
     );
 };
 
diff --git a/src/components/KeyboardShortcutsModal.js b/src/components/KeyboardShortcutsModal.js
index a13b94d16446..a49f4149dec9 100644
--- a/src/components/KeyboardShortcutsModal.js
+++ b/src/components/KeyboardShortcutsModal.js
@@ -2,7 +2,7 @@ import React from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import HeaderWithCloseButton from './HeaderWithCloseButton';
-import Text from './Text';
+import ExpensifyText from './ExpensifyText';
 import Modal from './Modal';
 import CONST from '../CONST';
 import styles from '../styles/styles';
@@ -71,10 +71,10 @@ class KeyboardShortcutsModal extends React.Component {
                 key={shortcut.displayName}
             >
                 <View style={[styles.dFlex, styles.p2, styles.keyboardShortcutTablePrefix]}>
-                    <Text>{shortcut.displayName}</Text>
+                    <ExpensifyText>{shortcut.displayName}</ExpensifyText>
                 </View>
                 <View style={[styles.flex1, styles.p2, styles.alignSelfStretch]}>
-                    <Text>{this.props.translate(`keyboardShortcutModal.shortcuts.${shortcut.descriptionKey}`)}</Text>
+                    <ExpensifyText>{this.props.translate(`keyboardShortcutModal.shortcuts.${shortcut.descriptionKey}`)}</ExpensifyText>
                 </View>
             </View>
         );
@@ -93,7 +93,7 @@ class KeyboardShortcutsModal extends React.Component {
             >
                 <HeaderWithCloseButton title={this.props.translate('keyboardShortcutModal.title')} onCloseButtonPress={this.hideKeyboardShortcutModal} />
                 <View style={[styles.p5, styles.pt0]}>
-                    <Text style={styles.mb5}>{this.props.translate('keyboardShortcutModal.subtitle')}</Text>
+                    <ExpensifyText style={styles.mb5}>{this.props.translate('keyboardShortcutModal.subtitle')}</ExpensifyText>
                     <View style={[styles.keyboardShortcutTableWrapper]}>
                         <View style={[styles.alignItemsCenter, styles.keyboardShortcutTableContainer]}>
                             {_.map(shortcuts, (shortcut, index) => {
diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 2f9e261d82e3..63d30771cbe5 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -3,7 +3,7 @@ import React from 'react';
 import {
     View, Pressable,
 } from 'react-native';
-import Text from './Text';
+import ExpensifyText from './ExpensifyText';
 import styles from '../styles/styles';
 import * as StyleUtils from '../styles/StyleUtils';
 import Icon from './Icon';
@@ -88,7 +88,7 @@ const MenuItem = props => (
                         </View>
                     )}
                     <View style={[styles.justifyContentCenter, styles.menuItemTextContainer]}>
-                        <Text
+                        <ExpensifyText
                             style={[
                                 styles.popoverMenuText,
                                 styles.ml3,
@@ -97,11 +97,11 @@ const MenuItem = props => (
                             numberOfLines={1}
                         >
                             {props.title}
-                        </Text>
+                        </ExpensifyText>
                         {props.description && (
-                            <Text style={[styles.textLabelSupporting, styles.ml3, styles.mt1]}>
+                            <ExpensifyText style={[styles.textLabelSupporting, styles.ml3, styles.mt1]}>
                                 {props.description}
-                            </Text>
+                            </ExpensifyText>
                         )}
                     </View>
                 </View>
@@ -109,11 +109,11 @@ const MenuItem = props => (
                     {props.badgeText && <Badge text={props.badgeText} badgeStyles={[styles.alignSelfCenter]} />}
                     {props.subtitle && (
                         <View style={[styles.justifyContentCenter, styles.mr1]}>
-                            <Text
+                            <ExpensifyText
                                 style={styles.textLabelSupporting}
                             >
                                 {props.subtitle}
-                            </Text>
+                            </ExpensifyText>
                         </View>
                     )}
                     {props.shouldShowRightIcon && (
diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js
index fb6d51ca52d9..ce0d366b568c 100644
--- a/src/components/MultipleAvatars.js
+++ b/src/components/MultipleAvatars.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {Image, View} from 'react-native';
 import styles from '../styles/styles';
 import Avatar from './Avatar';
-import Text from './Text';
+import ExpensifyText from './ExpensifyText';
 
 const propTypes = {
     /** Array of avatar URL */
@@ -77,12 +77,12 @@ const MultipleAvatars = (props) => {
                         <View
                             style={[singleAvatarStyles, styles.alignItemsCenter, styles.justifyContentCenter]}
                         >
-                            <Text style={props.size === 'small'
+                            <ExpensifyText style={props.size === 'small'
                                 ? styles.avatarInnerTextSmall
                                 : styles.avatarInnerText}
                             >
                                 {`+${props.avatarImageURLs.length - 1}`}
-                            </Text>
+                            </ExpensifyText>
                         </View>
                     )}
                 </View>
diff --git a/src/components/OptionsList/BaseOptionsList.js b/src/components/OptionsList/BaseOptionsList.js
index f11ef7c84ab4..7a653e9e62a9 100644
--- a/src/components/OptionsList/BaseOptionsList.js
+++ b/src/components/OptionsList/BaseOptionsList.js
@@ -6,7 +6,7 @@ import Log from '../../libs/Log';
 import styles from '../../styles/styles';
 import OptionRow from '../../pages/home/sidebar/OptionRow';
 import SectionList from '../SectionList';
-import Text from '../Text';
+import ExpensifyText from '../ExpensifyText';
 import {propTypes as optionsListPropTypes, defaultProps as optionsListDefaultProps} from './optionsListPropTypes';
 
 const propTypes = {
@@ -130,9 +130,9 @@ class BaseOptionsList extends Component {
         if (title && shouldShow && !this.props.hideSectionHeaders) {
             return (
                 <View>
-                    <Text style={[styles.p5, styles.textMicroBold, styles.colorHeading, styles.textUppercase]}>
+                    <ExpensifyText style={[styles.p5, styles.textMicroBold, styles.colorHeading, styles.textUppercase]}>
                         {title}
-                    </Text>
+                    </ExpensifyText>
                 </View>
             );
         }
@@ -145,9 +145,9 @@ class BaseOptionsList extends Component {
             <View style={this.props.listContainerStyles}>
                 {this.props.headerMessage ? (
                     <View style={[styles.ph5, styles.pb5]}>
-                        <Text style={[styles.textLabel, styles.colorMuted]}>
+                        <ExpensifyText style={[styles.textLabel, styles.colorMuted]}>
                             {this.props.headerMessage}
-                        </Text>
+                        </ExpensifyText>
                     </View>
                 ) : null}
                 <SectionList
diff --git a/src/components/PopoverMenu/BasePopoverMenu.js b/src/components/PopoverMenu/BasePopoverMenu.js
index 177c007eb8b9..42f9cfa79a6b 100644
--- a/src/components/PopoverMenu/BasePopoverMenu.js
+++ b/src/components/PopoverMenu/BasePopoverMenu.js
@@ -10,7 +10,7 @@ import {
     propTypes as createMenuPropTypes,
     defaultProps as defaultCreateMenuPropTypes,
 } from './popoverMenuPropTypes';
-import Text from '../Text';
+import ExpensifyText from '../ExpensifyText';
 
 const propTypes = {
     /** Callback fired when the menu is completely closed */
@@ -41,11 +41,11 @@ class BasePopoverMenu extends PureComponent {
                 <View style={this.props.isSmallScreenWidth ? {} : styles.createMenuContainer}>
                     {!_.isEmpty(this.props.headerText) && (
                         <View style={styles.createMenuItem}>
-                            <Text
+                            <ExpensifyText
                                 style={[styles.createMenuHeaderText, styles.ml3]}
                             >
                                 {this.props.headerText}
-                            </Text>
+                            </ExpensifyText>
                         </View>
                     )}
                     {_.map(this.props.menuItems, item => (
diff --git a/src/components/ReimbursementAccountLoadingIndicator.js b/src/components/ReimbursementAccountLoadingIndicator.js
index 8c122600f162..61537e9fd2f2 100644
--- a/src/components/ReimbursementAccountLoadingIndicator.js
+++ b/src/components/ReimbursementAccountLoadingIndicator.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import styles from '../styles/styles';
 import CONST from '../CONST';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import Text from './Text';
+import ExpensifyText from './ExpensifyText';
 import HeaderWithCloseButton from './HeaderWithCloseButton';
 import Navigation from '../libs/Navigation/Navigation';
 import ScreenWrapper from './ScreenWrapper';
@@ -32,9 +32,9 @@ const ReimbursementAccountLoadingIndicator = props => (
                     ]}
                 />
                 <View style={[styles.ph6]}>
-                    <Text style={[styles.textAlignCenter]}>
+                    <ExpensifyText style={[styles.textAlignCenter]}>
                         {props.translate('reimbursementAccountLoadingAnimation.explanationLine')}
-                    </Text>
+                    </ExpensifyText>
                 </View>
             </View>
         ) : (
diff --git a/src/components/ReportActionItem/IOUPreview.js b/src/components/ReportActionItem/IOUPreview.js
index c76d1ce450d7..d7f21e9abbb4 100644
--- a/src/components/ReportActionItem/IOUPreview.js
+++ b/src/components/ReportActionItem/IOUPreview.js
@@ -20,7 +20,7 @@ import themeColors from '../../styles/themes/default';
 import Icon from '../Icon';
 import CONST from '../../CONST';
 import * as Expensicons from '../Icon/Expensicons';
-import Text from '../Text';
+import ExpensifyText from '../ExpensifyText';
 
 const propTypes = {
     /** Additional logic for displaying the pay button */
@@ -111,9 +111,9 @@ const IOUPreview = (props) => {
                             <View style={styles.flexRow}>
                                 <View style={styles.flex1}>
                                     <View style={styles.flexRow}>
-                                        <Text style={styles.h1}>
+                                        <ExpensifyText style={styles.h1}>
                                             {cachedTotal}
-                                        </Text>
+                                        </ExpensifyText>
                                         {!props.iouReport.hasOutstandingIOU && (
                                             <View style={styles.iouPreviewBoxCheckmark}>
                                                 <Icon src={Expensicons.Checkmark} fill={themeColors.iconSuccessFill} />
@@ -128,11 +128,11 @@ const IOUPreview = (props) => {
                                     />
                                 </View>
                             </View>
-                            <Text>
+                            <ExpensifyText>
                                 {props.iouReport.hasOutstandingIOU
                                     ? props.translate('iou.owes', {manager: managerName, owner: ownerName})
                                     : props.translate('iou.paid', {manager: managerName, owner: ownerName})}
-                            </Text>
+                            </ExpensifyText>
                             {(isCurrentUserManager
                                 && !props.shouldHidePayButton
                                 && props.iouReport.stateNum === CONST.REPORT.STATE_NUM.PROCESSING && (
@@ -140,14 +140,14 @@ const IOUPreview = (props) => {
                                     style={[styles.buttonSmall, styles.buttonSuccess, styles.mt4]}
                                     onPress={props.onPayButtonPressed}
                                 >
-                                    <Text
+                                    <ExpensifyText
                                         style={[
                                             styles.buttonSmallText,
                                             styles.buttonSuccessText,
                                         ]}
                                     >
                                         {props.translate('iou.pay')}
-                                    </Text>
+                                    </ExpensifyText>
                                 </TouchableOpacity>
                             ))}
                         </View>
diff --git a/src/components/ReportActionItem/IOUQuote.js b/src/components/ReportActionItem/IOUQuote.js
index 84b4b3577288..73607a4e7e6f 100644
--- a/src/components/ReportActionItem/IOUQuote.js
+++ b/src/components/ReportActionItem/IOUQuote.js
@@ -3,7 +3,7 @@ import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import Str from 'expensify-common/lib/str';
-import Text from '../Text';
+import ExpensifyText from '../ExpensifyText';
 import styles from '../../styles/styles';
 import reportActionPropTypes from '../../pages/home/report/reportActionPropTypes';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
@@ -30,16 +30,16 @@ const IOUQuote = props => (
     <View style={[styles.chatItemMessage]}>
         {_.map(props.action.message, (fragment, index) => (
             <View key={`iouQuote-${props.action.sequenceNumber}-${index}`} style={[styles.alignItemsStart, styles.blockquote]}>
-                <Text style={[styles.chatItemMessage]}>
+                <ExpensifyText style={[styles.chatItemMessage]}>
                     {Str.htmlDecode(fragment.text)}
-                </Text>
+                </ExpensifyText>
                 {props.shouldShowViewDetailsLink && (
-                    <Text
+                    <ExpensifyText
                         style={[styles.chatItemMessageLink, styles.alignSelfStart]}
                         onPress={props.onViewDetailsPressed}
                     >
                         {props.translate('iou.viewDetails')}
-                    </Text>
+                    </ExpensifyText>
                 )}
             </View>
         ))}
diff --git a/src/components/ReportTransaction.js b/src/components/ReportTransaction.js
index 599fa482c4b0..c82facf47c40 100644
--- a/src/components/ReportTransaction.js
+++ b/src/components/ReportTransaction.js
@@ -12,7 +12,7 @@ import themeColors from '../styles/themes/default';
 import * as IOU from '../libs/actions/IOU';
 import reportActionPropTypes from '../pages/home/report/reportActionPropTypes';
 import ReportActionItemSingle from '../pages/home/report/ReportActionItemSingle';
-import Text from './Text';
+import ExpensifyText from './ExpensifyText';
 
 const propTypes = {
     /** The chatReport which the transaction is associated with */
@@ -82,9 +82,9 @@ class ReportTransaction extends Component {
                     action={this.props.action}
                     wrapperStyles={[styles.reportTransactionWrapper]}
                 >
-                    <Text style={[styles.chatItemMessage]}>
+                    <ExpensifyText style={[styles.chatItemMessage]}>
                         {this.props.action.message[0].text}
-                    </Text>
+                    </ExpensifyText>
                 </ReportActionItemSingle>
                 {this.props.canBeRejected && (
                     <View style={[styles.flexRow, styles.justifyContentStart]}>
@@ -106,9 +106,9 @@ class ReportTransaction extends Component {
                                     />
                                 )
                                 : (
-                                    <Text style={[styles.buttonSmallText]}>
+                                    <ExpensifyText style={[styles.buttonSmallText]}>
                                         {this.props.rejectButtonLabelText}
-                                    </Text>
+                                    </ExpensifyText>
                                 )
                             }
                         </Pressable>
diff --git a/src/components/ReportWelcomeText.js b/src/components/ReportWelcomeText.js
index 480b65336e06..dd285773e348 100644
--- a/src/components/ReportWelcomeText.js
+++ b/src/components/ReportWelcomeText.js
@@ -5,7 +5,7 @@ import Str from 'expensify-common/lib/str';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import styles from '../styles/styles';
-import Text from './Text';
+import ExpensifyText from './ExpensifyText';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import compose from '../libs/compose';
 import * as OptionsListUtils from '../libs/OptionsListUtils';
@@ -69,31 +69,31 @@ const ReportWelcomeText = (props) => {
     const chatUsers = props.shouldIncludeParticipants ? displayNamesWithTooltips : [{displayName: props.report.reportName}];
 
     return (
-        <Text style={[styles.mt3, styles.w70, styles.textAlignCenter]}>
-            <Text>
+        <ExpensifyText style={[styles.mt3, styles.w70, styles.textAlignCenter]}>
+            <ExpensifyText>
                 {!props.shouldIncludeParticipants
                     ? `${props.translate('reportActionsView.beginningOfChatHistoryPrivatePartOne')}`
                     : `${props.translate('reportActionsView.beginningOfChatHistory')} `}
-            </Text>
-            {!props.shouldIncludeParticipants && <Text style={[styles.textStrong]}>{` ${lodashGet(chatUsers, '[0].displayName', '')}`}</Text>}
-            {!props.shouldIncludeParticipants && <Text>{props.translate('reportActionsView.beginningOfChatHistoryPrivatePartTwo')}</Text>}
+            </ExpensifyText>
+            {!props.shouldIncludeParticipants && <ExpensifyText style={[styles.textStrong]}>{` ${lodashGet(chatUsers, '[0].displayName', '')}`}</ExpensifyText>}
+            {!props.shouldIncludeParticipants && <ExpensifyText>{props.translate('reportActionsView.beginningOfChatHistoryPrivatePartTwo')}</ExpensifyText>}
             {props.shouldIncludeParticipants
             && (
                 <>
                     {_.map(chatUsers, ({displayName, pronouns}, index) => (
-                        <Text key={displayName}>
-                            <Text style={[styles.textStrong]}>
+                        <ExpensifyText key={displayName}>
+                            <ExpensifyText style={[styles.textStrong]}>
                                 {displayName}
-                            </Text>
-                            {!_.isEmpty(pronouns) && <Text>{` (${pronouns})`}</Text>}
-                            {(index === chatUsers.length - 1) && <Text>.</Text>}
-                            {(index === chatUsers.length - 2) && <Text>{` ${props.translate('common.and')} `}</Text>}
-                            {(index < chatUsers.length - 2) && <Text>, </Text>}
-                        </Text>
+                            </ExpensifyText>
+                            {!_.isEmpty(pronouns) && <ExpensifyText>{` (${pronouns})`}</ExpensifyText>}
+                            {(index === chatUsers.length - 1) && <ExpensifyText>.</ExpensifyText>}
+                            {(index === chatUsers.length - 2) && <ExpensifyText>{` ${props.translate('common.and')} `}</ExpensifyText>}
+                            {(index < chatUsers.length - 2) && <ExpensifyText>, </ExpensifyText>}
+                        </ExpensifyText>
                     ))}
                 </>
             )}
-        </Text>
+        </ExpensifyText>
     );
 };
 
diff --git a/src/components/TextInputAutoWidth.js b/src/components/TextInputAutoWidth.js
index a43eed308f4c..3ea5b6f12303 100644
--- a/src/components/TextInputAutoWidth.js
+++ b/src/components/TextInputAutoWidth.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import _ from 'underscore';
 import styles from '../styles/styles';
 import * as StyleUtils from '../styles/StyleUtils';
-import Text from './Text';
+import ExpensifyText from './ExpensifyText';
 import TextInputFocusable from './TextInputFocusable';
 
 const propTypes = {
@@ -56,14 +56,14 @@ class TextInputAutoWidth extends React.Component {
                 Text input component doesn't support auto grow by default.
                 We're using a hidden text input to achieve that.
                 This text view is used to calculate width of the input value given textStyle in this component.
-                This text component is intentionally positioned out of the screen.
+                This ExpensifyText component is intentionally positioned out of the screen.
                 */}
-                <Text
+                <ExpensifyText
                     style={[this.props.textStyle, styles.hiddenElementOutsideOfWindow]}
                     onLayout={e => this.setState({textInputWidth: e.nativeEvent.layout.width})}
                 >
                     {this.props.value || this.props.placeholder}
-                </Text>
+                </ExpensifyText>
             </>
         );
     }
diff --git a/src/components/TextInputWithLabel.js b/src/components/TextInputWithLabel.js
index 310a4a91ca31..e78dc3289455 100644
--- a/src/components/TextInputWithLabel.js
+++ b/src/components/TextInputWithLabel.js
@@ -3,7 +3,7 @@ import React from 'react';
 import {View, TextInput} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../styles/styles';
-import Text from './Text';
+import ExpensifyText from './ExpensifyText';
 import TextLink from './TextLink';
 
 const propTypes = {
@@ -43,7 +43,7 @@ const TextInputWithLabel = props => (
                 (!_.isEmpty(props.label) && !_.isEmpty(props.helpLinkURL)) ? styles.alignItemsBaseline : undefined,
             ]}
         >
-            {!_.isEmpty(props.label) && <Text style={[styles.formLabel]}>{props.label}</Text>}
+            {!_.isEmpty(props.label) && <ExpensifyText style={[styles.formLabel]}>{props.label}</ExpensifyText>}
             {!_.isEmpty(props.helpLinkURL) && (
                 <TextLink
                     href={props.helpLinkURL}
@@ -64,7 +64,7 @@ const TextInputWithLabel = props => (
             {..._.omit(props, ['label', 'errorText'])}
         />
         {props.errorText !== '' && (
-            <Text style={[styles.formError]}>{props.errorText}</Text>
+            <ExpensifyText style={[styles.formError]}>{props.errorText}</ExpensifyText>
         )}
     </View>
 );
diff --git a/src/components/TextLink.js b/src/components/TextLink.js
index 8a56af8341ad..616634a6568e 100644
--- a/src/components/TextLink.js
+++ b/src/components/TextLink.js
@@ -2,7 +2,7 @@ import _ from 'underscore';
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Linking} from 'react-native';
-import Text from './Text';
+import ExpensifyText from './ExpensifyText';
 import styles from '../styles/styles';
 import stylePropTypes from '../styles/stylePropTypes';
 
@@ -33,7 +33,7 @@ const defaultProps = {
 const TextLink = (props) => {
     const additionalStyles = _.isArray(props.style) ? props.style : [props.style];
     return (
-        <Text
+        <ExpensifyText
             style={[styles.link, ...additionalStyles]}
             accessibilityRole="link"
             href={props.href}
@@ -48,7 +48,7 @@ const TextLink = (props) => {
             }}
         >
             {props.children}
-        </Text>
+        </ExpensifyText>
     );
 };
 
diff --git a/src/components/Tooltip/TooltipRenderedOnPageBody.js b/src/components/Tooltip/TooltipRenderedOnPageBody.js
index 3ed7c472883b..a9e9ee7a4029 100644
--- a/src/components/Tooltip/TooltipRenderedOnPageBody.js
+++ b/src/components/Tooltip/TooltipRenderedOnPageBody.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {Animated, View} from 'react-native';
 import ReactDOM from 'react-dom';
 import getTooltipStyles from '../../styles/getTooltipStyles';
-import Text from '../Text';
+import ExpensifyText from '../ExpensifyText';
 
 const propTypes = {
     /** Window width */
@@ -76,7 +76,7 @@ const TooltipRenderedOnPageBody = (props) => {
             onLayout={props.measureTooltip}
             style={[tooltipWrapperStyle, animationStyle]}
         >
-            <Text style={tooltipTextStyle} numberOfLines={1}>{props.text}</Text>
+            <ExpensifyText style={tooltipTextStyle} numberOfLines={1}>{props.text}</ExpensifyText>
             <View style={pointerWrapperStyle}>
                 <View style={pointerStyle} />
             </View>
diff --git a/src/components/UnorderedList.js b/src/components/UnorderedList.js
index a0efcf3ed069..5bc1d7c7876a 100644
--- a/src/components/UnorderedList.js
+++ b/src/components/UnorderedList.js
@@ -2,7 +2,7 @@ import React from 'react';
 import _ from 'underscore';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
-import Text from './Text';
+import ExpensifyText from './ExpensifyText';
 import styles from '../styles/styles';
 
 const propTypes = {
@@ -20,8 +20,8 @@ const UnorderedList = props => (
                 key={itemText}
                 style={[styles.flexRow, styles.alignItemsStart, styles.ml2]}
             >
-                <Text style={[styles.mr2]}>{'\u2022'}</Text>
-                <Text>{itemText}</Text>
+                <ExpensifyText style={[styles.mr2]}>{'\u2022'}</ExpensifyText>
+                <ExpensifyText>{itemText}</ExpensifyText>
             </View>
         ))}
     </>
diff --git a/src/components/UnreadActionIndicator.js b/src/components/UnreadActionIndicator.js
index 389413e4f38e..4b7b5c85772c 100755
--- a/src/components/UnreadActionIndicator.js
+++ b/src/components/UnreadActionIndicator.js
@@ -1,15 +1,15 @@
 import React from 'react';
 import {View} from 'react-native';
 import styles from '../styles/styles';
-import Text from './Text';
+import ExpensifyText from './ExpensifyText';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 
 const UnreadActionIndicator = props => (
     <View style={styles.unreadIndicatorContainer}>
         <View style={styles.unreadIndicatorLine} />
-        <Text style={styles.unreadIndicatorText}>
+        <ExpensifyText style={styles.unreadIndicatorText}>
             {props.translate('common.new')}
-        </Text>
+        </ExpensifyText>
     </View>
 );
 
diff --git a/src/components/WelcomeText.js b/src/components/WelcomeText.js
index 1180b5df2e3a..80bb57840975 100755
--- a/src/components/WelcomeText.js
+++ b/src/components/WelcomeText.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styles from '../styles/styles';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import Text from './Text';
+import ExpensifyText from './ExpensifyText';
 
 const propTypes = {
 
@@ -20,14 +20,14 @@ const WelcomeText = (props) => {
     const textSize = props.smallFontSize ? styles.textLabel : undefined;
     return (
         <>
-            <Text style={[textSize, styles.textStrong, styles.mb1]}>
+            <ExpensifyText style={[textSize, styles.textStrong, styles.mb1]}>
                 {props.translate('welcomeText.phrase1')}
-            </Text>
-            <Text style={[textSize]}>
+            </ExpensifyText>
+            <ExpensifyText style={[textSize]}>
                 {props.translate('welcomeText.phrase2')}
                 {' '}
                 {props.translate('welcomeText.phrase3')}
-            </Text>
+            </ExpensifyText>
         </>
     );
 };

From ecce01202e51c4a39bbea913280a47ab7d4e0755 Mon Sep 17 00:00:00 2001
From: Puneet Lath <puneet@expensify.com>
Date: Tue, 30 Nov 2021 14:28:36 -0500
Subject: [PATCH 11/14] Update pages that use Text to use ExpensifyText

---
 src/pages/DetailsPage.js                      | 30 +++++-----
 src/pages/EnablePayments/ActivateStep.js      |  6 +-
 .../EnablePayments/AdditionalDetailsStep.js   | 10 ++--
 src/pages/EnablePayments/OnfidoStep.js        | 10 ++--
 .../EnablePayments/TermsPage/LongTermsForm.js | 40 ++++++-------
 .../TermsPage/ShortTermsForm.js               | 58 +++++++++----------
 src/pages/EnablePayments/TermsStep.js         | 16 ++---
 .../ReimbursementAccount/BankAccountStep.js   | 26 ++++-----
 .../BeneficialOwnersStep.js                   | 34 +++++------
 src/pages/ReimbursementAccount/CompanyStep.js |  8 +--
 src/pages/ReimbursementAccount/EnableStep.js  | 10 ++--
 .../ReimbursementAccount/IdentityForm.js      |  4 +-
 .../ReimbursementAccountPage.js               |  8 +--
 .../ReimbursementAccount/RequestorStep.js     | 26 ++++-----
 .../ReimbursementAccount/ValidationStep.js    | 18 +++---
 src/pages/ReportDetailsPage.js                | 10 ++--
 src/pages/RequestCallPage.js                  |  8 +--
 src/pages/SetPasswordPage.js                  |  6 +-
 src/pages/home/HeaderView.js                  |  6 +-
 .../home/report/EmojiPickerMenu/index.js      | 10 ++--
 .../report/EmojiPickerMenu/index.native.js    |  6 +-
 src/pages/home/report/EmojiPickerMenuItem.js  |  6 +-
 src/pages/home/report/EmojiSkinToneList.js    | 10 ++--
 src/pages/home/report/ParticipantLocalTime.js |  6 +-
 src/pages/home/report/ReportActionCompose.js  |  6 +-
 src/pages/home/report/ReportActionItemDate.js |  6 +-
 .../home/report/ReportActionItemFragment.js   | 30 +++++-----
 .../home/report/ReportTypingIndicator.js      | 16 ++---
 src/pages/home/sidebar/OptionRow.js           | 10 ++--
 src/pages/iou/IOUCurrencySelection.js         |  6 +-
 src/pages/iou/steps/IOUAmountPage.js          | 10 ++--
 .../IOUParticipantsSplit.js                   | 10 ++--
 src/pages/settings/AboutPage.js               | 22 +++----
 src/pages/settings/AddSecondaryLoginPage.js   | 10 ++--
 src/pages/settings/InitialSettingsPage.js     | 10 ++--
 src/pages/settings/NewPasswordForm.js         |  6 +-
 src/pages/settings/PasswordPage.js            | 14 ++---
 .../settings/Payments/AddDebitCardPage.js     |  8 +--
 .../settings/Payments/AddPayPalMePage.js      |  6 +-
 src/pages/settings/Payments/PaymentsPage.js   |  6 +-
 src/pages/settings/PreferencesPage.js         | 22 +++----
 src/pages/settings/Profile/LoginField.js      | 16 ++---
 src/pages/settings/Profile/ProfilePage.js     |  6 +-
 src/pages/signin/ChangeExpensifyLoginLink.js  | 10 ++--
 src/pages/signin/LoginForm.js                 | 14 ++---
 src/pages/signin/PasswordForm.js              | 14 ++---
 src/pages/signin/ResendValidationForm.js      | 18 +++---
 .../SignInPageLayoutNarrow.js                 |  6 +-
 .../SignInPageLayout/SignInPageLayoutWide.js  |  6 +-
 src/pages/signin/TermsAndLicenses.js          | 22 +++----
 .../workspace/WorkspaceBankAccountPage.js     |  6 +-
 src/pages/workspace/WorkspaceInitialPage.js   |  6 +-
 src/pages/workspace/WorkspaceInvitePage.js    |  6 +-
 src/pages/workspace/WorkspaceMembersPage.js   | 10 ++--
 .../WorkspaceResetBankAccountModal.js         | 14 ++---
 src/pages/workspace/WorkspaceSection.js       |  4 +-
 src/pages/workspace/WorkspaceSettingsPage.js  |  6 +-
 .../bills/WorkspaceBillsFirstSection.js       | 10 ++--
 .../bills/WorkspaceBillsNoVBAView.js          |  4 +-
 .../workspace/bills/WorkspaceBillsVBAView.js  |  4 +-
 .../workspace/card/WorkspaceCardNoVBAView.js  |  4 +-
 .../card/WorkspaceCardVBANoECardView.js       |  6 +-
 .../card/WorkspaceCardVBAWithECardView.js     |  4 +-
 .../invoices/WorkspaceInvoicesFirstSection.js |  6 +-
 .../invoices/WorkspaceInvoicesNoVBAView.js    |  4 +-
 .../invoices/WorkspaceInvoicesVBAView.js      |  4 +-
 .../reimburse/WorkspaceReimburseNoVBAView.js  | 10 ++--
 .../reimburse/WorkspaceReimburseVBAView.js    | 10 ++--
 .../travel/WorkspaceTravelNoVBAView.js        |  4 +-
 .../travel/WorkspaceTravelVBAView.js          |  4 +-
 70 files changed, 404 insertions(+), 404 deletions(-)

diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js
index a6e51ebaf6f0..6f74d09373c2 100755
--- a/src/pages/DetailsPage.js
+++ b/src/pages/DetailsPage.js
@@ -5,7 +5,7 @@ import {withOnyx} from 'react-native-onyx';
 import Str from 'expensify-common/lib/str';
 import moment from 'moment';
 import styles from '../styles/styles';
-import Text from '../components/Text';
+import ExpensifyText from '../components/ExpensifyText';
 import ONYXKEYS from '../ONYXKEYS';
 import Avatar from '../components/Avatar';
 import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
@@ -101,51 +101,51 @@ const DetailsPage = (props) => {
                                 source={details.avatar}
                             />
                             {details.displayName && (
-                                <Text style={[styles.displayName, styles.mb6]} numberOfLines={1}>
+                                <ExpensifyText style={[styles.displayName, styles.mb6]} numberOfLines={1}>
                                     {isSMSLogin ? props.toLocalPhone(details.displayName) : details.displayName}
-                                </Text>
+                                </ExpensifyText>
                             )}
                             {details.login ? (
                                 <View style={[styles.mb6, styles.detailsPageSectionContainer, styles.w100]}>
-                                    <Text style={[styles.formLabel, styles.mb2]} numberOfLines={1}>
+                                    <ExpensifyText style={[styles.formLabel, styles.mb2]} numberOfLines={1}>
                                         {props.translate(isSMSLogin
                                             ? 'common.phoneNumber'
                                             : 'common.email')}
-                                    </Text>
+                                    </ExpensifyText>
                                     <CommunicationsLink
                                         type={isSMSLogin ? CONST.LOGIN_TYPE.PHONE : CONST.LOGIN_TYPE.EMAIL}
                                         value={isSMSLogin ? getPhoneNumber(details) : details.login}
                                     >
                                         <Tooltip text={isSMSLogin ? getPhoneNumber(details) : details.login}>
-                                            <Text numberOfLines={1}>
+                                            <ExpensifyText numberOfLines={1}>
                                                 {isSMSLogin
                                                     ? props.toLocalPhone(getPhoneNumber(details))
                                                     : details.login}
-                                            </Text>
+                                            </ExpensifyText>
                                         </Tooltip>
                                     </CommunicationsLink>
                                 </View>
                             ) : null}
                             {pronouns ? (
                                 <View style={[styles.mb6, styles.detailsPageSectionContainer]}>
-                                    <Text style={[styles.formLabel, styles.mb2]} numberOfLines={1}>
+                                    <ExpensifyText style={[styles.formLabel, styles.mb2]} numberOfLines={1}>
                                         {props.translate('profilePage.preferredPronouns')}
-                                    </Text>
-                                    <Text numberOfLines={1}>
+                                    </ExpensifyText>
+                                    <ExpensifyText numberOfLines={1}>
                                         {pronouns}
-                                    </Text>
+                                    </ExpensifyText>
                                 </View>
                             ) : null}
                             {shouldShowLocalTime && details.timezone ? (
                                 <View style={[styles.mb6, styles.detailsPageSectionContainer]}>
-                                    <Text style={[styles.formLabel, styles.mb2]} numberOfLines={1}>
+                                    <ExpensifyText style={[styles.formLabel, styles.mb2]} numberOfLines={1}>
                                         {props.translate('detailsPage.localTime')}
-                                    </Text>
-                                    <Text numberOfLines={1}>
+                                    </ExpensifyText>
+                                    <ExpensifyText numberOfLines={1}>
                                         {timezone.format('LT')}
                                         {' '}
                                         {currentTime}
-                                    </Text>
+                                    </ExpensifyText>
                                 </View>
                             ) : null}
                         </View>
diff --git a/src/pages/EnablePayments/ActivateStep.js b/src/pages/EnablePayments/ActivateStep.js
index 846c89a56a5e..278833135d47 100644
--- a/src/pages/EnablePayments/ActivateStep.js
+++ b/src/pages/EnablePayments/ActivateStep.js
@@ -7,7 +7,7 @@ import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize
 import styles from '../../styles/styles';
 import userWalletPropTypes from './userWalletPropTypes';
 import CONST from '../../CONST';
-import Text from '../../components/Text';
+import ExpensifyText from '../../components/ExpensifyText';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -26,10 +26,10 @@ const ActivateStep = props => (
         />
         <View style={[styles.mh5, styles.flex1]}>
             {props.userWallet.tierName === CONST.WALLET.TIER_NAME.GOLD && (
-                <Text>{props.translate('activateStep.activated')}</Text>
+                <ExpensifyText>{props.translate('activateStep.activated')}</ExpensifyText>
             )}
             {props.userWallet.tierName === CONST.WALLET.TIER_NAME.SILVER && (
-                <Text>{props.translate('activateStep.checkBackLater')}</Text>
+                <ExpensifyText>{props.translate('activateStep.checkBackLater')}</ExpensifyText>
             )}
         </View>
     </ScreenWrapper>
diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js
index 766f329f6a66..46e1c772dde5 100644
--- a/src/pages/EnablePayments/AdditionalDetailsStep.js
+++ b/src/pages/EnablePayments/AdditionalDetailsStep.js
@@ -11,7 +11,7 @@ import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize
 import Navigation from '../../libs/Navigation/Navigation';
 import styles from '../../styles/styles';
 import ExpensifyButton from '../../components/ExpensifyButton';
-import Text from '../../components/Text';
+import ExpensifyText from '../../components/ExpensifyText';
 import * as BankAccounts from '../../libs/actions/BankAccounts';
 import CONST from '../../CONST';
 import compose from '../../libs/compose';
@@ -118,7 +118,7 @@ class AdditionalDetailsStep extends React.Component {
                     />
                     <View style={[styles.flex1]}>
                         <View style={[styles.ph5]}>
-                            <Text style={styles.mb3}>{this.props.translate('additionalDetailsStep.helpText')}</Text>
+                            <ExpensifyText style={styles.mb3}>{this.props.translate('additionalDetailsStep.helpText')}</ExpensifyText>
                             <TextLink
                                 style={styles.mb3}
                                 href="https://use.expensify.com/usa-patriot-act"
@@ -140,15 +140,15 @@ class AdditionalDetailsStep extends React.Component {
                                         // eslint-disable-next-line react/jsx-props-no-spreading
                                         {..._.omit(field, ['label', 'fieldName'])}
                                     />
-                                    {field.fieldName === 'addressStreet' && <Text style={[styles.mutedTextLabel, styles.mt1]}>{this.props.translate('common.noPO')}</Text>}
+                                    {field.fieldName === 'addressStreet' && <ExpensifyText style={[styles.mutedTextLabel, styles.mt1]}>{this.props.translate('common.noPO')}</ExpensifyText>}
                                 </>
                             ))}
                         </ScrollView>
                         <View style={[styles.m5]}>
                             {this.props.walletAdditionalDetails.additionalErrorMessage.length > 0 && (
-                                <Text style={[styles.formError, styles.mb2]}>
+                                <ExpensifyText style={[styles.formError, styles.mb2]}>
                                     {this.props.walletAdditionalDetails.additionalErrorMessage}
-                                </Text>
+                                </ExpensifyText>
                             )}
                             <ExpensifyButton
                                 success
diff --git a/src/pages/EnablePayments/OnfidoStep.js b/src/pages/EnablePayments/OnfidoStep.js
index a86e62e0bc33..942fa6b81cce 100644
--- a/src/pages/EnablePayments/OnfidoStep.js
+++ b/src/pages/EnablePayments/OnfidoStep.js
@@ -14,7 +14,7 @@ import styles from '../../styles/styles';
 import TextLink from '../../components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import compose from '../../libs/compose';
-import Text from '../../components/Text';
+import ExpensifyText from '../../components/ExpensifyText';
 import Log from '../../libs/Log';
 import Growl from '../../libs/Growl';
 
@@ -91,7 +91,7 @@ class OnfidoStep extends React.Component {
                             {!this.props.walletOnfidoData.hasAcceptedPrivacyPolicy && (
                                 <>
                                     <View style={styles.justifyContentCenter}>
-                                        <Text style={[styles.mb5]}>
+                                        <ExpensifyText style={[styles.mb5]}>
                                             {this.props.translate('onfidoStep.acceptTerms')}
                                             <TextLink
                                                 href="https://onfido.com/facial-scan-policy-and-release/"
@@ -111,7 +111,7 @@ class OnfidoStep extends React.Component {
                                                 {this.props.translate('common.termsOfService')}
                                             </TextLink>
                                             .
-                                        </Text>
+                                        </ExpensifyText>
                                     </View>
                                     <ExpensifyButton
                                         success
@@ -127,9 +127,9 @@ class OnfidoStep extends React.Component {
                                 && this.props.walletOnfidoData.loading && <FullscreenLoadingIndicator />}
                             {!this.props.walletOnfidoData.loading && this.props.walletOnfidoData.error && (
                                 <>
-                                    <Text style={[styles.h3, styles.textStrong, styles.mb2]}>
+                                    <ExpensifyText style={[styles.h3, styles.textStrong, styles.mb2]}>
                                         {this.props.walletOnfidoData.error}
-                                    </Text>
+                                    </ExpensifyText>
                                     <ExpensifyButton
                                         success
                                         text={this.props.translate('onfidoStep.tryAgain')}
diff --git a/src/pages/EnablePayments/TermsPage/LongTermsForm.js b/src/pages/EnablePayments/TermsPage/LongTermsForm.js
index 9ecfe78c690e..16a5735d05fc 100644
--- a/src/pages/EnablePayments/TermsPage/LongTermsForm.js
+++ b/src/pages/EnablePayments/TermsPage/LongTermsForm.js
@@ -2,7 +2,7 @@ import _ from 'underscore';
 import React from 'react';
 import {View} from 'react-native';
 import styles from '../../../styles/styles';
-import Text from '../../../components/Text';
+import ExpensifyText from '../../../components/ExpensifyText';
 import CollapsibleSection from '../../../components/CollapsibleSection';
 import * as Localize from '../../../libs/Localize';
 import CONST from '../../../CONST';
@@ -63,33 +63,33 @@ const getLongTermsSections = () => _.map(termsData, (section, index) => (
     <View key={section.title + index}>
         <View style={[styles.longTermsRow]}>
             <View style={[styles.flex4]}>
-                <Text>{section.title}</Text>
+                <ExpensifyText>{section.title}</ExpensifyText>
                 {
                     section.subTitle
                     && (
-                        <Text style={[styles.textMicroSupporting, styles.mt1]}>
+                        <ExpensifyText style={[styles.textMicroSupporting, styles.mt1]}>
                             {section.subTitle}
-                        </Text>
+                        </ExpensifyText>
                     )
                 }
             </View>
             <View style={[styles.flex1, styles.termsCenterRight]}>
-                <Text style={[styles.textStrong, styles.textAlignRight]}>
+                <ExpensifyText style={[styles.textStrong, styles.textAlignRight]}>
                     {section.rightText}
-                </Text>
+                </ExpensifyText>
                 {
                     section.subRightText
                     && (
-                        <Text style={[styles.textMicroSupporting, styles.mt1, styles.textAlignRight]}>
+                        <ExpensifyText style={[styles.textMicroSupporting, styles.mt1, styles.textAlignRight]}>
                             {section.subRightText}
-                        </Text>
+                        </ExpensifyText>
                     )
                 }
             </View>
         </View>
-        <Text style={[styles.textLabelSupporting, styles.mt2]}>
+        <ExpensifyText style={[styles.textLabelSupporting, styles.mt2]}>
             {section.details}
-        </Text>
+        </ExpensifyText>
     </View>
 ));
 
@@ -99,17 +99,17 @@ const LongTermsForm = () => (
             {getLongTermsSections()}
         </CollapsibleSection>
 
-        <Text style={[styles.mb4, styles.mt6, styles.textMicroSupporting]}>
+        <ExpensifyText 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]}>
+        </ExpensifyText>
+        <ExpensifyText style={[styles.mb4, styles.textMicroSupporting]}>
             {Localize.translateLocal('termsStep.noOverdraftOrCredit')}
-        </Text>
-        <Text style={[styles.mb4, styles.textMicroSupporting]}>
+        </ExpensifyText>
+        <ExpensifyText style={[styles.mb4, styles.textMicroSupporting]}>
             {Localize.translateLocal('termsStep.longTermsForm.contactExpensifyPayments')}
             {' '}
             {CONST.EMAIL.CONCIERGE}
@@ -118,8 +118,8 @@ const LongTermsForm = () => (
             {' '}
             {CONST.NEWDOT}
             .
-        </Text>
-        <Text style={[styles.mb6, styles.textMicroSupporting]}>
+        </ExpensifyText>
+        <ExpensifyText style={[styles.mb6, styles.textMicroSupporting]}>
             {Localize.translateLocal('termsStep.longTermsForm.generalInformation')}
             {' '}
             {CONST.TERMS.CFPB_PREPAID}
@@ -128,16 +128,16 @@ const LongTermsForm = () => (
             {' '}
             {CONST.TERMS.CFPB_COMPLAINT}
             .
-        </Text>
+        </ExpensifyText>
 
         <View style={styles.flexRow}>
             <Icon style={styles.flex1} src={Expensicons.Printer} />
-            <Text
+            <ExpensifyText
                 style={[styles.link, styles.ml1]}
                 onPress={() => Link.openExternalLink(CONST.FEES_URL)}
             >
                 {Localize.translateLocal('termsStep.longTermsForm.printerFriendlyView')}
-            </Text>
+            </ExpensifyText>
         </View>
     </>
 );
diff --git a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js
index de3b6d6b3829..3ad3db53a051 100644
--- a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js
+++ b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js
@@ -2,7 +2,7 @@ import _ from 'underscore';
 import React from 'react';
 import {View} from 'react-native';
 import styles from '../../../styles/styles';
-import Text from '../../../components/Text';
+import ExpensifyText from '../../../components/ExpensifyText';
 import * as Localize from '../../../libs/Localize';
 import CONST from '../../../CONST';
 import * as Link from '../../../libs/actions/Link';
@@ -45,83 +45,83 @@ const termsData = [
 const getShortTermsSections = () => _.map(termsData, section => (
     <View style={styles.shortTermsRow} key={section.title}>
         <View style={[styles.flex4]}>
-            <Text>{section.title}</Text>
+            <ExpensifyText>{section.title}</ExpensifyText>
             {
                 section.subTitle
                 && (
-                    <Text style={[styles.textMicroSupporting, styles.mt1]}>
+                    <ExpensifyText style={[styles.textMicroSupporting, styles.mt1]}>
                         {section.subTitle}
-                    </Text>
+                    </ExpensifyText>
                 )
             }
         </View>
         <View style={[styles.flex1, styles.termsCenterRight]}>
-            <Text style={[styles.textStrong, styles.textAlignRight]}>
+            <ExpensifyText style={[styles.textStrong, styles.textAlignRight]}>
                 {section.rightText}
-            </Text>
+            </ExpensifyText>
         </View>
     </View>
 ));
 
 const ShortTermsForm = () => (
     <>
-        <Text style={styles.mb5}>
+        <ExpensifyText style={styles.mb5}>
             {Localize.translateLocal('termsStep.shortTermsForm.expensifyPaymentsAccount')}
-        </Text>
+        </ExpensifyText>
         <View style={[styles.border, styles.p2, styles.mb6]}>
             {getShortTermsSections()}
 
             <View style={styles.shortTermsBoldHeadingSection}>
-                <Text style={styles.textStrong}>
+                <ExpensifyText style={styles.textStrong}>
                     {Localize.translateLocal('termsStep.shortTermsForm.weChargeOneFee')}
-                </Text>
+                </ExpensifyText>
             </View>
             <View style={styles.shortTermsRow}>
                 <View style={[styles.flex4]}>
-                    <Text>{Localize.translateLocal('termsStep.electronicFundsWithdrawal')}</Text>
-                    <Text style={[styles.textMicroSupporting, styles.mt1]}>
+                    <ExpensifyText>{Localize.translateLocal('termsStep.electronicFundsWithdrawal')}</ExpensifyText>
+                    <ExpensifyText style={[styles.textMicroSupporting, styles.mt1]}>
                         {Localize.translateLocal('termsStep.instant')}
-                    </Text>
+                    </ExpensifyText>
                 </View>
                 <View style={[styles.flex1, styles.termsCenterRight]}>
-                    <Text style={[styles.textStrong, styles.textAlignRight]}>
+                    <ExpensifyText style={[styles.textStrong, styles.textAlignRight]}>
                         {Localize.translateLocal('termsStep.electronicFundsInstantFee')}
-                    </Text>
-                    <Text style={[styles.textMicroSupporting, styles.mt1, styles.textAlignRight]}>
+                    </ExpensifyText>
+                    <ExpensifyText style={[styles.textMicroSupporting, styles.mt1, styles.textAlignRight]}>
                         {Localize.translateLocal('termsStep.electronicFundsInstantFeeMin')}
-                    </Text>
+                    </ExpensifyText>
                 </View>
             </View>
             <View style={[styles.shortTermsBoldHeadingSection, styles.mb4]}>
-                <Text style={[styles.textStrong, styles.mb3]}>
+                <ExpensifyText style={[styles.textStrong, styles.mb3]}>
                     {Localize.translateLocal('termsStep.noOverdraftOrCredit')}
-                </Text>
-                <Text style={styles.mb3}>
+                </ExpensifyText>
+                <ExpensifyText style={styles.mb3}>
                     {Localize.translateLocal('termsStep.shortTermsForm.fdicInsurance')}
-                </Text>
-                <Text style={styles.mb3}>
+                </ExpensifyText>
+                <ExpensifyText style={styles.mb3}>
                     {Localize.translateLocal('termsStep.shortTermsForm.generalInfo')}
                     {' '}
-                    <Text
+                    <ExpensifyText
                         style={styles.link}
                         onPress={() => Link.openExternalLink(CONST.CFPB_PREPAID_URL)}
                     >
                         {CONST.TERMS.CFPB_PREPAID}
-                    </Text>
+                    </ExpensifyText>
                     .
-                </Text>
-                <Text>
+                </ExpensifyText>
+                <ExpensifyText>
                     {Localize.translateLocal('termsStep.shortTermsForm.conditionsDetails')}
                     {' '}
-                    <Text
+                    <ExpensifyText
                         style={styles.link}
                         onPress={() => Link.openExternalLink(CONST.FEES_URL)}
                     >
                         {CONST.TERMS.USE_EXPENSIFY_FEES}
-                    </Text>
+                    </ExpensifyText>
                     {' '}
                     {Localize.translateLocal('termsStep.shortTermsForm.conditionsPhone')}
-                </Text>
+                </ExpensifyText>
             </View>
         </View>
     </>
diff --git a/src/pages/EnablePayments/TermsStep.js b/src/pages/EnablePayments/TermsStep.js
index 48bb484a418b..4aecfcff7dbd 100644
--- a/src/pages/EnablePayments/TermsStep.js
+++ b/src/pages/EnablePayments/TermsStep.js
@@ -13,7 +13,7 @@ import TextLink from '../../components/TextLink';
 import compose from '../../libs/compose';
 import ONYXKEYS from '../../ONYXKEYS';
 import CheckboxWithLabel from '../../components/CheckboxWithLabel';
-import Text from '../../components/Text';
+import ExpensifyText from '../../components/ExpensifyText';
 import ShortTermsForm from './TermsPage/ShortTermsForm';
 import LongTermsForm from './TermsPage/LongTermsForm';
 import FixedFooter from '../../components/FixedFooter';
@@ -71,13 +71,13 @@ class TermsStep extends React.Component {
                         isChecked={this.state.hasAcceptedDisclosure}
                         onPress={this.toggleDisclosure}
                         LabelComponent={() => (
-                            <Text>
+                            <ExpensifyText>
                                 {`${this.props.translate('termsStep.haveReadAndAgree')} `}
 
                                 <TextLink href="https://use.expensify.com/fees">
                                     {`${this.props.translate('termsStep.electronicDisclosures')}.`}
                                 </TextLink>
-                            </Text>
+                            </ExpensifyText>
                         )}
                     />
                     <CheckboxWithLabel
@@ -86,15 +86,15 @@ class TermsStep extends React.Component {
                         onPress={this.togglePrivacyPolicy}
                         LabelComponent={() => (
                             <>
-                                <Text>
+                                <ExpensifyText>
                                     {`${this.props.translate('termsStep.agreeToThe')} `}
-                                </Text>
+                                </ExpensifyText>
 
                                 <TextLink href="https://use.expensify.com/privacy">
                                     {`${this.props.translate('common.privacyPolicy')} `}
                                 </TextLink>
 
-                                <Text>{`${this.props.translate('common.and')} `}</Text>
+                                <ExpensifyText>{`${this.props.translate('common.and')} `}</ExpensifyText>
 
                                 <TextLink href="https://use.expensify.com/personalpaymentsterms">
                                     {`${this.props.translate('termsStep.walletAgreement')}.`}
@@ -104,9 +104,9 @@ class TermsStep extends React.Component {
                     />
                 </ScrollView>
                 {this.state.error && (
-                    <Text style={[styles.formError, styles.mb2]}>
+                    <ExpensifyText style={[styles.formError, styles.mb2]}>
                         {this.props.translate('termsStep.termsMustBeAccepted')}
-                    </Text>
+                    </ExpensifyText>
                 )}
                 <FixedFooter>
                     <ExpensifyButton
diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js
index 9b9411ded77f..cfcd891ccd92 100644
--- a/src/pages/ReimbursementAccount/BankAccountStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountStep.js
@@ -15,7 +15,7 @@ import AddPlaidBankAccount from '../../components/AddPlaidBankAccount';
 import CheckboxWithLabel from '../../components/CheckboxWithLabel';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import exampleCheckImage from './exampleCheckImage';
-import Text from '../../components/Text';
+import ExpensifyText from '../../components/ExpensifyText';
 import ExpensiTextInput from '../../components/ExpensiTextInput';
 import * as BankAccounts from '../../libs/actions/BankAccounts';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -182,9 +182,9 @@ class BankAccountStep extends React.Component {
                                 icon={Illustrations.BankMouseGreen}
                                 title={this.props.translate('workspace.bankAccount.streamlinePayments')}
                             />
-                            <Text style={[styles.mh5, styles.mb5]}>
+                            <ExpensifyText style={[styles.mh5, styles.mb5]}>
                                 {this.props.translate('bankAccount.toGetStarted')}
-                            </Text>
+                            </ExpensifyText>
                             <MenuItem
                                 icon={Expensicons.Bank}
                                 title={this.props.translate('bankAccount.connectOnlineWithPlaid')}
@@ -193,9 +193,9 @@ class BankAccountStep extends React.Component {
                                 shouldShowRightIcon
                             />
                             {this.props.isPlaidDisabled && (
-                                <Text style={[styles.formError, styles.mh5]}>
+                                <ExpensifyText style={[styles.formError, styles.mh5]}>
                                     {this.props.translate('bankAccount.error.tooManyAttempts')}
-                                </Text>
+                                </ExpensifyText>
                             )}
                             <MenuItem
                                 icon={Expensicons.Paycheck}
@@ -206,12 +206,12 @@ class BankAccountStep extends React.Component {
                             />
                             {!this.props.user.validated && (
                                 <View style={[styles.flexRow, styles.alignItemsCenter, styles.m4]}>
-                                    <Text style={[styles.mutedTextLabel, styles.mr4]}>
+                                    <ExpensifyText style={[styles.mutedTextLabel, styles.mr4]}>
                                         <Icon src={Expensicons.Exclamation} fill={colors.red} />
-                                    </Text>
-                                    <Text style={styles.mutedTextLabel}>
+                                    </ExpensifyText>
+                                    <ExpensifyText style={styles.mutedTextLabel}>
                                         {this.props.translate('bankAccount.validateAccountError')}
-                                    </Text>
+                                    </ExpensifyText>
                                 </View>
                             )}
                             <View style={[styles.m5, styles.flexRow, styles.justifyContentBetween]}>
@@ -244,9 +244,9 @@ class BankAccountStep extends React.Component {
                     <ReimbursementAccountForm
                         onSubmit={this.addManualAccount}
                     >
-                        <Text style={[styles.mb5]}>
+                        <ExpensifyText style={[styles.mb5]}>
                             {this.props.translate('bankAccount.checkHelpLine')}
-                        </Text>
+                        </ExpensifyText>
                         <Image
                             resizeMode="contain"
                             style={[styles.exampleCheckImage, styles.mb5]}
@@ -275,9 +275,9 @@ class BankAccountStep extends React.Component {
                             onPress={this.toggleTerms}
                             LabelComponent={() => (
                                 <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                                    <Text>
+                                    <ExpensifyText>
                                         {this.props.translate('common.iAcceptThe')}
-                                    </Text>
+                                    </ExpensifyText>
                                     <TextLink href="https://use.expensify.com/terms">
                                         {`Expensify ${this.props.translate('common.termsOfService')}`}
                                     </TextLink>
diff --git a/src/pages/ReimbursementAccount/BeneficialOwnersStep.js b/src/pages/ReimbursementAccount/BeneficialOwnersStep.js
index a8c282d00b41..f5639efb7a71 100644
--- a/src/pages/ReimbursementAccount/BeneficialOwnersStep.js
+++ b/src/pages/ReimbursementAccount/BeneficialOwnersStep.js
@@ -4,7 +4,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import Text from '../../components/Text';
+import ExpensifyText from '../../components/ExpensifyText';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import styles from '../../styles/styles';
 import CheckboxWithLabel from '../../components/CheckboxWithLabel';
@@ -187,18 +187,18 @@ class BeneficialOwnersStep extends React.Component {
                 <ReimbursementAccountForm
                     onSubmit={this.submit}
                 >
-                    <Text style={[styles.mb5]}>
-                        <Text>{this.props.translate('beneficialOwnersStep.checkAllThatApply')}</Text>
-                    </Text>
+                    <ExpensifyText style={[styles.mb5]}>
+                        <ExpensifyText>{this.props.translate('beneficialOwnersStep.checkAllThatApply')}</ExpensifyText>
+                    </ExpensifyText>
                     <CheckboxWithLabel
                         style={[styles.mb2]}
                         isChecked={this.state.ownsMoreThan25Percent}
                         onPress={() => this.toggleCheckbox('ownsMoreThan25Percent')}
                         LabelComponent={() => (
-                            <Text>
+                            <ExpensifyText>
                                 {this.props.translate('beneficialOwnersStep.iOwnMoreThan25Percent')}
-                                <Text style={[styles.textStrong]}>{this.props.companyName}</Text>
-                            </Text>
+                                <ExpensifyText style={[styles.textStrong]}>{this.props.companyName}</ExpensifyText>
+                            </ExpensifyText>
                         )}
                     />
                     <CheckboxWithLabel
@@ -218,19 +218,19 @@ class BeneficialOwnersStep extends React.Component {
                             });
                         }}
                         LabelComponent={() => (
-                            <Text>
+                            <ExpensifyText>
                                 {this.props.translate('beneficialOwnersStep.someoneOwnsMoreThan25Percent')}
-                                <Text style={[styles.textStrong]}>{this.props.companyName}</Text>
-                            </Text>
+                                <ExpensifyText style={[styles.textStrong]}>{this.props.companyName}</ExpensifyText>
+                            </ExpensifyText>
                         )}
                     />
                     {this.state.hasOtherBeneficialOwners && (
                         <View style={[styles.mb2]}>
                             {_.map(this.state.beneficialOwners, (owner, index) => (
                                 <View key={index} style={[styles.p5, styles.border, styles.mb2]}>
-                                    <Text style={[styles.textStrong, styles.mb2]}>
+                                    <ExpensifyText style={[styles.textStrong, styles.mb2]}>
                                         {this.props.translate('beneficialOwnersStep.additionalOwner')}
-                                    </Text>
+                                    </ExpensifyText>
                                     <IdentityForm
                                         style={[styles.mb2]}
                                         onFieldChange={(inputKey, value) => this.clearErrorAndSetBeneficialOwnerValue(index, inputKey, value)}
@@ -256,21 +256,21 @@ class BeneficialOwnersStep extends React.Component {
                             {this.canAddMoreBeneficialOwners() && (
                                 <TextLink onPress={this.addBeneficialOwner}>
                                     {this.props.translate('beneficialOwnersStep.addAnotherIndividual')}
-                                    <Text style={[styles.textStrong, styles.link]}>{this.props.companyName}</Text>
+                                    <ExpensifyText style={[styles.textStrong, styles.link]}>{this.props.companyName}</ExpensifyText>
                                 </TextLink>
                             )}
                         </View>
                     )}
-                    <Text style={[styles.mv5]}>
+                    <ExpensifyText style={[styles.mv5]}>
                         {this.props.translate('beneficialOwnersStep.agreement')}
-                    </Text>
+                    </ExpensifyText>
                     <CheckboxWithLabel
                         style={[styles.mt4]}
                         isChecked={this.state.acceptTermsAndConditions}
                         onPress={() => this.toggleCheckbox('acceptTermsAndConditions')}
                         LabelComponent={() => (
                             <View style={[styles.flexRow]}>
-                                <Text>{this.props.translate('common.iAcceptThe')}</Text>
+                                <ExpensifyText>{this.props.translate('common.iAcceptThe')}</ExpensifyText>
                                 <TextLink href="https://use.expensify.com/achterms">
                                     {`${this.props.translate('beneficialOwnersStep.termsAndConditions')}`}
                                 </TextLink>
@@ -284,7 +284,7 @@ class BeneficialOwnersStep extends React.Component {
                         isChecked={this.state.certifyTrueInformation}
                         onPress={() => this.toggleCheckbox('certifyTrueInformation')}
                         LabelComponent={() => (
-                            <Text>{this.props.translate('beneficialOwnersStep.certifyTrueAndAccurate')}</Text>
+                            <ExpensifyText>{this.props.translate('beneficialOwnersStep.certifyTrueAndAccurate')}</ExpensifyText>
                         )}
                         errorText={this.getErrorText('certifyTrueInformation')}
                         hasError={this.getErrors().certifyTrueInformation}
diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js
index 812b6403f944..9328465b87a9 100644
--- a/src/pages/ReimbursementAccount/CompanyStep.js
+++ b/src/pages/ReimbursementAccount/CompanyStep.js
@@ -9,7 +9,7 @@ import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import CONST from '../../CONST';
 import * as BankAccounts from '../../libs/actions/BankAccounts';
 import Navigation from '../../libs/Navigation/Navigation';
-import Text from '../../components/Text';
+import ExpensifyText from '../../components/ExpensifyText';
 import DatePicker from '../../components/DatePicker';
 import ExpensiTextInput from '../../components/ExpensiTextInput';
 import styles from '../../styles/styles';
@@ -217,7 +217,7 @@ class CompanyStep extends React.Component {
                 <ReimbursementAccountForm
                     onSubmit={this.submit}
                 >
-                    <Text>{this.props.translate('companyStep.subtitle')}</Text>
+                    <ExpensifyText>{this.props.translate('companyStep.subtitle')}</ExpensifyText>
                     <ExpensiTextInput
                         label={this.props.translate('companyStep.legalBusinessName')}
                         containerStyles={[styles.mt4]}
@@ -252,7 +252,7 @@ class CompanyStep extends React.Component {
                                 value={this.state.addressStreet}
                                 errorText={this.getErrorText('addressStreet')}
                             />
-                            <Text style={[styles.mutedTextLabel, styles.mt1]}>{this.props.translate('common.noPO')}</Text>
+                            <ExpensifyText style={[styles.mutedTextLabel, styles.mt1]}>{this.props.translate('common.noPO')}</ExpensifyText>
                             <View style={[styles.flexRow, styles.mt4]}>
                                 <View style={[styles.flex2, styles.mr2]}>
                                     <ExpensiTextInput
@@ -351,7 +351,7 @@ class CompanyStep extends React.Component {
                         }}
                         LabelComponent={() => (
                             <>
-                                <Text>{`${this.props.translate('companyStep.confirmCompanyIsNot')} `}</Text>
+                                <ExpensifyText>{`${this.props.translate('companyStep.confirmCompanyIsNot')} `}</ExpensifyText>
                                 <TextLink
                                     // eslint-disable-next-line max-len
                                     href="https://community.expensify.com/discussion/6191/list-of-restricted-businesses"
diff --git a/src/pages/ReimbursementAccount/EnableStep.js b/src/pages/ReimbursementAccount/EnableStep.js
index 720160b9e459..6ccd5a3793b0 100644
--- a/src/pages/ReimbursementAccount/EnableStep.js
+++ b/src/pages/ReimbursementAccount/EnableStep.js
@@ -7,7 +7,7 @@ import styles from '../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import Navigation from '../../libs/Navigation/Navigation';
-import Text from '../../components/Text';
+import ExpensifyText from '../../components/ExpensifyText';
 import compose from '../../libs/compose';
 import ONYXKEYS from '../../ONYXKEYS';
 import CONST from '../../CONST';
@@ -109,16 +109,16 @@ class EnableStep extends React.Component {
                             interactive={false}
                             wrapperStyle={[styles.ph0, styles.mb3]}
                         />
-                        <Text>
+                        <ExpensifyText>
                             {!isUsingExpensifyCard
                                 ? this.props.translate('workspace.bankAccount.accountDescriptionNoCards')
                                 : this.props.translate('workspace.bankAccount.accountDescriptionWithCards')}
-                        </Text>
+                        </ExpensifyText>
                     </WorkspaceSection>
                     {this.props.user.isCheckingDomain && (
-                        <Text style={[styles.formError, styles.m5]}>
+                        <ExpensifyText style={[styles.formError, styles.m5]}>
                             {this.props.translate('workspace.card.checkingDomain')}
-                        </Text>
+                        </ExpensifyText>
                     )}
                 </View>
             </View>
diff --git a/src/pages/ReimbursementAccount/IdentityForm.js b/src/pages/ReimbursementAccount/IdentityForm.js
index 2ab673659ee9..e8cb65b88eff 100644
--- a/src/pages/ReimbursementAccount/IdentityForm.js
+++ b/src/pages/ReimbursementAccount/IdentityForm.js
@@ -9,7 +9,7 @@ import CONST from '../../CONST';
 import DatePicker from '../../components/DatePicker';
 import TextLink from '../../components/TextLink';
 import StatePicker from '../../components/StatePicker';
-import Text from '../../components/Text';
+import ExpensifyText from '../../components/ExpensifyText';
 
 
 const propTypes = {
@@ -142,7 +142,7 @@ const IdentityForm = (props) => {
                         onChangeText={value => props.onFieldChange('addressStreet', value)}
                         errorText={props.errors.street ? props.translate('bankAccount.error.address') : ''}
                     />
-                    <Text style={[styles.mutedTextLabel, styles.mt1]}>{props.translate('common.noPO')}</Text>
+                    <ExpensifyText style={[styles.mutedTextLabel, styles.mt1]}>{props.translate('common.noPO')}</ExpensifyText>
                     <View style={[styles.flexRow, styles.mt4]}>
                         <View style={[styles.flex2, styles.mr2]}>
                             <ExpensiTextInput
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
index 331880fc29b0..e8eda6a53617 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
@@ -17,7 +17,7 @@ import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize
 import compose from '../../libs/compose';
 import styles from '../../styles/styles';
 import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
-import Text from '../../components/Text';
+import ExpensifyText from '../../components/ExpensifyText';
 
 // Steps
 import BankAccountStep from './BankAccountStep';
@@ -176,7 +176,7 @@ class ReimbursementAccountPage extends React.Component {
         if (userHasPhonePrimaryEmail) {
             errorComponent = (
                 <View style={[styles.m5]}>
-                    <Text>{this.props.translate('bankAccount.hasPhoneLoginError')}</Text>
+                    <ExpensifyText>{this.props.translate('bankAccount.hasPhoneLoginError')}</ExpensifyText>
                 </View>
             );
         }
@@ -185,9 +185,9 @@ class ReimbursementAccountPage extends React.Component {
         if (throttledDate) {
             errorComponent = (
                 <View style={[styles.m5]}>
-                    <Text>
+                    <ExpensifyText>
                         {this.props.translate('bankAccount.hasBeenThrottledError')}
-                    </Text>
+                    </ExpensifyText>
                 </View>
             );
         }
diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js
index 13555bab55a6..7c4cbcff93ea 100644
--- a/src/pages/ReimbursementAccount/RequestorStep.js
+++ b/src/pages/ReimbursementAccount/RequestorStep.js
@@ -11,7 +11,7 @@ import CONST from '../../CONST';
 import TextLink from '../../components/TextLink';
 import Navigation from '../../libs/Navigation/Navigation';
 import CheckboxWithLabel from '../../components/CheckboxWithLabel';
-import Text from '../../components/Text';
+import ExpensifyText from '../../components/ExpensifyText';
 import * as BankAccounts from '../../libs/actions/BankAccounts';
 import IdentityForm from './IdentityForm';
 import * as ValidationUtils from '../../libs/ValidationUtils';
@@ -179,7 +179,7 @@ class RequestorStep extends React.Component {
                     <ReimbursementAccountForm
                         onSubmit={this.submit}
                     >
-                        <Text>{this.props.translate('requestorStep.subtitle')}</Text>
+                        <ExpensifyText>{this.props.translate('requestorStep.subtitle')}</ExpensifyText>
                         <View style={[styles.mb5, styles.mt1, styles.dFlex, styles.flexRow]}>
                             <TextLink
                                 style={[styles.textMicro]}
@@ -188,7 +188,7 @@ class RequestorStep extends React.Component {
                             >
                                 {`${this.props.translate('requestorStep.learnMore')}`}
                             </TextLink>
-                            <Text style={[styles.textMicroSupporting]}>{' | '}</Text>
+                            <ExpensifyText style={[styles.textMicroSupporting]}>{' | '}</ExpensifyText>
                             <TextLink
                                 style={[styles.textMicro, styles.textLink]}
                                 // eslint-disable-next-line max-len
@@ -224,41 +224,41 @@ class RequestorStep extends React.Component {
                             }}
                             LabelComponent={() => (
                                 <View style={[styles.flex1, styles.pr1]}>
-                                    <Text>
+                                    <ExpensifyText>
                                         {this.props.translate('requestorStep.isControllingOfficer')}
-                                    </Text>
+                                    </ExpensifyText>
                                 </View>
                             )}
                             style={[styles.mt4]}
                             hasError={Boolean(this.getErrors().isControllingOfficer)}
                             errorText={this.getErrors().isControllingOfficer ? this.props.translate('requestorStep.isControllingOfficerError') : ''}
                         />
-                        <Text style={[styles.mt3, styles.textMicroSupporting]}>
+                        <ExpensifyText style={[styles.mt3, styles.textMicroSupporting]}>
                             {this.props.translate('requestorStep.onFidoConditions')}
-                            <Text
+                            <ExpensifyText
                                 onPress={() => Link.openExternalLink('https://onfido.com/facial-scan-policy-and-release/')}
                                 style={[styles.textMicro, styles.link]}
                                 accessibilityRole="link"
                             >
                                 {`${this.props.translate('requestorStep.onFidoFacialScan')}`}
-                            </Text>
+                            </ExpensifyText>
                             {', '}
-                            <Text
+                            <ExpensifyText
                                 onPress={() => Link.openExternalLink('https://onfido.com/privacy/')}
                                 style={[styles.textMicro, styles.link]}
                                 accessibilityRole="link"
                             >
                                 {`${this.props.translate('common.privacyPolicy')}`}
-                            </Text>
+                            </ExpensifyText>
                             {` ${this.props.translate('common.and')} `}
-                            <Text
+                            <ExpensifyText
                                 onPress={() => Link.openExternalLink('https://onfido.com/terms-of-service/')}
                                 style={[styles.textMicro, styles.link]}
                                 accessibilityRole="link"
                             >
                                 {`${this.props.translate('common.termsOfService')}`}
-                            </Text>
-                        </Text>
+                            </ExpensifyText>
+                        </ExpensifyText>
                     </ReimbursementAccountForm>
                 )}
             </>
diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index cce782a2ad02..0684324278a3 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -11,7 +11,7 @@ import * as Report from '../../libs/actions/Report';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import Navigation from '../../libs/Navigation/Navigation';
 import ExpensiTextInput from '../../components/ExpensiTextInput';
-import Text from '../../components/Text';
+import ExpensifyText from '../../components/ExpensifyText';
 import BankAccount from '../../libs/models/BankAccount';
 import TextLink from '../../components/TextLink';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -172,7 +172,7 @@ class ValidationStep extends React.Component {
                 />
                 {maxAttemptsReached && (
                     <View style={[styles.m5, styles.flex1]}>
-                        <Text>
+                        <ExpensifyText>
                             {this.props.translate('validationStep.maxAttemptsReached')}
                             {' '}
                             {this.props.translate('common.please')}
@@ -181,7 +181,7 @@ class ValidationStep extends React.Component {
                                 {this.props.translate('common.contactUs')}
                             </TextLink>
                             .
-                        </Text>
+                        </ExpensifyText>
                     </View>
                 )}
                 {!maxAttemptsReached && state === BankAccount.STATE.PENDING && (
@@ -189,12 +189,12 @@ class ValidationStep extends React.Component {
                         onSubmit={this.submit}
                     >
                         <View style={[styles.mb2]}>
-                            <Text style={[styles.mb5]}>
+                            <ExpensifyText style={[styles.mb5]}>
                                 {this.props.translate('validationStep.description')}
-                            </Text>
-                            <Text style={[styles.mb2]}>
+                            </ExpensifyText>
+                            <ExpensifyText style={[styles.mb2]}>
                                 {this.props.translate('validationStep.descriptionCTA')}
-                            </Text>
+                            </ExpensifyText>
                         </View>
                         <View style={[styles.mv5, styles.flex1]}>
                             <ExpensiTextInput
@@ -244,9 +244,9 @@ class ValidationStep extends React.Component {
                                 },
                             ]}
                         >
-                            <Text>
+                            <ExpensifyText>
                                 {this.props.translate('validationStep.letsChatText')}
-                            </Text>
+                            </ExpensifyText>
                         </WorkspaceSection>
                     </View>
                 )}
diff --git a/src/pages/ReportDetailsPage.js b/src/pages/ReportDetailsPage.js
index 8f05a855b218..a857e4bf95a1 100644
--- a/src/pages/ReportDetailsPage.js
+++ b/src/pages/ReportDetailsPage.js
@@ -22,7 +22,7 @@ import * as Report from '../libs/actions/Report';
 import * as Expensicons from '../components/Icon/Expensicons';
 import ROUTES from '../ROUTES';
 import MenuItem from '../components/MenuItem';
-import Text from '../components/Text';
+import ExpensifyText from '../components/ExpensifyText';
 import ExpensiPicker from '../components/ExpensiPicker';
 
 const propTypes = {
@@ -144,7 +144,7 @@ class ReportDetailsPage extends Component {
                                     textStyles={[styles.headerText, styles.mb2]}
                                     shouldUseFullTitle={ReportUtils.isDefaultRoom(this.props.report)}
                                 />
-                                <Text
+                                <ExpensifyText
                                     style={[
                                         styles.sidebarLinkText,
                                         styles.optionAlternateText,
@@ -154,15 +154,15 @@ class ReportDetailsPage extends Component {
                                     numberOfLines={1}
                                 >
                                     {defaultRoomSubtitle}
-                                </Text>
+                                </ExpensifyText>
                             </View>
                         </View>
                         {!ReportUtils.isArchivedRoom(this.props.report) && (
                             <View>
                                 <View style={styles.mt4}>
-                                    <Text style={[styles.formLabel]} numberOfLines={1}>
+                                    <ExpensifyText style={[styles.formLabel]} numberOfLines={1}>
                                         {this.props.translate('common.notifications')}
-                                    </Text>
+                                    </ExpensifyText>
                                 </View>
                                 <View>
                                     <View style={[styles.mb5]}>
diff --git a/src/pages/RequestCallPage.js b/src/pages/RequestCallPage.js
index 0da76f30d62c..2370d28ec505 100644
--- a/src/pages/RequestCallPage.js
+++ b/src/pages/RequestCallPage.js
@@ -20,7 +20,7 @@ import * as Inbox from '../libs/actions/Inbox';
 import * as Report from '../libs/actions/Report';
 import personalDetailsPropType from './personalDetailsPropType';
 import ExpensiTextInput from '../components/ExpensiTextInput';
-import Text from '../components/Text';
+import ExpensifyText from '../components/ExpensifyText';
 import KeyboardAvoidingView from '../components/KeyboardAvoidingView';
 import RequestCallIcon from '../../assets/images/request-call.svg';
 import * as PersonalDetails from '../libs/actions/PersonalDetails';
@@ -214,12 +214,12 @@ class RequestCallPage extends Component {
                     />
                     <ScrollView style={styles.flex1} contentContainerStyle={[styles.p5, styles.pt0]}>
                         <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
-                            <Text style={[styles.h1, styles.flex1]}>{this.props.translate('requestCallPage.subtitle')}</Text>
+                            <ExpensifyText style={[styles.h1, styles.flex1]}>{this.props.translate('requestCallPage.subtitle')}</ExpensifyText>
                             <RequestCallIcon width={160} height={100} style={styles.flex1} />
                         </View>
-                        <Text style={[styles.mb4]}>
+                        <ExpensifyText style={[styles.mb4]}>
                             {this.props.translate('requestCallPage.description')}
-                        </Text>
+                        </ExpensifyText>
                         <FullNameInputRow
                             firstName={this.state.firstName}
                             firstNameError={this.state.firstNameError}
diff --git a/src/pages/SetPasswordPage.js b/src/pages/SetPasswordPage.js
index 7df7157e56d8..d7eaf1f69d68 100755
--- a/src/pages/SetPasswordPage.js
+++ b/src/pages/SetPasswordPage.js
@@ -19,7 +19,7 @@ import SignInPageLayout from './signin/SignInPageLayout';
 import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
 import compose from '../libs/compose';
 import NewPasswordForm from './settings/NewPasswordForm';
-import Text from '../components/Text';
+import ExpensifyText from '../components/ExpensifyText';
 
 const propTypes = {
     /* Onyx Props */
@@ -116,9 +116,9 @@ class SetPasswordPage extends Component {
                         />
                     </View>
                     {!_.isEmpty(error) && (
-                        <Text style={[styles.formError]}>
+                        <ExpensifyText style={[styles.formError]}>
                             {error}
-                        </Text>
+                        </ExpensifyText>
                     )}
                 </SignInPageLayout>
             </SafeAreaView>
diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index a370c8885c8c..245e9e6e4267 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -24,7 +24,7 @@ import IOUBadge from '../../components/IOUBadge';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import CONST from '../../CONST';
 import * as ReportUtils from '../../libs/reportUtils';
-import Text from '../../components/Text';
+import ExpensifyText from '../../components/ExpensifyText';
 import Tooltip from '../../components/Tooltip';
 
 const propTypes = {
@@ -148,7 +148,7 @@ const HeaderView = (props) => {
                                     shouldUseFullTitle={isDefaultChatRoom}
                                 />
                                 {isDefaultChatRoom && (
-                                    <Text
+                                    <ExpensifyText
                                         style={[
                                             styles.sidebarLinkText,
                                             styles.optionAlternateText,
@@ -158,7 +158,7 @@ const HeaderView = (props) => {
                                         numberOfLines={1}
                                     >
                                         {subtitle}
-                                    </Text>
+                                    </ExpensifyText>
                                 )}
                             </View>
                         </Pressable>
diff --git a/src/pages/home/report/EmojiPickerMenu/index.js b/src/pages/home/report/EmojiPickerMenu/index.js
index 046e27b08c6e..97adc713bf34 100755
--- a/src/pages/home/report/EmojiPickerMenu/index.js
+++ b/src/pages/home/report/EmojiPickerMenu/index.js
@@ -8,7 +8,7 @@ import * as StyleUtils from '../../../../styles/StyleUtils';
 import themeColors from '../../../../styles/themes/default';
 import emojis from '../../../../../assets/emojis';
 import EmojiPickerMenuItem from '../EmojiPickerMenuItem';
-import Text from '../../../../components/Text';
+import ExpensifyText from '../../../../components/ExpensifyText';
 import TextInputFocusable from '../../../../components/TextInputFocusable';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../../components/withWindowDimensions';
 import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
@@ -333,9 +333,9 @@ class EmojiPickerMenu extends Component {
 
         if (header) {
             return (
-                <Text style={styles.emojiHeaderStyle}>
+                <ExpensifyText style={styles.emojiHeaderStyle}>
                     {code}
-                </Text>
+                </ExpensifyText>
             );
         }
 
@@ -377,7 +377,7 @@ class EmojiPickerMenu extends Component {
                 )}
                 {this.state.filteredEmojis.length === 0
                     ? (
-                        <Text
+                        <ExpensifyText
                             style={[
                                 styles.disabledText,
                                 styles.emojiPickerList,
@@ -388,7 +388,7 @@ class EmojiPickerMenu extends Component {
                             ]}
                         >
                             {this.props.translate('common.noResultsFound')}
-                        </Text>
+                        </ExpensifyText>
                     )
                     : (
                         <FlatList
diff --git a/src/pages/home/report/EmojiPickerMenu/index.native.js b/src/pages/home/report/EmojiPickerMenu/index.native.js
index b127fe22b22d..f7fc927e0bc2 100644
--- a/src/pages/home/report/EmojiPickerMenu/index.native.js
+++ b/src/pages/home/report/EmojiPickerMenu/index.native.js
@@ -7,7 +7,7 @@ import CONST from '../../../../CONST';
 import styles from '../../../../styles/styles';
 import emojis from '../../../../../assets/emojis';
 import EmojiPickerMenuItem from '../EmojiPickerMenuItem';
-import Text from '../../../../components/Text';
+import ExpensifyText from '../../../../components/ExpensifyText';
 import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
 import EmojiSkinToneList from '../EmojiSkinToneList';
 
@@ -76,9 +76,9 @@ class EmojiPickerMenu extends Component {
 
         if (item.header) {
             return (
-                <Text style={styles.emojiHeaderStyle}>
+                <ExpensifyText style={styles.emojiHeaderStyle}>
                     {item.code}
-                </Text>
+                </ExpensifyText>
             );
         }
 
diff --git a/src/pages/home/report/EmojiPickerMenuItem.js b/src/pages/home/report/EmojiPickerMenuItem.js
index d2bb719943db..90bab9c7931d 100644
--- a/src/pages/home/report/EmojiPickerMenuItem.js
+++ b/src/pages/home/report/EmojiPickerMenuItem.js
@@ -5,7 +5,7 @@ import styles from '../../../styles/styles';
 import * as StyleUtils from '../../../styles/StyleUtils';
 import getButtonState from '../../../libs/getButtonState';
 import Hoverable from '../../../components/Hoverable';
-import Text from '../../../components/Text';
+import ExpensifyText from '../../../components/ExpensifyText';
 
 const propTypes = {
     /** The unicode that is used to display the emoji */
@@ -34,9 +34,9 @@ const EmojiPickerMenuItem = props => (
         ])}
     >
         <Hoverable onHoverIn={props.onHover}>
-            <Text style={[styles.emojiText]}>
+            <ExpensifyText style={[styles.emojiText]}>
                 {props.emoji}
-            </Text>
+            </ExpensifyText>
         </Hoverable>
     </Pressable>
 
diff --git a/src/pages/home/report/EmojiSkinToneList.js b/src/pages/home/report/EmojiSkinToneList.js
index c04d3c49c622..6f15aae88d2a 100644
--- a/src/pages/home/report/EmojiSkinToneList.js
+++ b/src/pages/home/report/EmojiSkinToneList.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import styles from '../../../styles/styles';
 import * as Emojis from '../../../../assets/emojis';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
-import Text from '../../../components/Text';
+import ExpensifyText from '../../../components/ExpensifyText';
 import getSkinToneEmojiFromIndex from './EmojiPickerMenu/getSkinToneEmojiFromIndex';
 import EmojiPickerMenuItem from './EmojiPickerMenuItem';
 
@@ -68,12 +68,12 @@ class EmojiSkinToneList extends Component {
                                 styles.alignItemsCenter,
                             ]}
                         >
-                            <Text style={[styles.emojiText, styles.ph2, styles.emojiItem]}>
+                            <ExpensifyText style={[styles.emojiText, styles.ph2, styles.emojiItem]}>
                                 {selectedEmoji.code}
-                            </Text>
-                            <Text style={[styles.emojiSkinToneTitle]}>
+                            </ExpensifyText>
+                            <ExpensifyText style={[styles.emojiSkinToneTitle]}>
                                 {this.props.translate('emojiPicker.skinTonePickerLabel')}
-                            </Text>
+                            </ExpensifyText>
                         </Pressable>
                     )
                 }
diff --git a/src/pages/home/report/ParticipantLocalTime.js b/src/pages/home/report/ParticipantLocalTime.js
index cab0781233a7..8dff90e226ef 100644
--- a/src/pages/home/report/ParticipantLocalTime.js
+++ b/src/pages/home/report/ParticipantLocalTime.js
@@ -8,7 +8,7 @@ import Str from 'expensify-common/lib/str';
 import styles from '../../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import {participantPropTypes} from '../sidebar/optionPropTypes';
-import ExpensiText from '../../../components/Text';
+import ExpensifyText from '../../../components/ExpensifyText';
 import Timers from '../../../libs/Timers';
 import CONST from '../../../CONST';
 
@@ -60,7 +60,7 @@ class ParticipantLocalTime extends PureComponent {
 
         return (
             <View style={[styles.chatItemComposeSecondaryRow]}>
-                <ExpensiText
+                <ExpensifyText
                     style={[
                         styles.chatItemComposeSecondaryRowSubText,
                         styles.chatItemComposeSecondaryRowOffset,
@@ -74,7 +74,7 @@ class ParticipantLocalTime extends PureComponent {
                             time: this.state.localTime,
                         },
                     )}
-                </ExpensiText>
+                </ExpensifyText>
             </View>
         );
     }
diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
index 2a2359615d85..1e090239f525 100755
--- a/src/pages/home/report/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose.js
@@ -41,7 +41,7 @@ import * as User from '../../../libs/actions/User';
 import reportActionPropTypes from './reportActionPropTypes';
 import * as ReportUtils from '../../../libs/reportUtils';
 import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFocusManager';
-import Text from '../../../components/Text';
+import ExpensifyText from '../../../components/ExpensifyText';
 import {participantPropTypes} from '../sidebar/optionPropTypes';
 import currentUserPersonalDetailsPropsTypes from '../../settings/Profile/currentUserPersonalDetailsPropsTypes';
 import ParticipantLocalTime from './ParticipantLocalTime';
@@ -717,9 +717,9 @@ class ReportActionCompose extends React.Component {
                                 width={variables.iconSizeExtraSmall}
                                 height={variables.iconSizeExtraSmall}
                             />
-                            <Text style={[styles.ml2, styles.chatItemComposeSecondaryRowSubText]}>
+                            <ExpensifyText style={[styles.ml2, styles.chatItemComposeSecondaryRowSubText]}>
                                 {this.props.translate('reportActionCompose.youAppearToBeOffline')}
-                            </Text>
+                            </ExpensifyText>
                         </View>
                     </View>
                 ) : <ReportTypingIndicator reportID={this.props.reportID} />}
diff --git a/src/pages/home/report/ReportActionItemDate.js b/src/pages/home/report/ReportActionItemDate.js
index 8ee127a721fd..fadfd98debb6 100644
--- a/src/pages/home/report/ReportActionItemDate.js
+++ b/src/pages/home/report/ReportActionItemDate.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styles from '../../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import compose from '../../../libs/compose';
-import Text from '../../../components/Text';
+import ExpensifyText from '../../../components/ExpensifyText';
 import {withCurrentDate} from '../../../components/OnyxProvider';
 
 const propTypes = {
@@ -13,9 +13,9 @@ const propTypes = {
 };
 
 const ReportActionItemDate = props => (
-    <Text style={[styles.chatItemMessageHeaderTimestamp]}>
+    <ExpensifyText style={[styles.chatItemMessageHeaderTimestamp]}>
         {props.timestampToDateTime(props.timestamp)}
-    </Text>
+    </ExpensifyText>
 );
 
 ReportActionItemDate.propTypes = propTypes;
diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js
index 5088a773a48e..e39fe850107f 100644
--- a/src/pages/home/report/ReportActionItemFragment.js
+++ b/src/pages/home/report/ReportActionItemFragment.js
@@ -7,7 +7,7 @@ import styles from '../../../styles/styles';
 import variables from '../../../styles/variables';
 import themeColors from '../../../styles/themes/default';
 import RenderHTML from '../../../components/RenderHTML';
-import Text from '../../../components/Text';
+import ExpensifyText from '../../../components/ExpensifyText';
 import Tooltip from '../../../components/Tooltip';
 import * as EmojiUtils from '../../../libs/EmojiUtils';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
@@ -68,51 +68,51 @@ class ReportActionItemFragment extends React.PureComponent {
                             html={`<comment>${this.props.fragment.html + (this.props.fragment.isEdited ? '<edited></edited>' : '')}</comment>`}
                         />
                     ) : (
-                        <Text
+                        <ExpensifyText
                             selectable={!canUseTouchScreen() || !this.props.isSmallScreenWidth}
                             style={EmojiUtils.isSingleEmoji(this.props.fragment.text) ? styles.singleEmojiText : undefined}
                         >
                             {Str.htmlDecode(this.props.fragment.text)}
                             {this.props.fragment.isEdited && (
-                                <Text
+                                <ExpensifyText
                                     fontSize={variables.fontSizeSmall}
                                     color={themeColors.textSupporting}
                                 >
-                                    {/* Native devices do not support margin between nested text */}
-                                    <Text style={styles.w1}>{' '}</Text>
+                                    {/* Native devices do not support margin between nested ExpensifyText */}
+                                    <ExpensifyText style={styles.w1}>{' '}</ExpensifyText>
                                     {this.props.translate('reportActionCompose.edited')}
-                                </Text>
+                                </ExpensifyText>
                             )}
-                        </Text>
+                        </ExpensifyText>
                     );
             case 'TEXT':
                 return (
                     <Tooltip text={this.props.tooltipText}>
-                        <Text
+                        <ExpensifyText
                             selectable
                             numberOfLines={this.props.isSingleLine ? 1 : undefined}
                             style={[styles.chatItemMessageHeaderSender]}
                         >
                             {Str.htmlDecode(this.props.fragment.text)}
-                        </Text>
+                        </ExpensifyText>
                     </Tooltip>
                 );
             case 'LINK':
-                return <Text>LINK</Text>;
+                return <ExpensifyText>LINK</ExpensifyText>;
             case 'INTEGRATION_COMMENT':
-                return <Text>REPORT_LINK</Text>;
+                return <ExpensifyText>REPORT_LINK</ExpensifyText>;
             case 'REPORT_LINK':
-                return <Text>REPORT_LINK</Text>;
+                return <ExpensifyText>REPORT_LINK</ExpensifyText>;
             case 'POLICY_LINK':
-                return <Text>POLICY_LINK</Text>;
+                return <ExpensifyText>POLICY_LINK</ExpensifyText>;
 
             // If we have a message fragment type of OLD_MESSAGE this means we have not yet converted this over to the
             // new data structure. So we simply set this message as inner html and render it like we did before.
             // This wil allow us to convert messages over to the new structure without needing to do it all at once.
             case 'OLD_MESSAGE':
-                return <Text>OLD_MESSAGE</Text>;
+                return <ExpensifyText>OLD_MESSAGE</ExpensifyText>;
             default:
-                return <Text>fragment.text</Text>;
+                return <ExpensifyText>fragment.text</ExpensifyText>;
         }
     }
 }
diff --git a/src/pages/home/report/ReportTypingIndicator.js b/src/pages/home/report/ReportTypingIndicator.js
index 371b069994f5..b246cd363616 100755
--- a/src/pages/home/report/ReportTypingIndicator.js
+++ b/src/pages/home/report/ReportTypingIndicator.js
@@ -8,7 +8,7 @@ import ONYXKEYS from '../../../ONYXKEYS';
 import styles from '../../../styles/styles';
 import * as PersonalDetails from '../../../libs/actions/PersonalDetails';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
-import Text from '../../../components/Text';
+import ExpensifyText from '../../../components/ExpensifyText';
 
 const propTypes = {
     /** Key-value pairs of user logins and whether or not they are typing. Keys are logins. */
@@ -46,7 +46,7 @@ class ReportTypingIndicator extends React.Component {
     render() {
         const numUsersTyping = _.size(this.state.usersTyping);
 
-        // Decide on the Text element that will hold the display based on the number of users that are typing.
+        // Decide on the ExpensifyText element that will hold the display based on the number of users that are typing.
         switch (numUsersTyping) {
             case 0:
                 return <View style={[styles.chatItemComposeSecondaryRow]} />;
@@ -54,24 +54,24 @@ class ReportTypingIndicator extends React.Component {
                 return (
                     <View style={[styles.chatItemComposeSecondaryRow, styles.flexRow]}>
                         <View style={[styles.chatItemComposeSecondaryRowOffset, styles.flexShrink1]}>
-                            <Text
+                            <ExpensifyText
                                 style={[styles.chatItemComposeSecondaryRowSubText]}
                                 numberOfLines={1}
                             >
                                 {PersonalDetails.getDisplayName(this.state.usersTyping[0])}
-                            </Text>
+                            </ExpensifyText>
                         </View>
                         <View style={[styles.flexShrink0]}>
-                            <Text style={[styles.chatItemComposeSecondaryRowSubText]}>
+                            <ExpensifyText style={[styles.chatItemComposeSecondaryRowSubText]}>
                                 {` ${this.props.translate('reportTypingIndicator.isTyping')}`}
-                            </Text>
+                            </ExpensifyText>
                         </View>
                     </View>
                 );
             default:
                 return (
                     <View style={[styles.chatItemComposeSecondaryRow]}>
-                        <Text
+                        <ExpensifyText
                             style={[
                                 styles.chatItemComposeSecondaryRowSubText,
                                 styles.chatItemComposeSecondaryRowOffset,
@@ -80,7 +80,7 @@ class ReportTypingIndicator extends React.Component {
                         >
                             {this.props.translate('reportTypingIndicator.multipleUsers')}
                             {` ${this.props.translate('reportTypingIndicator.areTyping')}`}
-                        </Text>
+                        </ExpensifyText>
                     </View>
                 );
         }
diff --git a/src/pages/home/sidebar/OptionRow.js b/src/pages/home/sidebar/OptionRow.js
index 2c58924d8732..26cc11c936fa 100644
--- a/src/pages/home/sidebar/OptionRow.js
+++ b/src/pages/home/sidebar/OptionRow.js
@@ -20,7 +20,7 @@ import DisplayNames from '../../../components/DisplayNames';
 import IOUBadge from '../../../components/IOUBadge';
 import colors from '../../../styles/colors';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
-import Text from '../../../components/Text';
+import ExpensifyText from '../../../components/ExpensifyText';
 
 const propTypes = {
     /** Background Color of the Option Row */
@@ -188,19 +188,19 @@ const OptionRow = (props) => {
                                     shouldUseFullTitle={props.option.isDefaultChatRoom}
                                 />
                                 {props.option.alternateText ? (
-                                    <Text
+                                    <ExpensifyText
                                         style={alternateTextStyle}
                                         numberOfLines={1}
                                     >
                                         {props.option.alternateText}
-                                    </Text>
+                                    </ExpensifyText>
                                 ) : null}
                             </View>
                             {props.option.descriptiveText ? (
                                 <View style={[styles.flexWrap]}>
-                                    <Text style={[styles.textLabel]}>
+                                    <ExpensifyText style={[styles.textLabel]}>
                                         {props.option.descriptiveText}
-                                    </Text>
+                                    </ExpensifyText>
                                 </View>
                             ) : null}
                             {props.showSelectedState && (
diff --git a/src/pages/iou/IOUCurrencySelection.js b/src/pages/iou/IOUCurrencySelection.js
index 523d52aa8f3c..d2a85cc4ea8a 100644
--- a/src/pages/iou/IOUCurrencySelection.js
+++ b/src/pages/iou/IOUCurrencySelection.js
@@ -7,7 +7,7 @@ import styles from '../../styles/styles';
 import * as PersonalDetails from '../../libs/actions/PersonalDetails';
 import ONYXKEYS from '../../ONYXKEYS';
 import * as OptionsListUtils from '../../libs/OptionsListUtils';
-import Text from '../../components/Text';
+import ExpensifyText from '../../components/ExpensifyText';
 import OptionRow from '../home/sidebar/OptionRow';
 import themeColors from '../../styles/themes/default';
 import TextInputWithFocusStyles from '../../components/TextInputWithFocusStyles';
@@ -208,9 +208,9 @@ class IOUCurrencySelection extends Component {
                                     )}
                                     renderSectionHeader={({section: {title}}) => (
                                         <View>
-                                            <Text style={[styles.p5, styles.textMicroBold, styles.colorHeading]}>
+                                            <ExpensifyText style={[styles.p5, styles.textMicroBold, styles.colorHeading]}>
                                                 {title}
-                                            </Text>
+                                            </ExpensifyText>
                                         </View>
                                     )}
                                 />
diff --git a/src/pages/iou/steps/IOUAmountPage.js b/src/pages/iou/steps/IOUAmountPage.js
index 565fbe1735cd..a787a3780261 100755
--- a/src/pages/iou/steps/IOUAmountPage.js
+++ b/src/pages/iou/steps/IOUAmountPage.js
@@ -17,7 +17,7 @@ import ROUTES from '../../../ROUTES';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import compose from '../../../libs/compose';
 import ExpensifyButton from '../../../components/ExpensifyButton';
-import Text from '../../../components/Text';
+import ExpensifyText from '../../../components/ExpensifyText';
 import CONST from '../../../CONST';
 
 const propTypes = {
@@ -184,17 +184,17 @@ class IOUAmountPage extends React.Component {
                         ? ROUTES.getIouBillCurrencyRoute(this.props.reportID)
                         : ROUTES.getIouRequestCurrencyRoute(this.props.reportID))}
                     >
-                        <Text style={styles.iouAmountText}>
+                        <ExpensifyText style={styles.iouAmountText}>
                             {lodashGet(this.props.currencyList, [this.props.iou.selectedCurrencyCode, 'symbol'])}
-                        </Text>
+                        </ExpensifyText>
                     </TouchableOpacity>
                     {this.props.isSmallScreenWidth
                         ? (
-                            <Text
+                            <ExpensifyText
                                 style={styles.iouAmountText}
                             >
                                 {this.state.amount}
-                            </Text>
+                            </ExpensifyText>
                         ) : (
                             <TextInputAutoWidth
                                 inputStyle={styles.iouAmountTextInput}
diff --git a/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js b/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js
index 6b6ec2fcca53..e6fea431bc0a 100755
--- a/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js
+++ b/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js
@@ -12,7 +12,7 @@ import CONST from '../../../../CONST';
 import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
 import compose from '../../../../libs/compose';
 import ExpensifyButton from '../../../../components/ExpensifyButton';
-import Text from '../../../../components/Text';
+import ExpensifyText from '../../../../components/ExpensifyText';
 import FixedFooter from '../../../../components/FixedFooter';
 import personalDetailsPropType from '../../../personalDetailsPropType';
 
@@ -196,9 +196,9 @@ class IOUParticipantsSplit extends Component {
         return (
             <>
                 <View style={[styles.flex1, styles.w100]}>
-                    <Text style={[styles.formLabel, styles.pt3, styles.ph5]}>
+                    <ExpensifyText style={[styles.formLabel, styles.pt3, styles.ph5]}>
                         {this.props.translate('common.to')}
-                    </Text>
+                    </ExpensifyText>
                     <OptionsSelector
                         canSelectMultipleOptions
                         sections={sections}
@@ -235,9 +235,9 @@ class IOUParticipantsSplit extends Component {
                 {lodashGet(this.props, 'participants', []).length > 0 && (
                     <FixedFooter>
                         {maxParticipantsReached && (
-                            <Text style={[styles.textLabelSupporting, styles.textAlignCenter, styles.mt1, styles.mb3]}>
+                            <ExpensifyText style={[styles.textLabelSupporting, styles.textAlignCenter, styles.mt1, styles.mb3]}>
                                 {this.props.translate('iou.maxParticipantsReached', {count: CONST.REPORT.MAXIMUM_PARTICIPANTS})}
-                            </Text>
+                            </ExpensifyText>
                         )}
                         <ExpensifyButton
                             success
diff --git a/src/pages/settings/AboutPage.js b/src/pages/settings/AboutPage.js
index 5917e0782f76..1c9bd7030182 100644
--- a/src/pages/settings/AboutPage.js
+++ b/src/pages/settings/AboutPage.js
@@ -5,7 +5,7 @@ import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
 import styles from '../../styles/styles';
-import Text from '../../components/Text';
+import ExpensifyText from '../../components/ExpensifyText';
 import CONST from '../../CONST';
 import * as Expensicons from '../../components/Icon/Expensicons';
 import ScreenWrapper from '../../components/ScreenWrapper';
@@ -71,7 +71,7 @@ const AboutPage = (props) => {
                     <View style={styles.pageWrapper}>
                         <View style={[styles.settingsPageBody, styles.mb6, styles.alignItemsCenter]}>
                             <Logo height={80} width={80} />
-                            <Text
+                            <ExpensifyText
                                 style={[
                                     styles.textLabel,
                                     styles.alignSelfCenter,
@@ -82,10 +82,10 @@ const AboutPage = (props) => {
                             >
                                 v
                                 {version}
-                            </Text>
-                            <Text style={[styles.baseFontStyle, styles.mv5]}>
+                            </ExpensifyText>
+                            <ExpensifyText style={[styles.baseFontStyle, styles.mv5]}>
                                 {props.translate('initialSettingsPage.aboutPage.description')}
-                            </Text>
+                            </ExpensifyText>
                         </View>
                     </View>
                     {_.map(menuItems, item => (
@@ -100,7 +100,7 @@ const AboutPage = (props) => {
                     ))}
                 </View>
                 <View style={[styles.sidebarFooter]}>
-                    <Text
+                    <ExpensifyText
                         style={[styles.chatItemMessageHeaderTimestamp]}
                         numberOfLines={1}
                     >
@@ -108,29 +108,29 @@ const AboutPage = (props) => {
                             'initialSettingsPage.readTheTermsAndPrivacyPolicy.phrase1',
                         )}
                         {' '}
-                        <Text
+                        <ExpensifyText
                             style={[styles.chatItemMessageHeaderTimestamp, styles.link]}
                             onPress={() => Link.openExternalLink(CONST.TERMS_URL)}
                         >
                             {props.translate(
                                 'initialSettingsPage.readTheTermsAndPrivacyPolicy.phrase2',
                             )}
-                        </Text>
+                        </ExpensifyText>
                         {' '}
                         {props.translate(
                             'initialSettingsPage.readTheTermsAndPrivacyPolicy.phrase3',
                         )}
                         {' '}
-                        <Text
+                        <ExpensifyText
                             style={[styles.chatItemMessageHeaderTimestamp, styles.link]}
                             onPress={() => Link.openExternalLink(CONST.PRIVACY_URL)}
                         >
                             {props.translate(
                                 'initialSettingsPage.readTheTermsAndPrivacyPolicy.phrase4',
                             )}
-                        </Text>
+                        </ExpensifyText>
                         .
-                    </Text>
+                    </ExpensifyText>
                 </View>
             </ScrollView>
         </ScreenWrapper>
diff --git a/src/pages/settings/AddSecondaryLoginPage.js b/src/pages/settings/AddSecondaryLoginPage.js
index f29e7001631e..541449b0e994 100755
--- a/src/pages/settings/AddSecondaryLoginPage.js
+++ b/src/pages/settings/AddSecondaryLoginPage.js
@@ -7,7 +7,7 @@ import Str from 'expensify-common/lib/str';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import Navigation from '../../libs/Navigation/Navigation';
 import ScreenWrapper from '../../components/ScreenWrapper';
-import Text from '../../components/Text';
+import ExpensifyText from '../../components/ExpensifyText';
 import styles from '../../styles/styles';
 import * as User from '../../libs/actions/User';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -111,11 +111,11 @@ class AddSecondaryLoginPage extends Component {
                         onCloseButtonPress={() => Navigation.dismissModal()}
                     />
                     <ScrollView style={styles.flex1} contentContainerStyle={styles.p5}>
-                        <Text style={[styles.mb6]}>
+                        <ExpensifyText style={[styles.mb6]}>
                             {this.props.translate(this.formType === CONST.LOGIN_TYPE.PHONE
                                 ? 'addSecondaryLoginPage.enterPreferredPhoneNumberToSendValidationLink'
                                 : 'addSecondaryLoginPage.enterPreferredEmailToSendValidationLink')}
-                        </Text>
+                        </ExpensifyText>
                         <View style={styles.mb6}>
                             <ExpensiTextInput
                                 label={this.props.translate(this.formType === CONST.LOGIN_TYPE.PHONE
@@ -141,9 +141,9 @@ class AddSecondaryLoginPage extends Component {
                             />
                         </View>
                         {!_.isEmpty(this.props.user.error) && (
-                            <Text style={styles.formError}>
+                            <ExpensifyText style={styles.formError}>
                                 {this.props.user.error}
-                            </Text>
+                            </ExpensifyText>
                         )}
                     </ScrollView>
                     <FixedFooter style={[styles.flexGrow0]}>
diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index 23a80a3400a7..2f1a859f910a 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -6,7 +6,7 @@ import {withOnyx} from 'react-native-onyx';
 import Str from 'expensify-common/lib/str';
 import styles from '../../styles/styles';
 import themeColors from '../../styles/themes/default';
-import Text from '../../components/Text';
+import ExpensifyText from '../../components/ExpensifyText';
 import * as Session from '../../libs/actions/Session';
 import ONYXKEYS from '../../ONYXKEYS';
 import AvatarWithIndicator from '../../components/AvatarWithIndicator';
@@ -169,19 +169,19 @@ const InitialSettingsPage = (props) => {
                         </Pressable>
 
                         <Pressable style={[styles.mt1, styles.mw100]} onPress={openProfileSettings}>
-                            <Text style={[styles.displayName]} numberOfLines={1}>
+                            <ExpensifyText style={[styles.displayName]} numberOfLines={1}>
                                 {props.myPersonalDetails.displayName
                                     ? props.myPersonalDetails.displayName
                                     : Str.removeSMSDomain(props.session.email)}
-                            </Text>
+                            </ExpensifyText>
                         </Pressable>
                         {props.myPersonalDetails.displayName && (
-                            <Text
+                            <ExpensifyText
                                 style={[styles.textLabelSupporting, styles.mt1]}
                                 numberOfLines={1}
                             >
                                 {Str.removeSMSDomain(props.session.email)}
-                            </Text>
+                            </ExpensifyText>
                         )}
                     </View>
                     {_.map(menuItems, (item, index) => {
diff --git a/src/pages/settings/NewPasswordForm.js b/src/pages/settings/NewPasswordForm.js
index d25be20f6192..ec586223f28d 100644
--- a/src/pages/settings/NewPasswordForm.js
+++ b/src/pages/settings/NewPasswordForm.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
-import Text from '../../components/Text';
+import ExpensifyText from '../../components/ExpensifyText';
 import withLocalize, {
     withLocalizePropTypes,
 } from '../../components/withLocalize';
@@ -103,7 +103,7 @@ class NewPasswordForm extends React.Component {
                         onChangeText={password => this.props.updatePassword(password)}
                         onBlur={() => this.onBlurNewPassword()}
                     />
-                    <Text
+                    <ExpensifyText
                         style={[
                             styles.textLabelSupporting,
                             styles.mt1,
@@ -111,7 +111,7 @@ class NewPasswordForm extends React.Component {
                         ]}
                     >
                         {this.props.translate('setPasswordPage.newPasswordPrompt')}
-                    </Text>
+                    </ExpensifyText>
                 </View>
                 <View style={styles.mb6}>
                     <ExpensiTextInput
diff --git a/src/pages/settings/PasswordPage.js b/src/pages/settings/PasswordPage.js
index 6c4dab77cbe3..7aca4cd5f5b5 100755
--- a/src/pages/settings/PasswordPage.js
+++ b/src/pages/settings/PasswordPage.js
@@ -8,7 +8,7 @@ import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
 import ScreenWrapper from '../../components/ScreenWrapper';
-import Text from '../../components/Text';
+import ExpensifyText from '../../components/ExpensifyText';
 import styles from '../../styles/styles';
 import ONYXKEYS from '../../ONYXKEYS';
 import ExpensifyButton from '../../components/ExpensifyButton';
@@ -170,9 +170,9 @@ class PasswordPage extends Component {
                         onCloseButtonPress={() => Navigation.dismissModal(true)}
                     />
                     <ScrollView style={styles.flex1} contentContainerStyle={styles.p5}>
-                        <Text style={[styles.mb6]}>
+                        <ExpensifyText style={[styles.mb6]}>
                             {this.props.translate('passwordPage.changingYourPasswordPrompt')}
-                        </Text>
+                        </ExpensifyText>
                         <View style={styles.mb6}>
                             <ExpensiTextInput
                                 label={`${this.props.translate('passwordPage.currentPassword')}*`}
@@ -203,14 +203,14 @@ class PasswordPage extends Component {
                             {
 
                                 shouldShowNewPasswordPrompt && (
-                                <Text
+                                <ExpensifyText
                                     style={[
                                         styles.textLabelSupporting,
                                         styles.mt1,
                                     ]}
                                 >
                                     {this.props.translate('passwordPage.newPasswordPrompt')}
-                                </Text>
+                                </ExpensifyText>
                                 )
                             }
                         </View>
@@ -228,9 +228,9 @@ class PasswordPage extends Component {
                             />
                         </View>
                         {_.every(this.state.errors, error => !error) && !_.isEmpty(this.props.account.error) && (
-                            <Text style={styles.formError}>
+                            <ExpensifyText style={styles.formError}>
                                 {this.props.account.error}
-                            </Text>
+                            </ExpensifyText>
                         )}
                     </ScrollView>
                     <FixedFooter style={[styles.flexGrow0]}>
diff --git a/src/pages/settings/Payments/AddDebitCardPage.js b/src/pages/settings/Payments/AddDebitCardPage.js
index 8fc8de1b160e..7be12f06bbce 100644
--- a/src/pages/settings/Payments/AddDebitCardPage.js
+++ b/src/pages/settings/Payments/AddDebitCardPage.js
@@ -11,7 +11,7 @@ import HeaderWithCloseButton from '../../../components/HeaderWithCloseButton';
 import Navigation from '../../../libs/Navigation/Navigation';
 import ScreenWrapper from '../../../components/ScreenWrapper';
 import styles from '../../../styles/styles';
-import Text from '../../../components/Text';
+import ExpensifyText from '../../../components/ExpensifyText';
 import TextLink from '../../../components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import * as PaymentMethods from '../../../libs/actions/PaymentMethods';
@@ -244,7 +244,7 @@ class DebitCardPage extends Component {
                                 }}
                                 LabelComponent={() => (
                                     <>
-                                        <Text>{`${this.props.translate('common.iAcceptThe')}`}</Text>
+                                        <ExpensifyText>{`${this.props.translate('common.iAcceptThe')}`}</ExpensifyText>
                                         <TextLink href="https://use.expensify.com/terms">
                                             {`${this.props.translate('addDebitCardPage.expensifyTermsOfService')}`}
                                         </TextLink>
@@ -257,9 +257,9 @@ class DebitCardPage extends Component {
                         </View>
                         {!_.isEmpty(this.props.addDebitCardForm.error) && (
                             <View style={[styles.mh5, styles.mb5]}>
-                                <Text style={[styles.formError]}>
+                                <ExpensifyText style={[styles.formError]}>
                                     {this.props.addDebitCardForm.error}
-                                </Text>
+                                </ExpensifyText>
                             </View>
                         )}
                         <FormAlertWithSubmitButton
diff --git a/src/pages/settings/Payments/AddPayPalMePage.js b/src/pages/settings/Payments/AddPayPalMePage.js
index e5ab38a9d2ba..69173d0bb3ec 100644
--- a/src/pages/settings/Payments/AddPayPalMePage.js
+++ b/src/pages/settings/Payments/AddPayPalMePage.js
@@ -6,7 +6,7 @@ import CONST from '../../../CONST';
 import ONYXKEYS from '../../../ONYXKEYS';
 import ROUTES from '../../../ROUTES';
 import HeaderWithCloseButton from '../../../components/HeaderWithCloseButton';
-import Text from '../../../components/Text';
+import ExpensifyText from '../../../components/ExpensifyText';
 import ScreenWrapper from '../../../components/ScreenWrapper';
 import NameValuePair from '../../../libs/actions/NameValuePair';
 import * as PaymentMethods from '../../../libs/actions/PaymentMethods';
@@ -83,9 +83,9 @@ class AddPayPalMePage extends React.Component {
                     />
                     <View style={[styles.flex1, styles.p5]}>
                         <View style={[styles.flex1]}>
-                            <Text style={[styles.mb4]}>
+                            <ExpensifyText style={[styles.mb4]}>
                                 {this.props.translate('addPayPalMePage.enterYourUsernameToGetPaidViaPayPal')}
-                            </Text>
+                            </ExpensifyText>
                             <ExpensiTextInput
                                 label={this.props.translate('addPayPalMePage.payPalMe')}
                                 autoCompleteType="off"
diff --git a/src/pages/settings/Payments/PaymentsPage.js b/src/pages/settings/Payments/PaymentsPage.js
index 25fd9feaf97b..d686c3163662 100644
--- a/src/pages/settings/Payments/PaymentsPage.js
+++ b/src/pages/settings/Payments/PaymentsPage.js
@@ -11,7 +11,7 @@ import styles from '../../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import compose from '../../../libs/compose';
 import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView/index';
-import Text from '../../../components/Text';
+import ExpensifyText from '../../../components/ExpensifyText';
 import * as PaymentMethods from '../../../libs/actions/PaymentMethods';
 import Popover from '../../../components/Popover';
 import * as Expensicons from '../../../components/Icon/Expensicons';
@@ -123,11 +123,11 @@ class PaymentsPage extends React.Component {
                         {
                             Permissions.canUseWallet(this.props.betas) && <CurrentWalletBalance />
                         }
-                        <Text
+                        <ExpensifyText
                             style={[styles.ph5, styles.formLabel]}
                         >
                             {this.props.translate('paymentsPage.paymentMethodsTitle')}
-                        </Text>
+                        </ExpensifyText>
                         <PaymentMethodList
                             onPress={this.paymentMethodPressed}
                             style={[styles.flex4]}
diff --git a/src/pages/settings/PreferencesPage.js b/src/pages/settings/PreferencesPage.js
index f43998b565d0..9d36a6b3cc03 100755
--- a/src/pages/settings/PreferencesPage.js
+++ b/src/pages/settings/PreferencesPage.js
@@ -11,7 +11,7 @@ import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
 import ONYXKEYS from '../../ONYXKEYS';
 import styles from '../../styles/styles';
-import Text from '../../components/Text';
+import ExpensifyText from '../../components/ExpensifyText';
 import NameValuePair from '../../libs/actions/NameValuePair';
 import CONST from '../../CONST';
 import * as User from '../../libs/actions/User';
@@ -66,14 +66,14 @@ const PreferencesPage = (props) => {
             />
             <View style={styles.pageWrapper}>
                 <View style={[styles.settingsPageBody, styles.mb6]}>
-                    <Text style={[styles.formLabel]} numberOfLines={1}>
+                    <ExpensifyText style={[styles.formLabel]} numberOfLines={1}>
                         {props.translate('common.notifications')}
-                    </Text>
+                    </ExpensifyText>
                     <View style={[styles.flexRow, styles.mb6, styles.justifyContentBetween]}>
                         <View style={styles.flex4}>
-                            <Text>
+                            <ExpensifyText>
                                 {props.translate('preferencesPage.receiveRelevantFeatureUpdatesAndExpensifyNews')}
-                            </Text>
+                            </ExpensifyText>
                         </View>
                         <View style={[styles.flex1, styles.alignItemsEnd]}>
                             <Switch
@@ -92,9 +92,9 @@ const PreferencesPage = (props) => {
                             value={props.priorityMode}
                         />
                     </View>
-                    <Text style={[styles.textLabel, styles.colorMuted, styles.mb6]}>
+                    <ExpensifyText style={[styles.textLabel, styles.colorMuted, styles.mb6]}>
                         {priorityModes[props.priorityMode].description}
-                    </Text>
+                    </ExpensifyText>
                     <View style={[styles.mb2]}>
                         <LocalePicker />
                     </View>
@@ -103,14 +103,14 @@ const PreferencesPage = (props) => {
                     {/* and internal testers to take advantage of sandbox environments for 3rd party services like Plaid and Onfido */}
                     {props.environment === CONST.ENVIRONMENT.STAGING && (
                         <>
-                            <Text style={[styles.formLabel]} numberOfLines={1}>
+                            <ExpensifyText style={[styles.formLabel]} numberOfLines={1}>
                                 Test Preferences
-                            </Text>
+                            </ExpensifyText>
                             <View style={[styles.flexRow, styles.mb6, styles.justifyContentBetween]}>
                                 <View style={styles.flex4}>
-                                    <Text>
+                                    <ExpensifyText>
                                         Use Secure Staging Server
-                                    </Text>
+                                    </ExpensifyText>
                                 </View>
                                 <View style={[styles.flex1, styles.alignItemsEnd]}>
                                     <Switch
diff --git a/src/pages/settings/Profile/LoginField.js b/src/pages/settings/Profile/LoginField.js
index 017df9881f8c..a297b82bd97b 100755
--- a/src/pages/settings/Profile/LoginField.js
+++ b/src/pages/settings/Profile/LoginField.js
@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
-import Text from '../../../components/Text';
+import ExpensifyText from '../../../components/ExpensifyText';
 import styles from '../../../styles/styles';
 import colors from '../../../styles/colors';
 import * as Expensicons from '../../../components/Icon/Expensicons';
@@ -86,7 +86,7 @@ class LoginField extends Component {
 
         return (
             <View style={styles.mb6}>
-                <Text style={styles.formLabel}>{this.props.label}</Text>
+                <ExpensifyText style={styles.formLabel}>{this.props.label}</ExpensifyText>
                 {!this.props.login.partnerUserID ? (
                     <View style={[styles.mln5, styles.mrn5]}>
                         <MenuItem
@@ -98,11 +98,11 @@ class LoginField extends Component {
                     </View>
                 ) : (
                     <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
-                        <Text numberOfLines={1}>
+                        <ExpensifyText numberOfLines={1}>
                             {this.props.type === CONST.LOGIN_TYPE.PHONE
                                 ? this.props.toLocalPhone(this.props.login.partnerUserID)
                                 : this.props.login.partnerUserID}
-                        </Text>
+                        </ExpensifyText>
                         {!this.props.login.validatedDate && (
                             <ExpensifyButton
                                 style={[styles.mb2]}
@@ -110,18 +110,18 @@ class LoginField extends Component {
                                 ContentComponent={() => (this.state.showCheckmarkIcon ? (
                                     <Icon fill={colors.black} src={Expensicons.Checkmark} />
                                 ) : (
-                                    <Text style={styles.createMenuText}>
+                                    <ExpensifyText style={styles.createMenuText}>
                                         {this.props.translate('common.resend')}
-                                    </Text>
+                                    </ExpensifyText>
                                 ))}
                             />
                         )}
                     </View>
                 )}
                 {note && (
-                    <Text style={[styles.textLabel, styles.colorMuted]}>
+                    <ExpensifyText style={[styles.textLabel, styles.colorMuted]}>
                         {note}
-                    </Text>
+                    </ExpensifyText>
                 )}
             </View>
         );
diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js
index 06717385c80d..f71fc8231c9c 100755
--- a/src/pages/settings/Profile/ProfilePage.js
+++ b/src/pages/settings/Profile/ProfilePage.js
@@ -14,7 +14,7 @@ import ROUTES from '../../../ROUTES';
 import ONYXKEYS from '../../../ONYXKEYS';
 import CONST from '../../../CONST';
 import styles from '../../../styles/styles';
-import Text from '../../../components/Text';
+import ExpensifyText from '../../../components/ExpensifyText';
 import LoginField from './LoginField';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import compose from '../../../libs/compose';
@@ -206,9 +206,9 @@ class ProfilePage extends Component {
                             anchorPosition={styles.createMenuPositionProfile}
                             size={CONST.AVATAR_SIZE.LARGE}
                         />
-                        <Text style={[styles.mt6, styles.mb6]}>
+                        <ExpensifyText style={[styles.mt6, styles.mb6]}>
                             {this.props.translate('profilePage.tellUsAboutYourself')}
-                        </Text>
+                        </ExpensifyText>
                         <FullNameInputRow
                             firstName={this.state.firstName}
                             firstNameError={this.state.firstNameError}
diff --git a/src/pages/signin/ChangeExpensifyLoginLink.js b/src/pages/signin/ChangeExpensifyLoginLink.js
index f600438ec401..937f14b1170f 100755
--- a/src/pages/signin/ChangeExpensifyLoginLink.js
+++ b/src/pages/signin/ChangeExpensifyLoginLink.js
@@ -3,7 +3,7 @@ import {TouchableOpacity, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
 import Str from 'expensify-common/lib/str';
-import Text from '../../components/Text';
+import ExpensifyText from '../../components/ExpensifyText';
 import styles from '../../styles/styles';
 import themeColors from '../../styles/themes/default';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -23,23 +23,23 @@ const propTypes = {
 
 const ChangeExpensifyLoginLink = props => (
     <View style={[styles.changeExpensifyLoginLinkContainer, styles.mt3]}>
-        <Text>
+        <ExpensifyText>
             {props.translate('common.not')}
             &nbsp;
             {Str.isSMSLogin(props.credentials.login)
                 ? props.toLocalPhone(Str.removeSMSDomain(props.credentials.login))
                 : Str.removeSMSDomain(props.credentials.login)}
             {'? '}
-        </Text>
+        </ExpensifyText>
         <TouchableOpacity
             style={[styles.link]}
             onPress={Session.clearSignInData}
             underlayColor={themeColors.componentBG}
         >
-            <Text style={[styles.link]}>
+            <ExpensifyText style={[styles.link]}>
                 {props.translate('common.goBack')}
                 {'.'}
-            </Text>
+            </ExpensifyText>
         </TouchableOpacity>
     </View>
 );
diff --git a/src/pages/signin/LoginForm.js b/src/pages/signin/LoginForm.js
index 65144aa1327d..24a7c5cd2b29 100755
--- a/src/pages/signin/LoginForm.js
+++ b/src/pages/signin/LoginForm.js
@@ -6,7 +6,7 @@ import _ from 'underscore';
 import Str from 'expensify-common/lib/str';
 import styles from '../../styles/styles';
 import ExpensifyButton from '../../components/ExpensifyButton';
-import Text from '../../components/Text';
+import ExpensifyText from '../../components/ExpensifyText';
 import * as Session from '../../libs/actions/Session';
 import ONYXKEYS from '../../ONYXKEYS';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions';
@@ -119,20 +119,20 @@ class LoginForm extends React.Component {
                     />
                 </View>
                 {this.state.formError && (
-                    <Text style={[styles.formError]}>
+                    <ExpensifyText style={[styles.formError]}>
                         {this.props.translate(this.state.formError)}
-                    </Text>
+                    </ExpensifyText>
                 )}
 
                 {!this.state.formError && !_.isEmpty(this.props.account.error) && (
-                    <Text style={[styles.formError]}>
+                    <ExpensifyText style={[styles.formError]}>
                         {this.props.account.error}
-                    </Text>
+                    </ExpensifyText>
                 )}
                 {!_.isEmpty(this.props.account.success) && (
-                    <Text style={[styles.formSuccess]}>
+                    <ExpensifyText style={[styles.formSuccess]}>
                         {this.props.account.success}
-                    </Text>
+                    </ExpensifyText>
                 )}
                 <View style={[styles.mt5]}>
                     <ExpensifyButton
diff --git a/src/pages/signin/PasswordForm.js b/src/pages/signin/PasswordForm.js
index 9ecf2eeb6c9d..bba819d9e91c 100755
--- a/src/pages/signin/PasswordForm.js
+++ b/src/pages/signin/PasswordForm.js
@@ -7,7 +7,7 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import styles from '../../styles/styles';
 import ExpensifyButton from '../../components/ExpensifyButton';
-import Text from '../../components/Text';
+import ExpensifyText from '../../components/ExpensifyText';
 import themeColors from '../../styles/themes/default';
 import * as Session from '../../libs/actions/Session';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -100,9 +100,9 @@ class PasswordForm extends React.Component {
                             onPress={Session.resetPassword}
                             underlayColor={themeColors.componentBG}
                         >
-                            <Text style={[styles.link]}>
+                            <ExpensifyText style={[styles.link]}>
                                 {this.props.translate('passwordForm.forgot')}
-                            </Text>
+                            </ExpensifyText>
                         </TouchableOpacity>
                     </View>
                 </View>
@@ -124,15 +124,15 @@ class PasswordForm extends React.Component {
                 )}
 
                 {!this.state.formError && this.props.account && !_.isEmpty(this.props.account.error) && (
-                    <Text style={[styles.formError]}>
+                    <ExpensifyText style={[styles.formError]}>
                         {this.props.account.error}
-                    </Text>
+                    </ExpensifyText>
                 )}
 
                 {this.state.formError && (
-                    <Text style={[styles.formError]}>
+                    <ExpensifyText style={[styles.formError]}>
                         {this.props.translate(this.state.formError)}
-                    </Text>
+                    </ExpensifyText>
                 )}
                 <View>
                     <ExpensifyButton
diff --git a/src/pages/signin/ResendValidationForm.js b/src/pages/signin/ResendValidationForm.js
index c596ae552671..f265e675a9bf 100755
--- a/src/pages/signin/ResendValidationForm.js
+++ b/src/pages/signin/ResendValidationForm.js
@@ -6,7 +6,7 @@ import _ from 'underscore';
 import Str from 'expensify-common/lib/str';
 import styles from '../../styles/styles';
 import ExpensifyButton from '../../components/ExpensifyButton';
-import Text from '../../components/Text';
+import ExpensifyText from '../../components/ExpensifyText';
 import * as Session from '../../libs/actions/Session';
 import ONYXKEYS from '../../ONYXKEYS';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
@@ -115,26 +115,26 @@ class ResendValidationForm extends React.Component {
                         imageStyles={[styles.mr2]}
                     />
                     <View style={[styles.flex1]}>
-                        <Text style={[styles.textStrong]}>
+                        <ExpensifyText style={[styles.textStrong]}>
                             {login}
-                        </Text>
+                        </ExpensifyText>
                     </View>
                 </View>
                 <View style={[styles.mv5]}>
-                    <Text>
+                    <ExpensifyText>
                         {message}
-                    </Text>
+                    </ExpensifyText>
                 </View>
                 {!_.isEmpty(this.state.formSuccess) && (
-                    <Text style={[styles.formSuccess]}>
+                    <ExpensifyText style={[styles.formSuccess]}>
                         {this.state.formSuccess}
-                    </Text>
+                    </ExpensifyText>
                 )}
                 <View style={[styles.mb4, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
                     <TouchableOpacity onPress={() => redirectToSignIn()}>
-                        <Text>
+                        <ExpensifyText>
                             {this.props.translate('common.back')}
-                        </Text>
+                        </ExpensifyText>
                     </TouchableOpacity>
                     <ExpensifyButton
                         success
diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js
index 381f02273d39..f76ac53234b5 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js
@@ -6,7 +6,7 @@ import styles from '../../../styles/styles';
 import * as StyleUtils from '../../../styles/StyleUtils';
 import variables from '../../../styles/variables';
 import ExpensifyCashLogo from '../../../components/ExpensifyCashLogo';
-import Text from '../../../components/Text';
+import ExpensifyText from '../../../components/ExpensifyText';
 import TermsAndLicenses from '../TermsAndLicenses';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import compose from '../../../libs/compose';
@@ -65,9 +65,9 @@ const SignInPageLayoutNarrow = props => (
                     />
                 </View>
                 {props.shouldShowWelcomeText && (
-                    <Text style={[styles.mv5, styles.textLabel, styles.h3]}>
+                    <ExpensifyText style={[styles.mv5, styles.textLabel, styles.h3]}>
                         {props.welcomeText}
-                    </Text>
+                    </ExpensifyText>
                 )}
                 {props.children}
             </LoginKeyboardAvoidingView>
diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js
index 065fb892a415..ee6287cec9d8 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js
@@ -5,7 +5,7 @@ import SVGImage from '../../../components/SVGImage';
 import styles from '../../../styles/styles';
 import * as StyleUtils from '../../../styles/StyleUtils';
 import ExpensifyCashLogo from '../../../components/ExpensifyCashLogo';
-import Text from '../../../components/Text';
+import ExpensifyText from '../../../components/ExpensifyText';
 import variables from '../../../styles/variables';
 import TermsAndLicenses from '../TermsAndLicenses';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
@@ -50,9 +50,9 @@ const SignInPageLayoutWide = props => (
                             />
                         </View>
                         {props.shouldShowWelcomeText && (
-                            <Text style={[styles.mv5, styles.textLabel, styles.h3]}>
+                            <ExpensifyText style={[styles.mv5, styles.textLabel, styles.h3]}>
                                 {props.welcomeText}
-                            </Text>
+                            </ExpensifyText>
                         )}
                         <View>
                             {props.children}
diff --git a/src/pages/signin/TermsAndLicenses.js b/src/pages/signin/TermsAndLicenses.js
index 56909935af64..4ce8d694628a 100644
--- a/src/pages/signin/TermsAndLicenses.js
+++ b/src/pages/signin/TermsAndLicenses.js
@@ -2,7 +2,7 @@ import React from 'react';
 import {View} from 'react-native';
 import styles from '../../styles/styles';
 import CONST from '../../CONST';
-import Text from '../../components/Text';
+import ExpensifyText from '../../components/ExpensifyText';
 import TextLink from '../../components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import LogoWordmark from '../../../assets/images/expensify-wordmark.svg';
@@ -19,9 +19,9 @@ const TermsAndLicenses = props => (
                 styles.alignItemsCenter,
             ]}
         >
-            <Text style={[styles.textAlignCenter, styles.textExtraSmallSupporting]}>
+            <ExpensifyText style={[styles.textAlignCenter, styles.textExtraSmallSupporting]}>
                 {props.translate('termsOfUse.phrase1')}
-            </Text>
+            </ExpensifyText>
             <TextLink
                 style={[styles.textExtraSmallSupporting, styles.link]}
                 href={CONST.TERMS_URL}
@@ -30,9 +30,9 @@ const TermsAndLicenses = props => (
                 {props.translate('termsOfUse.phrase2')}
                 {' '}
             </TextLink>
-            <Text style={[styles.textAlignCenter, styles.textExtraSmallSupporting]}>
+            <ExpensifyText style={[styles.textAlignCenter, styles.textExtraSmallSupporting]}>
                 {props.translate('termsOfUse.phrase3')}
-            </Text>
+            </ExpensifyText>
             <TextLink
                 style={[styles.textExtraSmallSupporting, styles.link]}
                 href={CONST.PRIVACY_URL}
@@ -40,14 +40,14 @@ const TermsAndLicenses = props => (
                 {' '}
                 {props.translate('termsOfUse.phrase4')}
             </TextLink>
-            <Text style={[styles.textAlignCenter, styles.textExtraSmallSupporting]}>.</Text>
-            <Text style={[styles.textAlignCenter, styles.textExtraSmallSupporting]}>
+            <ExpensifyText style={[styles.textAlignCenter, styles.textExtraSmallSupporting]}>.</ExpensifyText>
+            <ExpensifyText style={[styles.textAlignCenter, styles.textExtraSmallSupporting]}>
                 {props.translate('termsOfUse.phrase5')}
                 {' '}
-            </Text>
-            <Text style={[styles.textAlignCenter, styles.textExtraSmallSupporting]}>
+            </ExpensifyText>
+            <ExpensifyText style={[styles.textAlignCenter, styles.textExtraSmallSupporting]}>
                 {props.translate('termsOfUse.phrase6')}
-            </Text>
+            </ExpensifyText>
             <TextLink
                 style={[styles.textExtraSmallSupporting, styles.link]}
                 href={CONST.LICENSES_URL}
@@ -55,7 +55,7 @@ const TermsAndLicenses = props => (
                 {' '}
                 {props.translate('termsOfUse.phrase7')}
             </TextLink>
-            <Text style={[styles.textAlignCenter, styles.textExtraSmallSupporting]}>.</Text>
+            <ExpensifyText style={[styles.textAlignCenter, styles.textExtraSmallSupporting]}>.</ExpensifyText>
         </View>
         <View style={[styles.mt4, styles.alignItemsCenter, styles.mb2, styles.flexRow, styles.justifyContentBetween]}>
             <LogoWordmark height={30} width={80} />
diff --git a/src/pages/workspace/WorkspaceBankAccountPage.js b/src/pages/workspace/WorkspaceBankAccountPage.js
index 219c1c3f27c5..d1c8b88476f5 100644
--- a/src/pages/workspace/WorkspaceBankAccountPage.js
+++ b/src/pages/workspace/WorkspaceBankAccountPage.js
@@ -5,7 +5,7 @@ import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import * as Expensicons from '../../components/Icon/Expensicons';
 import * as Illustrations from '../../components/Icon/Illustrations';
 import ScreenWrapper from '../../components/ScreenWrapper';
-import Text from '../../components/Text';
+import ExpensifyText from '../../components/ExpensifyText';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import * as BankAccounts from '../../libs/actions/BankAccounts';
 import compose from '../../libs/compose';
@@ -110,9 +110,9 @@ class WorkspaceBankAccountPage extends React.Component {
                         },
                     ]}
                 >
-                    <Text>
+                    <ExpensifyText>
                         {this.props.translate('workspace.bankAccount.youreAlmostDone')}
-                    </Text>
+                    </ExpensifyText>
                 </WorkspaceSection>
                 <WorkspaceResetBankAccountModal />
             </ScreenWrapper>
diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js
index 37d8a09326be..023d6c91ab23 100644
--- a/src/pages/workspace/WorkspaceInitialPage.js
+++ b/src/pages/workspace/WorkspaceInitialPage.js
@@ -6,7 +6,7 @@ import {withNavigationFocus} from '@react-navigation/compat';
 import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
 import styles from '../../styles/styles';
-import Text from '../../components/Text';
+import ExpensifyText from '../../components/ExpensifyText';
 import Tooltip from '../../components/Tooltip';
 import Icon from '../../components/Icon';
 import * as Expensicons from '../../components/Icon/Expensicons';
@@ -141,7 +141,7 @@ const WorkspaceInitialPage = (props) => {
                                     onPress={openEditor}
                                 >
                                     <Tooltip text={props.policy.name}>
-                                        <Text
+                                        <ExpensifyText
                                             numberOfLines={1}
                                             style={[
                                                 styles.displayName,
@@ -149,7 +149,7 @@ const WorkspaceInitialPage = (props) => {
                                             ]}
                                         >
                                             {props.policy.name}
-                                        </Text>
+                                        </ExpensifyText>
                                     </Tooltip>
                                 </Pressable>
                             )}
diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js
index 684ba734c76e..adc1cc7e985e 100644
--- a/src/pages/workspace/WorkspaceInvitePage.js
+++ b/src/pages/workspace/WorkspaceInvitePage.js
@@ -20,7 +20,7 @@ import * as OptionsListUtils from '../../libs/OptionsListUtils';
 import CONST from '../../CONST';
 import FullScreenLoadingIndicator from '../../components/FullscreenLoadingIndicator';
 import * as Link from '../../libs/actions/Link';
-import Text from '../../components/Text';
+import ExpensifyText from '../../components/ExpensifyText';
 import withFullPolicy, {fullPolicyPropTypes, fullPolicyDefaultProps} from './withFullPolicy';
 
 const personalDetailsPropTypes = PropTypes.shape({
@@ -320,11 +320,11 @@ class WorkspaceInvitePage extends React.Component {
                             >
                                 {({hovered, pressed}) => (
                                     <View style={[styles.flexRow]}>
-                                        <Text
+                                        <ExpensifyText
                                             style={[styles.mr1, styles.label, (hovered || pressed) ? styles.linkHovered : styles.link]}
                                         >
                                             {this.props.translate('common.privacyPolicy')}
-                                        </Text>
+                                        </ExpensifyText>
                                     </View>
                                 )}
                             </Pressable>
diff --git a/src/pages/workspace/WorkspaceMembersPage.js b/src/pages/workspace/WorkspaceMembersPage.js
index 5733ca8a7a47..f147d92aaced 100644
--- a/src/pages/workspace/WorkspaceMembersPage.js
+++ b/src/pages/workspace/WorkspaceMembersPage.js
@@ -18,7 +18,7 @@ import compose from '../../libs/compose';
 import * as Policy from '../../libs/actions/Policy';
 import ExpensifyButton from '../../components/ExpensifyButton';
 import Checkbox from '../../components/Checkbox';
-import Text from '../../components/Text';
+import ExpensifyText from '../../components/ExpensifyText';
 import ROUTES from '../../ROUTES';
 import ConfirmModal from '../../components/ConfirmModal';
 import personalDetailsPropType from '../personalDetailsPropType';
@@ -227,9 +227,9 @@ class WorkspaceMembersPage extends React.Component {
                     {this.props.session.email === item.login && (
                         <View style={styles.peopleRowCell}>
                             <View style={[styles.badge, styles.peopleBadge]}>
-                                <Text style={[styles.peopleBadgeText]}>
+                                <ExpensifyText style={[styles.peopleBadgeText]}>
                                     {this.props.translate('common.admin')}
-                                </Text>
+                                </ExpensifyText>
                             </View>
                         </View>
                     )}
@@ -296,9 +296,9 @@ class WorkspaceMembersPage extends React.Component {
                                 />
                             </View>
                             <View style={[styles.peopleRowCell, styles.flex1]}>
-                                <Text style={[styles.textStrong, styles.ph5]}>
+                                <ExpensifyText style={[styles.textStrong, styles.ph5]}>
                                     {this.props.translate('workspace.people.selectAll')}
-                                </Text>
+                                </ExpensifyText>
                             </View>
                         </View>
                         <FlatList
diff --git a/src/pages/workspace/WorkspaceResetBankAccountModal.js b/src/pages/workspace/WorkspaceResetBankAccountModal.js
index 23b6824ef032..58b13536685e 100644
--- a/src/pages/workspace/WorkspaceResetBankAccountModal.js
+++ b/src/pages/workspace/WorkspaceResetBankAccountModal.js
@@ -10,7 +10,7 @@ import reimbursementAccountPropTypes from '../ReimbursementAccount/reimbursement
 import compose from '../../libs/compose';
 import ONYXKEYS from '../../ONYXKEYS';
 import bankAccountPropTypes from '../../components/bankAccountPropTypes';
-import Text from '../../components/Text';
+import ExpensifyText from '../../components/ExpensifyText';
 import styles from '../../styles/styles';
 import BankAccount from '../../libs/models/BankAccount';
 
@@ -40,13 +40,13 @@ const WorkspaceResetBankAccountModal = (props) => {
             confirmText={isInOpenState ? props.translate('workspace.bankAccount.yesDisconnectMyBankAccount') : props.translate('workspace.bankAccount.yesStartOver')}
             cancelText={props.translate('common.cancel')}
             prompt={isInOpenState ? (
-                <Text>
-                    <Text>{props.translate('workspace.bankAccount.disconnectYour')}</Text>
-                    <Text style={styles.textStrong}>
+                <ExpensifyText>
+                    <ExpensifyText>{props.translate('workspace.bankAccount.disconnectYour')}</ExpensifyText>
+                    <ExpensifyText style={styles.textStrong}>
                         {bankShortName}
-                    </Text>
-                    <Text>{props.translate('workspace.bankAccount.bankAccountAnyTransactions')}</Text>
-                </Text>
+                    </ExpensifyText>
+                    <ExpensifyText>{props.translate('workspace.bankAccount.bankAccountAnyTransactions')}</ExpensifyText>
+                </ExpensifyText>
             ) : props.translate('workspace.bankAccount.clearProgress')}
             danger
             onCancel={BankAccounts.cancelResetFreePlanBankAccount}
diff --git a/src/pages/workspace/WorkspaceSection.js b/src/pages/workspace/WorkspaceSection.js
index 1a7142bbc538..ebf69602d20f 100644
--- a/src/pages/workspace/WorkspaceSection.js
+++ b/src/pages/workspace/WorkspaceSection.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
-import Text from '../../components/Text';
+import ExpensifyText from '../../components/ExpensifyText';
 import styles from '../../styles/styles';
 import MenuItemList from '../../components/MenuItemList';
 import Icon from '../../components/Icon';
@@ -38,7 +38,7 @@ const WorkspaceSection = (props) => {
             <View style={styles.pageWrapper}>
                 <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100]}>
                     <View style={[styles.flexShrink1]}>
-                        <Text style={[styles.h1]}>{props.title}</Text>
+                        <ExpensifyText style={[styles.h1]}>{props.title}</ExpensifyText>
                     </View>
                     <View style={[styles.flexGrow1, styles.flexRow, styles.justifyContentEnd]}>
                         {props.icon && <Icon src={props.icon} height={80} width={80} />}
diff --git a/src/pages/workspace/WorkspaceSettingsPage.js b/src/pages/workspace/WorkspaceSettingsPage.js
index 6e06a2c9ae95..74b424d010d5 100644
--- a/src/pages/workspace/WorkspaceSettingsPage.js
+++ b/src/pages/workspace/WorkspaceSettingsPage.js
@@ -10,7 +10,7 @@ import Navigation from '../../libs/Navigation/Navigation';
 import Permissions from '../../libs/Permissions';
 import styles from '../../styles/styles';
 import ExpensifyButton from '../../components/ExpensifyButton';
-import Text from '../../components/Text';
+import ExpensifyText from '../../components/ExpensifyText';
 import compose from '../../libs/compose';
 import * as Policy from '../../libs/actions/Policy';
 import Icon from '../../components/Icon';
@@ -173,9 +173,9 @@ class WorkspaceSettingsPage extends React.Component {
                                 isDisabled={hasVBA}
                             />
                         </View>
-                        <Text style={[styles.textLabel, styles.colorMuted, styles.mt2]}>
+                        <ExpensifyText style={[styles.textLabel, styles.colorMuted, styles.mt2]}>
                             {this.props.translate('workspace.editor.currencyInputHelpText')}
-                        </Text>
+                        </ExpensifyText>
                     </View>
                 )}
             </WorkspacePageWithSections>
diff --git a/src/pages/workspace/bills/WorkspaceBillsFirstSection.js b/src/pages/workspace/bills/WorkspaceBillsFirstSection.js
index 9ce1576f70c3..0d9365183aa5 100644
--- a/src/pages/workspace/bills/WorkspaceBillsFirstSection.js
+++ b/src/pages/workspace/bills/WorkspaceBillsFirstSection.js
@@ -3,7 +3,7 @@ import {View, TouchableOpacity} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import Str from 'expensify-common/lib/str';
-import Text from '../../../components/Text';
+import ExpensifyText from '../../../components/ExpensifyText';
 import styles from '../../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import * as Expensicons from '../../../components/Icon/Expensicons';
@@ -51,13 +51,13 @@ const WorkspaceBillsFirstSection = (props) => {
             ]}
         >
             <View style={[styles.mv4]}>
-                <Text>
+                <ExpensifyText>
                     {props.translate('workspace.bills.askYourVendorsBeforeEmail')}
                     {props.user.isFromPublicDomain ? (
                         <TouchableOpacity
                             onPress={() => Link.openExternalLink('https://community.expensify.com/discussion/7500/how-to-pay-your-company-bills-in-expensify/')}
                         >
-                            <Text style={[styles.textBlue]}>example.com@expensify.cash</Text>
+                            <ExpensifyText style={[styles.textBlue]}>example.com@expensify.cash</ExpensifyText>
                         </TouchableOpacity>
                     ) : (
                         <CopyTextToClipboard
@@ -65,8 +65,8 @@ const WorkspaceBillsFirstSection = (props) => {
                             textStyles={[styles.textBlue]}
                         />
                     )}
-                    <Text>{props.translate('workspace.bills.askYourVendorsAfterEmail')}</Text>
-                </Text>
+                    <ExpensifyText>{props.translate('workspace.bills.askYourVendorsAfterEmail')}</ExpensifyText>
+                </ExpensifyText>
             </View>
         </WorkspaceSection>
     );
diff --git a/src/pages/workspace/bills/WorkspaceBillsNoVBAView.js b/src/pages/workspace/bills/WorkspaceBillsNoVBAView.js
index d28201dfc52b..40f376b0b5bf 100644
--- a/src/pages/workspace/bills/WorkspaceBillsNoVBAView.js
+++ b/src/pages/workspace/bills/WorkspaceBillsNoVBAView.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
-import Text from '../../../components/Text';
+import ExpensifyText from '../../../components/ExpensifyText';
 import styles from '../../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import * as Expensicons from '../../../components/Icon/Expensicons';
@@ -36,7 +36,7 @@ const WorkspaceBillsNoVBAView = props => (
             ]}
         >
             <View style={[styles.mv4]}>
-                <Text>{props.translate('workspace.bills.unlockNoVBACopy')}</Text>
+                <ExpensifyText>{props.translate('workspace.bills.unlockNoVBACopy')}</ExpensifyText>
             </View>
         </WorkspaceSection>
     </>
diff --git a/src/pages/workspace/bills/WorkspaceBillsVBAView.js b/src/pages/workspace/bills/WorkspaceBillsVBAView.js
index abac76302b72..a61ff010baf4 100644
--- a/src/pages/workspace/bills/WorkspaceBillsVBAView.js
+++ b/src/pages/workspace/bills/WorkspaceBillsVBAView.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
-import Text from '../../../components/Text';
+import ExpensifyText from '../../../components/ExpensifyText';
 import styles from '../../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import * as Expensicons from '../../../components/Icon/Expensicons';
@@ -35,7 +35,7 @@ const WorkspaceBillsVBAView = props => (
             ]}
         >
             <View style={[styles.mv4]}>
-                <Text>{props.translate('workspace.bills.VBACopy')}</Text>
+                <ExpensifyText>{props.translate('workspace.bills.VBACopy')}</ExpensifyText>
             </View>
         </WorkspaceSection>
     </>
diff --git a/src/pages/workspace/card/WorkspaceCardNoVBAView.js b/src/pages/workspace/card/WorkspaceCardNoVBAView.js
index 4e455848a96d..80dbcd39851d 100644
--- a/src/pages/workspace/card/WorkspaceCardNoVBAView.js
+++ b/src/pages/workspace/card/WorkspaceCardNoVBAView.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
-import Text from '../../../components/Text';
+import ExpensifyText from '../../../components/ExpensifyText';
 import styles from '../../../styles/styles';
 import Navigation from '../../../libs/Navigation/Navigation';
 import ROUTES from '../../../ROUTES';
@@ -32,7 +32,7 @@ const WorkspaceCardNoVBAView = props => (
         ]}
     >
         <View style={[styles.mv4]}>
-            <Text>{props.translate('workspace.card.noVBACopy')}</Text>
+            <ExpensifyText>{props.translate('workspace.card.noVBACopy')}</ExpensifyText>
         </View>
 
         <UnorderedList
diff --git a/src/pages/workspace/card/WorkspaceCardVBANoECardView.js b/src/pages/workspace/card/WorkspaceCardVBANoECardView.js
index 54608105af48..d0ff4cab216d 100644
--- a/src/pages/workspace/card/WorkspaceCardVBANoECardView.js
+++ b/src/pages/workspace/card/WorkspaceCardVBANoECardView.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import {withOnyx} from 'react-native-onyx';
-import Text from '../../../components/Text';
+import ExpensifyText from '../../../components/ExpensifyText';
 import styles from '../../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import * as Expensicons from '../../../components/Icon/Expensicons';
@@ -46,9 +46,9 @@ const WorkspaceCardVBANoECardView = props => (
             />
         </WorkspaceSection>
         {props.user.isCheckingDomain && (
-            <Text style={[styles.m5, styles.formError]}>
+            <ExpensifyText style={[styles.m5, styles.formError]}>
                 {props.translate('workspace.card.checkingDomain')}
-            </Text>
+            </ExpensifyText>
         )}
     </>
 );
diff --git a/src/pages/workspace/card/WorkspaceCardVBAWithECardView.js b/src/pages/workspace/card/WorkspaceCardVBAWithECardView.js
index fba1927c8cdd..8ab2cfd0a321 100644
--- a/src/pages/workspace/card/WorkspaceCardVBAWithECardView.js
+++ b/src/pages/workspace/card/WorkspaceCardVBAWithECardView.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
-import Text from '../../../components/Text';
+import ExpensifyText from '../../../components/ExpensifyText';
 import styles from '../../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import * as Expensicons from '../../../components/Icon/Expensicons';
@@ -35,7 +35,7 @@ const WorkspaceCardVBAWithECardView = props => (
         ]}
     >
         <View style={[styles.mv4]}>
-            <Text>{props.translate('workspace.card.VBAWithECardCopy')}</Text>
+            <ExpensifyText>{props.translate('workspace.card.VBAWithECardCopy')}</ExpensifyText>
         </View>
 
         <UnorderedList
diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesFirstSection.js b/src/pages/workspace/invoices/WorkspaceInvoicesFirstSection.js
index 1a57ff74b8df..1c54ee56491e 100644
--- a/src/pages/workspace/invoices/WorkspaceInvoicesFirstSection.js
+++ b/src/pages/workspace/invoices/WorkspaceInvoicesFirstSection.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
-import Text from '../../../components/Text';
+import ExpensifyText from '../../../components/ExpensifyText';
 import styles from '../../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import * as Expensicons from '../../../components/Icon/Expensicons';
@@ -40,9 +40,9 @@ const WorkspaceInvoicesFirstSection = props => (
         ]}
     >
         <View style={[styles.mv4]}>
-            <Text>
+            <ExpensifyText>
                 {props.translate('workspace.invoices.invoiceFirstSectionCopy')}
-            </Text>
+            </ExpensifyText>
         </View>
     </WorkspaceSection>
 );
diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.js b/src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.js
index d8c6539acc8e..f0e57f42677c 100644
--- a/src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.js
+++ b/src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
-import Text from '../../../components/Text';
+import ExpensifyText from '../../../components/ExpensifyText';
 import styles from '../../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import * as Expensicons from '../../../components/Icon/Expensicons';
@@ -36,7 +36,7 @@ const WorkspaceInvoicesNoVBAView = props => (
             ]}
         >
             <View style={[styles.mv4]}>
-                <Text>{props.translate('workspace.invoices.unlockNoVBACopy')}</Text>
+                <ExpensifyText>{props.translate('workspace.invoices.unlockNoVBACopy')}</ExpensifyText>
             </View>
         </WorkspaceSection>
     </>
diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesVBAView.js b/src/pages/workspace/invoices/WorkspaceInvoicesVBAView.js
index fcc4502853ab..7779a5ad92ea 100644
--- a/src/pages/workspace/invoices/WorkspaceInvoicesVBAView.js
+++ b/src/pages/workspace/invoices/WorkspaceInvoicesVBAView.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
-import Text from '../../../components/Text';
+import ExpensifyText from '../../../components/ExpensifyText';
 import styles from '../../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import * as Expensicons from '../../../components/Icon/Expensicons';
@@ -35,7 +35,7 @@ const WorkspaceInvoicesVBAView = props => (
             ]}
         >
             <View style={[styles.mv4]}>
-                <Text>{props.translate('workspace.invoices.unlockVBACopy')}</Text>
+                <ExpensifyText>{props.translate('workspace.invoices.unlockVBACopy')}</ExpensifyText>
             </View>
         </WorkspaceSection>
     </>
diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseNoVBAView.js b/src/pages/workspace/reimburse/WorkspaceReimburseNoVBAView.js
index efc467754001..95e58cd36d06 100644
--- a/src/pages/workspace/reimburse/WorkspaceReimburseNoVBAView.js
+++ b/src/pages/workspace/reimburse/WorkspaceReimburseNoVBAView.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
-import Text from '../../../components/Text';
+import ExpensifyText from '../../../components/ExpensifyText';
 import styles from '../../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import * as Expensicons from '../../../components/Icon/Expensicons';
@@ -35,14 +35,14 @@ const WorkspaceReimburseNoVBAView = props => (
             ]}
         >
             <View style={[styles.mv4, styles.flexRow, styles.flexWrap]}>
-                <Text>
+                <ExpensifyText>
                     {props.translate('workspace.reimburse.captureNoVBACopyBeforeEmail')}
                     <CopyTextToClipboard
                         text="receipts@expensify.com"
                         textStyles={[styles.textBlue]}
                     />
-                    <Text>{props.translate('workspace.reimburse.captureNoVBACopyAfterEmail')}</Text>
-                </Text>
+                    <ExpensifyText>{props.translate('workspace.reimburse.captureNoVBACopyAfterEmail')}</ExpensifyText>
+                </ExpensifyText>
             </View>
         </WorkspaceSection>
 
@@ -59,7 +59,7 @@ const WorkspaceReimburseNoVBAView = props => (
             ]}
         >
             <View style={[styles.mv4]}>
-                <Text>{props.translate('workspace.reimburse.unlockNoVBACopy')}</Text>
+                <ExpensifyText>{props.translate('workspace.reimburse.unlockNoVBACopy')}</ExpensifyText>
             </View>
         </WorkspaceSection>
     </>
diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseVBAView.js b/src/pages/workspace/reimburse/WorkspaceReimburseVBAView.js
index f16548f9bd94..8bdbea822c54 100644
--- a/src/pages/workspace/reimburse/WorkspaceReimburseVBAView.js
+++ b/src/pages/workspace/reimburse/WorkspaceReimburseVBAView.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
-import Text from '../../../components/Text';
+import ExpensifyText from '../../../components/ExpensifyText';
 import styles from '../../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import * as Expensicons from '../../../components/Icon/Expensicons';
@@ -33,14 +33,14 @@ const WorkspaceReimburseVBAView = props => (
             ]}
         >
             <View style={[styles.mv4]}>
-                <Text>
+                <ExpensifyText>
                     {props.translate('workspace.reimburse.captureNoVBACopyBeforeEmail')}
                     <CopyTextToClipboard
                         text="receipts@expensify.com"
                         textStyles={[styles.textBlue]}
                     />
-                    <Text>{props.translate('workspace.reimburse.captureNoVBACopyAfterEmail')}</Text>
-                </Text>
+                    <ExpensifyText>{props.translate('workspace.reimburse.captureNoVBACopyAfterEmail')}</ExpensifyText>
+                </ExpensifyText>
             </View>
         </WorkspaceSection>
 
@@ -58,7 +58,7 @@ const WorkspaceReimburseVBAView = props => (
             ]}
         >
             <View style={[styles.mv4]}>
-                <Text>{props.translate('workspace.reimburse.fastReimbursementsVBACopy')}</Text>
+                <ExpensifyText>{props.translate('workspace.reimburse.fastReimbursementsVBACopy')}</ExpensifyText>
             </View>
         </WorkspaceSection>
     </>
diff --git a/src/pages/workspace/travel/WorkspaceTravelNoVBAView.js b/src/pages/workspace/travel/WorkspaceTravelNoVBAView.js
index 149a2a728f6e..22598ff8cfe4 100644
--- a/src/pages/workspace/travel/WorkspaceTravelNoVBAView.js
+++ b/src/pages/workspace/travel/WorkspaceTravelNoVBAView.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
-import Text from '../../../components/Text';
+import ExpensifyText from '../../../components/ExpensifyText';
 import styles from '../../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import * as Expensicons from '../../../components/Icon/Expensicons';
@@ -33,7 +33,7 @@ const WorkspaceTravelNoVBAView = props => (
             ]}
         >
             <View style={[styles.mv4]}>
-                <Text>{props.translate('workspace.travel.noVBACopy')}</Text>
+                <ExpensifyText>{props.translate('workspace.travel.noVBACopy')}</ExpensifyText>
             </View>
         </WorkspaceSection>
     </>
diff --git a/src/pages/workspace/travel/WorkspaceTravelVBAView.js b/src/pages/workspace/travel/WorkspaceTravelVBAView.js
index c4c97087390d..1b8269b9c1fb 100644
--- a/src/pages/workspace/travel/WorkspaceTravelVBAView.js
+++ b/src/pages/workspace/travel/WorkspaceTravelVBAView.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
-import Text from '../../../components/Text';
+import ExpensifyText from '../../../components/ExpensifyText';
 import styles from '../../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import * as Expensicons from '../../../components/Icon/Expensicons';
@@ -43,7 +43,7 @@ const WorkspaceTravelVBAView = props => (
         ]}
     >
         <View style={[styles.mv4]}>
-            <Text>{props.translate('workspace.travel.VBACopy')}</Text>
+            <ExpensifyText>{props.translate('workspace.travel.VBACopy')}</ExpensifyText>
         </View>
     </WorkspaceSection>
 );

From 7689aa0fb6b6edc2070994fa2852d23e1cbb6497 Mon Sep 17 00:00:00 2001
From: Puneet Lath <puneet@expensify.com>
Date: Tue, 30 Nov 2021 14:33:58 -0500
Subject: [PATCH 12/14] Update documentation that use Text to use ExpensifyText

---
 STYLE.md   | 12 ++++++------
 STYLING.md | 38 +++++++++++++++++++-------------------
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/STYLE.md b/STYLE.md
index 7a9fe40deed9..fab2ee1304d2 100644
--- a/STYLE.md
+++ b/STYLE.md
@@ -277,16 +277,16 @@ render() {
 // Bad
 const UserInfo = ({name, email}) => (
 	<View>
-		<Text>Name: {name}</Text>
-		<Text>Email: {email}</Text>
+		<ExpensifyText>Name: {name}</ExpensifyText>
+		<ExpensifyText>Email: {email}</ExpensifyText>
 	</View>
 );
 
 // Good
 const UserInfo = props => (
     <View>
-        <Text>Name: {props.name}</Text>
-        <Text>Email: {props.email}</Text>
+        <ExpensifyText>Name: {props.name}</ExpensifyText>
+        <ExpensifyText>Email: {props.email}</ExpensifyText>
     </View>
 );
 ```
@@ -701,9 +701,9 @@ class BComposedComponent extends React.Component
     render() {
         return (
             <AComponent {...props}>
-                <Text>
+                <ExpensifyText>
                     {this.state.whatever}
-                </Text>
+                </ExpensifyText>
             </AComponent>
         )
     }
diff --git a/STYLING.md b/STYLING.md
index 321389c2d89a..dcc484d3ce5a 100644
--- a/STYLING.md
+++ b/STYLING.md
@@ -15,21 +15,21 @@ If we need some minimal set of styling rules applied to a single-use component t
 ```jsx
 // Bad - Since we only use this style once in this component
 const TextWithPadding = props => (
-    <Text style={styles.textWithPadding}>
+    <ExpensifyText style={styles.textWithPadding}>
         {props.children}
-    </Text>
+    </ExpensifyText>
 );
 
 // Good
 const TextWithPadding = props => (
-    <Text
+    <ExpensifyText
         style={[
             styles.p5,
             styles.noWrap,
         ]}
     >
         {props.children}
-    </Text>
+    </ExpensifyText>
 );
 ```
 
@@ -56,24 +56,24 @@ Any array of styles associated with a single type of React element that has at l
 ```jsx
 // Bad - Do not use inline styles
 const TextWithPadding = props => (
-    <Text style={{
+    <ExpensifyText style={{
         padding: 10,
         whiteSpace: props.shouldWrap ? 'wrap' : 'nowrap',
     }}>
         {props.children}
-    </Text>
+    </ExpensifyText>
 );
 
 // Good
 const TextWithPadding = props => (
-    <Text
+    <ExpensifyText
         style={[
             styles.p5,
             getTextWrapStyle(props.shouldWrap)
         ]}
     >
         {props.children}
-    </Text>
+    </ExpensifyText>
 );
 ```
 
@@ -85,34 +85,34 @@ There are many styles in the `styles.js` file. It is generally a bad practice to
 // Bad - Reuses style without generalizing style name
 const SettingsScreen = props => (
     <View>
-        <Text style={[styles.settingsScreenText]}>
+        <ExpensifyText style={[styles.settingsScreenText]}>
             Expensify
-        </Text>
+        </ExpensifyText>
     </View>
 );
 
 const SomeOtherScreen = props => (
     <View>
-        <Text style={[styles.settingsScreenText]}>
+        <ExpensifyText style={[styles.settingsScreenText]}>
             New Expensify
-        </Text>
+        </ExpensifyText>
     </View>
 );
 
 // Good
 const SettingsScreen = props => (
     <View>
-        <Text style={[styles.defaultScreenText]}>
+        <ExpensifyText style={[styles.defaultScreenText]}>
             Expensify
-        </Text>
+        </ExpensifyText>
     </View>
 );
 
 const SomeOtherScreen = props => (
     <View>
-        <Text style={[styles.defaultScreenText]}>
+        <ExpensifyText style={[styles.defaultScreenText]}>
             New Expensify
-        </Text>
+        </ExpensifyText>
     </View>
 );
 ```
@@ -193,7 +193,7 @@ The only time we should allow a component to have a `style` prop with `PropTypes
 ```jsx
 // Good
 const CustomText = props => (
-    <Text style={props.style}>{props.children}</Text>
+    <ExpensifyText style={props.style}>{props.children}</ExpensifyText>
 );
 
 // Good
@@ -202,14 +202,14 @@ const CustomText = props => {
             ? props.style
             : [props.style];
 }(
-    <Text
+    <ExpensifyText
         style={[
             styles.defaultCustomText,
             ...propsStyle,
         ]}
     >
         {props.children}
-    </Text>
+    </ExpensifyText>
 );
 ```
 

From ca1a55efbbd82aa18c0068d20c7b54d816ba1d8d Mon Sep 17 00:00:00 2001
From: Puneet Lath <puneet@expensify.com>
Date: Tue, 30 Nov 2021 17:20:00 -0500
Subject: [PATCH 13/14] Remove import that is no longer used

---
 src/pages/workspace/WorkspaceInitialPage.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js
index 979453242d2e..61b6da052a1b 100644
--- a/src/pages/workspace/WorkspaceInitialPage.js
+++ b/src/pages/workspace/WorkspaceInitialPage.js
@@ -6,7 +6,6 @@ import {withNavigationFocus} from '@react-navigation/compat';
 import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
 import styles from '../../styles/styles';
-import ExpensifyText from '../../components/ExpensifyText';
 import Tooltip from '../../components/Tooltip';
 import ConfirmModal from '../../components/ConfirmModal';
 import Icon from '../../components/Icon';

From 60a3ad87b3d0738f47bf5a92782190a4fc848a2e Mon Sep 17 00:00:00 2001
From: Puneet Lath <puneet@expensify.com>
Date: Thu, 2 Dec 2021 18:16:25 -0500
Subject: [PATCH 14/14] fix import of ExpensifyText in WorkspaceBankAccountPage

---
 src/pages/workspace/WorkspaceBankAccountPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/workspace/WorkspaceBankAccountPage.js b/src/pages/workspace/WorkspaceBankAccountPage.js
index 932d62ad3290..67ed050f504a 100644
--- a/src/pages/workspace/WorkspaceBankAccountPage.js
+++ b/src/pages/workspace/WorkspaceBankAccountPage.js
@@ -3,7 +3,7 @@ import React from 'react';
 import {withOnyx} from 'react-native-onyx';
 import * as Expensicons from '../../components/Icon/Expensicons';
 import * as Illustrations from '../../components/Icon/Illustrations';
-import Text from '../../components/ExpensifyText';
+import ExpensifyText from '../../components/ExpensifyText';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import * as BankAccounts from '../../libs/actions/BankAccounts';
 import compose from '../../libs/compose';