Refactor uses of react-native Text to ExpensifyText

[puneetlath]

Details

We recently updated our custom Text component to be called ExpensifyText to more clearly distinguish it from the react-native component with the same name. We also added a new rule to our ESLint config preventing the import of the default Text component from react-native. This is because we want people to use our custom component instead.

There were a handful of instances of the default react-native component being used in our code-base. This PR updates those to use our custom component instead. The only file that still imports Text from react-native is our ExpensifyText component, which is built on top of the react-native one.

cc @madmax330 since you reviewed the ESLint PR.

Fixed Issues

#6585

Tests

Open the page for each component that was changed and ensured the text looks the same/normal.

QA Steps

Check each component to make sure the text looks normal. Here's how to get to each component.

CurrentWalletBalance and PaymentMethodList:

1. log into an account that has no payment methods added
2. tap the profile icon
3. Tap payments
4. Make sure the wallet balance (the big $ amount) and the rest of the text on the page look normal

ExpensiPicker:

1. log into any account
2. tap the profile icon
3. tap profile
4. make sure the text in the "preferred pronounces" dropdown looks normal

InlineCodeBlock and PressableWithSecondaryInteraction:

1. Send someone a message that includes a url (i.e. www.expensify.com)
2. Make sure the text looks normal
3. Make sure you're able to long-press the text and have the "copy link to clipboard" menu show up
4. Send someone a message that includes a code block by wrapping the text in "`" characters.
5. Make sure the text looks normal

MarkerBadge:

1. Navigate to a chat that has more messages in the history than what shows on the screen
2. Scroll to the top
3. From another window, send a message from the other account that is in that chat
4. Notice the "1 new message" indicator now showing in the original account
5. Make sure the text in that indicator looks normal

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

CurrentWalletBalance and PaymentMethodList:

ExpensiPicker:

InlineCodeBlock and PressableWithSecondaryInteraction:

MarkerBadge:

Mobile Web

CurrentWalletBalance and PaymentMethodList:

ExpensiPicker:

InlineCodeBlock and PressableWithSecondaryInteraction:

MarkerBadge:

Desktop

CurrentWalletBalance and PaymentMethodList:

ExpensiPicker:

InlineCodeBlock and PressableWithSecondaryInteraction:

MarkerBadge:

iOS

CurrentWalletBalance and PaymentMethodList:

ExpensiPicker:

InlineCodeBlock and PressableWithSecondaryInteraction:

MarkerBadge:

Android

CurrentWalletBalance and PaymentMethodList:

ExpensiPicker:

InlineCodeBlock and PressableWithSecondaryInteraction:

MarkerBadge:

[MonilBhavsar]

Looks good! Should we update the documentation to make sure we use ExpensifyText in future

[puneetlath]

I updated the ESLint config so that it'll throw an error if anyone uses react-native Text. We can definitely update the documentation as well. I don't see any obvious place to do that though. Anywhere in particular you recommend?

[puneetlath]

@MonilBhavsar I removed the comment from src/components/ExpensifyText.js. Let me know if you're good with everything else!

[MonilBhavsar]

I updated the ESLint config so that it'll throw an error if anyone uses react-native Text

That's great! Can you please link that PR.

I don't see any obvious place to do that though. Anywhere in particular you recommend?

I don't see anywhere in documentation where we list components we use. So, all good! I was looking if we can update STYLE.MD for any occurrences of Text, But I saw you already updated it here. Thanks! 😄

[puneetlath]

Yep, here you go: Expensify/eslint-config-expensify#38

[MonilBhavsar]

Thanks! Looks good

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[OSBotify]

🚀 Deployed to staging by @MonilBhavsar in version: 1.1.20-3 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	failure ❌
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to production by @Julesssss in version: 1.1.21-1 🚀

platform	result
🤖 android 🤖	failure ❌
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