[v1.0.0-rc3] Splash screen jumps on initial load (android prebuild)

[jjenzz]

Summary

when moving to prebuild (npx expo prebuild) from a fresh install (npx create-react-native-app -t with-router) the splash screen will jump up for one frame on android during app load. it also still occurs when upgrading to 1.0.0-rc3.

you can slow the following video frame-by-frame to see what i mean:

CleanShot.2023-01-31.at.14.22.06.mp4

the two frames where the jump occurs (i've drawn a redline to highlight the difference in position):

while it is hard to catch this with the naked eye in this demo, the jump is much more prominent in our real-world app that takes a little longer to load.

i'm not entirely sure if this is a router issue or more generic expo issue so happy to move it to the correct place if there is somewhere more suitable.

Minimal reproducible example

https://github.com/jjenzz/expo-splash-jump

[EvanBacon]

It's most likely not an Expo Router issue. I'd imagine the problem is related to the status bar being "translucent" (ie. position: absolute), this causes the quick shift upward. https://docs.expo.dev/versions/latest/config/app/#translucent

[jjenzz]

to clarify, this issue doesn't occur in a managed workflow, simply moving from managed to bare introduces it afaict.

i have not rendered a StatusBar component anywhere in linked source and haven't configured one in app.json so i am curious what difference moving to prebuild could have here? does it make the status bar translucent?

EDIT: i've recreated this issue in the expo repo as it sounds like that is a more suitable place for it. lmk if not :)

[EvanBacon]

@jjenzz you can try removing the StatusBar component that is rendered in Expo Router but it should be benign.

There is no bare/managed anymore (we need to improve our docs on this). "Managed" is now bare + prebuild. You can either manually run prebuild, or use EAS Build which runs prebuild to generate the native code required for building meaning there should be virtually no difference (outside of minor build-time changes in Expo Go).

The previous "managed workflow" would embed the JS in a shell application which would never match the "bare workflow" variation, we fully removed this by migrating to EAS Build.

[jjenzz]

i am perhaps confusing things by using the wrong terminology in that case, apologies. but what i mean is that npx create-react-native-app -t with-router and then npm run android does not have the issue, but as soon as i run npx expo prebuild to create the ios and android folders, an npm run android will have this issue.

thanks for the status bar suggestion, i will give that a try.

[matuskropuch]

For me, removing the StatusBar as you have suggested fixes the jump.

[andreavrr]

Other solutions without hiding the status bar?