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

[IvanIhnatsiuk]

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

Screen.Recording.2022-01-21.at.14.10.59.mov

ScreensFlickering.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

[WoLewicki]

Can you explain why this SafeAreaProvider at the top is needed?

[IvanIhnatsiuk]

@WoLewicki Yes, sure.
We use the insets from SafeAreaProvider in our project, if you remove it, the flickering problem is still on iOS.

[WoLewicki]

I was asking since it is already applied in native-stack: https://github.com/react-navigation/react-navigation/blob/e9c690450068d29a2ce62004992ad75d626ca0c2/packages/native-stack/src/views/NativeStackView.native.tsx#L322 so it may be causing some problems with layout. As for the flickering, does the whole content flicker or is it just the header? It is not visible when you have white background 😅

[IvanIhnatsiuk]

Sorry, in official react-navigation they suggest to wrap entire app in a SafeAreProvider : https://reactnavigation.org/docs/handling-safe-area/
But they also have SafeAreaPrivederCompat: https://github.com/react-navigation/react-navigation/blob/main/packages/stack/src/views/Stack/StackView.tsx#L430
And Js stacks are not flickering/jumping 🤔 Am I doing something wrong?
Video with non-white color is attached:

Screen.Recording.2022-01-21.at.16.24.59.mov

[IvanIhnatsiuk]

@owinter86
Thank you for your research of the problem!
I tried the solution of wrapping each tab element in SafeAreaProvider.
Unfortunately, it doesn't solve the problem with flickering on iOS 😞 .
Also, it doesn't always help on android, sometimes the screen jumps on the initial render 😞 .
I think the author of this issue also tried it because he described it in the description.
Also, I didn't find any information about wrapping each tab element in the documentation. I think that the application should have only one SafeAreaProvider and it should already contain all the metrics that the native Stack and JS Stack use.
Anyway, It might be a good vector to find a problem, Thanks!

[vladyslavNiemtsev]

I'm also expecting this issue on Android.

My content jumps, flickering and hides behind the header.
Do you have any updates here?

[a-eid]

@WoLewicki are u suggesting that when using the native-stack there is no need to wrapping your entire app in a SafeAreaProvider ?

[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 #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?