Flicker in the middle of navigation animation

[gunnartorfis]

When navigating to a new screen, a short flicker/jump appears.
I am using SafeAreaProvider wrapped around the rest of my app and then using SafeAreaView at the root of my screens.

Screen.Recording.2021-10-20.at.21.10.08.mov

• react-native: 0.66.1
• react-native-safe-area-context: 3.3.2
• @react-navigation/stack 6.0.11
• @react-navigation/native-stack: 6.2.5
• @react-navigation/native: 6.0.6
• iOS: 15, iPhone 13
• macOS 11.6 (Big Sur)
• Macbook Pro 13" M1

[tommycarpi]

I managed to fix it by using useSafeAreaInsets and <View> instead of <SafeAreaView>

const insets = useSafeAreaInsets();

<View
      style={{
        paddingTop: insets.top,
        paddingBottom: 0,
        paddingLeft: insets.left,
        paddingRight: insets.right
      }}>
</View>

[neiker]

Seems to be a bug on native implementation only:
https://github.com/th3rdwave/react-native-safe-area-context/blob/main/src/SafeAreaView.native.tsx

Importing web implementation works like expected on native
https://github.com/th3rdwave/react-native-safe-area-context/blob/main/src/SafeAreaView.tsx

[federicogomezlara]

I managed to fix it by using useSafeAreaInsets and <View> instead of <SafeAreaView>

const insets = useSafeAreaInsets();

<View
      style={{
        paddingTop: insets.top,
        paddingBottom: 0,
        paddingLeft: insets.left,
        paddingRight: insets.right
      }}>
</View>

I took the same approach, it works perfectly, just as Safe Area View should by default

[m-sterspace]

For the lazy here's a fully fleshed out alternative component:

SafeAreaViewFixed.tsx

import React, { ReactNode } from 'react';
import { StyleProp, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
import { Edge, useSafeAreaInsets } from 'react-native-safe-area-context';

type Props = {
  children: ReactNode;
  style?: StyleProp<ViewStyle>;
  edges?: readonly Edge[] | undefined;
} & ViewProps;

/**
 * USE THIS - Alternative to the default [SafeAreaView](https://github.com/th3rdwave/react-native-safe-area-context#safeareaview)
 * from react-native-safe-area-context which currently has an issue that will cause a flicker / jump on first render on iOS / Android.
 *
 * [SafeAreaProvider](https://github.com/th3rdwave/react-native-safe-area-context#safeareaprovider) should still be higher in the tree.
 *
 * GitHub issues:
 * [219](https://github.com/th3rdwave/react-native-safe-area-context/issues/219),
 * [226](https://github.com/th3rdwave/react-native-safe-area-context/issues/226)
 */
export default function SafeAreaViewFixed({ children, style, edges, ...rest }: Props) {
  const insets = useSafeAreaInsets();
  const defaultEdges = edges === undefined;
  return (
    <View
      style={StyleSheet.compose(
        {
          paddingTop: defaultEdges || edges?.includes('top') ? insets.top : undefined,
          paddingBottom: defaultEdges || edges?.includes('bottom') ? insets.bottom : undefined,
          paddingLeft: defaultEdges || edges?.includes('left') ? insets.left : undefined,
          paddingRight: defaultEdges || edges?.includes('right') ? insets.right : undefined,
        },
        style,
      )}
      {...rest}
    >
      {children}
    </View>
  );
}

[jamonholmgren]

@m-sterspace Thanks -- your code fixed a long-standing issue in the new GasBuddy RN app. It'll impact millions. :-)

(And thanks to @tommycarpi for finding the original solution of course.)

[varunvasudeva1]

@tommycarpi Had this issue for months now and nothing I tried seemed to fix it, except this - thanks a ton!

[jacobp100]

This is documented in the readme

[wouterds]

Can't we adopt the component by @m-sterspace into the actual package? Why ship a SafeAreaView that doesn't properly work?

[jacobp100]

The safe area view component does work. The hooks have a documented delay we can’t work around yet

[mleister97]

@jacobp100 I am still facing the flickerin issues in end 2023. The solution of @m-sterspace works for me, thank you so much. There is currently no other solution working for me (tested on Android 10)

[MaratSHU]

Hi! I catch similar issue on adding autofocus to TextInput on ios (didn't check on android yet). So I prepare two screens and on second screen add <TextInput autoFocus/>. On navigating to second screen it cause flickering. Turning off autofocus - works as expected.

[JClackett]

Still have this issue, using the hook and apply styles manually stops it

[badaz]

I've been struggling with this issue for some months now. What I don't understand is that using SafeAreaView from this lib used to work built in and without this flicker problem. I've first encountered the problem when migrating to RN 0.72 I think but I can not really assert who is faulty, this lib? react-native? my nav lib (RNN wix)? When reading this issue it seems the problem comes from this lib, however I tried downgrading it, although staying on RN 0.72, but it did not solve the problem for me. So what has changed?

[gkpo]

Also still have this issue. I had to use @m-sterspace 's fixed component. Not ideal but will do the trick for now.
Any ideas why this could be happening ? Any fixed planned ?

[melyux]

Can you reopen this @jacobp100?