V3 is laggy on Android

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

[github-actions[bot]]

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)

[chungweileong94]

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.

https://user-images.githubusercontent.com/15154097/126345468-2da782ca-5389-4c38-ba7c-3a0b5d035b72.mp4