Skip to content
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

V3 is laggy on Android #1017

Closed
chungweileong94 opened this issue Jul 19, 2021 · 12 comments · Fixed by #1066
Closed

V3 is laggy on Android #1017

chungweileong94 opened this issue Jul 19, 2021 · 12 comments · Fixed by #1066
Labels
Bug Something isn't working Platform: Android This issue is specific to Android Repro provided A reproduction with a snack or repo is provided

Comments

@chungweileong94
Copy link

Description

I'm using React Navigation as my app navigation library, which at the time when I installed react-native-screens it was v2. So I decided to upgrade to the v3 to test it out and notices that there is a huge lag when navigating between screens, especially for those screens that contain huge listings. I decided to test out all the versions from 2.3.0 to 3.4.0, and the lag issue only happens on 3.0.0 & above.

One of the interesting parts I found out is that, during the process of testing, after I build & install the app (with v3) on Android, I decided to downgrade to v2 to prove my findings, and I forgot to stop my metro packager before I do a yarn install, surprisingly the lag issue fixed for some reason. This means the android native-side is using v3, while the JS-side of the react-native-screens is using v2, so I'm thinking maybe there is some implementation on the JS codebase in react-native-screens causing the lag issue.

Screenshots

Steps To Reproduce

Expected behavior

Actual behavior

Snack or minimal code example

Package versions

  • React: 17.0.1
  • React Native: 0.64.2
  • React Native Screens: 3.4.0
@chungweileong94
Copy link
Author

After digging into the code changes between 2.18.1 & 3.0.0, there are not many changes except for the enabledScreen is now enabled by default. I manually disabled it in my code and it fixed the lag issue.

I think react-navigation should document this.

@WoLewicki
Copy link
Member

What exactly do you mean by a lag issue? The blinking at the start of transition? If so, it is already documented in #111 and there are solutions provided for this behavior, e.g. #111 (comment). Is there anything more we can help you with concerning this?

@chungweileong94
Copy link
Author

@WoLewicki Well, blinking is one of the issues. But my problem is mainly the frame drop during the screens transition, it's very obvious since I'm using TransitionPresets.SlideFromRightIOS.

All the solutions I found in the #111 that you mentioned only solve the blinking issue, but the frame drop issue will only get solved if I call enableScreens(false)

@WoLewicki
Copy link
Member

Ok so we would need more information to look into this issue.

  • Can you tell on what devices does the frame drop happen? Is it visible on both platforms? Does it happen only on low-end devices?
  • Do frame drops happen both when going forward and back?
  • Can you post some video and a repo with the reproduction where it can be clearly seen that when react-native-screens are disabled, the performance is better, e.g. without visible frame drops?

@chungweileong94
Copy link
Author

chungweileong94 commented Jul 20, 2021

Ok so we would need more information to look into this issue.

  • Can you tell on what devices does the frame drop happen? Is it visible on both platforms? Does it happen only on low-end devices?
  • Do frame drops happen both when going forward and back?
  • Can you post some video and a repo with the reproduction where it can be clearly seen that when react-native-screens are disabled, the performance is better, e.g. without visible frame drops?

So while I creating this repo, I do notice that it only happened if I have a FlatList (or any VirtualizedList) nested in ScrollView. I know it's not ideal for performance reason, but from the time being it's something I did for the actual RN project, where I basically have multiple horizontal FlatList & some complex layout nested in ScrollView.

demo.mp4

@WoLewicki
Copy link
Member

Thanks for all the information! Could you also post the video of how it behaves without react-native-screens switched on to compare the counter of dropped frames when navigating in the same way? The easiest way to do it will be providing detachInactiveScreens: false in here: https://github.com/chungweileong94/ReactNavigationLagDemo/blob/master/App.tsx#L113

@chungweileong94
Copy link
Author

Thanks for all the information! Could you also post the video of how it behaves without react-native-screens switched on to compare the counter of dropped frames when navigating in the same way? The easiest way to do it will be providing detachInactiveScreens: false in here: https://github.com/chungweileong94/ReactNavigationLagDemo/blob/master/App.tsx#L113

Here's the video without react-native-screens enabled.

demo_2.mp4

@jp928
Copy link

jp928 commented Jul 20, 2021

same here

@WoLewicki
Copy link
Member

One issue I can think of might be searching through all of the children at the beginning of transition due to bug with WebView. Could you check if reverting the commit that fixed that issue resolves in acceptable performance? Here is the change: https://github.com/software-mansion/react-native-screens/pull/607/files#

@chungweileong94
Copy link
Author

One issue I can think of might be searching through all of the children at the beginning of transition due to bug with WebView. Could you check if reverting the commit that fixed that issue resolves in acceptable performance? Here is the change: https://github.com/software-mansion/react-native-screens/pull/607/files#

Tried that, and still the same.

@kacperkapusciak kacperkapusciak added Platform: Android This issue is specific to Android Bug Something isn't working Repro provided A reproduction with a snack or repo is provided labels Aug 3, 2021
@github-actions
Copy link

github-actions bot commented Aug 3, 2021

Issue validator

The issue is invalid!

  • Section steps to reproduce seems to be empty(for label bug)
  • Section expected behavior seems to be empty(for label bug)
  • Section actual behavior seems to be empty(for label bug)

Ubax pushed a commit that referenced this issue Aug 20, 2021
@Ubax
Copy link
Contributor

Ubax commented Aug 20, 2021

After some digging I think I found the issue. The laggy animation was caused by asynchronous attaching and detaching fragments.
I was able to fix it using #1066 code.
One thing to note with about this PR is that it is a bit experimental change and some other bugs may occur. I you find any, please let us know.

@WoLewicki WoLewicki linked a pull request Aug 26, 2021 that will close this issue
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug Something isn't working Platform: Android This issue is specific to Android Repro provided A reproduction with a snack or repo is provided
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants