[HOLD for payment 2025-01-02] Replace react-native Animated API with react-native-reanimated

[blazejkustra]

Full proposal here.

Replace Animated API with Reanimated, which runs animations on the UI thread (instead of JS thread), ensuring great performance. Reanimated integrates deeply with react-native-gesture-handler (used throughout our app), offers advanced animations, and supports higher frame rates — exceeding 60fps.

SwitchPerf.mov

Issue Owner

Current Issue Owner: @stephanieelliott

[melvin-bot]

Triggered auto assignment to @stephanieelliott (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.

[melvin-bot]

Current assignee @stephanieelliott is eligible for the NewFeature assigner, not assigning anyone new.

[melvin-bot]

⚠️ It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time ⚠️

[mountiny]

Happy to help push this one along

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @dubielzyk-expensify (NewFeature)

[blazejkustra]

Update: I created a draft PR with just the Switch component. I will get back to it next week, and involve @sumo-slonik to speed up the process 😄

[dubielzyk-expensify]

Oh boy this is wonderful. Is there any particular part of the app I can help review?

Also, sidenote, but I would secretly love to add these kinda animations on that page if performance now permits this kinda stuff:

CleanShot.2024-11-25.at.15.28.09.mp4

[blazejkustra]

Also, sidenote, but I would secretly love to add these kinda animations on that page if performance now permits this kinda stuff:

That looks neat, we could look into this but perhaps as a separate issue? @dubielzyk-expensify

[mountiny]

Yeah we can do that in a separate issue for sure

[dubielzyk-expensify]

Sounds good to me 😄 This is excellent and it just got me a bit too excited haha 😅 60fps FTW

[mountiny]

sky is the limit, 120 fps 🚀

[sumo-slonik]

I have already managed to migrate the tooltip as well, I am now working on the tabs component and checking what could be improved in it :)

[sumo-slonik]

UPDATE:

I migrated AttachmentModal and GrowlNotification.

Now I'm working on migrating

• TextInput
• TabSelector
• BaseOverlay
• SearchTypeMenuNarrow

[mountiny]

GrowlNotification is not used in the app, is it? we should probably remove it

[sumo-slonik]

GrowlNotification is not used in the app, is it? we should probably remove it

it seems to me that we can't remove it because there are places where we continue to show it:

[sumo-slonik]

@mountiny
we also found the use of react-native-animatable would we like to swap that too with this PR?

[sumo-slonik]

Update: TextInput is now ready

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.73-8 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Migrate/textinput growlnotification attachmentmodal animte to reanimate #53321

If no regressions arise, payment will be issued on 2024-12-17. 🎊

For reference, here are some details about the assignees on this issue:

• @blazejkustra does not require payment (Contractor)
• @shubham1206agra requires payment (Needs manual offer from BZ)
• @sumo-slonik does not require payment (Contractor)

[melvin-bot]

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@shubham1206agra] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [@stephanieelliott] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

[sumo-slonik]

@mountiny @blazejkustra

Regarding the bug we discussed on Slack:
https://swmansion.slack.com/archives/C049HHMV9SM/p1733893876395249

I have identified the cause of the bug, which is located in the react-native-draggable-flatlist library. After investigating, I discovered an open issue related to this problem, but it seems that the library is no longer actively maintained.

Possible Solutions

We can address this issue using one of the following approaches:

1. Rewrite the Entire Library

   • This would take a considerable amount of time.
   • It provides the potential for further development and customization.

2. Apply a Patch

   • The bug can be fixed by changing a single line of code in the library.
   • We already have a patches to this library

3. Ignore the Bug

   • The bug does not seem to impact the application's core functionality.

Based on these options, applying a patch appears to be the most efficient and practical solution at this time.

[blazejkustra]

I agree that adding a small patch for it should be the way to go, great investigation @sumo-slonik

[shubham1206agra]

@sumo-slonik Can you please summarize the bug here?

[sumo-slonik]

@shubham1206agra In summary, the bug is related to a console error appearing when adding a new expense:

