Translucent StatusBar causes flicker on render heavy screens

[vasafix]

Translucent StatusBar causes useSafeAreaInsets to return incorect values causing flicker

reprepo with bug example: https://github.com/vasafix/translucent-status-bar-bug

video example:

react-native: 0.67.1 react-native-safe-area-context: 3.3.2

[HenrikZabel]

@vasafix did you manage to fix it? If yes, could you share how you did it?

[vasafix]

@HenrikZabel We hardcoded the top inset value, as most Android status bars are about 24px tall, this was not the best solution but was sufficient enough for our use-case.

I Just tested this with react-native-safe-area-context version 4.0.1 and it seems, that I am reliably getting top inset value every time, so I guess its time to do this the proper way :)

One major change we did, since I reported this bug, was to use @react-navigation/stack instead of @react-navigation/native-stack, you could give this a try if you are experiencing this bug even on the latest version of react-native-safe-area-context

[sujan-york-ie]

worked for me if I try to set the translucent in StatusBar using StatusBar.setTranslucent(true);