-
Notifications
You must be signed in to change notification settings - Fork 2.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: [patch react-native-modal] update backdrop animation in strict mode #46830
Conversation
@allroundexperts Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
to fix the performance test.
Reviewer Checklist
Screenshots/VideosAndroid: NativeScreen.Recording.2024-08-15.at.2.19.09.AM.movAndroid: mWeb ChromeScreen.Recording.2024-08-15.at.2.18.38.AM.moviOS: NativeScreen.Recording.2024-08-15.at.2.17.22.AM.moviOS: mWeb SafariScreen.Recording.2024-08-15.at.2.09.51.AM.movMacOS: Chrome / SafariScreen.Recording.2024-08-15.at.2.05.04.AM.movMacOS: DesktopScreen.Recording.2024-08-15.at.2.09.05.AM.mov |
+ backdrop: { | ||
+ prevOpacity: prevState.backdrop.opacity, | ||
+ opacity: this.props.backdropOpacity, | ||
+ duration: this.props.backdropTransitionInTiming, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sure why you are storing the opacity value which comes from props into state. Why can't you just use it directly from props?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@allroundexperts we need to save both the prevOpacity and opacity of the backdrop, because sometime (for example onPanResponderMove
, you might want to animate to a different opacity than props.backdropOpacity
. And obviously we need to save the prevOpacity in order to build the correct animation for the backdrop. Hence this implementation.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That's fine. But instead of saving it in the state, can't you just use the usePrevious
hook? It would store the previous value in a ref which will prevent additional renders.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
react-native-modal
is written in class component style.- I don't think my approach will introduce another re-render. It updates everything in a single
this.setState
call, and it already passed the performance test. Also, it's a bit overkill to get something likeusePrevious
in this class component.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah, makes sense. I did not consider that this was a class component.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM!
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
@dominictb @allroundexperts
|
Applause QA can't test in dev environment, we will validate in staging environment then. |
🚀 Deployed to staging by https://github.com/flodnv in version: 9.0.24-0 🚀
|
1 similar comment
🚀 Deployed to staging by https://github.com/flodnv in version: 9.0.24-0 🚀
|
🚀 Deployed to production by https://github.com/marcaaron in version: 9.0.24-5 🚀
|
Details
There's a bit of change from my original proposal. I tested and figured out that declarative usage of
animation
inreact-native-animatable
works pretty well on StrictMode, so the solution is to patchreact-native-modal
to useanimation
instead oftransition
for backdrop, and convert the imperative usage to declarative usage.Fixed Issues
$ #45385
PROPOSAL: #45385 (comment)
Tests
Pre-requesite: Run the app in development mode with strict mode enabled
Verify that: the popover backdrop is gray, and the transition is smooth as in staging/prod
Offline tests
QA Steps
Pre-requesite: Run the app in development mode with strict mode enabled
Verify that: the popover backdrop is gray, and the transition is smooth as in staging/prod
PR Author Checklist
### Fixed Issues
section aboveTests
sectionOffline steps
sectionQA steps
sectiontoggleReport
and notonIconClick
)myBool && <MyComponent />
.src/languages/*
files and using the translation methodSTYLE.md
) were followedAvatar
, I verified the components usingAvatar
are working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
)Avatar
is modified, I verified thatAvatar
is working as expected in all cases)Design
label and/or tagged@Expensify/design
so the design team can review the changes.ScrollView
component to make it scrollable when more elements are added to the page.main
branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTest
steps.Screenshots/Videos
Android: Native
aweb.webm
Android: mWeb Chrome
android.webm
iOS: Native
ios.mp4
iOS: mWeb Safari
iosweb.mp4
MacOS: Chrome / Safari
web.mov
MacOS: Desktop
web.mov