[Hold for payment] [2024-04-30][$250] Bank account - Random animations between steps transitions on bank account setup flow

[izarutskaya]

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

---

Version Number: v1.4.62-0
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4488988
Email or phone of affected tester (no customers): applausetester+vd_ios041024.2@applause.expensifail.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

Pre-requisite: user must be logged in, have created a Workspace and have enabled Workflows.

1. Go to Workspace > Workflows.
2. Tap on "Connect bank account".
3. Select "Connect manually" and enter the testing credentials for routing and account numbers, then confirm.
4. Verify that when "Personal info" page is displayed, a random and inconsistent animation is displayed on the "Legal first name" field.
5. Fill the form and continue.
6. Verify that when the date of birth page is displayed, a random and inconsistent animation is displayed on the calendar.
7. Select a date and continue.
8. Verify that when the SSN page is displayed, a random and inconsistent animation is displayed on the SSN field.
9. Tap on the back arrow until you reach the first and last name page.
10. Once more, tap on the back arrow, make sure to verify that when going to previous step (routing and account numbers), a random and inconsistent animation is displayed on the step numbers at the top.

Expected Result:

There should be no random animations when transitioning between any steps.

Actual Result:

There are some random and inconsistent animations when transitioning between steps.

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

Bug6445392_1712809738710.Chvg8229_1_.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0144ba5dc06cdd83b2
• Upwork Job ID: 1778359833678811136
• Last Price Increase: 2024-04-11
• Automatic offers:
• getusha | Reviewer | 0
• ikevin127 | Contributor | 0

[melvin-bot]

Triggered auto assignment to @Beamanator (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

Triggered auto assignment to @zanyrenney (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[izarutskaya]

@zanyrenney I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors.

[zanyrenney]

Yep can see the weird flash / animation. I agree this is a bug.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0144ba5dc06cdd83b2

[melvin-bot]

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

[Beamanator]

I don't think this needs to be a blocker - the weird animations aren't so annoying for the user, and it looks like all the functionality still works fine

• commented in slack internally here

[Beamanator]

Ok ya marking as NAB, but accepting proposals for the fix!

[ikevin127]

Proposal

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

There are some random and inconsistent animations when transitioning between steps on the bank account setup flow.

What is the root cause of that problem?

Offending PR:

• Enable Fabric and TurboModules on iOS & Android #13767

Caution

Native code ahead -> more details / context can be found on this react-native issue:

• Rendering issue of components with border style - components appear stretched while rendering a new screen facebook/react-native#42604

Specifically #42604 (comment) and #42604 (comment), which I'm not going to pretend I understand fully ->
the gist being that there's an issue within:
node_modules/react-native/React/Fabric/Mounting/RCTMountingManager.mm
which has to do with mounting and CATransaction (from Apple docs):

CATransaction
A mechanism for grouping multiple layer-tree operations into atomic updates to the render tree.

The new architecture caused this iOS specific rendering issue of components with border style where the borders appear stretched while rendering a new screen, then animate to their default state shortly (where UI looks good again).

Check out the frame-by-frame of what's actually happening:

iOS: Native

Screen.Recording.2024-04-12.at.01.30.40.mov

Note

This issue is not specific to the BA setup flow, but any page that mounts while having components with border styles (inputs, interactive step, etc).

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

As suggested in #42604 (comment), in order to fix this issue as of right now we need to apply a react-native patch.

Did that, created the patch react-native+0.73.4+014+iOSCoreAnimationBorderRendering.patch, performed a clean install, rebuilt the iOS:Native app and the issue is gone! 🎉

Here's a test branch: test/40081, the diff and steps to test the fix:

1. Chekout test branch.
2. Run npm ci to perform a clean install.
3. Rebuild the iOS: Native app.
4. Test the fix using OP steps.

Videos (before / after)

iOS: Native

Before	After	After (OP Steps)
before.mov	after.mov	Screen.Recording.2024-04-12.at.01.59.59.mov

[shubham1206agra]

This might be fixed in RN v0.74.
Commit: facebook/react-native@5fbdc99

[shubham1206agra]

Thanks for the proposal btw @ikevin127.

[ikevin127]

Posted #37374 (comment) in:

• [HOLD for payment 2024-09-10] [$1000] Upgrade to RN 0.75 #37374
  to let the people working on the RN v0.74 upgrade know about this issue.

I guess it's up to the team to decide whether to add the proposed patch and fix the issue now or HOLD until we're upgraded to v0.74 and see if the issue will be fixed by:

• facebook/react-native@5fbdc99

Active conversation in #expensify-open-source Slack 🧵:

• looks like the consensus¹² is to move on with the patch considering it's not a big patch and, after the new arch changes it may take more time to upgrade to RN v0.74³.

Footnotes

1. Slack 🧵 (comment 7) ↩

2. Slack 🧵 (comment 9) ↩

3. Slack 🧵 (comment 8) ↩

[getusha]

@Beamanator we decided to create a patch, we can assign @ikevin127 #40081 (comment)

[melvin-bot]

📣 @getusha 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @ikevin127 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[ikevin127]

PR #40243 ready for review! 🎉

[ikevin127]

⚠️ Automation failed here -> this should be on Hold for payment [2024-04-30] according to yesterday's production deploy from #40243 (comment).

cc @zanyrenney

[zanyrenney]

Hey @ikevin127

Payment summary
paid @ikevin127 $250 via Upwork.
paid @getusha $250 via Upwork.