React-native-navigation: [V7] White flash between iOS Launch Screen and RN screen

[alpha0010]

Issue Description

There is a white flash between iOS Launch Screen and the first loaded javascript screen. Same issue as #5432.

Steps to Reproduce / Code Snippets / Screenshots

Using waitForRender does not seem to help.

Navigation.setDefaultOptions({
  animations: {
    setRoot: {
      waitForRender: true,
    },
  },
});

---

Environment

• React Native Navigation version: 7.0.0-alpha.1
• React Native version: 0.63.2
• Platform(s) (iOS, Android, or both?): iOS (Android works fine event without waitForRender)
• Device info (Simulator/Device? OS version? Debug/Release?): iPhone 11 (13.7) simulator, debug

[mrousavy]

Experiencing the same issue on 6.12.2, debug and release. I think the animations: { setRoot } property doesn't change anything. Don't know if it was fixed in v7, but setRoot also doesn't support animations (e.g. alpha)

[danilobuerger]

Could you please try with the v7 release version? There was a change on reusing the UIWindow if already created. This could potentially have an impact here.

[alpha0010]

Updated; the white flash still exists for me.

[alpha0010]

Any updates? Do you require more information?

[guyca]

Hey @alpha0010, this will be really had to debug without a reproduction. Could you please fork the repo and reproduce in the playground app?

[alpha0010]

Here is a reproduction: https://github.com/alpha0010/react-native-navigation/tree/issue-6534

[guyca]

@alpha0010 What color is your splash screen and what's the background color of the first visible screen in your root?

[alpha0010]

In my actual app, I use #002350 for the splash screen, background color:

HomeScreen.options = function (passProps: Props): Options {
  return {
    layout: {
      backgroundColor: '#002350',
    },
    sideMenu: {left: {enabled: false}, right: {enabled: false}},
    // ...

and initial view:

<View style={{ backgroundColor: '#002350', height: '100%', width: '100%' }} />

(For the reproduction, I used #96010F.)

[guyca]

@alpha0010 ,the reproduction you submitted doesn't contain waitForRender: true. Adding waitForRender to the setRoot animation works as expected.

Navigation.setDefaultOptions({
    animations: {
      setRoot: {
        waitForRender: true
      }
    }
});

I'm keeping the issue open for now as I'm waiting for your response.

[alpha0010]

Did I apply this as intended?

diff --git a/playground/src/commons/Options.ts b/playground/src/commons/Options.ts
index 3c1c5e5bf..6a8c47f36 100644
--- a/playground/src/commons/Options.ts
+++ b/playground/src/commons/Options.ts
@@ -27,6 +27,9 @@ const setDefaultOptions = () =>
     },
     animations: {
       ...(useSlideAnimation ? slideAnimations : useCustomAnimations ? customAnimations : {}),
+      setRoot: {
+        waitForRender: true,
+      },
     },
     modalPresentationStyle: OptionsModalPresentationStyle.fullScreen,
   });

[danilobuerger]

@alpha0010 yes, thats correct. As far as I can tell from your gif there is no white flash across the whole screen but just in the content area, correct?

[mrousavy]

it would be great to have a slowed down version of that, e.g.: by recording it with your phone camera in slow-mo mode.. 🤔

[alpha0010]

Pulled it into GIMP, frame 43:

[danilobuerger]

Interesting, I can reproduce this in the playground too. Just the inner area flashes in that light grey color.

[danilobuerger]

It seems the grey flash occurs under these conditions:

| setRoot.waitForRender | = true | = false |
| --- | --- | --- |
| bottomTabs | grey flash | grey flash |
| only stack | no flash | grey flash

[alpha0010]

If it helps, the setRoot() used in our app is:

  Promise.all(promises).then((promiseResults) => {
    Navigation.setRoot({
      root: {
        sideMenu: {
          center: {
            stack: {
              children: [
                {
                  component: {
                    name: 'screens.Home',
                    passProps: {isStartUp: true},
                  },
                },
              ],
            },
          },
          right: {
            component: {
              id: 'SideMenu',
              name: 'menu.SideMenu',
              passProps: {
                lectionaryAvailable: promiseResults[0],
              },
            },
          },
        },
      },
    });
  });

[danilobuerger]

@alpha0010 Could you please try and patch rnn with the PR at #6689 and see if that fixes your issue?

[alpha0010]

It fixes it in the playground app, but not our app. Perhaps related; we do not use bottom tabs? Just a stack and a sidemenu?

[danilobuerger]

Ah ok, if you are experiencing it with a sidemenu, this is a duplicate of #6000. So I am closing this to just keep one issue open.

[danilobuerger]

Should be fixed in 7.2.0

[marcshilling]

This is still happening for me on 7.4.0 :(

I get a very quick flash of a white screen between the splash screen and my login screen:

Navigation.setDefaultOptions({
  animations: {
    setRoot: {
      waitForRender: true,
    },
  },
})
Navigation.setRoot({
  root: {
    stack: {
      children: [
        {
          component: {
            options: {
              topBar: {
                visible: false,
              },
            },
            name: 'LoginScreen',
          },
        },
      ],
    },
  },
})

And yes, I can confirm this is just in the content area. If I un-hide the topBar in my example above, I can see the bar render immediately while the content flashes white before my login screen rendering.

[marcshilling]

Seems related to #4250/#6092 and react-native-safe-area-context. If I remove the <SafeAreaProvider> around my Login component, no white flash.

CC @danilobuerger

[guyca]

@marcshilling Can you please fork the library and reproduce the issue in the Playground app? It will help us understand if there's something wrong on your end or if there's still something that needs fixing.

[marcshilling]

I think it can be chalked up to a limitation with react-native-safe-area-context, not an issue with this library. I got rid of the issue by just not using that context provider and just using <SafeAreaView> from React Native.

[mrousavy]

@marcshilling The Safe Area should just manage insets (padding), and I don't believe it has so large padding that the view is actually 0 in size at first render. If anything weird comes up again please report back

[marcshilling]

@mrousavy I can definitely reproduce it in the playground repo if you are curious