Apr 23
React Native Splash Screen Dark Circle on MIUI Devices
Hello developers. I’m Feyyaz. I would like to share with you an error I encountered while developing a mobile application with react-native in the past weeks. You always want to test your app before putting it into production. You can try various ways for this, but it is not possible for all conditions.
While working with the react-native-splash-screen library, I encountered a bug that only affects dark mode on my Redmi Note 9 Pro Max (in Turkey, Redmi Note 9 Pro) test device. After some research, I concluded that the error is related to MIUI. The core developer of the library, Mathieu, has already mentioned it on his Github issue here. After noticing the error, I realized that some application also has this error in production. So the error affects not only react-native applications but also some native applications, I guess.
Normally the splash screen should look like this:
But because of the error, it looks like this:
To solve the error, Mathieu offered a two-step solution:
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>
In my file path, the file named drawable-v23 was not in the res folder, but this file needs to be created for it to work.
Finally, I would like to thank Mathieu for his interest.
Do not forget to follow my articles for errors and solutions that may come up during my application development phase. Goodbye 💥
