App Icon shown before splash screen on android

Question

I am trying to configure a splash screen in a React native app (android). When I open the app, first app icon (ic_launcher) is displayed with a white background and then, the splash screen is displayed. I am not from a native background so I don't know what is happening. Is this a default behavior on android?

//launch_screen.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:gravity="center"
    android:background="@color/splash_background"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:src="@mipmap/launch_screen"/>

</LinearLayout>

Eloisaeloise

i have the same problem did you fix the issue? – Uncharitable

Answer 1

Add the below line of code to styles.xml to remove app icon and white screen.

<item name="android:windowDisablePreview">true</item>

Converter

Answer 2

Please set windowIsTranslucent as true style.xml file and check if it works

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.EdgeToEdge">
    <!-- Customize your theme here. -->
    <item name="android:windowDisablePreview">true</item>
    <item name="android:windowIsTranslucent">true</item>
</style>

Eastwards

Setting android:windowIsTranslucent to true causes all kinds of unwanted side effects, such as crashes when setting the orientation to portrait, and the app being displayed as the desktop when swiping up from the bottom of the screen (i.e. the overview used to browse open apps and hard closing them) – Pipistrelle

windowDisablePreview worked for me, thanks! – Agora

Answer 3

Yes. By default, the native splash screen would be displayed and you can customize it by changing the content in launch_screen.xml to match your react native splash screen. Once the above native splash screen is hidden, then your react native splash screen will be shown(Both of them will have the same UI now and the user can't observe).

If you don't want to design it twice(First in launch_screen.xml and second, in react native splash screen), I would suggest you use third-party libraries such as react-native-splash-screen. Please check the below tutorial on how to use it.

Build a splash screen in react native

Weakling