2 splash screen logo appear

[ronakYudiz]

Bug summary

I am right now using the "react-native-bootsplash": "^5.0.0" version.
I am facing one strange issue running on a Samsung device that is not happening on other devices.
Two splash logos appear; the first is small and the other is big.

Screen_recording_20230824_133538.mp4

Library version

^5.0.0

Environment info

"dependencies": {
    "@react-native-async-storage/async-storage": "^1.19.2",
    "@react-native-community/blur": "^4.3.2",
    "@react-native-picker/picker": "^2.5.0",
    "@react-navigation/bottom-tabs": "^6.5.8",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/native-stack": "^6.9.13",
    "@reduxjs/toolkit": "^1.9.5",
    "axios": "^1.4.0",
    "i18next": "^23.4.4",
    "moment": "^2.29.4",
    "react": "18.2.0",
    "react-i18next": "^13.1.2",
    "react-native": "0.72.4",
    "react-native-bootsplash": "^5.0.0",
    "react-native-date-picker": "^4.2.14",
    "react-native-fast-image": "^8.6.3",
    "react-native-localize": "^3.0.2",
    "react-native-modal": "^13.0.1",
    "react-native-picker-select": "^8.0.4",
    "react-native-reanimated": "^3.4.2",
    "react-native-safe-area-context": "^4.7.1",
    "react-native-screens": "^3.24.0",
    "react-native-webview": "^13.3.1",
    "react-redux": "^8.1.2",
    "redux": "^4.2.1"
  },

Steps to reproduce

just use new version and follow steps you will face this issue on samsung device.

Reproducible sample code

<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>

    <style name="BootTheme" parent="Theme.BootSplash">
    <item name="bootSplashBackground">@color/bootsplash_background</item>
    <item name="bootSplashLogo">@drawable/bootsplash_logo</item>
    <item name="postBootSplashTheme">@style/AppTheme</item>
  </style>

</resources>

[zoontek]

@ronakYudiz Duplicate of #466, feel free to post a message there with your video.

For some weird reason, Samsung implementation of the Android SplashScreen API doesn't respect the official implem and show a half sized logo on the system thread (handled not by your app / this library, but by Android itself). Once your app has started (it's easy to see, that's the moment your app respect the status / navigation bar styles you defined, because of course Android doesn't respect that either 😅), react-native-bootsplash show the logo in the correct size, making this size jump.

It's super hard to investigate, as I don't own a Samsung device and can't find a lot of informations on the internet about it.

EDIT: I found this: https://issuetracker.google.com/issues/251807014

Samsung aligned on splash screen sizing for One UI 5.0 (Android 13).

[skizzo]

I faced the same issue when updating to version v5.0.2, so I reverted back to v4.7.5 and don't face this issue on my Samsung Galaxy A71 any more.

Therefore i'm not so sure if this has much to do with Samsung's implementation of the Android SplashScreen API, as @zoontek says in the comment above 😉 Thanks by the way for this awesome library!

[zoontek]

@skizzo It is. But since v5, we don't use the AndroidX splash screen compat lib as its solution was freezing the UI (that's why the phones were frozen until the splash screen was hidden).

But if you check, you will see that the size isn't respected on Samsung (the logo is smaller compared to emulator / other manufacturers phones).

Also, try to create an animated splash screen on bootsplash v4, you will get the exact same issue (no problem if you just fade it). It's well known by Samsung, they fixed it in OneUI v5.

EDIT: More infos here #466 (comment)

I will try to see if I can add a workaround for OneUI v4, to keep the logo half size, even when using the useHideAnimation hook (by passing a constant to react native, ratio, of 0.5 for the problematic devices)

[skizzo]

Very interesting, thanks for elaborating!