Application Icon appearing before the splash screen on Android

[ceopaludetto]

Minimal reproducible example

https://github.com/expo/examples/tree/master/blank

What platform(s) does this occur on?

Android

Did you reproduce this issue in a development build?

Yes

Summary

To be clear, I've added the blank project to reproducible example because any project with native build on android should trigger this issue

---

This was made by using the native build using expo prebuild with the following app.config.ts:

import type { ExpoConfig } from "expo/config";

export default {
  name: "***",
  slug: "***",
  version: "1.0.0",
  orientation: "portrait",
  icon: "./assets/icon.png",
  userInterfaceStyle: "automatic",
  ios: {
    bundleIdentifier: "***",
    supportsTablet: true,
    splash: {
      backgroundColor: "#FFFFFF",
      image: "./assets/splash.png",
      resizeMode: "contain",
      dark: {
        backgroundColor: "#000000",
        image: "./assets/splash-dark.png",
        resizeMode: "contain",
      },
    },
  },
  android: {
    package: "***",
    adaptiveIcon: {
      foregroundImage: "./assets/adaptive-icon.png",
      backgroundColor: "#ffffff",
    },
    splash: {
      backgroundColor: "#FFFFFF",
      image: "./assets/splash.png",
      resizeMode: "native",
      dark: {
        backgroundColor: "#000000",
        image: "./assets/splash-dark.png",
        resizeMode: "native",
    },
  },
},
} satisfies ExpoConfig;

The application icon appears before the splash screen on the first opening, see the video below: Screen recording.webm

This seems to be incorrect, after some investigation I found the following configuration that should be added to styles.xml in the LaunchScreen Theme:

<item name="android:windowDisablePreview">true</item>

But even manually adding this to styles.xml didn't work to me. So right now my only available solution is to use a light splash screen for both dark and light modes (which is not optimal)

Environment

  expo-env-info 1.2.0 environment info:
    System:
      OS: macOS 14.5
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 21.7.1 - ~/.local/share/mise/installs/node/latest/bin/node
      npm: 10.5.0 - ~/.local/share/mise/installs/node/latest/bin/npm
    Managers:
      CocoaPods: 1.15.2 - /opt/homebrew/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 23.5, iOS 17.5, macOS 14.5, tvOS 17.5, visionOS 1.2, watchOS 10.5
      Android SDK:
        API Levels: 33, 34
        Build Tools: 30.0.3, 33.0.1, 34.0.0
        System Images: android-34 | Google APIs ARM 64 v8a, android-TiramisuPrivacySandbox | Google Play ARM 64 v8a
    IDEs:
      Android Studio: 2023.2 AI-232.10300.40.2321.11668458
      Xcode: 15.4/15F31d - /usr/bin/xcodebuild
    Expo Workflow: bare

Expo Doctor Diagnostics

✔ Check Expo config for common issues
✔ Check package.json for common issues
✔ Check dependencies for packages that should not be installed directly
✔ Check npm/ yarn versions
✖ Check for common project setup issues
✔ Check for issues with metro config
✔ Check for legacy global CLI installed locally
✔ Check that native modules do not use incompatible support packages
✔ Check native tooling versions
✔ Check Expo config (app.json/ app.config.js) schema
✔ Check that packages match versions required by installed Expo SDK
✔ Check that native modules use compatible support package versions for installed Expo SDK

Detailed check results:

This project has native project folders but also has config plugins, indicating it is configured to use Prebuild. EAS Build will not sync your native configuration if the ios or android folders are present. Add these folders to your .gitignore file if you intend to use prebuild (aka "managed" workflow).

One or more checks failed, indicating possible issues with the project.

[ceopaludetto]

Additional context, I also tried all three resizeMode: contain | cover | native

[brentvatne]

