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