Splash screen jump

The splash screens are misaligned and cause jump similar to the react-native-splash-screen.

Tested on Pixel 3 XL emulator and real device 19:8 aspect ratio.

Installed the latest version and followed the instructions on https://www.npmjs.com/package/react-native-bootsplash almost the same

The differences are Styles.xml

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:textColor">#000000</item>
        <item name="android:statusBarColor">@color/statusbar</item>
        <item name="android:windowLightStatusBar">true</item>

        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
    </style>

    <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:background">@drawable/background_splash</item>
        <item name="android:statusBarColor">@color/splash</item>
        <item name="android:windowLightStatusBar">true</item>
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
    </style>
</resources>

background_splash

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
  <item android:drawable="@color/splash" />

  <item
        android:width="222dp"
        android:height="222dp"
        android:drawable="@mipmap/icon"
        android:gravity="center" />
</layer-list>

Why is this happening?

[Yashpk789987]

After using <item name="android:windowTranslucentStatus">true</item> status bar was hidden but the problem is react-native-keyboard-aware-scroll-view stopped working on android

i found the problem was using <item name="android:windowTranslucentStatus">true</item> causes this issue so for anyone’s need

i created native module so that after hiding the splash we can set android:windowTranslucentStatus = false

And then after hiding splash

await RNBootSplash.hide({fade: true}); if (Platform.OS === 'android') { NativeModules.StatusBarModule.toggle(false); }

[zoontek]

@whimsicaldreamer The issue here is that you set your status bar style directly in code (in your MainActivity) but your app does not start with it (it uses RNBootSplashActivity).

So instead of Java code, try to set your styles with a dedicated file (styles-v28.xml for Android Pie):

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="android:textColor">#000000</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>
    <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
</style>

<style name="BootTheme" parent="AppTheme">
    <item name="android:background">@drawable/bootsplash</item>
</style>

Not sure about the android config keys, but you get the idea 🙂