Repository navigation
Odd animation with stack 2.x when mounting / initial route #7028
Description
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.
Activity
satya164 commentedon Jan 3, 2020
Please provide a video and a repro. And mention your React Native version, Stack version and React Navigation version.
cristianoccazinsp commentedon Jan 3, 2020
Versions used:
Will make a video shortly and a repro afterwards.
cristianoccazinsp commentedon Jan 3, 2020
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 commentedon Jan 3, 2020
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 commentedon Jan 3, 2020
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 commentedon Jan 3, 2020
Here's some render profiling when this happens. I think you are right.
UPDATE: Using a fixed
safeAreaInsetsdoes not resolve the issue :(cristianoccazinsp commentedon Jan 3, 2020
By the way, why use a custom safe-area library instead of the very own RN's SafeAreaView?
satya164 commentedon Jan 3, 2020
RN's
SafeAreaViewdoesn't provide us the safe area values, and also has issues during animation where it fires too many times.I think we also need to pass
initialSafeAreaInsetsin the provider internallyfix: provide initial values for safe area to prevent blank screen
fix: provide initial values for safe area to prevent blank screen (#238)
satya164 commentedon Jan 3, 2020
Should be fixed in latest version
cristianoccazinsp commentedon Jan 3, 2020
Awesome! Thanks for the quick fix.