Black circle on Xiaomi device before splash image appears

[SergiOnGit]

Bug summary

Black circle appears on Xiaomi device before splash image. I have test it on non Xiaomi device and works fine. Looks like the problem is with MUI.

Library version

4.0.2

Environment info

System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz  
    Memory: 4.29 GB / 15.89 GB
  Binaries:
    Node: 14.17.2 - C:\Program Files\nodejs\node.EXE        
    Yarn: 1.22.15 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 7.10.0 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK:
      API Levels: 29, 30, 31
      Build Tools: 29.0.2, 29.0.3, 30.0.2, 30.0.3, 31.0.0, 31.0.0, 31.0.0, 31.0.0
      System Images: android-24 | Google Play Intel x86 Atom, android-29 | Intel x86 Atom_64, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom
      Android NDK: Not Found
    Windows SDK: Not Found
  IDEs:
    Android Studio: Version     2020.3.0.0 AI-203.7717.56.2031.7784292
    Visual Studio: Not Found
  Languages:
    Java: 1.8.0_282 - C:\Program Files\OpenJDK\openjdk-8u282-b08\bin\javac.EXE
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: 0.66.3 => 0.66.3
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

Just test it on Xiaomi device. I have tested on MI 10 lite.

Reproducible sample code

Just test it on Xiaomi device. I have tested on MI 10 lite.

[zoontek]

Does MIUI have an issue tracker? It should also be posted there, since they don't respect standard Android behavior (again)

We can't do much here 🤷🏻‍♂️

[SergiOnGit]

This wasn't happening in V3. I think you must work around it. Xiaomi is very popular and if you can't fix this, we will have to downgrade to V3.

[zoontek]

v3 had a custom implementation. v4 uses the new official API and the official Android X compat library

It's mandatory for Android 12 support, as this new version set a splash screen automatically for every app.

I will not look for a workaround only for Xiaomi and their highly modified distributions. They need to fix it (and they will probably do)

[zoontek]

I guess this happen with the compat library implementation, not the Android 12 native one.

Xiaomi will update a bunch of their devices to it, it could be nice to check if it works correctly after that: https://onsitego.com/blog/xiaomi-android-12-update-tested-redmi-xiaomi-smartphones-complete-list/

As you can see here the implementation is different when the device uses Android >= 12: https://github.com/androidx/androidx/blob/b79f15f22b1cd7dc0cbe3e8b634ec276b9eace72/core/core-splashscreen/src/main/java/androidx/core/splashscreen/SplashScreen.kt#L52

[johkade]

Just letting you know that I've got the exact same issue on a Xaomi redmi note 8 pro (Still running Android 10).

• No issues on a Pixel 4. (Android 12)
• No issues on a Nexus 5x (Android 8.1.0)

I'll be happy to report back, once Xaomi hopefully releases Android 12 for my testing device.

Thanks for the information! - this is an amazing library! 😺

[zoontek]

@Johkade Thanks! I don't have test phones with MIUI (one Xiaomi A2, but it's on Android one (version 10) - so, stock UI and the library works perfectly on it). Your report will be very helpful! 🙂

[AndreiBehel]

Confirm this issue on Xiaomi RN 10 Pro with MIUI 12.5 (Android 11)

[SergiOnGit]

Just to add more info. As I noticed this happens only when phone is in dark mode. Light mode works fine.

[johkade]

Just to add more info. As I noticed this happens only when phone is in dark mode. Light mode works fine.

can confirm that changing to light mode also fixed the issue for me on a redmi Note 8 Pro.

[abolfazlyounesi]

having the same issue on Xiaomi redmi note 7 (Android 10), this happens only on dark mode, and on the light mode it's fine. do we have any possible fix for this?

[josegiufrida]

Same issue with Xiaomi Redmi 9.

After a lot of search I find that is a bug related to core-splashscreen Android dependency when Dark mode is activated (Xiaomi devices).

I tried some things, without good results:

• Different versions: "1.0.0-alpha01" and "1.0.0-alpha02".

  implementation "androidx.core:core-splashscreen:1.0.0-alpha01"

• Disabling DarkMode on Theme Style:

  <style name="BootTheme" parent="Theme.SplashScreen">
   <item name="android:forceDarkAllowed">false</item>
  </style>

