Split bill - Text is distorted in Spanish

[mvtglobally]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Go to https://staging.new.expensify.com
2. Log in with Spanish account (or, sign in to the same account through staging.expensify.com and use NVP.set('preferredLocale', 'es') and then refresh your New Expensify page)
3. Click FAB + > Dividir factura (Split bill)
4. Enter amount and click Next
5. Select the person to split with, then Next

Expected Result:

Text must be clear

Actual Result:

Text is distorted in Spanish

Workaround:

n/a

Platform:

Where is this issue occurring?

• iOS
• Android
• Mobile Web

**Version Number:1.1.10-0
**Reproducible in staging?:Y
**Reproducible in production?:Y
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:
Issue reported by:
Slack conversation:

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @HorusGoul (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[MelvinBot]

Triggered auto assignment to @conorpendergrast (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[MelvinBot]

Triggered auto assignment to @stephanieelliott (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[conorpendergrast]

I updated the reproduction steps because they were missing setting the language, and missing that you have to select the person to split with.

I've tried to reproduce on iOS mobile web in Safari and Chrome, and haven't been able to reproduce (the text displays correctly, and doesn't overlap).

@HorusGoul Were you able to reproduce this? On what platform?

[jasperhuangg]

I noticed some bizarre formatting with the text in English as well for a few of the Enable Payment Flow steps. Gonna investigate all the steps and make sure everything displays correctly in both English and Spanish.

[jasperhuangg]

Ah, it's because our TextLink implementation prevents the text within the component from breaking to a new line, since under the hood Pressable is implemented with a View.

Here's how it looks if I get rid of Pressable and use Text instead to wrap:

The only issue with this new implementation is that we'll lose the ability to apply styles to the text when it's hovered over or pressed on (which is why we were using Pressable before). However, I think this is a necessary tradeoff to format the text correctly into lines.

[stephanieelliott]

Hey @jasperhuangg, it seems like #6113 fixes this issue, yeah? If so, put the brakes on moving this to Upwork.