Play store Warning - "Double SplashScreen"

[delphinebugner]

Bug summary

Hi 👋 This is not exactly a bug, the library works fine for me 🎉 But we just received a compatibility warning on Google Play Store, and I would like to know wether I should worry or not, before pushing the library update in production!

We updated the lib one month ago to version 5.0.2 (before we used 3.2.5 - made the update along the update to react-native 0.72.4) ; splashscreen was working fine in staging ; yesterday we pre-submitted the app on the Play Store, and received the warning:

"Android compatibility issues
Double splash screen
Warning : The crawler detected a blank loading screen or a custom splash screen that is shown in your app after the system splash screen. Users launching your app on Android 12 or higher will see two splash screens.

Learn More"

I tested on Android 12 and 13 and I do not see a double splash screen, can we just ignore the warning by google? is it because Android do not identify the polyfill used in version 5 of the lib?... We read the Release note!

Hope this would help other people who might receive the same warning!

Library version

5.0.2

Environment info

System:
  OS: macOS 13.4.1
  CPU: (10) arm64 Apple M2 Pro
  Memory: 190.25 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 16.19.1
    path: ~/Library/Caches/fnm_multishells/1057_1697009980395/bin/node
  Yarn:
    version: 1.22.19
    path: /opt/homebrew/bin/yarn
  npm:
    version: 8.19.3
    path: ~/Library/Caches/fnm_multishells/1057_1697009980395/bin/npm
  Watchman:
    version: 2023.03.20.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods: Not Found
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 22.4
      - iOS 16.4
      - macOS 13.3
      - tvOS 16.4
      - watchOS 9.4
  Android SDK: Not Found
IDEs:
  Android Studio: 2022.1 AI-221.6008.13.2211.9514443
  Xcode:
    version: 14.3/14E222b
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 11.0.18
    path: /opt/homebrew/opt/openjdk@11/bin/javac
  Ruby:
    version: 3.1.0
    path: /Users/delphinebugner/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.4
    wanted: 0.72.4
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Steps to reproduce

1. Android Only
2. Device used by google in its test:
   
3. Not reproduced locally (example of devices used : V2027 x Android 12 / Xiaomi 11 x Android 13)

Reproducible sample code

// MainActivity.java -> iso doc

    // @splashscreen - see https://github.com/zoontek/react-native-bootsplash/blob/4.7.5/README.md
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        RNBootSplash.init(this, R.style.BootTheme); // ⬅️ initialize the splash screen
        super.onCreate(null); // null because we use react-native-screens
    }

// styles.xml -> iso doc
<resources>

    <!-- Base application theme. For video player theme needs to be coming from material components-->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
        <item name="android:statusBarColor">@color/bootsplash_background</item>
    </style>

    <!-- BootTheme should inherit from Theme.BootSplash or Theme.BootSplash.EdgeToEdge -->
    <style name="BootTheme" parent="Theme.BootSplash.EdgeToEdge">
        <item name="bootSplashBackground">@color/bootsplash_background</item>
        <item name="bootSplashLogo">@drawable/bootsplash_logo</item>
        <item name="bootSplashBrand">@drawable/bootsplash_brand</item>
        <item name="postBootSplashTheme">@style/AppTheme</item>
    </style>

</resources>

// AndroidManifest -> iso doc   
<application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/BootTheme"
      tools:replace="android:allowBackup"
      android:networkSecurityConfig="@xml/network_security_config">

[zoontek]

Hi @delphinebugner 👋

This is a weird warning, since even if v5 does not use AndroidX core-splashscreen, it uses SplashScreen API. IMHO this is a false positive. I think @vcaen is in charge of this API at Google, maybe I could give us more insights?

[vivekm-remitly]

@zoontek Thanks for looking into it. We are observing something similar after upgrading the library from 3.x to 5.0.3.

