[$500] IOS - Decimal and currency goes out of the screen when currency with 3 digits selected

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 1.4.32-2
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

Precondition: Large text enabled on iPhone settings (Settings > Display & Brightness > Display Zoom > Large Text)

1. Open app
2. Tap on FAB
3. Tap on Request Money
4. Select UAH currency
5. Write 8 numbers and 2 decimals

Expected Result:

Decimal and currency should be displayed properly

Actual Result:

Decimal and currency goes out of the screen when currency with 3 digits selected and Large Text enabled on iPhone settings

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6355256_1706223640303.RPReplay_Final1706055975.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0177fc294299afae8c
• Upwork Job ID: 1750656599886901248
• Last Price Increase: 2024-02-01

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0177fc294299afae8c

[melvin-bot]

Triggered auto assignment to @NicMendonca (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @allroundexperts (External)

[jeremy-croff]

Proposal

Please re-state the problem that we are trying to solve in this issue.

On IOS when having font zoom on, it overflows the amount field in the send money flow.

What is the root cause of that problem?

We don't have allowFontScaling={false} on the AmountTextInput to prevent it from scaling with display zoom.
We use this pattern on some other inputs as well:

App/src/components/Text.tsx

Line 47 in 071046f

allowFontScaling={false}

What changes do you think we should make in order to solve the problem?

pass allowFontScaling={false} in the AmountTextInput to TextInput

App/src/components/AmountTextInput.tsx

Line 42 in 071046f

<TextInput

What alternative solutions did you explore? (Optional)

Adding line-break css to wrap the number to a new line

[melvin-bot]

@NicMendonca, @allroundexperts Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[allroundexperts]

Reviewing now!

[allroundexperts]

Thanks for your proposal @jeremy-croff. I think your RCA is correct but I was not able to test your solution on a simulator. Can you post a screen recording of your solution in action on a real device? Thanks!

[jeremy-croff]

Thanks for your proposal @jeremy-croff. I think your RCA is correct but I was not able to test your solution on a simulator. Can you post a screen recording of your solution in action on a real device? Thanks!

Does it have to be a real ios device or can a simulator be used?

[allroundexperts]

I could only reproduce this on a real device. If you can reproduce on a simulator, do let me know the steps and I can give it a shot.

[jeremy-croff]

I could only reproduce this on a real device. If you can reproduce on a simulator, do let me know the steps and I can give it a shot.

To reproduce this on the emulator,
You go into the developer settings, and set display Zoom to larger text.

My proposed solution does not fix this, as it actually is zoom related not font scaling.

[jeremy-croff]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When using a zoomed IOS experience, the amount text input overflows the screen as it scales beyond the screen size.

What is the root cause of that problem?

We have no way in react-native to prevent display zoom from effecting font-size.
Only fontScaling is disable-able.

Android allows a way to not zoom https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#scalespagetofit
But this is not supported for IOS.

What changes do you think we should make in order to solve the problem?

We can introduce a new styling utility to remove zoom:

function getValueDisablingZoom(defaultValue: number): number {
    return defaultValue/PixelRatio.getFontScale();
}

We can use that to fix the font-size to 40 for this component:

App/src/styles/variables.ts

Line 82 in 480ae8d

iouAmountTextSize: 40,

What alternative solutions did you explore? (Optional)

Disabling zoom on the entire web view.

Changing the amount input to wrap

[melvin-bot]

Triggered auto assignment to @trjExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[NicMendonca]

Starting leave so re-assigning!

[trjExpensify]

The chances of somebody requesting the equivalent of £1.8m for reimbursement are about the same as me winning the lottery! I'd love to be proved wrong though and see a customer report this bug.

@allroundexperts, I'm inclined to close this. What do you think?

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[allroundexperts]

The chances of somebody requesting the equivalent of £1.8m for reimbursement are about the same as me winning the lottery! I'd love to be proved wrong though and see a customer report this bug.

@allroundexperts, I'm inclined to close this. What do you think?

Yep, I agree. The solution is sort of a work around as well. Not worth the time IMO.

[trjExpensify]

Cool, thanks for the sense check. Closing!