[MIUI] windowSplashScreenBackground doesn't seem to work on Android with night mode activated

[pablogdcr]

Bug summary

The background color of the splash screen stays in black on Android with night mode activated.

  <!-- 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="postSplashScreenTheme">@style/AppTheme</item>
  </style>

Result in day mode:

Result in night mode:

Library version

4.3.2

Environment info

System:
    OS: macOS 12.6
    CPU: (8) arm64 Apple M1 Pro
    Memory: 96.08 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.10.0 - ~/.nvm/versions/node/v16.10.0/bin/node
    Yarn: Not Found
    npm: 7.24.0 - ~/.nvm/versions/node/v16.10.0/bin/npm
    Watchman: 2022.09.19.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 16.0, macOS 12.3, tvOS 16.0, watchOS 9.0
    Android SDK:
      API Levels: 28, 29, 30, 31
      Build Tools: 29.0.2, 30.0.2, 30.0.3, 31.0.0, 33.0.0
      System Images: android-28 | Google Play Intel x86 Atom, android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-31 | ARM 64 v8a, android-31 | Google APIs ARM 64 v8a, android-31 | Google Play ARM 64 v8a, android-32 | Google Play ARM 64 v8a
      Android NDK: Not Found
  IDEs:
    Android Studio: 2021.3 AI-213.7172.25.2113.9014738
    Xcode: 14.0/14A309 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.14 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: ^8.0.4 => 8.0.6
    react: 18.0.0 => 18.0.0
    react-native: 0.69.5 => 0.69.5
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

1. Create an empty application: npx react-native init Test --version 0.69.5
2. Install this package and follow the installation guide.
3. Generate a splash screen with an icon and background color
4. Run the app on an Android with night mode activated
5. The background color doesn't show with night mode

Reproducible sample code

I tested with a minimal app, with only this package install, and by following the steps on the installation guide, and the command to generate the splash screen. The only code I have is:

styles.xml:

<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="postSplashScreenTheme">@style/AppTheme</item>
  </style>
</resources>

AndroidManifest.xml:

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

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

    <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">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|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>
      </activity>
    </application>
</manifest>

MainActivity.java:

package com.test;

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;

import android.os.Bundle;
import com.zoontek.rnbootsplash.RNBootSplash;

public class MainActivity extends ReactActivity {

  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  @Override
  protected String getMainComponentName() {
    return "Test";
  }

  /**
   * Returns the instance of the {@link ReactActivityDelegate}. There the RootView is created and
   * you can specify the renderer you wish to use - the new renderer (Fabric) or the old renderer
   * (Paper).
   */
  @Override
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new MainActivityDelegate(this, getMainComponentName());
  }

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    RNBootSplash.init(this); // <- initialize the splash screen
    super.onCreate(savedInstanceState); // or super.onCreate(null) with react-native-screens
  }

  public static class MainActivityDelegate extends ReactActivityDelegate {
    public MainActivityDelegate(ReactActivity activity, String mainComponentName) {
      super(activity, mainComponentName);
    }

    @Override
    protected ReactRootView createRootView() {
      ReactRootView reactRootView = new ReactRootView(getContext());
      // If you opted-in for the New Architecture, we enable the Fabric Renderer.
      reactRootView.setIsFabric(BuildConfig.IS_NEW_ARCHITECTURE_ENABLED);
      return reactRootView;
    }

    @Override
    protected boolean isConcurrentRootEnabled() {
      // If you opted-in for the New Architecture, we enable Concurrent Root (i.e. React 18).
      // More on this on https://reactjs.org/blog/2022/03/29/react-v18.html
      return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
    }
  }
}

[zoontek]

@pablogdcr Hi 👋 Could you publish your values-night/styles.xml?

[pablogdcr]

Hi @zoontek! I didn't have the values-night folder at the beginning. While doing some tests to understand why the splash screen wasn't working, I created it with the same values as in the values folder. So both of my styles.xml looks like this:

styles.xml:

<resources>
  <!-- Base application theme. -->
  <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <item name="android:statusBarColor">@color/green</item>
    <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="postSplashScreenTheme">@style/AppTheme</item>
  </style>

</resources>

And then my colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="bootsplash_background">#07BAA4</color>
</resources>

[zoontek]

@pablogdcr So it's normal and not an issue with this library. If you supports dark theme but don't create -night res directory variants (or use theme attributes, like base android colors), it will simply does not work.

More infos: https://developer.android.com/develop/ui/views/theming/darktheme#themes-styles

[pablogdcr]

In my project, the dark theme is not supported. In the empty app that I created to reproduce this bug, it is supported and the values-night folder contains the files colors.xml, strings.xml, and styles.xml. With styles.xml:

<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="postSplashScreenTheme">@style/AppTheme</item>
  </style>
</resources>

And colors.xml:

<resources>
    <color name="bootsplash_background">#07BAA4</color>
</resources>

Did I miss something?

[zoontek]

@pablogdcr Does this happen on a physical device? I know MIUI (Xiaomi phones) and Huawei are terrible at handling dark mode.

[pablogdcr]

On a physical device, and yes they are terrible! I'm testing on an MIUI: Redmi Note 9S. I just tested it on a Samsung S20 Ultra 5G and it's working fine, so I suppose that the issue is more related to MIUI then...

[zoontek]

@pablogdcr Yes, it's probably MIUI related. I already worked with Google to deploy a fix specific to MIUI in AndroidX core-splashscreen 1.0.0-beta2. I think the best option here is to declare the issue on Android issue tracker directly.

I wish people stop buying these trash phones 😕

[pablogdcr]

Ok thanks, I will.

I'd like that too! 😵‍💫

[danidaryaweesh]

Any update on this issue? I'm using version 1.0.0 of the splash screen library and still getting this issue.

[zoontek]

@danidaryaweesh Check Google issue tracker. It's an AndroidX core issue (but mostly a MIUI issue…if they have a bug tracker, they should fix this)

[zoontek]

I'm closing this since it's an issue with MIUI. Nothing can be done at this library level.

[amangeldiakyyew]

Added to the styles.xml <item name="android:windowIsTranslucent">true</item> now it is ok in dark mode