React-native-splash-screen: Top margin of android splash screen off by 24dp height

[steve-else]

When attempting to use this library to open the splash screen immediately after the initial splash screen loads, the image needs to be offset by about 24dp to account for the height of the status bar. Using this guide I saw that you have to add 24dp marginTop to properly align a center image on the splash screen to make it align properly so you don't see it shift from one splash screen to the next.

The issue is that some devices require you add 24dp, and some require you use -24dp to achieve the right effect. I believe this is somehow due to different devices compensating for the status bar in different ways. The two devices I tested on were a Pixel 2 XL and a Nexus 6p. On the Nexus, 24dp makes both splash screens align perfectly. On the Pixel, -24dp is needed. Has anyone come across this issue before? And more appropriately for this package, is there any plan to match the styling of splash screen called in-app to the one that devices use on their default splash screens?

[SimonErich]

I have the same problem. The splash screen looks fine on most devices, but on some devices (Samsung A3) the splash screen jumps down a few pixels.
@steve-else did you, by any chance, find a solution for this?

[steve-else]

Unfortunately not. It seems different devices seem to handle the splash screen differently, I don't have a solution to fit all android devices correctly.

[robsoncoelho]

Hey guys, any news? I have the same problem.

[Tilwin90]

Jumping here (no pun intended) to also share experiencing the same issue.

I initially integrated this and tested on a Samsung Galaxy S7 with a margin top of -24dp.
Then I switched to a Samsung Galaxy S8 and the difference was huge. I actually had to adjust it to a positive value to (I think it was 24 or 48dp) to avoid the jump.
Moving back to Galaxy S7 of course now it jumps...

From what I understand the 24dp compensates for the status bar, and if that's the case, but the question remains why is it a positive value on one phone and a negative one on the other...

[FadiAboMsalam]

any fix to this ? i have the same issue

[dmchoull]

I was able to fix this issue with a few changes to what was given in the guide linked above.

First, in the layout for the splash (launch_screen.xml), don't use an ImageView with margin, just apply the same background drawable that your SplashActivity theme is using:

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

</LinearLayout>

And in the theme you set on your SplashActivity, use android:background instead of android:windowBackground:

<style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:background">@drawable/background_splash</item>
    <item name="android:statusBarColor">@color/primary</item>
</style>

This will make it center the splash within the area between the status bar and the system UI buttons, which is consistent with how react-native-splash-screen is centered and prevents the jump from occurring.

[MattHall00]

Thank you dmchoull. Your fix helped me.

[acostalima]

I also had to include

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

in SplashTheme and pass true to show() in MainActivity as follows

protected void onCreate(Bundle savedInstanceState) {
   SplashScreen.show(this, true);
   super.onCreate(savedInstanceState);
}

to hide the status bar and render the splash image in full screen.

Related issues: #385, #105

[AlanQuadros]

Works on mostly devices, but still jump in Xiaomi Redmi Note 7.

[mayconmesquita]

I also have this problem in Xiaomi Redmi Note 7.

[iamacoderguy]

Hi,

Any updates for Xiaomi devices?

[zhanghaoxu]

i have the same problem for Xiaomi devices...

[iamacoderguy]

i have the same problem for Xiaomi devices...

For Xiaomi devices or indeed, the devices with Cutout Mode, I used some tips in this post https://github.com/zoontek/react-native-bootsplash/issues/52, especially at this comment https://github.com/zoontek/react-native-bootsplash/issues/52#issuecomment-580366701.

And to make it work for all device models, I had to check the Xiaomi model, and use the configuration for it only.

[parth3724]

@iamacoderguy ,
how did you check for xiaomi model and the devices with Cutout Mode, for setting splash theme ?
can you share the code ?

[iamacoderguy]

@iamacoderguy ,
how did you check for xiaomi model and the devices with Cutout Mode, for setting splash theme ?
can you share the code ?

I didn't see the comment, sorry. Might be the following code can help other developers

// file: MainActivity.java
// ...
@Override
  protected void onCreate(Bundle savedInstanceState) {
    int themeId = R.style.SplashTheme;
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
      switch (Build.MANUFACTURER) {
        case "Xiaomi":
          themeId = R.style.SplashThemeXiaomi;
          break;
        default:
          break;
      }
    }

    SplashScreen.show(this, themeId);
    super.onCreate(savedInstanceState);
  }

// file: res/values-v28/styles.xml

<resources>
    <style name="SplashThemeXiaomi" parent="SplashTheme">
        <item name="android:windowTranslucentStatus">true</item>
    </style>
</resources>

[inmogr]

I'm having this issue, even in fullscreen i'm getting white space on the top

styles

<style name="SplashScreen" parent="Theme.ReactNative.AppCompat.Light.NoActionBar.FullScreen">
        <item name="android:windowBackground">@color/red</item>
        <item name="android:windowTranslucentNavigation">false</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowActionBar">false</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowDrawsSystemBarBackgrounds">false</item>
        <item name="android:windowTranslucentStatus">false</item>
</style>

launch_screen

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

    <ImageView
        android:layout_width="128dp"
        android:layout_height="128dp"
        android:scaleType="centerCrop"
        android:src="@mipmap/launch_screen_logo" />

</LinearLayout>