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	-

Reproduce the transition with the linked animation_bug repository on both iOS and Android. Start by tracing CardStack handling of detachInactiveScreens and the enableScreens(false) entry point, then compare the transition behavior with the reported package versions. Done means the navigation animation no longer shows a white line or flickering header background without requiring detachInactiveScreens={false}.