🚀 Adding a Splash Screen in React Native with react-native-bootsplash

A well-crafted splash screen sets the tone for your app's user experience. In this tutorial, we’ll walk through how to integrate a custom splash screen in your React Native app using react-native-bootsplash. This guide covers everything from installation to customization.

🧰 Prerequisites

• React Native project (tested with React Native 0.72+)

• A logo image (preferably transparent PNG)

• Android Studio/Xcode configured

📦 Step 1: Install react-native-bootsplash

Run the following command to install the package:

npm install react-native-bootsplash

Or with Yarn:

yarn add react-native-bootsplash

🎨 Step 2: Generate Splash Assets

Place your logo image in the project directory (e.g., ./src/assets/logo.png). Then run the CLI command:

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

✅ This command:

• Generates platform-specific splash assets

• Applies a deep blue background (#104253)

• Scales your logo to 100dp width

• Targets both Android and iOS

⚠️ Make sure not to include # in the hex color — use 104253, not #104253.

🧑‍💻 Step 3: Initialize the Splash Screen in Android

Open MainActivity.kt and update the onCreate() method:

override fun onCreate(savedInstanceState: Bundle?) {
  super.setTheme(R.style.AppTheme) // Apply theme
  super.onCreate(savedInstanceState)
  RNBootSplash.init(this) // Initialize splash screen
}

Make sure your styles.xml includes a theme like:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar" />

🍎 Step 4: iOS Integration

Ensure you’ve installed CocoaPods and synced native modules:

cd ios && pod install

The CLI automatically configures your LaunchScreen.storyboard. You don’t need to manually change anything unless you want advanced customization.

🧪 Step 5: Run Your App

Start the app and you should see the new splash screen:

npx react-native run-android
# or
npx react-native run-ios

✨ Hide Splash Screen Programmatically

Once your app is ready, hide the splash screen using:

import RNBootSplash from "react-native-bootsplash";

useEffect(() => {
  RNBootSplash.hide({ fade: true });
}, []);

Place this logic in your root component or App.tsx / App.js

✅ Summary

With react-native-bootsplash, adding a polished splash screen is fast and customizable. It ensures a consistent startup experience and keeps your app feeling native and professional.

Happy coding..