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]

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.89-8 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Migrate last components to reanimated #55202

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

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.

[melvin-bot]

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

• Migrate SignInPage to react-native-reanimated, remove useNativeDriver #55415

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

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.

[mountiny]

@blazejkustra I think there is one last PR that you work on here, right?

[blazejkustra]

Yep, this is the last migration.

[blazejkustra]

Note for future self, next time we should create multiple sub-issues 😅

[mountiny]

We could this is more of a tracking issue

[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

[melvin-bot]

@stephanieelliott, @mountiny, @blazejkustra, @shubham1206agra, @sumo-slonik, @dubielzyk-expensify Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

@stephanieelliott, @mountiny, @blazejkustra, @shubham1206agra, @sumo-slonik, @dubielzyk-expensify Still overdue 6 days?! Let's take care of this!

[stephanieelliott]

Summarizing payment on this issue, it includes the following pull requests:

• Migrate animated to reanimated Tooltip and Switch #53298
• Migrate/textinput growlnotification attachmentmodal animte to reanimate #53321
• fix metro config and patch draggable flat list #54245
• Migrate last components to reanimated #55202
• Migrate SignInPage to react-native-reanimated, remove useNativeDriver #55415

---

• Contributor: @blazejkustra EC, no payment due
• Contributor: @sumo-slonik EC, no payment due
• Contributor+: @shubham1206agra $1250 via Upwork -- offer extended, please accept when you get a chance! https://www.upwork.com/nx/wm/offer/106076797

Upwork job is here: https://www.upwork.com/jobs/~021889212108205489060

[shubham1206agra]

@stephanieelliott This is not yet completed. One PR remains #54404

[stephanieelliott]

OH, thanks! Ok removing payment labels again.