[HOLD for payment 2023-03-31] [HOLD for payment 2023-03-20] Feature request (polish): Improve responsiveness of number pad as native keyboard

[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!

---

Problem:

When typing on the numpad to input the request money amount, the keyboard is not as responsive as native keyboard. The keyboard did not catch when the numbers are tapped too fast, but that would not be an issue on a native keyboard.

Solution:

Improving the responsiveness as much as possible to like native keyboard

Context/Examples/Screenshots/Notes:

Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01c0e668e5663ee524
• Upwork Job ID: 1632781057319972864
• Last Price Increase: 2023-03-06

[narefyev91]

Hello, I'm Nicolay from Callstack and I'm interested in taking and analysing this issue to work on a fix for it.

[narefyev91]

Proposal

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

A general issue - unnecessary re-renders, and no memoization for the whole BigNumberPad component.
Why that happens? In BigNumberPad is a child component of IOUAmountPage - and when anything fires setState - we re-render all children. Also BigNumberPad has map of Views (our numbers 12 items) - and you can imagine that clicking on one button - force to re-render all this keyboard every time

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

1. We need to use PureComponent instead of Component - which will automatically check if props are equal and not re-render the whole component
2. The most important we need to re-write this function
   longPressHandlerStateChanged={state => this.shouldUpdateSelection = !state} - such implementation force to re-render BigNumberPad even if it extended from PureComponent - such implementation create a new function every time

To see the difference between this implementations i will provide some videos in which you can see how touch event listeners will be renders - in most cases for one button we get 15-20 ms faster work (each dot is a button which pressed) - also you will see that we reduce CPU and memory usages to render that flow. And this is Android - on IOS it will be even faster

Before:

Screen_Recording_20230306_143117_New.Expensify.mp4

After:

Screen_Recording_20230306_143335_New.Expensify.mp4

Before:

Screen.Recording.2023-03-06.at.14.30.12.mov

After:

Screen.Recording.2023-03-06.at.14.35.45.mov

What alternative solutions did you explore?

[mountiny]

Great, that all makes sense to me, feel free to create a PR!

[MelvinBot]

Job added to Upwork: https://www.upwork.com/jobs/~01c0e668e5663ee524

[MelvinBot]

Triggered auto assignment to Contributor Plus for review of internal employee PR - @mananjadhav (Internal)