react-native-safe-area-context

react-native-safe-area-context copied to clipboard

Scenes： When I use SafeAreaInsetsContext.Consumer to deal with safe screen issues. When my application enters the task management interface, it will flicker when it comes back。

reason： Can't get the value of insets?.top in time

Source code：

<SafeAreaInsetsContext.Consumer> {insets => <View style={{ flex: 1, // Delayed acquisition paddingTop: insets?.top ?? 0, backgroundColor: '#fff', overflow: 'hidden' }}> // main content </View> } </SafeAreaInsetsContext.Consumer>

How to solve it？ thanks

I am experiencing this issue as well. @AKclown did you find a solution?

I get a very noticeable flicker from using SafeAreaView with edges={['top']}. Is this expected? I'm a bit confused. I have the provider at the root of my app too.

I am also seeing this issue (in the context of supplying a custom header component to a screen in React Navigation v6). Strangely, despite it going against the performance recommendations in this project's readme, I found the following comment helpful. Using useSafeAreaInsets and manually applying the padding to my custom header does not [so far] show the same flicker.

Is it still a problem? Is it worked on or the issue is detected?

Getting this issue with edges={['bottom']}. It seems to happen specifically when there is an immediate rerender of the screen. I just add a setTimeout(0, ()=>{//dostuff}) as a hack to fix it but it's pretty frustrating. Idk why SafeAreaView can't just have the correct padding the first time it renders. I even set initialWindowMetrics on the provider.

This is documented in the readme