[$250] Implement animation to the switch expandable sections

[mountiny]

This is a request from @dubielzyk-expensify to add animation to the expanding section in Workflows (and other similar places in the app) where after toggling the switch, we open the section like this https://github.com/user-attachments/assets/43e48c18-6b18-4ec6-bc7f-3238f125d616

cc @sumo-slonik @blazejkustra would like to implement this - can you please comment

@dubielzyk-expensify do you have some specifics about the easing/ animation at this moment?

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021866452926963427651
• Upwork Job ID: 1866452926963427651
• Last Price Increase: 2024-12-10

Issue Owner

Current Issue Owner: @sumo-slonik

[melvin-bot]

Current assignee @dubielzyk-expensify is eligible for the Design assigner, not assigning anyone new.

[melvin-bot]

Triggered auto assignment to @stephanieelliott (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[dubielzyk-expensify]

@dubielzyk-expensify do you have some specifics about the easing/ animation at this moment?

Let's start with an ease-out and see how that feels. Excited about this :)

[sumo-slonik]

Hi, I am very eager to get started on this :)
I have an idea how to do it using reanimated and I'm already on it

[shubham1206agra]

Assign me here for review please.

[melvin-bot]

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

[melvin-bot]

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

[mountiny]

I think we can just use the autoassigner, its a new task and no rush

[sumo-slonik]

Is already working, I am checking where in other places of the application could be used such acordition element with switch

Screen.Recording.2024-12-10.at.16.37.49.mov

Screen.Recording.2024-12-10.at.16.39.02.mov

[mountiny]

@sumo-slonik we also use it in accounting settings

[mountiny]

you have to connected to QBO for example

[sumo-slonik]

It is already working everywhere the last place with a problem is the accounting tab, there I have a problem when importing because the component changes before the widget collapses and this causes the illusion of not smooth animation, I have to change the logic of state management in this place, but we are getting closer :D

Screen.Recording.2024-12-11.at.14.55.27.mov

[sumo-slonik]

while working on animations in imoprt I found such a bug on main branch, I wanted to fix it within this task but it is more work than what is related to animations so I think it deserves a separate issiue:

bug1.mp4

[sumo-slonik]

All switch animations completed:

Screen.Recording.2024-12-12.at.14.41.27.mov

[sumo-slonik]

@mountiny What do we want to do about this bug?
#53759 (comment)

[mountiny]

@sumo-slonik I dont think we ahve to worry about this, its a replay effect issue no need to spend time on it

[mountiny]

@dubielzyk-expensify how does the animation look to you?

[sumo-slonik]

Also draft PR already has recordings from all platforms:
#53938

[sumo-slonik]

PR is ready:
#53938

[blazejkustra]

@thesahindia I think you can have a look at the code and start reviewing 😄 Let us know if you have any questions

[stephanieelliott]

PR is still under review!