we currently only support this style of splash screens on android in expo-splash-screen (learn more about android splash screens), but we plan to improve this in sdk 52. you can also use react-native-bootsplash instead, which provides further customization - the beta version of that library has great support for config plugins (https://github.com/zoontek/react-native-bootsplash/pull/578).

[expo-bot]

Thank you for filing this issue! This comment acknowledges we believe this may be a bug and there’s enough information to investigate it. However, we can’t promise any sort of timeline for resolution. We prioritize issues based on severity, breadth of impact, and alignment with our roadmap. If you’d like to help move it more quickly, you can continue to investigate it more deeply and/or you can open a pull request that fixes the cause.

[ceopaludetto]

Hi @brentvatne, thank you for the quick feedback, I'm actually using expo-splash-screen, to be clear I want to remove this part of the startup animation (which is the application icon):

The example that you sent from the google docs, show the gmail opening animation, which only have the splash screen itself, without the icon (which is my expected behavior). I will give react-native-bootsplash v6 a try, thanks

[Mirthis]

I've just followed the steps mentioned for using react-native-bootsplash but I'm not sure how to fully disable the expo splash screen so that it doesn't get invoked at all. At the moment due to the unlinking step mentioned I get Cannot find native module 'ExpoSplashScreen' when running my app. I'm not directly importing the expo splash screen anywhere, so I assume this is called by default. If I removed the unlinking things work but It looks like I'm getting multiple splash screens. This is using v50 of expo and v3 of expo-router.

[brentvatne]

we are working on this for sdk 52. @Mirthis - you'll have to use sdk 51 to follow those instructions for react-native-bootsplash.

[Mirthis]

we are working on this for sdk 52. @Mirthis - you'll have to use sdk 51 to follow those instructions for react-native-bootsplash.

Thanks for your answer. I did in fact switch to v51 and things are working ok now using react-native-bootsplash. Thanks!

[rahXephonz]

Hello, i see many conversation of this issue but i have question, can i use react-native-bootsplash with expo v49 @brentvatne ?

[brentvatne]

@rahXephonz - you will need to use sdk 51

[brentvatne]

@alanjhughes is working on resolving this issue in expo-splash-screen, it'll be resolved in sdk 52! we may release a canary version of expo-splash-screen with the changes so that folks can try it out in sdk 51 as well. we'll keep you updated

[luisguareschi]

Hello! Any updated on this? I dont have an android folder on my project, so I dont know how to fix this 😢

[samducker]

Just wondering if I use android.splash + ios.splash vs using the splash key in my app.config.ts/app.json will this make any difference to this issue on expo SDK 51 or it won't be resolved until SDK 52 any approx eta on that?

[luisguareschi]

@samducker from what I tested it doesnt fix the issue. But if you manage to fix it please let me know!

[waelabdrabbo]

is there any workaround to disable the default android splash screen in android v 13 and above?

[mikib0]

check this out https://github.com/expo/expo/issues/16084#issuecomment-1119733035 @waelabdrabbo

[luisguareschi]

@mikib0 but how would I do that in a expo managed workflow? I dont have those files in my project

[mikib0]

@luisguareschi Copy and paste the code below to translucent-default-splash-screen-config.js at the root of your expo project. Then insert ["./translucent-default-splash-screen-config"] to expo.plugins array in your app.json.

translucent-default-splash-screen-config.js

// Credits: https://github.com/expo/expo/issues/16084#issuecomment-1261330440

const { AndroidConfig, withAndroidStyles } = require('@expo/config-plugins');

const withSplashWindowIsTranslucent = (config) => { return withAndroidStyles(config, async (config) => { config.modResults = await configureFullScreenDialog(config.modResults); return config; }); };

async function configureFullScreenDialog(styles) { const splashScreen = styles.resources.style.find( (style) => style.$.name === 'Theme.App.SplashScreen', );

if (splashScreen) { splashScreen.item = splashScreen.item.filter( (item) => item.$.name !== 'android:windowIsTranslucent', ); splashScreen.item.push( AndroidConfig.Resources.buildResourceItem({ name: 'android:windowIsTranslucent', value: true, }), ); }

return styles; }

module.exports = withSplashWindowIsTranslucent;

[luisguareschi]

@mikib0 omg! Worked like a charm thank you so much!!

[liquidvisual]

@luisguareschi @mikib0 Heads up, I just discovered this plugin breaks native orientation behavior on Android. While it does fix the splash screen issue, for me it prevents landscape orientation from triggering.

[faker007]

@mikib0 Thanks a lot! works like charm!

[luisguareschi]

@luisguareschi @mikib0 Heads up, I just discovered this plugin breaks native orientation behavior on Android. While it does fix the splash screen issue, for me it prevents landscape orientation from triggering.

Oh, our app is only portrait, but good to know. Thanks!

[krisgerhard]

We saw some crashes on Android 8 (API 26) which were introduced after using this workaround.

[brentvatne]

another good option is to use react-native-bootsplash: https://github.com/zoontek/react-native-bootsplash?tab=readme-ov-file#with-expo

we're working on improvements to expo-splash-screen and hope to have that out soon

[singhayush1403]

Is there any way to remove expo-splash-screen from the app altogether? I have been trying to make a lottie splash screen but the expo one always shows

[ericpoulinnz]

@alanjhughes is working on resolving this issue in expo-splash-screen, it'll be resolved in sdk 52! we may release a canary version of expo-splash-screen with the changes so that folks can try it out in sdk 51 as well. we'll keep you updated

@brentvatne I will be migrating to sdk 52 in the next week, but I didn't see this in the changelog, will it still be an issue / should I implement a workaround?

[alanjhughes]

@ericpoulinnz it won't be an issue

[Nantris]

@alanjhughes what exactly is necessary to benefit? We're on SDK 52 but this problem persists.

[brentvatne]

@Nantris - see: https://expo.dev/changelog/2024/11-12-sdk-52#big-improvements-to-expo-splash-screen

in release builds the splash screen image, as described in the link above, will be used. if you don't see that, then something is misconfigured in your project. please create a new issue with a minimal repro.

[ericpoulinnz]

@brentvatne sorry probably not the right place, but you say "in release builds", does this mean in dev client I shouldn't see a splash screen?

Since updating to SDK 52 and replacing my old splash configs with the below there is no longer any splash screen showing on iOS or Android.

[
  "expo-splash-screen",
  {
    "backgroundColor": "#ffffff",
    "image": "./assets/images/adaptive-icon.png",
    "dark": {
      "image": "./assets/images/adaptive-icon.png",
      "backgroundColor": "#1B1B1F"
    },
    "imageWidth": 200
  }
],

[brentvatne]

@ericpoulinnz - that's right, currently when you reload the app from within a dev build or expo go you will not see the splash screen as configured by expo-splash-screen. the reason for that is that we would need to re-create this screen with 100% accuracy in order for it to be reliable. there isn't a native view on ios/android that we can just drop in to provide the exact same behavior. we're thinking about creating an developmentLoadingImage field or something along those lines that will allow you to control what you see there, or possibly just showing the app icon and a bit of text of our own. for now, you can use the splash key to show something and then the config from expo-splash-screen will be used for the native splash that you see on startup