Splash screen seems dim (<= Android 11) and shows placeholder android icon after hide

[droplessjake]

Bug summary

After implementing this, all seems to work fine on Android 12, yet when testing backwards compatibility on Android 11, the splash screen almost seems dimmer, and after calling RNBootsplash.hide() seems to flash white and show a placeholder icon. This didn't happen on older versions, and doesn't happen on android 12.

Video below Link to video of this happening

Library version

4.1.3

Environment info

System:
    OS: macOS 12.2.1
    CPU: (12) x64 Intel(R) Core(TM) i5-10500 CPU @ 3.10GHz
    Memory: 40.54 MB / 32.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 16.13.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 8.1.0 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.1 AI-211.7628.21.2111.8092744
    Xcode: 13.3/13E113 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.14 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.67.4 => 0.67.4 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

1. Launch app
2. Call .hide()

Reproducible sample code

Below are my theme settings

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:textColor">@color/text</item>
        <item name="android:windowLightStatusBar">true</item>
        <item name="android:windowTranslucentStatus">false</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:navigationBarColor">@color/navigation_bar</item>
        <item name="android:windowBackground">@drawable/splash_background</item>
    </style>
    <style name="SplashTheme" parent="Theme.SplashScreen">
        <item name="android:windowLightStatusBar">true</item>
        <item name="android:windowTranslucentStatus">false</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:windowBackground">@drawable/splash_background</item>
        <item name="postSplashScreenTheme">@style/AppTheme</item>
    </style>
</resources>

Below are my theme settings for Android 12 (in values-v31)

<resources>
    <style name="SplashTheme" parent="Theme.SplashScreen">
        <item name="android:windowSplashScreenBackground">@color/bootsplash_background</item>
        <item name="android:windowSplashScreenAnimatedIcon">@drawable/splash_icon</item>
        <item name="android:windowLightStatusBar">true</item>
        <item name="android:windowTranslucentStatus">false</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="postSplashScreenTheme">@style/AppTheme</item>
    </style>
</resources>

And here is my manifest

<manifest xmlns:android="http://schemas.android.com/apk/res/android" 
  package="uk.co.dropless">

  <uses-permission android:name="android.permission.CAMERA" />
  <uses-permission android:name="android.permission.INTERNET" />

  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  <uses-permission android:name="android.permission.DOWNLOAD_WITHOUT_NOTIFICATION" />
  <uses-permission android:name="android.permission.DOWNLOAD_COMPLETE" />

  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

  <queries>
      <intent>
          <action android:name="android.intent.action.VIEW" />
          <data android:mimeType="*/*" />
      </intent>
  </queries>

  <application
    android:name="uk.co.dropless.MainApplication"
    android:label="@string/app_name"
    android:theme="@style/SplashTheme"
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:allowBackup="false"
    android:usesCleartextTraffic="true"
    android:screenOrientation="portrait"
    android:requestLegacyExternalStorage="true"
    android:extractNativeLibs="true"
  >
    <meta-data
      android:name="com.google.android.geo.API_KEY"
      android:value="@string/GOOGLE_API_KEY"
    />
    <meta-data
      android:name="com.google.android.gms.wallet.api.enabled"
      android:value="true" 
    />
    <meta-data 
      android:name="com.facebook.sdk.ApplicationId" 
      android:value="@string/facebook_app_id"
    />

    <activity
      android:name="uk.co.dropless.MainActivity"
      android:label="@string/app_name"
      android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
      android:launchMode="singleTask"
      android:windowSoftInputMode="adjustResize"
      android:exported="true">
      <intent-filter>
          <action android:name="android.intent.action.MAIN" />
          <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
      <intent-filter>
          <action android:name="android.intent.action.VIEW" />
          <category android:name="android.intent.category.DEFAULT" />
          <category android:name="android.intent.category.BROWSABLE" />
          <data android:scheme="dropless" />
      </intent-filter>
    </activity>

    <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
  </application>
</manifest>

[zoontek]

Delete <item name="android:windowBackground">@drawable/splash_background</item>

[droplessjake]

@zoontek I was using windowBackground because I still want to display a full screen drawable on non-android 12 devices. That's why I created a separate theme in values-v31 that uses the Android 12 flags.

This should still be backwards supported should it not?

[zoontek]

@droplessjake No. AndroidX core splashscreen package does not support that.

[Fahad-Ali-Qureshi]

Sharing a workaround.

Make custom xml layout with including bottom center image. This will only be used for Android 11 and lower. Example xml file code:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/bootsplash_background" />

    <item android:gravity="center" android:drawable="@mipmap/bootsplash_logo" />
    <item
        android:width="200dp"
        android:height="80dp"
        android:drawable="@mipmap/branding"
        android:gravity="center|bottom"
        android:bottom="60dp" />
</layer-list>

Now put this file in android\app\src\main\res\drawable folder. Then merge the two strategies of splash style only for Android 11 and lower. Means assign windowBackground as xml as well as windowSplashScreenBackground and windowSplashScreenAnimatedIcon in styles file.

Below is the sample styles.xml in android\app\src\main\res\values folder:

<resources>

    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
    </style>

  <style name="BootTheme" parent="Theme.SplashScreen">
    <item name="android:windowBackground">@drawable/launch_background</item>
    <item name="windowSplashScreenBackground">@color/bootsplash_background</item>
    <item name="windowSplashScreenAnimatedIcon">@mipmap/bootsplash_logo</item>
    <item name="postSplashScreenTheme">@style/AppTheme</item>
  </style>

</resources>

And now the styles file only for Android 12 and above in android\app\src\main\res\values-v31 folder:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
    </style>

      <!-- BootTheme should inherit from Theme.SplashScreen -->
  <style name="BootTheme" parent="Theme.SplashScreen">
    <item name="windowSplashScreenBackground">@color/bootsplash_background</item>
    <item name="windowSplashScreenAnimatedIcon">@mipmap/bootsplash_logo</item>
    <item name="android:windowSplashScreenBrandingImage">@mipmap/branding</item>
    <item name="postSplashScreenTheme">@style/AppTheme</item>
    <item name="android:statusBarColor">@color/black</item>
    <item name="android:navigationBarColor">@color/black</item>
  </style>

</resources>

By using this merged strategy, you can display bottom branded image even on below Android 12.

(Note:) This is temporary workaround until this library release a stable version which supports adding branded image only in one file.