White line in the top of the screen after navigate between screens

Description

When switching between screens, a white line appears at the top of the screen and also background color is flickering. This problem is solved by adding detachInactiveScreens={false} to the props navigator. However, when calling enableScreens(false), the problem remains.

Since the detachInactiveScreens prop in CardStack(react-navigation) will always be boolean (not undefined), the check is const { enabled = ENABLE_SCREENS, hasTwoStates, ...rest } = props; will never work. Therefore, enableScreens will not work as expected.

It seems to me that the bug is very similar to https://github.com/software-mansion/react-native-screens/issues/111, but this issue was created using react-navigation v.4-5 and react-native-screens v.1.0.0-alpha.22. This issue has been closed, but a similar bug still appears on both platforms.

Is it still necessary to set detachInactiveScreens for some stacks so that the animation runs smoothly?

Screenshots

IOS

https://user-images.githubusercontent.com/44681387/151158705-9718453b-b6b9-4eca-9508-9f51806868c5.mov

Android

https://user-images.githubusercontent.com/44681387/151158804-bcac9080-7f39-4a89-b18c-d763d70dd537.mp4

Steps To Reproduce

1. Tap on the “Go to second screen” button

Expected behavior

Animation should occur without a white line appearing at the top of the screen and changing the color of the header

Actual behavior

After transition white line presented in the top of the screen and header background color is flickering.

Reproduction

repo: https://github.com/RadkevichDenis/animation_bug

Platform

• iOS
• Android
• Web
• Windows
• tvOS

Workflow

• Managed workflow
• Bare workflow

Package versions

package	version
react-native	0.66.4
@react-navigation/native	^6.0.6
@react-navigation/native-stack	-
react-native-screens	~3.10.2
react-native-safe-area-context	^3.3.2
react-native-gesture-handler	^1.10.3
react-native-reanimated	2.3.1
expo	-

[kirillzyusko]

I just realized that, regarding the issue details, this error does happen on stack but not on native-stack? If yes, thats the wrong repo, isn’t it?

Maybe, but the boundaries of this issue are blurred 🙈 The functionality of the stack is toughly related to react-native-screens and honestly I don’t know, where this issue should live. Just technically stack simply uses components from this library. If they use it in incorrect way, then of course the issue should be moved to react-navigation repo, but for me it seems like react-navigation do it right. Though it’s only my opinion, feel free to correct me 🙂

[WoLewicki]

Unfortunately I don’t know. If you don’t spot any new issues with the decreased value, you can submit a PR with such a change.