search

th3rdwave / react-native-safe-area-context

A flexible way to handle safe area insets in JS. Also works on Android and Web!
MIT License
2.13k stars 195 forks source link

Translucent StatusBar causes flicker on render heavy screens #234

Open vasafix opened 2 years ago

vasafix commented 2 years ago

Translucent StatusBar causes useSafeAreaInsets to return incorect values causing flicker

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

video example: p2P6

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

HenrikZabel commented 1 year ago

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

vasafix commented 1 year ago

@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 commented 4 months ago

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