Repository navigation
[Due for payment 2025-12-16] [Due for payment 2025-09-26] [$250] [Tracking] Use react-native-reanimated in the ModalComponent #64775
Description
Coming from this proposal
Proposal
Rewrite ModalComponent internals to fully use react-native-reanimated library to improve modals' animation quality and smoothness.
Background
This proposal is following up on this issue. In the OG issue an analysis of BOTTOM_DOCKED_MODAL based components have been done, looking for an improvement in terms of animation smoothness. Based on that research a decision was made to replace react-native-modal lib with a custom modal with animations using react-native-reanimated.
Problem
Some modal animations still feel choppy, especially when the interaction happens on "heavy" screens. It causes performance degradation and high CPU load (see attached performance test).
From the developer perspective having couple different modal implementations is not ideal as well.
Solution
Continue rewriting modals by type to use custom modals using react-native-reanimated. Tests, metrics & video available in
Current state
Modals still to refactor:
- CENTERED - [Due for payment 2025-09-02] [$1750] Use react-native-reanimated in CENTERED Modals #64776
- FULLSCREEN - [Due for payment 2025-07-10] Use react-native-reanimated in FULLSCREEN Modals #64777
- RIGHT_DOCKED - [Due for payment 2025-09-02] [Due for payment 2025-08-20] [Due for payment 2025-08-13] Use react-native-reanimated in RIGHT_DOCKED Modals #64778
- CONFIRM - Appears only on medium / wide layouts - [Due for payment 2025-09-04] Use react-native-reanimated in CONFIRM Modals #67629
- POPOVER- Appears only on medium / wide layouts - [Due for payment 2025-08-20] Use react-native-reanimated in POPOVER Modals #67631
List of usages in the next message for better clarity.
Issue Owner
Current Issue Owner: @sonialiapMetadata
Metadata
Labels
Type
Projects
- Status
Activity
melvin-bot commentedon Jun 23, 2025
Triggered auto assignment to @flaviadefaria (
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.jmusial commentedon Jun 25, 2025
hey @mountiny, should @ZhenjaHorbach be C+ on those if willing ? He already has good context on modals ?
ZhenjaHorbach commentedon Jun 25, 2025
I don't mind 😀
107 remaining items
melvin-bot commentedon Sep 26, 2025
Payment Summary
Upwork Job
BugZero Checklist (@sonialiap)
sonialiap commentedon Sep 29, 2025
Payment summary:
ZhenjaHorbach commentedon Sep 29, 2025
Requested in ND!
flaviadefaria commentedon Oct 2, 2025
$250 approved for @ZhenjaHorbach
[-][Due for payment 2025-09-26] [$250] [Tracking] Use react-native-reanimated in the ModalComponent[/-][+][Due for payment 2025-12-16] [Due for payment 2025-09-26] [$250] [Tracking] Use react-native-reanimated in the ModalComponent[/+]melvin-bot commentedon Dec 9, 2025
The solution for this issue has been 🚀 deployed to production 🚀 in version 9.2.73-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:
react-native-modallibrary #70289If no regressions arise, payment will be issued on 2025-12-16. 🎊
For reference, here are some details about the assignees on this issue:
melvin-bot commentedon Dec 9, 2025
@ZhenjaHorbach @sonialiap The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]