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:

In Xcode → File → New → File → Header File
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.