How to Add a Splash Screen in React Native (iOS with Swift) - React Native 2026

A splash screen is the first thing users see when they open your app. It helps:

• Display your logo
• Improve branding
• Create a polished, professional look
• Give React Native time to initialize in the background

In this guide, we’ll set up a native iOS splash screen in a React Native project using Swift, with the help of the react-native-splash-screen library.

---

🔧 Why use react-native-splash-screen?

• Simple setup for both Android and iOS
• Splash screen shows instantly (before JS loads)
• You can control when to hide it (after API calls, animations, etc.)

---

📝 Step 1: Install the Package

Run in your project root:

npm install react-native-splash-screen --save

Or with Yarn:

yarn add react-native-splash-screen

---

📝 Step 2: Install iOS Pods

Navigate to your iOS folder and install pods:

cd ios
pod install

---

📝 Step 3: Configure AppDelegate.swift

Open AppDelegate.swift and add the splash initialization.

import UIKit
import React
import React_RCTAppDelegate
import ReactAppDependencyProvider

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
  var window: UIWindow?

  func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
  ) -> Bool {

    // 👉 Add this after RN is initialized
    RNSplashScreen.show()
    
    return true
  }
}

This tells iOS to display the splash screen immediately when the app launches.

---

📝 Step 4: Add a Bridging Header (If Needed)

If your project uses Swift + Objective-C, you need a bridging header.

✔️ Check if you already have:

YourProjectName-Bridging-Header.h

If not, create one:

1. In Xcode → File → New → File → Header File
2. Name it:

abcproject-Bridging-Header.h

Add this inside the file:

#import "RNSplashScreen.h"

Configure it in Xcode:

Go to:

Build Settings → Swift Compiler – General → Objective-C Bridging Header

Set the path:

$(PROJECT_NAME)/$(PROJECT_NAME)-Bridging-Header.h

Example:

abcproject/abcproject-Bridging-Header.h 

---

📝 Step 5: Hide the Splash Screen in JavaScript

Once your JS code loads and your app is ready, hide the splash screen.

import { useEffect } from "react";
import SplashScreen from "react-native-splash-screen"; 
 
const App = () => { 
  useEffect(() => {
    // Hide splash when the app is fully loaded
    SplashScreen.hide();
  }, []);

  return (
    // Your App UI
  );
};

export default App;

You can delay the splash removal until:

• APIs finish loading
• Authentication completes
• Assets (fonts/images) load
• Animations complete

---

🎉 Done!

Your React Native iOS app will now:

• Show the splash screen instantly
• Keep it visible while JS loads
• Hide only when you want

This gives your users a smooth, professional startup experience.