javascriptreact-native

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.

Solution

  • This issue is common with React Native BootSplash on Android and usually stems from how BootTheme is set up in styles.xml and potentially how the system insets or safe areas are handled on Android. Let's go through a few troubleshooting steps and recommendations to address the bottom bar and inset problem.

    1. Use Theme.BootSplash.EdgeToEdge You’re using Theme.BootSplash as the parent for BootTheme. Switch to Theme.BootSplash.EdgeToEdge, which is designed to handle full-screen experiences on Android by extending content edge-to-edge, especially in cases where the layout insets (status bar, navigation bar) are visible.

    Change this in styles.xml:

    <style name="BootTheme" parent="Theme.BootSplash.EdgeToEdge">
    <item name="bootSplashBackground">@color/bootsplash_background</item>
    <item name="bootSplashLogo">@mipmap/bootsplash_logo</item>
    <item name="postBootSplashTheme">@style/AppTheme</item>
</style>
    1. Adjust the MainActivity Layout Sometimes, adding WindowCompat.setDecorFitsSystemWindows(window, false) in MainActivity.kt can help eliminate padding that may result from system insets. This line of code instructs Android to ignore system insets (like the bottom bar) and allows the content to extend fully to the screen edges.

    Add this in your onCreate method:

    override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(null)
    WindowCompat.setDecorFitsSystemWindows(window, false)
    RNBootSplash.init(this, R.style.BootTheme)
}

    This can often resolve layout padding issues.

    1. Check Safe Area Views or Insets If you're using any SafeAreaView or similar insets in your React Native components, check that they are not applying additional padding or margin to the layout after the splash screen is hidden. This would typically appear in your main component layout, which may be affecting the visible area.

    2. Test Full-Screen Flags on Android Another approach is to set the app to full screen by modifying the layout flags directly. To make sure the splash screen and subsequent screens occupy the full screen, use these flags in MainActivity.kt:

    Add this after RNBootSplash.init(...):

    window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or
                                      View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION or
                                      View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or
                                      View.SYSTEM_UI_FLAG_HIDE_NAVIGATION or
                                      View.SYSTEM_UI_FLAG_FULLSCREEN or
                                      View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY

    This should ensure that your splash screen appears without any additional bottom bar or padding.

    1. Clean and Rebuild After making these adjustments, clear your build cache and rebuild the project:

      cd android && ./gradlew clean cd .. && npx react-native run-android

    This should help