bug with @react-navigation/bottom-tabs - initial jumping and flickering

Description

When I’m using @react-navigation/bottom-tabs with the native stack navigator, the header jumps on android and sometimes flickers on iOS on tab change (on the first render only). But it doesn’t happen if I use the JS stack navigator.

I wrapped NavigationContainer with SafeAreaProvider like this:

<SafeAreaProvider initialMetrics={initialWindowMetrics}>
      <NavigationContainer>
        <RootStack />
      </NavigationContainer>
</SafeAreaProvider>

I also patched react-navigation bottoms tabs with this PR applied by @WoLewicki react-navigation/react-navigation#9772

If I remove initialWindowMetrics jump on Android is gone, but on iOS, the header is still flickering.

it maybe related to this issue

Screenshots

https://user-images.githubusercontent.com/86000012/150523094-f45c0d6d-b059-45f1-aaae-2f7441b1f0a3.mov

https://user-images.githubusercontent.com/86000012/150523458-835419ca-5f86-4762-a677-6060101566a1.mov

Steps To Reproduce

1. Open app.
2. Click on Tab2.
3. See the position of the header.

Expected behavior

the header should not jump on android and flicker on iOS(on initial render).

Actual behavior

on initial render, header jumps on Android and flickers on iOS

Reproduction

reproduction repo:

https://github.com/IvanIhnatsiuk/native-stack-bottom-jump

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.9
@react-navigation/native-stack	6.2.5
react-native-screens	3.10.2
react-native-safe-area-context	3.3.2
react-native-gesture-handler	2.2.0
react-native-reanimated	2.3.1
@react-navigation/bottom-tabs	6.0.9

[ferrannp]

@WoLewicki I also experience the iOS flicker when navigating for the first time into a tab. I can tell that:

1. It happens from any version after 3.3.0. In 3.3.0, it works
2. It only happens when your tab is a stack like here: https://github.com/IvanIhnatsiuk/native-stack-bottom-jump/blob/master/src/navigation/BottomTabNav/index.tsx#L10. If the stack is just a normal view, it does not flicker
3. You need to have some content inside your tab. Not just a text or empty content in order for this to happen

I can also confirm this issue happens after this PR https://github.com/software-mansion/react-native-screens/pull/986.

[iway1]

@ferrannp I am getting flickering when my tab navigator is nested within a stack navigator as well, and for me it only happens when the component rerenders very shortly after the component initially mounts. If no rerender happens quickly the problem does not occur

Reverted to 3.3.0 as you said, and it fixed the issue.

Is anyone working on this? Or should I just assume I need to default to version 3.3.0 moving forward to avoid this sort of thing?