Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Flicker caused by SafeAreaInsetsContext

See original GitHub issue

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

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:5

Top GitHub Comments

7reactions

nandorojocommented, Apr 15, 2021

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.

1reaction

cwhenderson20commented, Apr 26, 2021

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.

Top Results From Across the Web

Developers - Flicker caused by SafeAreaInsetsContext -

Scenes： When I use SafeAreaInsetsContext.Consumer to deal with safe screen issues. When my application enters the task management interface, ...

A Flexible Way to Handle Safe Area insets In JS - Morioh

useSafeAreaInsets offers more flexibility, but can cause some layout flicker in certain cases. Use this if you need more control over how insets...

node_modules/react-native-safe-area-context - Gitlab IDI

useSafeAreaInsets offers more flexibility, but can cause some layout flicker in certain cases. Use this if you need more control over how ...

SafeAreaContext - Expo Documentation

import { SafeAreaView, SafeAreaProvider, SafeAreaInsetsContext, useSafeAreaInsets, initialWindowMetrics, } from 'react-native-safe-area-context';.

D.P.F Delphi Android Native Components - OSCHINA

... more flexibility, but can cause some layout flicker in certain cases. ... width: number, height: number } SafeAreaInsetsContext React Context with the ......