Splash screen jumps on initial load (android prebuild)

[jjenzz]

Summary

moving this from expo/router#240

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.

Note: this does not happen in managed workflow

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.

What platform(s) does this occur on?

Android

Environment

  expo-env-info 1.0.5 environment info:
    System:
      OS: macOS 12.5.1
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 18.7.0 - ~/.nvm/versions/node/v18.7.0/bin/node
      Yarn: 1.22.19 - ~/.nvm/versions/node/v18.7.0/bin/yarn
      npm: 8.15.0 - ~/.nvm/versions/node/v18.7.0/bin/npm
      Watchman: 2022.12.12.00 - /opt/homebrew/bin/watchman
    Managers:
      CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
    IDEs:
      Android Studio: 2021.2 AI-212.5712.43.2112.8815526
      Xcode: 14.2/14C18 - /usr/bin/xcodebuild
    npmPackages:
      expo: ~47.0.12 => 47.0.13 
      react: 18.1.0 => 18.1.0 
      react-dom: 18.1.0 => 18.1.0 
      react-native: 0.70.5 => 0.70.5 
      react-native-web: ~0.18.7 => 0.18.12 
    npmGlobalPackages:
      eas-cli: 2.1.0
      expo-cli: 6.0.8
    Expo Workflow: bare

Minimal reproducible example

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

[george-thomas-hill]

I have encountered this, too.

[Edmundoacosta]

I have the same issue :(

[matuskropuch]

Same issue here

[pleopardi]

Same here.
Can't use the StatusBar component from expo-status-bar to handle it because it happens before the JS code takes over.

[ChromeQ]

I am also experiencing this issue and is very prominent on a "real world" app, I also assumed this has to do with the status bar but yet to have the time to investigate and test properly but good to know from @pleopardi I may be wasting my time on that!

An expo sdk fix would be preferred

[pleopardi]

From what I read in other issues, it's probably some configuration to add in styles.xml, but I couldn't figure it out yet.

The "jump" happens the moment the status bar is displayed while the splash screen is still visible.

[kurucaner]

This solution worked for me: I removed the expo-status-bar from my project and I added the following properties to app.json

{
expo: {
    "androidStatusBar": {
      "barStyle": "light-content",
      "backgroundColor": "#060047",
      "translucent": true
    },
  }
}

[ChronoByteCosmonaut]

Same here, hope this gets fixed soon!!

[ChronoByteCosmonaut]

This solution worked for me: I removed the expo-status-bar from my project and I added the following properties to app.json

{
expo: {
    "androidStatusBar": {
      "barStyle": "light-content",
      "backgroundColor": "#060047",
      "translucent": true
    },
  }
}

This is a good solution but makes the statusbar semi-transparent.

[nelsonyang0710]

This solution worked for me: I removed the expo-status-bar from my project and I added the following properties to app.json

{
expo: {
    "androidStatusBar": {
      "barStyle": "light-content",
      "backgroundColor": "#060047",
      "translucent": true
    },
  }
}

This is a good solution but makes the statusbar semi-transparent.

the same issue happens here and I can't make the status bar to transparent even set the background color to #00000000..

[TheEndurance]

Are there any solutions to this other than uninstalling the expo-status-bar package?

[cavemon]

This solution worked for me: I removed the expo-status-bar from my project and I added the following properties to app.json

{
expo: {
    "androidStatusBar": {
      "barStyle": "light-content",
      "backgroundColor": "#060047",
      "translucent": true
    },
  }
}

@TheEndurance We followed this solution above and it seems to have worked. The status bar on Android appears a bit different, but the splash screen logo no longer jumps and we didn't uninstall anything.

[techgerm]

Is anyone else having trouble uninstalling expo-status-bar? 🙃

Our expo app is inside an Nx monorepo and I've:

1. Uninstalled expo-status-bar
2. Removed all references to expo-status-bar including "expo-status-bar": "*"
3. Cleared bundler caches by following these instructions

And I'm still seeing this when I try to build android:

[ChromeQ]

@techgerm Maybe something else is installing it as a dependency. Can you show us the output of the following command:

npm ls expo-status-bar

[techgerm]

hmm yeah that was my first intuition so I checked our yarn.lock to see if it was included in any other dependencies and nothing found 😕

here's the output of npm ls expo-status-bar:

[AndreiRadchenko]

This is my thoughts about this issue.
If you call StatusBar.setTranslucent(true) while SplashScreen visible, SplashScreen leaps. If you call it when app screen is visible — app screen will leap.
To address this issue, I tied the event of adjusting StatusBar to the moment one frame before SplashScreen is replaced by app screen. I've sat SplashScreen "resizeMode": "cover", so SplashScreen image gets a bit enlarged before it disappears. Something like one frame animation. And it looks better than layout leap when StatusBar become translucent on SplashScreen or app screen.

App.js

const onLayoutRootView = useCallback(async () => {
  if (fontsLoaded) {
    await delay(
      () =>
        StatusBar.pushStackEntry({
          barStyle: 'dark-content',
          translucent: true,
          animated: true,
          backgroundColor: 'transparent',
        }),
      2000 // 2 sec delay for loading and render data
    );
    delay(SplashScreen.hideAsync, 33); // hide SplashScreen one frame after StatusBar gets translucent
  }
}, [fontsLoaded]);

if (!fontsLoaded) {
  return null;
}

I make use of delay function for delayed execution of callback passed to it.

delay.js

export const delay = (fun, timeout) =>
  new Promise((resolve) => setTimeout(resolve, timeout))
    .then(fun)
    .catch((e) => console.log(e.message));

[brentvatne]

related: #28528

[buildnewapp]

Because expo-router is used,i can't remove expo-status-bar; Are there any other good solutions?

The causes of startup graph jitter are:
SplashScreen.preventAutoHideAsync();
setTimeout(SplashScreen.hideAsync, 2000);

The easiest way is not to call SplashScreen.preventAutoHideAsync, is there any other component or method to delay the start screen?