Fix Page Animations

[parasharrajat]

Please review.

Details

Details can be read #2335 (comment)

Fixed Issues

Fixes #2335

Tests / QA Steps

1. Click the search icon to open the Search Modal.
2. Open all the available models from the FAB button.
3. Open the User Details / Group participants modal.
4. Open the User Settings Modal.
5. For all the modals enter and exit animation should be smooth and consistent.

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

animation.mp4

Mobile Web

animation-mWeb.mp4

Desktop

animation-des.mp4

iOS

Not able to record it as I have MAC VM but the animation on IOS works smoothly.

Android

1620411237903.mp4

[parasharrajat]

@marcaaron I finally get the chance to look at it. But it seems transitionEnd is only affecting our codebase. I created a snack here https://snack.expo.io/@rajat_parashar/reactnav5-stack-navigator. but It seems to work fine. Check the Settings page.
Next step would be to break our navigation and then try to find the core issue.

[marcaaron]

But it seems transitionEnd is only affecting our codebase?

Can you elaborate on this some more? The snack you shared doesn't use the drawer navigator, doesn't have animations enabled, etc. So I'm not getting what it proves. Thanks!

[parasharrajat]

Oh, Yeah. I checked somewhere the issue is linked with StackNavigator. but let me try to completely mimic the code first and grab more intel on it. 🕵️

[parasharrajat]

@marcaaron I have not found any strong reason why its not working on IOS. But it seems this could be it software-mansion/react-native-screens#713.

I have another solution here. We can use InteractionManager for the Native devices. I have gone through the codebase and it works as expected with transitionEnd for our case.

In short, InteractionManager for native devices and transitionEnd for Web,desktop,m-web.

Please let me know, what should be the best away forward here. Thanks.

[marcaaron]

Ok. That seems fine to me, but it would be nice if we can avoid creating two separate ScreenWrapper components - maybe we can create something like this...

.
└── libs/
    └── onScreenTransition/
        ├── index.js
        └── index.ios.js

this.unsubscribeScreenTransitionHandler = onScreenTransition(navigation, this.callback);

componentWillUnmount() {
    this.unsubscribeScreenTransitionHandler();
}

I think if we go this route we should also create a new issue to track this open issue so we can clean up the exception made for iOS.

[parasharrajat]

Yeah, I was planning to create a common event listener instead of ScreenWrapper. Thanks for directions.
I will create the follow up issue as well

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[marcaaron]

Just leaving a couple follow up comments.

[marcaaron]

listener to Navigation state.

[marcaaron]

Why Str.result() vs navigation.addListener('transitionEnd', callback) ?

[parasharrajat]

Just to skip the test if callback is present. But yeah we can jus pass the callback directly.

[parasharrajat]

I will add these in a new PR.

[parasharrajat]

dropped a PR #3228. Thanks.