• On initial app launch: we observe only 1 splash screen ie. intended behavior
• On relaunch (There's mechanism in our app to relaunch the app (eg. language picker)): We observer a double splash screen ie. the logo from the initial splash screen disappears after a few seconds and then apparently the second splash with a logo appears for split second before the home page loads. On 3.x this is not reproducible.

I will try and see if i can build a repro app for the same. Also, apologies if the two issues look unrelated to you.

[zoontek]

On relaunch (There's mechanism in our app to relaunch the app (eg. language picker))

Can you share how it's performed?

[vivekm-remitly]

@zoontek Our app has a @ReactMethod that finishes the main activity and restarts it.

currentActivity?.finish()
reactApplicationContext.startActivity(intent)
Runtime.getRuntime().exit(0)

I am trying to investigate whether there's some issue in this logic that's causing the double splash to show up for us.

[zoontek]

@vivekm-remitly If the activity onCreate is called, BootSplash.init will be called too, so that's normal 🤷🏻‍♂️

[delphinebugner]

@zoontek for information, we still have the warning on the play store today, for our latest version !

Here's the video provided by Google for the issue:

So we still do not see what they are talking about, both in their video, on production and on test ; we always see only one splashscreen 🤷‍♀️ did Vadim Caen provide any insights?

The only thing I can thing of is a tiny resolution glitch: after ~half a second (depends on the device) the logo of splashscreen becomes sharper than the initial one. Is this something expected from the lib - and could it be related?
Here's a video:
https://github.com/zoontek/react-native-bootsplash/assets/67843879/f217f7f2-f45e-47f1-983b-e78321a6506c

[zoontek]

@delphinebugner No, Google plays dead on this (even on their issue tracker 🤷🏻‍♂️)

Unfortunately, the logo sharpnest change is "normal". As the point of this API is to start the app as quick as possible, a part of this process is handled by the system, as your app hasn't booted yet.

The system shows the splash screen using themes and any animations that you define.

During this step, the logo is not super sharp, and the system bars are transparents

Then when the app starts (your Activity appeared), the logo is sharper and the system bars respect what you defined in your styles.xml

More infos

[delphinebugner]

Thanks @zoontek, it's very clear! And nice to understand what's happening, Android's lifecycle is tricky indeed ; most important is there's no bug here in our app!

[reepush]

@delphinebugner @zoontek I added svg app icon in Android Studio and logo became sharp.

Plus this change in styles.xml:

<style name="BootTheme" parent="Theme.BootSplash.EdgeToEdge">
     <item name="bootSplashBackground">@color/bootsplash_background</item>
-    <item name="bootSplashLogo">@drawable/bootsplash_logo</item>
+    <item name="bootSplashLogo">@drawable/ic_launcher_foreground</item>
     <item name="postBootSplashTheme">@style/AppTheme</item>
     <item name="android:navigationBarColor">@android:color/black</item>
     <item name="android:statusBarColor">@android:color/black</item>
     <item name="darkContentBarsStyle">false</item>
+    <item name="android:windowSplashScreenAnimatedIcon"></item>
</style>

[zoontek]

I didn't tried it, but pretty sure the last line is useless + you can generate a specific vector drawable for bootSplashLogo (not particularly similar to the app icon), as it uses standard Android behind.

It's just that the CLI doesn't currently support vector as it would means fork and ship vector-to-drawable with this library.

[reepush]

@zoontek I'm testing on Samsung M12 (Android 13, One UI 5.1).

I appreciate if you could check this res folder on your device.

[zoontek]

@reepush Don't use webp, use https://developer.android.com/develop/ui/views/graphics/vector-drawable-resources

[reepush]

@zoontek All these files were created using latest Android Studio Hedgehog. I provided only svg icon and webp format was set by default.

[zoontek]

@reepush Not if you try to add a vector asset:

But it has no impact, the frame rendered on the system thread will continue to be a little bit blurry.

If you want an example, copy / paste the vector version of the example app logo in it (example/android/app/src/main/res/drawable/vector_bootsplash_logo.xml):

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="288dp"
    android:height="288dp"
    android:viewportWidth="288"
    android:viewportHeight="288">
  <path
      android:pathData="M176.22,127.84a67.07,67.07 0,0 0,-3.22 -1.01c0.18,-0.74 0.35,-1.48 0.5,-2.2 2.44,-11.83 0.84,-21.36 -4.6,-24.5 -5.22,-3.01 -13.75,0.13 -22.36,7.63a67.23,67.23 0,0 0,-2.49 2.29,58.37 58.37,0 0,0 -1.66,-1.53c-9.03,-8.02 -18.08,-11.4 -23.52,-8.25 -5.21,3.02 -6.76,11.98 -4.56,23.18 0.22,1.11 0.46,2.21 0.74,3.31a65.63,65.63 0,0 0,-3.7 1.16C100.76,131.62 94,137.4 94,143.4c0,6.2 7.26,12.41 18.29,16.18a57.92,57.92 0,0 0,2.7 0.85,66.74 66.74,0 0,0 -0.79,3.57c-2.09,11.02 -0.46,19.76 4.74,22.76 5.37,3.1 14.38,-0.09 23.15,-7.76a55.72,55.72 0,0 0,2.09 -1.92c0.88,0.85 1.78,1.67 2.7,2.47 8.5,7.31 16.89,10.27 22.09,7.26 5.36,-3.11 7.11,-12.5 4.84,-23.93a56.95,56.95 0,0 0,-0.6 -2.67c0.63,-0.19 1.25,-0.38 1.86,-0.58 11.46,-3.8 18.92,-9.94 18.92,-16.22 0,-6.02 -6.98,-11.85 -17.78,-15.56ZM173.73,155.57c-0.55,0.18 -1.11,0.35 -1.68,0.52 -1.27,-4.01 -2.97,-8.27 -5.06,-12.67 2,-4.3 3.64,-8.5 4.87,-12.48a63.12,63.12 0,0 1,2.97 0.94c9.25,3.19 14.9,7.9 14.9,11.52 0,3.87 -6.1,8.88 -15.99,12.16ZM169.63,163.7c1,5.05 1.14,9.63 0.48,13.2 -0.6,3.21 -1.79,5.35 -3.27,6.21 -3.15,1.82 -9.89,-0.55 -17.16,-6.8a62,62 0,0 1,-2.52 -2.29c2.82,-3.08 5.63,-6.66 8.38,-10.64 4.83,-0.43 9.4,-1.13 13.54,-2.09 0.2,0.82 0.38,1.63 0.54,2.42ZM128.09,182.79c-3.08,1.09 -5.53,1.12 -7.01,0.26 -3.15,-1.82 -4.47,-8.84 -2.68,-18.26 0.21,-1.11 0.46,-2.22 0.73,-3.32 4.1,0.91 8.63,1.56 13.48,1.95 2.77,3.89 5.66,7.47 8.59,10.6a52.62,52.62 0,0 1,-1.9 1.75c-3.88,3.39 -7.77,5.8 -11.19,7.01ZM113.67,155.54c-4.88,-1.67 -8.9,-3.83 -11.66,-6.2 -2.48,-2.12 -3.73,-4.23 -3.73,-5.94 0,-3.64 5.43,-8.28 14.48,-11.44a61.84,61.84 0,0 1,3.44 -1.08c1.25,4.07 2.89,8.33 4.87,12.63 -2.01,4.37 -3.67,8.69 -4.93,12.81a53.02,53.02 0,0 1,-2.47 -0.77ZM118.5,122.63c-1.88,-9.6 -0.63,-16.85 2.51,-18.67 3.35,-1.94 10.74,0.82 18.54,7.75 0.51,0.45 1.01,0.91 1.5,1.38 -2.91,3.12 -5.78,6.67 -8.52,10.54 -4.7,0.44 -9.2,1.14 -13.34,2.07a62.51,62.51 0,0 1,-0.69 -3.08ZM161.64,133.28a137.59,137.59 0,0 0,-3.04 -5c3.19,0.4 6.25,0.94 9.12,1.59a91.47,91.47 0,0 1,-3.2 8.61,152.27 152.27,0 0,0 -2.88,-5.2ZM144.05,116.15a91.49,91.49 0,0 1,5.89 7.1,125.58 125.58,0 0,0 -11.82,-0 94.07,94.07 0,0 1,5.93 -7.1ZM126.35,133.31a124.9,124.9 0,0 0,-2.82 5.17,94.52 94.52,0 0,1 -3.18,-8.65 96.55,96.55 0,0 1,9.07 -1.56,124.75 124.75,0 0,0 -3.07,5.04ZM129.5,158.84c-3.28,-0.37 -6.36,-0.86 -9.22,-1.48a95.61,95.61 0,0 1,3.24 -8.83,125.21 125.21,0 0,0 5.97,10.31ZM144.17,170.96a95.69,95.69 0,0 1,-6.02 -7.2c1.91,0.08 3.87,0.11 5.85,0.11 2.04,0 4.05,-0.05 6.04,-0.13 -1.95,2.65 -3.91,5.07 -5.87,7.22ZM164.56,148.37c1.34,3.05 2.46,5.99 3.36,8.8 -2.9,0.66 -6.03,1.19 -9.33,1.59a149.85,149.85 0,0 0,3.07 -5.09,136.6 136.6,0 0,0 2.9,-5.3ZM157.96,151.54a140.55,140.55 0,0 1,-4.8 7.74c-3.05,0.22 -6.1,0.32 -9.16,0.32 -3.11,0 -6.14,-0.1 -9.05,-0.29a121.19,121.19 0,0 1,-9.15 -15.81,120.97 120.97,0 0,1 4.25,-8.06l-0,0a120.21,120.21 0,0 1,4.85 -7.72,120.96 120.96,0 0,1 18.23,0 128.76,128.76 0,0 1,4.82 7.69,139.88 139.88,0 0,1 4.31,8.02 128.79,128.79 0,0 1,-4.3 8.09ZM166.77,103.83c3.35,1.93 4.65,9.72 2.55,19.93a56.71,56.71 0,0 1,-0.45 1.99c-4.15,-0.96 -8.65,-1.67 -13.37,-2.11 -2.75,-3.91 -5.59,-7.47 -8.45,-10.55a61.98,61.98 0,0 1,2.3 -2.11c7.38,-6.42 14.28,-8.96 17.43,-7.15ZM144,134.47a8.93,8.93 0,1 1,0 17.86,8.93 8.93,0 1,1 0,-17.86Z"
      android:fillColor="#00D8FF"/>
</vector>

Then update the styles.xml to use the vector asset:

<item name="bootSplashLogo">@drawable/vector_bootsplash_logo</item>

The video / screenshots (with vector asset):

Untitled.mp4

System thread	App thread

No difference compared to raster images, excepted that it's worst for performances:

EDIT: Same goes for your flower example, it's not sharp either:

[reepush]

@zoontek I think I need to clarify more about my screenshots. The left one is the one using windowSplashScreenAnimatedIcon on system thread and it's a little bit blurry. The right one is the one using default rendering of ic_launcher_foreground on system thread also, and it's not blurry.

In other words, after stopping using windowSplashScreenAnimatedIcon Android renders ic_launcher_foreground which isn't blurry on system thread, and after that react-native-bootsplash renders the same icon on app thread.

[zoontek]

So…that's an Android issue?

It always render a blurry windowSplashScreenAnimatedIcon (or bootSplashLogo, it's just an alias), but does not when it renders the fallback (when the SplashScreen API is not used), aka ic_launcher_foreground

[reepush]

@zoontek Yes, exactly. This is just a workaround. Maybe it will be useful for someone out here. Thanks for your work, Mathieu.

[zoontek]

@yo1nick expo-splash-screen is not based on bootsplash, and the recommended trick is bad as it just delays the app response / opening.

[bhandanyan-nomad]

Updated from v4 to v5 today and started getting this warning too. I'm assuming it's safe to ignore?

[cvjmilos]

Updated from v4 to v5 today and started getting this warning too. I'm assuming it's safe to ignore?

I don't think you can ignore it, as Google won't accept the bundle containing this "problem"...

[zoontek]

@cvjmilos No issues on my side, Google never blocked us or asked for modifications. It's a warning, not an error.

[bhandanyan-nomad]

Google accepted a new version of my application with this warning. The only annoyance is the email I get for each build telling me that the pre launch report found problems.

[Linuhusainnk]

Any solution for this issue?

new application are not getting approved in playstore

[zoontek]

@Linuhusainnk I doubt it. It's still a warning, not an error.
It they block you for that, simply explain that it's a false positive from their tooling, they will see it if they check.

[pyprince]

I got a similar same issue. My app haven't been approved yet. How to manage splash screen? Any suggestions?

[zoontek]

I guess what could be great to ask them why do they consider there's a duplicate splash screen (is this because of the system bars that create a false positive?)

I will probably open an issue on their bug tracker to report this, as it's starting to get annoying. But I'm a bit afraid given how well Google do support.

[zoontek]

I've got a question for people with the warning: are you using fade: true?

[alwex]

I confirm that I use await RNBootSplash.hide({fade: true}) and I have the warning on google play console.

[migueldaipre]

Same issue here, I'm trying to fix it

[fellipe-ribeiro]

I've got a question for people with the warning: are you using fade: true?

@zoontek
I confirm that the problem continues to occur in the latest version, using RNBootSplash.hide({fade: true}) or RNBootSplash.hide()
The problem with the warning is that sometimes the application is denied on Google Play due to a crash.

[bhandanyan-nomad]

I'm using RNBootSplash.hide() and I have not received any warning or error from Google Play since upgrading to v5.5.2 of this package

[zoontek]

The problem with the warning is that sometimes the application is denied on Google Play due to a crash.

Are you sure the crash occur for this reason? As it happens on app opening, it could be any module init.

I'm using RNBootSplash.hide() and I have not received any warning or error from Google Play since upgrading to v5.5.2 of this package

Me neither. That's why it's hard to debug without having a contact working at Google 😅

[fellipe-ribeiro]

The problem with the warning is that sometimes the application is denied on Google Play due to a crash.

Are you sure the crash occur for this reason? As it happens on app opening, it could be any module init.

This is the problem. My app doesn't crash.
Crash refers to Google's policy...

[zoontek]

This is the problem. My app doesn't crash.
Crash refers to Google's policy...

If there's no crash, they will not refuse it (I think)

[fellipe-ribeiro]

This is the problem. My app doesn't crash.
Crash refers to Google's policy...

If there's no crash, they will not refuse it (I think)
@zoontek
I confirm that the problem is gone after a launch of a new version in Google store, using RNBootSplash.hide()
I haven't tested using RNBootSplash.hide({fade: true})
And so, I don't know if the problem is linked to the use of RNBootSplash.hide({fade: true}) or was fixed in version 5.5.2 or both together

[zoontek]

I didn't update something sensible on the Android part of the library lately, so it might Google that fixed their detection issue (false positive) instead.

Does someone still have this with a version of their app published recently?

[LightKnight3r]

any one have a solution?

[taylorkline]

I didn't update something sensible on the Android part of the library lately, so it might Google that fixed their detection issue (false positive) instead.

Does someone still have this with a version of their app published recently?

I still have this, in a version published yesterday. Have a NavigationContainer onReady with a .hide() (no fade)

[kauamelo]

Does someone still have this with a version of their app published recently?

@zoontek , I still have this warning. I got another one today, 24th June 2024.

react-native-bootsplash version: 5.5.3
I'm using BootSplash.hide({ fade: true });

[zoontek]

I wrote an issue on their issue tracker: https://issuetracker.google.com/u/1/issues/348947997

Saw this other issue, it seems this also occur to non react-native users: https://issuetracker.google.com/u/1/issues/330027298

So…it seems the condition / test behind this warning is flaky. Unfortunately, no answer from Google engineers yet.

[luisjdtt]

Does this keep happening?
Could anyone who has encountered this problem provide an update on whether their app was eventually approved by the Google Play Store? If so, could you share any details on how you resolved the issue?

I am considering using this library for my project, but I came across this issue during my research and I'd appreciate more information before proceeding.

Thank you!

[taylorkline]

@luisjdtt it's only a warning. It does not affect the approval or release process. The biggest impact is if you are, for example, developing an app for another party and they see this warning in the Play Console emails or on the Play Console itself and get concerned (over nothing).

[hexadecy]

I've upgraded my app from 3.2.7 to 6.1.3 without the warning on the Play Console.

useEffect(() => {
  BootSplash.hide({ fade: true });
}, []);

But, I want to have the same action bar color as my main app, maybe it's just luck or a workaround.

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
    </style>

    <style name="BootTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/bootsplash</item>
    </style>
</resources>

[zoontek]

@hexadecy I'm also using edge-to-edge layout and have no warning. So I think this might be the solution.

[sanaf1333]

@zoontek @hexadecy can you please tell more about the edge-to-edge layout? My app doesn't show double splash screen even in the video uploaded by google but still gave the warning. Do they stop apps from getting approves based on this/any warnings? I am not using any external library to show/hide splash screen. Just the normal splash screen code in styles.xml and AndroidManifest.xml. To hide the system screen I just
<item name="android:windowIsTranslucent">true</item>
Thank you

[zoontek]

@sanaf1333 Use parent="Theme.EdgeToEdge" (cf the README)

<item name="android:windowIsTranslucent">true</item> is a gross hack that just delay your app start and add a ghosting effect (read this)

[cja3455]

I have a loading page in my app that shows right after the splash screen, for some reason Google is considering the loading page as another splash screen. Not sure what to do about that since the loading page is necessary for the app functionality and I can't remove it