• Disabling NightMode in MainApplication.java: AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);

Possible workaroud (comment #1): https://issuetracker.google.com/issues/201895453 But I never code Android so I don't tested

Core-splashcreen: https://developer.android.com/jetpack/androidx/releases/core#core-splashscreen-1.0.0-alpha01

[approached]

Same problem with Xiaomi Mi 9. After disabled the dark mode it work.

[Mohamed-kassim]

same issue here on Xiaomi phones

[jimbofoo]

Could be solved when https://github.com/zoontek/react-native-bootsplash/issues/301 is fixed

[jamesjara]

Bug is also happening in Pixel XL Api 30

[zoontek]

I published a new version that uses beta01: https://github.com/zoontek/react-native-bootsplash/releases/tag/4.1.0 Could anyone confirm it fixes the issue? I don't have a Xiaomi phone on MIUI 🙏

[marcosdourado]

Hey, @zoontek, thanks for the updates. Unfortunately, the black circle remains.

Tested in a Pocophone F1.

[Mohamed-kassim]

Unfortunately the same Tested in Poco X3

[josegiufrida]

Updated to version 4.1.0 but the black circle keeps appearing. Tested in Redmi 9 (Xiaomi)

[LucasHimelfarb]

Same problem with Xiaomi Redmi Note 8

[Shaddix]

Solution below helped me with this issue (Redmi 9A) https://www.reddit.com/r/androiddev/comments/rguwxi/issue_with_new_android_splash_screen_api_31_on/hulgrm0/

You need to create new file in drawable-v23 to overwrite this file

https://github.com/androidx/androidx/blob/androidx-main/core/core-splashscreen/src/main/res/drawable-v23/compat_splash_screen_no_icon_background.xml

Add this line <solid android:color="@android:color/transparent" /> to shape.

[zoontek]

If others can confirm:

1. Create a compat_splash_screen_no_icon_background.xml file in android/app/src/main/res/drawable-v23
2. Fill it with:

<?xml version="1.0" encoding="utf-8"?><!--
  Copyright 2021 The Android Open Source Project
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at
       http://www.apache.org/licenses/LICENSE-2.0
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
  -->

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:gravity="fill">
        <color android:color="?attr/windowSplashScreenBackground" />
    </item>
    <item
        android:drawable="?windowSplashScreenAnimatedIcon"
        android:gravity="center"
        android:width="@dimen/splashscreen_icon_size_no_background"
        android:height="@dimen/splashscreen_icon_size_no_background" />

    <!-- We mask the outer bounds of the icon like we do on Android 12 -->
    <item
        android:gravity="center"
        android:width="@dimen/splashscreen_icon_mask_size_no_background"
        android:height="@dimen/splashscreen_icon_mask_size_no_background">
        <shape android:shape="oval">
            <solid android:color="@android:color/transparent" />
            <stroke
                android:width="@dimen/splashscreen_icon_mask_stroke_no_background"
                android:color="?windowSplashScreenBackground" />
        </shape>
    </item>
</layer-list>

Does it fixes the issue? (still no MIUI phone to test that)

[adechassey]

I confirm this fixes the black circle issue on Xiaomi Mi 9.

[zoontek]

Cool! I made a PR to fix the AndroidX module directly 👀

[cbotsikas]

Works on Mi Note 10 lite with MIUI Global 12.5.5 and Dark mode enabled 🎉

[josegiufrida]

Works on Xiaomi Redmi 9

[Hesowcharov]

Works for me on Xiaomi mi9 lite (MIUI 12)!

[premdasvm]

Work on Xiaomi Redmi Note 7 Pro.

[Janneman84]

The logo shows now but the entire splash screen gets covered with a black film. Setting windowSplashScreenBackground to white becomes light grey for example, even when specifically defined in values-night/colors.xml.

Poco X3 MIUI Global 2.5.4, androidx.core:core-splashscreen:1.0.0-beta01

[zoontek]

@sd535682 Using this? https://github.com/zoontek/react-native-bootsplash/issues/287#issuecomment-1031713661

[zoontek]

@sd535682 Maybe in an incorrect directory?

[Janneman84]

The file name isn't exactly as directed.

[sd535682]

My mistake. Thanks a lot for helping Zoontek & Janneman84.

[Janneman84]

Does it work now? I have a Poco X3 too and the splash screen works but it's too dark. Do you have this problem too?

[sd535682]

Black circle got fixed but yes there is a dark overlay on bootsplash @Janneman

any fix for this @zoontek

[SergiOnGit]

If others can confirm:

1. Create a compat_splash_screen_no_icon_background.xml file in android/app/src/main/res/drawable-v23
2. Fill it with:

<?xml version="1.0" encoding="utf-8"?><!--
  Copyright 2021 The Android Open Source Project
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at
       http://www.apache.org/licenses/LICENSE-2.0
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
  -->

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:gravity="fill">
        <color android:color="?attr/windowSplashScreenBackground" />
    </item>
    <item
        android:drawable="?windowSplashScreenAnimatedIcon"
        android:gravity="center"
        android:width="@dimen/splashscreen_icon_size_no_background"
        android:height="@dimen/splashscreen_icon_size_no_background" />

    <!-- We mask the outer bounds of the icon like we do on Android 12 -->
    <item
        android:gravity="center"
        android:width="@dimen/splashscreen_icon_mask_size_no_background"
        android:height="@dimen/splashscreen_icon_mask_size_no_background">
        <shape android:shape="oval">
            <solid android:color="@android:color/transparent" />
            <stroke
                android:width="@dimen/splashscreen_icon_mask_stroke_no_background"
                android:color="?windowSplashScreenBackground" />
        </shape>
    </item>
</layer-list>

Does it fixes the issue? (still no MIUI phone to test that)

@zoontek Your solution works. Would be great if you merge this with a new version.

[zoontek]

@SergiOnGit I made the commit to the AndroidX package directly. I find that better since it fixes the issue for everyone, not only rn-bootsplash users.

As it already has been approved and merged, we are just waiting for a new release of core-splashscreen now.

PS: I will keep this issue opened as a reference until the update is available.

[Janneman84]

Please note that it still doesn't work quite right everywhere, at least not on Poco X3 devices. So as long as that isn't fixed please keep this open.

[zoontek]

@Janneman84 To fix Poco issues phones at some point, we should replace their OS. If they don't respect Android APIs implem and Google doesn't want to add hacks to make MIUI work correctly, we cannot do much.

[Mohamed-kassim]

@zoontek @Janneman84 MIUI Try to force apps to be dark while enabling dark mode in OS so even if the app does not have a dark mode, OS negative the app colors to its dark version and I think also applies a dark overlay on views to make its contrast suitable for a darker app. so I don't know maybe it's not this library issue if u can, test on another Xiaomi phone to confirm.

[zoontek]

@Mohamed-kassim Definitely not a library issue. I talked with Google engineer responsible of the SplashScreen API and they have similar issues. MIUI is g*rbage.

I have a Xiaomi, but one the good ones: a A2 with Android One (stock Android UI, no MIUI). Of course, no issue 😅

I hope they will fix this behavior. It's kind of a shame it exists.

[zoontek]

The package has been bump, this can be closed: https://github.com/zoontek/react-native-bootsplash/releases/tag/4.2.0

[abdullahIsa]

Hello, i am still having this issue @zoontek

react-native: 0.70.4 react-native-bootsplash: ^4.3.2

[zoontek]

@abdullahIsa Check that you are using androidx.core:core-splashscreen:1.0.0, not a beta version

[abdullahIsa]

@abdullahIsa Check that you are using androidx.core:core-splashscreen:1.0.0, not a beta version

Hello, yes i am but i can still see a circle around the icon

Looks like this

[zoontek]

@abdullahIsa It's not a black round (like in the issue description), just the round mask. You set your logo size too big, the CLI even warn about this when > 192dp

More infos: https://developer.android.com/develop/ui/views/launch/splash-screen#elements Solution: Reduce the logo size so it fits.

[abdullahIsa]

@abdullahIsa It's not a black round (like in the issue description), just the round mask. You set your logo size too big, the CLI even warn about this when > 192dp

More infos: https://developer.android.com/develop/ui/views/launch/splash-screen#elements Solution: Reduce the logo size so it fits.

Hello, you are right working ok now, thanks.