[HOLD for payment 2024-12-17] 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.

https://github.com/user-attachments/assets/dc578b3d-080b-4d1e-91ba-ff10c171abd2

Issue Owner

Current Issue Owner: @stephanieelliott

[melvin-bot[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[bot]]

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

[melvin-bot[bot]]

:warning: 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 :warning:

[mountiny]

Happy to help push this one along

[melvin-bot[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:

https://github.com/user-attachments/assets/43e48c18-6b18-4ec6-bc7f-3238f125d616

[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

[mountiny]

@sumo-slonik @blazejkustra just to confirm, can we do this in some batches in multiple PRs? So we dont have one large PR with X components. This will help us catch regressions easier

[mountiny]

I think we will eventually remove it, but that is out of scope here, thanks for checking

[shubham1206agra]

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:

This is related to Onfido flows. Can we do something else here and deprecate Growl in this issue? Maybe in a separate PR.

[mountiny]

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

[blazejkustra]

First PR is up! @shubham1206agra

[shubham1206agra]

@blazejkustra I see a bug in recent switch PR.

Steps:

1. Launch hybrid or ND app.
2. Create a Collect workspace.
3. Go to More features.
4. Enable Rules.
5. Close the upgrade modal without finishing.
6. Observe that the switch is on and it is stuck there.

Sorry, I didn't see this earlier.

cc @sumo-slonik

[sumo-slonik]

@shubham1206agra I'll check where it came from

[sumo-slonik]

PR for the second part is ready: https://github.com/Expensify/App/pull/53321

[sumo-slonik]

@blazejkustra I see a bug in recent switch PR.

Steps:

1. Launch hybrid or ND app.
2. Create a Collect workspace.
3. Go to More features.
4. Enable Rules.
5. Close the upgrade modal without finishing.
6. Observe that the switch is on and it is stuck there.

Sorry, I didn't see this earlier.

cc @sumo-slonik

I see that a similar problem is also for credit cards, but I think I know how to fix it, I'm already dealing with it

[sumo-slonik]

@shubham1206agra Would the expected behavior be for the switch to be false if we leave the update tab?

[shubham1206agra]

Yes

[sumo-slonik]

@blazejkustra I see a bug in recent switch PR. Steps:

1. Launch hybrid or ND app.
2. Create a Collect workspace.
3. Go to More features.
4. Enable Rules.
5. Close the upgrade modal without finishing.
6. Observe that the switch is on and it is stuck there.

Sorry, I didn't see this earlier. cc @sumo-slonik

PR with bugfix: https://github.com/Expensify/App/pull/53379

[melvin-bot[bot]]

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