Odd animation with stack 2.x when mounting / initial route

[cristianoccazinsp]

I'm using a single component (without any navigator) for one screen (login) and another one for the whole app. Basically, {session ? <Navigator/> : <CustomComponent/>}.

The above worked fine with 1.x, the custom component would unmount and the navigator would mount seamlessly. Now, with 2.x, there's a visible delay for the navigator to mount and a the app's background can be seen for half a second. This looks quite awkward to the user. What changed? I really don't want to put this other screen in the navigator.

Note: Both android and iOS.

Update: The issue is worse than I thought. The component's initial render is so slow that even rendering it right away on app start shows the app's background/black/white screen, pretty much overwriting any splash screen that might be there before.

[satya164]

Please provide a video and a repro. And mention your React Native version, Stack version and React Navigation version.

[cristianoccazinsp]

Versions used:

"react": "16.12.0",
"react-native": "0.61.5",
"react-navigation": "4.0.10",
"react-navigation-stack": "2.0.2",
"react-native-reanimated": "1.4.0",
"react-native-screens": "2.0.0-alpha.22",
"@react-native-community/masked-view": "0.1.5",
"react-native-safe-area-context": "0.6.2"

Will make a video shortly and a repro afterwards.

[cristianoccazinsp]

Here are the videos. I have used a slow device for demonstration purposes.

This one is with the 1.x version:
https://zinspectordev2.s3.amazonaws.com/usi/2/157806122137f5cfd855e046bf851c383e51ba3e7e.mp4

After the upgrade, this is what happens. Why so slow? Can we show a placeholder at least? It's really bad, and the same happens when booting up the app right away with the navigator (instead of the login screen)
https://zinspectordev2.s3.amazonaws.com/usi/2/15780611845074101110e74c1cbff830d03f610c38.mp4

[satya164]

I think the delay is related to https://github.com/th3rdwave/react-native-safe-area-context taking time to report safe area insets.

I'll try to add some initial value to avoid this delay.

cc @janicduplessis it'll be really great if we could expose default values in a constant

[cristianoccazinsp]

Can we bypass it if we manually set insets to 0? My custom header/body from native-base already handle all insets so this is extremely redundant for my use-case.

[cristianoccazinsp]

Here's some render profiling when this happens. I think you are right.

UPDATE: Using a fixed safeAreaInsets does not resolve the issue :(

[cristianoccazinsp]

By the way, why use a custom safe-area library instead of the very own RN's SafeAreaView?

[satya164]

RN's SafeAreaView doesn't provide us the safe area values, and also has issues during animation where it fires too many times.

Using a fixed safeAreaInsets does not resolve the issue

I think we also need to pass initialSafeAreaInsets in the provider internally

[satya164]

Should be fixed in latest version

[cristianoccazinsp]

Awesome! Thanks for the quick fix.