📖 react-native-splash-view

A lightweight and customizable splash screen module for React Native.


---

✨ Features

✅ Show and hide splash screen programmatically
✅ Lightweight and fast
✅ Supports both iOS and Android

---

$3


---

📦 Installation

$3

``sh
npm install react-native-splash-view
`

$3

`sh
yarn add react-native-splash-view
`

---

🛠️ Setup Instructions

$3

1️⃣ Install CocoaPods dependencies:
`sh
cd ios && pod install --repo-update && cd ..
`
2️⃣ Ensure SplashView is correctly linked.

3️⃣ Create a Storyboard for Splash Screen:
- Open Xcode and go to the LaunchScreen.storyboard file.
- Ensure the Storyboard Name is set as LaunchScreen.
- This will be used as the splash screen when the app starts.

4️⃣ Modify AppDelegate to show the splash screen programmatically:


$3


`swift
import UIKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

var window: UIWindow?

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

showSplashScreen() // Call the method to display the splash screen

return true
}

//Add below method in AppDelegate.swift
private func showSplashScreen() {
if let splashClass = NSClassFromString("SplashView") as? NSObject.Type,
let splashInstance = splashClass.perform(NSSelectorFromString("sharedInstance"))?.takeUnretainedValue() as? NSObject {
splashInstance.perform(NSSelectorFromString("showSplash"))
print("✅ Splash Screen Shown Successfully")
} else {
print("⚠️ SplashView module not found")
}
}

}
`


$3


`objc

@implementation AppDelegate

- (BOOL)application:(UIApplication )application didFinishLaunchingWithOptions:(NSDictionary )launchOptions
{
self.moduleName = @"yourapp";
self.initialProps = @{};

[self showSplashScreen]; // Call the method to display the splash screen

return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

// Add this method to AppDelegate.m
- (void)showSplashScreen {
Class splashClass = NSClassFromString(@"SplashView");
if (splashClass) {
id splashInstance = [splashClass performSelector:NSSelectorFromString(@"sharedInstance")];
if (splashInstance && [splashInstance respondsToSelector:NSSelectorFromString(@"showSplash")]) {
[splashInstance performSelector:NSSelectorFromString(@"showSplash")];
}
}
}
`
---

$3

#### 1️⃣ Create launch_screen.xml for Splash Screen
Create the file android/app/src/main/res/layout/launch_screen.xml as per requirement:

`xml

android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white">

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/splash_logo" />


`

#### 2️⃣ Optionally, Define a Custom Theme
You can specify a theme in android/app/src/main/res/values/styles.xml and style name should be SplashViewTheme.

`xml



`

#### 3️⃣ Modify MainActivity.kt to Show the Splash Screen
Update MainActivity.kt to display the splash screen on launch:

`kotlin
package com.example

import android.os.Bundle // <-- Add this
import com.facebook.react.ReactActivity
import com.splashview.SplashView // <-- Add this

class MainActivity : ReactActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
SplashView.showSplashView(this) // Show the splash screen
super.onCreate(savedInstanceState)
}
}
`

---

🚀 Usage

$3


`tsx
import { hideSplash, showSplash } from 'react-native-splash-view';

showSplash(); // Show the splash screen (If you don't want to start it from native side)

useEffect(() => {
setTimeout(() => {
hideSplash(); // Hide after some time
}, 5000);
}, []);
`

---

⚙️ API

| Method | Description |
|----------------|----------------------------------|
| showSplash() | Shows the splash screen |
| hideSplash() | Hides the splash screen |

---

🐞 Troubleshooting

$3

Then run:
`sh
cd ios && pod install --repo-update && cd ..
`

$3


Ensure your package is correctly linked. Run the following:
`sh
cd android && ./gradlew clean && cd ..
npx react-native run-android
`

🛠️ Patch for React Native 0.75.x and Below

If you're using React Native 0.75.x or below, you may face issues with EventEmitterCallback in the react-native-splash-view package due to TurboModule compatibility changes. You can apply a patch to make it work.

$3

1. Install patch-package:

`sh
npm install patch-package --save-dev
`

Or with Yarn:

`sh
yarn add patch-package --dev
`

2. Update package.json
Add this to the scripts section:

`json
"scripts": {
"postinstall": "patch-package"
}
`

3. Download and Place the Patch File
Download the patch file from the following link:
react-native-splash-view+0.0.15.patch

Once downloaded, place it in the root of your project under the patches/ folder. You may need to create the patches/ folder if it doesn't already exist. The file structure should look like this:

`
/your-project-root
├── patches/
│ └── react-native-splash-view+0.0.15.patch
└── package.json
`

4. Apply the Patch
After placing the patch file in the patches/ folder, run:

`sh
npx patch-package react-native-splash-view
``

This will apply the patch and fix issues related to React Native 0.75.x and below.

---

💡 Contributing

Feel free to open issues and pull requests! Contributions are welcome.

---

📜 License

This project is licensed under the MIT License.

---