React Native Bootsplash causing a bottom bar to appear on Android but not on iOS

I’m using React Native Bootsplash in my project. The splash screen works perfectly on iOS, but I’m encountering a problem on Android. Specifically, a bottom bar appears on the screen when I run the app on Android, which does not appear on iOS.

Here’s the relevant code in MainActivity.kt:

package com.packageName

import com.facebook.react.ReactActivity
import com.facebook.react.ReactActivityDelegate
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
import com.facebook.react.defaults.DefaultReactActivityDelegate
import android.os.Bundle
import com.zoontek.rnbootsplash.RNBootSplash

class MainActivity : ReactActivity() {

    override fun getMainComponentName(): String = "packageName"

    override fun createReactActivityDelegate(): ReactActivityDelegate =
        DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)

    override fun onCreate(savedInstanceState: Bundle?) {
        RNBootSplash.init(this, R.style.BootTheme) // ⬅️ initialize the splash screen
        super.onCreate(null) // super.onCreate(null) with react-native-screens 
    }
}

Here is my styles.xml (android -> src -> main -> res -> values -> styles.xml)

<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>
        <item name="android:forceDarkAllowed">false</item>
    </style>

    <!-- BootTheme should inherit from Theme.BootSplash or Theme.BootSplash.EdgeToEdge -->
    <style name="BootTheme" parent="Theme.BootSplash">
        <item name="bootSplashBackground">@color/bootsplash_background</item>
        <item name="bootSplashLogo">@mipmap/bootsplash_logo</item>
        <item name="postBootSplashTheme">@style/AppTheme</item>
    </style>


</resources>

image with issue

My setup:
React Native Version: 0.74.1
React Native Bootsplash: 6.3.1

When I remove function onCreate from MainActivity.kt, the bottom bar disappears, but then, of course, the splash screen no longer works as expected.

I also tried simplifying the component after the splash screen to isolate the issue. Here’s the code I tested:

index.js file

const Comp = () => {
  BootSplash.hide({fade: true});
  return <View style={{flex: 1, backgroundColor: 'red'}}></View>;
};

// AppRegistry.registerComponent(appName, () => App);
AppRegistry.registerComponent(appName, () => Comp)

I’ve seen suggestions indicating that this might be related to “safe-area-inset-*” rules or layout behavior. Unfortunately, I’m unable to connect a debugger to inspect the rendering details directly. I also tested on a physical Android device to rule out simulator-specific rendering glitches, but the issue remains.

If i remove

<item name="bootSplashBackground">@color/bootsplash_background</item>
<item name="bootSplashLogo">@mipmap/bootsplash_logo</item>
<item name="postBootSplashTheme">@style/AppTheme</item>

from styles.xml (android -> src -> main -> res -> values -> styles.xml), my screen looks like image.
At the bottom, where the padding appears, we can see part of the BootSplash.

I also tested on a physical Android device to rule out simulator-specific rendering glitches, but the issue remains.