Bug with SafeAreaProvider around Screen

[flodlc]

Hi,
To account for the bottom menu, I use a SafeAreaProvider around the screens.
The issue is that the insets are incorrect during the navigation animation (using NativeStack in my case).

Here is the result of useSafeAreaInsets when the position is wrong:
{"bottom": 0, "left": 0, "right": 0, "top": 0}.
Once the animation is complete, the insets are correct:
{"bottom": 0, "left": 0, "right": 0, "top": 59}.

I tried giving initialMetrics but they are overridden during the animation with 0.

If a don't wrap the screen with a provider, I lose the correct bottom insets in my components.

Simulator.Screen.Recording.-.iPhone.15.-.2024-11-26.at.17.08.06.mp4

[Azelesnkiy]

Same issue

[jacobp100]

Avoid using the hooks because they’re more delayed than the components

[flodlc]

Actually the issue was with the components, I gave the hook values just as an additional information

[JedrekDabrowski]

@flodlc what version are you using?

[flodlc]

I just tried with last version and it seems tom work now !

[RichardLindhout]

Wow 5.0.0 seems to (finally) fix this flickering bug

[flodlc]

@JedrekDabrowski Sorry to come back to this, but it seems the bug still persists. Version 5 significantly reduces the delay before getting the correct values, but there is still an initial render with 0 insets before the correct inset values are applied.
The delay is small enough that I initially thought it was fixed, but it causes FlashList pagination to get crazy because of the height changes, which is how I noticed it.

How does SafeAreaView differs from useSafeAreaInsets behind the scene? If it works with useSafeAreaInsets it should only work better with SafeAreaView? I miss something I guess.

[RichardLindhout]

I still see it indeed!

[flodlc]

@RichardLindhout, could you share a short video just to be sure we talk about the exact same bug ?

[JedrekDabrowski]

@flodlc I guess we are on the same page.

I were able to fix it by using zoontek/react-native-edge-to-edge with react-native-safe-area-view with lates version 4.

[RichardLindhout]

@JedrekDabrowski your library is for Android right? The issue is on iOS. I will try to make some video's next week.
For me it happens if screen is inside bottom tabs I don't use react-navigation but https://github.com/grahammendick/navigation

and it don't happens if i don't use safeareaprovider + safearea insets/view inside my bottom tab but then the bottom fab button of my app is not correctly displayed.