React Native · react-native-bootsplash

React Native Splash Screen with react-native-bootsplash

Q: What's the best splash screen library for React Native?

react-native-bootsplash is maintained and supports the latest React Native and the two previous minor versions.

Q: What size should the logo be?

Set the width with --logo-width (about 100 dp). A 1024 PNG or an SVG source is enough.

Q: How do I fade it out?

BootSplash.hide({ fade: true }).

Q: Where do React Native app icons go?

Android: android/app/src/main/res/mipmap-*. iOS: ios/ /Images.xcassets/AppIcon.appiconset.

Short answer

Install react-native-bootsplash, run its generate command on your logo, register it in MainActivity.kt and on iOS, then call BootSplash.hide({ fade: true }) when the app is ready. Using Expo? Use Expo's splash screen plugin instead.

Checked against react-native-bootsplash in October 2026.

1. Install

bash

npm install --save react-native-bootsplash
cd ios && pod install

2. Generate the assets

bash

npx react-native-bootsplash generate assets/logo.png \
  --platforms=android,ios \
  --background=F5FCFF \
  --logo-width=100 \
  --assets-output=assets/bootsplash

Flag	Default	What it does
`--platforms`	`android,ios,web`	Which platforms to write
`--background`	`#fff`	Background color
`--logo-width`	`100`	Logo width in dp at @1x (about 100 recommended)
`--assets-output`	`assets/bootsplash`	Where the generated images go

The logo can be PNG or SVG. Dark mode and brand options need a license key.

3. Android

android/app/src/main/java/com/yourapp/MainActivity.kt

import android.os.Bundle
import com.zoontek.rnbootsplash.RNBootSplash

class MainActivity : ReactActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    RNBootSplash.init(this, R.style.BootTheme)
    super.onCreate(savedInstanceState)
  }
}

With react-native-screens below 4.16, call super.onCreate(null) instead.

4. iOS

ios/YourApp/SceneDelegate.swift

import RNBootSplash

// inside your delegate
override func customize(_ rootView: RCTRootView) {
  super.customize(rootView)
  RNBootSplash.initWithStoryboard("BootSplash", rootView: rootView)
}

React Native 0.88 and later use SceneDelegate.swift. Older versions put the same call in AppDelegate.swift.

5. Hide it

App.tsx

import BootSplash from "react-native-bootsplash";

<NavigationContainer
  onReady={() => {
    BootSplash.hide({ fade: true });
  }}
>
  {/* … */}
</NavigationContainer>

React Native splash screen problems and fixes

You see	Why	Fix
Splash never hides	`hide()` is never called	Call `BootSplash.hide()` when the first screen is ready
Native module not found on iOS	Pods not installed	`cd ios && pod install`, then rebuild
Old splash after regenerating	Native assets are compiled in	Rebuild the app; uninstall it on iOS if cached
Wrong status bar colors on Android	Default bar style	Set `darkContentBarsStyle` in `BootTheme`
Using `react-native-splash-screen`	Old manual linking setup	Move to `react-native-bootsplash`

FAQ

What's the best splash screen library for React Native?

react-native-bootsplash is maintained and supports the latest React Native and the two previous minor versions.

What size should the logo be?

Set the width with --logo-width (about 100 dp). A 1024 PNG or an SVG source is enough.

How do I fade it out?

BootSplash.hide({ fade: true }).

Where do React Native app icons go?

Android: android/app/src/main/res/mipmap-*. iOS: ios/<App>/Images.xcassets/AppIcon.appiconset.