React-native-screens: Flicker when navigating around

[alexandrius]

Description

When navigating back, after navigation animation is finished previous screen is shown for a moment. After it disappears. Sometimes it works fine.
See footage below

Screenshots

https://user-images.githubusercontent.com/5978212/116809884-92e34280-ab51-11eb-94d1-ee7314125ead.mov

https://user-images.githubusercontent.com/5978212/116809890-9971ba00-ab51-11eb-9ec5-a3dd267f5d94.mov

Steps To Reproduce

1. Navigate to second screen
2. Go back to previous screen

Expected behavior

Previous screen shouldn't be shown after navigating back

Actual behavior

Previous screen is shown for very short moment after navigating back

Package versions

• React: 16.13.1
• React Native: https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz
• React Native Screens: 3.0.0
• React Navigation: 4.4.4
• React Navigation Stack: 2.10.4
• React Navigation Tabs: 2.11.1
• Expo: 41.0.0

[Razorholt]

Same issue here but not as obvious. For me it happens from the drawer.

[kacperkapusciak]

Could you provide a minimal reproducible example of your issue?

[alexandrius]

Could you provide a minimal reproducible example of your issue?

I will try later today

[alexandrius]

It seems it's harder to reproduce on blank project.
At the end of the video previous page flickers for a moment
https://user-images.githubusercontent.com/5978212/117048331-e907df80-ad23-11eb-8f2e-02a32251d85f.mp4

Here's the repo
https://github.com/alexandrius/screens-flicker

[obernal]

Just in case it's helpful. We don't use Expo and have the exact same issue:

• React Native: 0.64
• React Native Screens: 3.2.0 (also tried on 2.x with same issue)
• React Navigation: 4.4.4
• React Navigation Stack: 2.10.4
• React Navigation Tabs: 2.11.1

Disabling react-native-screens stops the flicker.

[superyarik]

@obernal disabling = remove from package.json?

[obernal]

@obernal disabling = remove from package.json?

enableScreens(false) seems to be enough.

[Razorholt]

I don't know how disabling react-native-screens fixes the issue.

[obernal]

I don't know how disabling react-native-screens fixes the issue.

My comment is not meant to be interpreted as a fix but as additional information that the flicker only happens when it's enabled, confirming this is Very likely a react-native-screens issue. Or do you mean you see the flicker even after disabling it?

[Razorholt]

@obernal Thanks for the clarifications. Well yes, the flicker disappears when I disable react-native-screens. Does the latest release of screens fixes the issue? I haven't tried it since my project is using expo.

[alexandrius]

@obernal Thanks for the clarifications. Well yes, the flicker disappears when I disable react-native-screens. Does the latest release of screens fixes the issue? I haven't tried it since my project is using expo.

enableScreens(false) fixes the flicker for me as well

[RyanTG]

@alexandrius I made a snack from your repo, just in case that helps the debugging process. https://snack.expo.io/@ryantg/github.com-alexandrius-screens-flicker