React-native-navigation: [v2] Adding SafeAreaView makes the screens flicker

[thinklinux]

Issue Description

When I wrap my component with SafeAreaView and I navigate around it flickers. As it's rendering the SafeAreaView after the screen is rendered.

Here is a video:

IMG_8277.TRIM.mov.zip

Steps to Reproduce / Code Snippets / Screenshots

import React, { Component } from "react";
import { Text, View, Button, SafeAreaView } from "react-native";
import { goSignUp } from "../../navigation";

export default class SignIn extends Component {
  render() {
    return (
      <SafeAreaView style={{ flex: 1, backgroundColor: "#fff" }}>
        <View style={{ flex: 1 }}>
          <Text>Sign in</Text>
          <Button
            onPress={() => {
              goSignUp();
            }}
            title="Sign up"
          />
        </View>
      </SafeAreaView>
    );
  }
}

My goSignUp function

export const goSignUp = () =>
  Navigation.setRoot({
    root: {
      component: {
        name: "SignUp"
      }
    }
  });

---

Environment

• React Native Navigation version: ^2.0.2568
• React Native version: 0.57.1
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): iPhone SE, iPhone X simulator

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[andreypaul]

Same problem...

[rendomnet]

any updates?

[azrul]

use this one, https://github.com/react-native-community/react-native-safe-area-view

[Gra55h0pper]

Same problem. Have not tried the proposed workaround suggested by @azrul yet.

[Robiullah2244]

I have also faced this issue. In my case, it's flickered when I imported SafeAreaView from 'react-native'. Then when I imported from 'react-navigation', it works fine

import { SafeAreaView } from "react-native"; --->>>import { SafeAreaView } from "react-navigation";

You can try it

[antonputra]

import { SafeAreaView } from "react-native"; --->>>import { SafeAreaView } from "react-navigation";

thanks, fixed my issue!

[nenjamin2405]

I'm facing the same problem using SafeAreaProvider from react-native-safe-area-context. If I have the SafeAreaProvider outside of the registered screen so the code snippet below will not work and have the white flash flickering during navigation.

 Navigation.push(SCREEN.testScreen, {
      component: {
        name: SCREEN.testScreen2,
        options: {
          animations: {
            push: {
              waitForRender: true,
            },
          },
        },
      },
    });
  };

My code to register screen:

  Navigation.registerComponent(
    SCREEN.testScreen2,
    () => ProviderWrapper(TestScreen2),
    () => TestScreen2,
  );

My ProvderWrapper

import React from 'react';
import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
import {SafeAreaProvider} from 'react-native-safe-area-context';

const ProviderWrapper = (Component: any) => {
  return (props: any) => (
    <SafeAreaProvider>
      <Component {...props} />
    </SafeAreaProvider>
  );
};

export default gestureHandlerRootHOC(ProviderWrapper);

If I remove the SafeAreaProvider, then the waitForRender works fine. Hi @azrul , do you have the same problem as mine when using the Provider of that library

[nthtrung09it]

@nenjamin2405 Hi, did you find a way to resolve the issue?

[nenjamin2405]

Hi @nthtrung09it, the reason why I use react-native-safe-area-context is that I wanna use const insets = useSafeAreaInsets();. But this library has a problem as I mentioned above, so I stop using it, remove the outer SafeAreaProvider and use https://github.com/Gaspard-Bruno/react-native-static-safe-area-insets instead.

[guyca]

Hey guys, I might be missing something here but what is the purpose of using react-native-safe-area-context?
If the root element is a scrollable component (ScrollView, FlatList etc.) or SafeAreaView then insets are handled for you out of the box by RNN.

[nenjamin2405]

Hi @guyca, because sometimes it's useful to know what the insets are for the top, right, bottom, and left of the screen to do some UI customization, that's why I use react-native-safe-area-context