Screen.Recording.2024-12-11.at.12.12.20-compressed.mov

[sumo-slonik]

@mountiny @blazejkustra

Regarding the bug we discussed on Slack: https://swmansion.slack.com/archives/C049HHMV9SM/p1733893876395249

I have identified the cause of the bug, which is located in the react-native-draggable-flatlist library. After investigating, I discovered an open issue related to this problem, but it seems that the library is no longer actively maintained.

Possible Solutions

We can address this issue using one of the following approaches:

1. Rewrite the Entire Library

   • This would take a considerable amount of time.
   • It provides the potential for further development and customization.

2. Apply a Patch

   • The bug can be fixed by changing a single line of code in the library.
   • We already have a patches to this library

3. Ignore the Bug

   • The bug does not seem to impact the application's core functionality.

Based on these options, applying a patch appears to be the most efficient and practical solution at this time.

Additionally, to prove that version two would be the best choice, I would like to add that it is our patch that causes this console warrning so I think it is better to fix it

[blazejkustra]

Here is an issue for that #53759

@blazejkustra @sumo-slonik is this everything already migrated to reanimated? it feels like there should be more

There are couple things left:

• Migrate SearchTypeMenuNarrow and BaseOverlay to Reanimated (should be rather easy)
• Adjust TS_CHEATSHEET.md doc - mention of Animated is no longer needed
• Add Animated to restrictedImportPaths in our eslint config
• Removal of unused fade function from src/styles/utils/index.ts file

Also, @sumo-slonik didn't migrate TabSelector to Reanimated as this component is deeply connected with react-navigation, which relies on Animated under the hood. We believe migrating it would require a significant refactor of the TopTab.Navigator. We’ll continue investigating and provide an update later this week.

All this can be done in a third and final PR, sounds good? @mountiny

[melvin-bot]

Payment Summary

Upwork Job

• Contributor: @blazejkustra is from an agency-contributor and not due payment
• ROLE: @shubham1206agra paid $(AMOUNT) via Upwork (LINK)
• Contributor: @sumo-slonik is from an agency-contributor and not due payment

BugZero Checklist (@stephanieelliott)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants//hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[blazejkustra]

we also found the use of react-native-animatable would we like to swap that too with this PR?

Lets leave that out for different issue, feel free to write a proposal in open source and tag design team

I was investigating react-native-animatable today, and come to a conclusion that it is just a wrapper of Animated with an easier declarative API. This means that we'll get the same results when migrating to Reanimated.

Also, turns out animatable is not even in our package.json 😅 It's just a dependency of react-native-modal (that we are currently migrating in another issue), so we shouldn't use it in the project in the first place.

Animatable is used in just two components (BackgroundImage and AnimatedStep), and it would be great to migrate it to Reanimated because of two reasons:

• Remove unnecessary dependency in the future (with two patches)
• For overall consistency as reanimated is used in all other components

@mountiny do you think we need another proposal for it? Or we could do it as part of this issue (or create a follow up issue)? 🙏

[mountiny]

Lets use patch

Lets do this:

Migrate SearchTypeMenuNarrow and BaseOverlay to Reanimated (should be rather easy)

in one PR

And the rest in another PR

do you think we need another proposal for it? Or we could do it as part of this issue (or create a follow up issue)?

No I think we can cover it here, its good to use just one library for animations

Please investigate what it would take for the topBar nav to migrate too, but if its too complex or requires patches maybe we can skip

[stephanieelliott]

Ok so it sounds like we are waiting for 2 more PRs on this before issuing the payment -- I am going to remove the payment labels, we can reapply and calculate the payment date again once those are merged.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.78-6 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix metro config and patch draggable flat list #54245

If no regressions arise, payment will be issued on 2025-01-02. 🎊

For reference, here are some details about the assignees on this issue:

• @blazejkustra does not require payment (Contractor)
• @shubham1206agra requires payment (Needs manual offer from BZ)
• @sumo-slonik does not require payment (Contractor)

[melvin-bot]

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@shubham1206agra] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [@stephanieelliott] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.