[HOLD App#51475] [$250] Request money component is jumpy when entering the digits

[kavimuru]

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. Open a DM
2. Tap + in the compose box > Request money
3. Enter the amount

   Expected Result:

   No jumpy behavior when entering the digits

Actual Result:

Request money component is jumpy

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

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

• [ ] Android / native
• [ ] Android / Chrome
• [x] iOS / native
• [ ] iOS / Safari
• [ ] MacOS / Chrome / Safari
• [ ] MacOS / Desktop

Version Number: 1.3.22 Reproducible in staging?: needs reproduction Reproducible in production?: needs reproduction 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 Notes/Photos/Videos: Any additional supporting documentation

https://github.com/Expensify/App/assets/43996225/c8c41359-c830-486a-8b17-ae78f89e0631

Expensify/Expensify Issue URL: Issue reported by: @mountiny Slack conversation: https://expensify.slack.com/archives/C9YU7BX5M/p1685628667713269

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0115f73500419bbdad
• Upwork Job ID: 1665685007250124800
• Last Price Increase: 2024-08-21

Issue Owner

Current Issue Owner: @hannojg

[melvin-bot[bot]]

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

[melvin-bot[bot]]

Bug0 Triage Checklist (Main S/O)

• [ ] This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• [ ] This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• [ ] This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• [ ] This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• [ ] I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[hannojg]

Hey, I was bringing up that issue originally. It seems that not every device is able to reproduce the issue. However, I tested it with 5 different phones in our office, among it high end phones like the newest iPhones and the issue is reproducible on all of them 🤔 (so the issue is on android and iOS). The thing is, its hard to see while using that there is a jumpiness, but I think you can definitely feel that its not smooth. That's why I did a screen recording and when you step through the recording frame by frame you will see states where the input is not adjusting its size fast enough (see attached video).

(In addition I'd like to work on that issue once QA can confirm its reproducible).

[hannojg]

Also on Web it's not jumping, but you can see, if you look very closely, that the number shows with one frame delay.

This is due to the fact that we first put the text inside a Text view, measure it, and then change the size of the input.

I think it makes sense to rework the autoGrow functionality, so it isn't delayed by a frame (and on mobile doesn't jump).

https://github.com/Expensify/App/assets/16821682/93d19683-1846-4d86-a907-3c7808aab970

[mountiny]

@hannojg Let us know what the next steps on this one would be

[melvin-bot[bot]]

Job added to Upwork: https://www.upwork.com/jobs/~0115f73500419bbdad

[melvin-bot[bot]]

Current assignee @arielgreen is eligible for the External assigner, not assigning anyone new.

[melvin-bot[bot]]

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

[melvin-bot[bot]]

Current assignee @mountiny is eligible for the External assigner, not assigning anyone new.

[mountiny]

Not overdue

[hannojg]

We could put this on hold for https://github.com/Expensify/App/issues/16696?notification_referrer_id=NT_kwDOAQCtsrM2MDA4NTM4NzgwOjE2ODIxNjgy#issuecomment-1576650890 until we settled on a decision there.

However, in the meantime, I am already experimenting with some solutions for a better implementation of the autoGrow behaviour. Will share more information once I find a good working solution 😊

[hannojg]

A little update. My plan is to remove the separate text view for mobile, as react-native supports auto growing for text inputs. (For web I still have to see for the best solution).

However, I just stumbled into a native bug.

On iOS when the input is focused and you update the textinput using value the issue just happens as well:

https://github.com/Expensify/App/assets/16821682/b8ddd035-a25e-4408-94d9-50a7ddf1d635

On android the issue just happens on a regular text input regardless of focussed or not:

https://github.com/Expensify/App/assets/16821682/5d5b620c-50f1-4fc0-aec2-13c851859c56

So we'd have to investigate a fix for react native first.

[mountiny]

@hannojg you do have a sensitive eye, Hanno. Can you even look at <120fps screens? :trollface:

[hannojg]

Just a little update: we are investigating for a native fix, that will again make a great contribution to react native itself in the name of Expensify. Also with the fixes I have currently in place this issue also gets fixed:

• https://github.com/Expensify/App/issues/15856

[arielgreen]

Reassigning, team change

[melvin-bot[bot]]

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

[melvin-bot[bot]]

Bug0 Triage Checklist (Main S/O)

• [ ] This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• [ ] This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• [ ] This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• [ ] This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• [ ] I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[mountiny]

@hannojg Are you saying we should put https://github.com/Expensify/App/issues/15856 on hold for this issue?

Thanks for the update

[hannojg]

Not necessarily, its just a nice side effect 😅

[mountiny]

okok thanks!

[mountiny]

Still on hold, I will make this weekly

[aimane-chnaif]

https://github.com/Expensify/App/pull/20186 which fixes https://github.com/Expensify/App/issues/16696 is likely to be merged soon. Still waiting for it to hit production.

[mountiny]

it was merged lets wait for deploys

[mountiny]

@hannojg @aimane-chnaif the PR which this was on hold for has been merged, can you confirm if this has been resolved or needs more work? Thanks!

[hannojg]

This needs more work. There is a react-native native bug which causes part of the issue. Ideally we'd need to fix that bug first, or find another solution that circumvents this bug. I still have this on my to do list for in ~1-2 weeks, however I am blocked at the minute with other projects.

[mountiny]

Thanks for an update, I think we can keep this weekly

[zanyrenney]

hey @hannojg do you think you'll get to this next week?

[mountiny]

@hannojg is currently focused on wave1 performance issues, I think we can til that gets some update.

[mountiny]

Still lower priority

[zanyrenney]

@mountiny still waiting as per wave 1 priorities?

[mountiny]

Correct

[zanyrenney]

still on hold

[zanyrenney]

What's the latest here @mountiny @hannojg ? Are we thinking of picking this up soon?

[mountiny]

I think this is deprioritized at the moment for wider performance improvements.

[zanyrenney]

I also now still can't reproduce this, closing.

[aimane-chnaif]

Still reproducible to me

https://github.com/Expensify/App/assets/96077027/06927ef3-7cbb-4052-b379-5122b9e871ff

[hannojg]

Agree, it's still there. Status is that this is still a native bug in react native and thus fairly complex to solve. Haven't had the time to work on it yet. We could make it open for proposals / help wanted, but only accept proposals that include a fix within react native

[hannojg]

https://github.com/user-attachments/assets/8dfc3e36-f368-4858-b1a9-f284834677fe

@zanyrenney I can still reproduce that issue on the latest production app. We now have capacity to work on that issue again - can we reopen?

[zanyrenney]

sure we can reopen but the price will be $250.

[melvin-bot[bot]]

Upwork job price has been updated to $250

[mountiny]

This is not on hold anymore @hannojg, will you still work on this one?

[hannojg]

Oh absolutely, thanks for the ping! @mountiny

[hannojg]

Okay, i started to look into this again, the solution for mobile is to remove the manual text input measurement growth. A text input can automatically grow based on the input length on mobile.

I was starting to implement a PR here:

• https://github.com/margelo/expensify-app-fork/pull/10

However, the code has changed a lot since then so I will open a new PR 😊

[hannojg]

I created a PR that removed the manual autoGrow calculation and let the platform components handle the width growth:

• https://github.com/Expensify/App/pull/50238

The effect is already less visible, but its not entirely gone.

There seems to be an underlying issue in react native's iOS text input implementation causing the problem. In a clean iOS app using UIKit/UITextField everything works fine, but in a clean react native app just using TextInput you can see the numbers getting cut off:

https://github.com/user-attachments/assets/9160df88-9b18-4268-b311-8b444e79d539

Will open an upstream issue ticket + PR!

[hannojg]

Theoretically we could already move on with the PR and add the react native fix after. or we wait first for the react native fix and add that to the PR. Not sure

[hannojg]

Upstream issue:

• https://github.com/facebook/react-native/issues/46838

[mountiny]

Thanks @hannojg Do you think you could try to fix this upstream? then we can apply the fix in a patch and removed once its in a new RN version

[hannojg]

Yes, working on an upstream fix right now 😊 👍

[hannojg]

Update: i think i found a viable fix that makes sense and i don't see any other way to fix this:

• https://github.com/facebook/react-native/issues/46838#issuecomment-2399758823

However, i first want to check with meta if they are cool with this change / if they have any other solution in mind.

Currently waiting to receive an invite to the discord channel with meta (can you help with that @mountiny ?) as this seems to be the preferred procedure when trying to make changes in react native for expensify.

[mountiny]

I think @AndrewGable or maybe @tomekzaw might be able to ask someone? Who are good people to reach out about the discord invite?