[Due for payment 2025-03-10] [Due for payment 2025-02-27] [UX Reliability] Improve the bottom modal animations quality and reliability on native and mWeb platforms

[mountiny]

Problem

Coming from this thread to bring the NewDot on par with other chat platforms, we need to make sure the modal experience feels fast and the animations are smooth without any lags. Right now the most noticeable lag is happening on the bottom drawers that are often used:

• composer action modal to add attachments or to submit expenses in a chat
• opening or closing the emoji keyboard
• Opening and closing the keyboard - this is not that bad but it also could be improved
• Opening FAB on the main page - the animation is relatively smooth here but its something to monitor too
• Opening more options modal on a comment with long press and then going to edit a message. Saving the edit later. In this flow the modal is opening and closing multiple times with keyboard popping up and down in not smooth fashion

Solution

Let's ask the @Expensify/design team if we want to explore some non-linear animation easing for these modals. Later (I would say not in the scope of this project), we could explore the bounce effect too for some of these animations.

1. Pick a medium range ios and android device on which we would test
2. Analyse the existing animations, measure its fps and set the baseline of measurements of where we at
3. Research options on what will be the best way to improve this and get us to smooth 60fps animations all the time on the device picked in 1.
4. Discuss the solutions to pick the best one that will work on native and mWeb as well (in the narrow mode where we use the same modal)
5. Implement it and make sure we are able to keep the good animation performance in real world use.

cc @BartoszGrajdek

Issue Owner

Current Issue Owner: @NicMendonca

[melvin-bot]

Current assignee @mountiny is eligible for the AutoAssignerNewDotQuality assigner, not assigning anyone new.

[melvin-bot]

Triggered auto assignment to @RachCHopkins (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]

Triggered auto assignment to @shawnborton (Design), see these Stack Overflow questions for more details.

[BartoszGrajdek]

Hi! I'm Bartosz from SWM and I'll be working on this issue! 😄

[shawnborton]

Let's ask the @Expensify/design team if we want to explore some non-linear animation easing for these modals.

Big fan of that! I think the answer is yes, we do want to explore that.

[mountiny]

Added another bullet point to look into, nothing super new, just one more flow to test:

• Opening more options modal on a comment with long press and then going to edit a message. Saving the edit later. In this flow the modal is opening and closing multiple times with keyboard popping up and down in not smooth fashio

[mountiny]

@BartoszGrajdek Any updates here 🚀

[BartoszGrajdek]

Hey there! 🌟 Apologies for the delayed response; I had a few other tasks pop up, but I dived into the issue yesterday and have a more detailed update for you below. 🙏🏻

Devices Update

I selected iPhone SE 2022 and Oppo A16 initially, but realized the Oppo isn't as mid-range as I thought. I'll swap it out for a better Android device tomorrow at the office.

Focus on Physical Devices

It's crucial to conduct the final testing and comparisons on physical devices. As we well know simulators can sometimes access more resources than actual phones do, skewing the results. 📱

Baseline of measurements

I have recorded the animations on mWeb and Android, but I'm still struggling with getting the iOS to build on a physical device, that's something I'll focus on today. 😅

Tomorrow once I swap the Android phone with a better one I'll try to summarise our current state of these animations in terms of fps - given I get the iOS to build 🍎

Next Steps - Action Plan

1. Check which parts of the code are responsible for these specific animations
2. Make sure that all animations are using Reanimated and not react-native's Animated
3. Analyse if any obvious bugs could influence the performance of animations
4. If issues persist, explore different ways to improve performance and discuss options with the team.

We'll also likely get another person from the team to help me out here to speed this process up 🚀

Keep me posted on any thoughts or recommendations, and let's keep the momentum going! If you have questions or need more details, feel free to reach out. I'll make sure to keep you updated regularly 🙌🏻

Looking forward to our progress! 💪🏻

[mountiny]

Lovely, thanks for the focus and update

[RachCHopkins]

Hey @mountiny this may be a silly question, but do you actually need me on this issue for anything?

[mountiny]

Nah all good

[BartoszGrajdek]

Hello again! 🌟 I'm back with a detailed update on my activities over the past few days. 🙌🏻

Recordings & Baseline Measurements

I’ve completed the remaining recordings, including the native iOS recordings on an iPhone 11. After discussing with the Reanimated team, we've concluded that there isn't an ideal way to measure the FPS of animations. For now, I'll compare changes using the number of unique frames in the recorded videos.

In these results, I’ve excluded frames where only the background opacity changes. I believe our primary focus should be on improving the smoothness of the moving modal, as it currently performs the worst. 😓

	iPhone SE mWeb	iPhone 11 Native	Realme GT2 mWeb	Realme GT2 Native
Attachments Modal	6	4	6	4
Emoji Picker	4	3	4	3
FAB	15	10	15	13
Edit Modal	11	9	12	15

These results indicate the number of unique frames in each animation. 📊

Research Results

After recording and comparing all the results, I've started investigating the cause of the poor animation performance. I found out that all these components use the BaseModal component, which in turn utilizes the react-native-modal library.

I suspect that the react-native-modal library is the culprit behind the significant lag. I believe that the issue is the fact that react-native-modal relies on react-native-animatable instead of react-native-reanimated. react-native-animatable is essentially a wrapper for RN Animated, which could be slowing down the animations considerably. 🐢

Next Steps

To verify my suspicion, I plan to locally replace react-native-animatable in react-native-modal with Reanimated. I will then compare both versions to determine if this is indeed causing the issue. 👀

Possible Outcomes

If my proposed solution does not resolve the issue, I will delve deeper to identify other potential causes.

If the solution is effective, there are a few paths we could take:

1. Apply my solution as a patch. 🩹
2. Create a fork of react-native-animatable that uses Reanimated (the library maintainers are hesitant to change the animation lib)
3. Take over the library, which hasn’t been updated in two years.
4. Replace the library with another modal library that uses Reanimated.
5. Develop our own Modal component (I think this may be an overkill)

Your Input

If you have any suggestions or feedback on this matter, please let me know.

I'll make sure to give you an update once I have more definitive results or progress to share. Stay tuned! 🔜

[melvin-bot]

@shawnborton, @mountiny, @BartoszGrajdek Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

Skipping the payment summary for this issue since all the assignees are employees or vendors. If this is incorrect, please manually add the payment summary SO.

[BartoszGrajdek]

Added a PR fixing the FAB issue here I've tested it in other modals as well and didn't find any regressions.

[melvin-bot]

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

[mountiny]

@BartoszGrajdek @zfurtak @blazejkustra What are the next steps on this issue? Thanks

[BartoszGrajdek]

We were waiting for the FAB issue to pass QA tests first before pushing new PRs, but that's done now. We have 3 draft PRs ready for all of the other use cases mentioned in this issue description and after that, I believe we should be prepared to go through each modal type one by one.

FYI @blazejkustra will be working on this issue now

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

• Invisible view on FAB using refactored modal fix #57536

If no regressions arise, payment will be issued on 2025-03-10. 🎊

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

• @BartoszGrajdek does not require payment (Contractor)
• @ZhenjaHorbach requires payment (Needs manual offer from BZ)
• @zfurtak 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:

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

[mountiny]

@blazejkustra i know you busy with the live helpdot project, anyone else able to to help here?