https://github.com/jagnesh/react-native-splash-view
🚀 A lightweight and flexible splash screen solution for React Native 0.76+ with New Architecture support!
https://github.com/jagnesh/react-native-splash-view
android launch-screen react-native react-native-splash-view splash-screen splashscreen
Last synced: about 1 year ago
JSON representation
🚀 A lightweight and flexible splash screen solution for React Native 0.76+ with New Architecture support!
- Host: GitHub
- URL: https://github.com/jagnesh/react-native-splash-view
- Owner: jagnesh
- License: mit
- Created: 2025-02-22T09:18:57.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-23T12:53:14.000Z (about 1 year ago)
- Last Synced: 2025-03-23T12:55:13.426Z (about 1 year ago)
- Topics: android, launch-screen, react-native, react-native-splash-view, splash-screen, splashscreen
- Language: Kotlin
- Homepage:
- Size: 1.46 MB
- Stars: 13
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# **📖 react-native-splash-view**
A lightweight and customizable splash screen module for React Native.
[](https://www.npmjs.com/package/react-native-splash-view)
[](https://github.com/jagnesh/react-native-splash-view?tab=MIT-1-ov-file#readme)
---
## **✨ Features**
✅ Show and hide splash screen programmatically
✅ Lightweight and fast
✅ Supports both iOS and Android
---
### Demo Video
[](https://www.youtube.com/watch?v=7OAoN9VlYCg)
---
## **📦 Installation**
### **Using npm**
```sh
npm install react-native-splash-view
```
### **Using yarn**
```sh
yarn add react-native-splash-view
```
---
## **🛠️ Setup Instructions**
### **📱 iOS Setup**
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:
### If you are using swift update AppDelegate.swift
```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() {
DispatchQueue.main.async {
if let splashClass = NSClassFromString("SplashView") as? NSObject.Type,
let splashInstance = splashClass.perform(NSSelectorFromString("sharedInstance"))?.takeUnretainedValue() as? NSObject {
splashInstance.perform(NSSelectorFromString("showSplash"))
}
}
}
}
```
### If you are using Obj C update AppDelegate.m or AppDelegate.mm
```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 {
dispatch_async(dispatch_get_main_queue(), ^{
Class splashClass = NSClassFromString(@"SplashView");
if (splashClass) {
id splashInstance = [splashClass performSelector:NSSelectorFromString(@"sharedInstance")];
if (splashInstance && [splashInstance respondsToSelector:NSSelectorFromString(@"showSplash")]) {
[splashInstance performSelector:NSSelectorFromString(@"showSplash")];
}
}
});
}
```
---
### **🤖 Android Setup**
#### **1️⃣ Create `launch_screen.xml` for Splash Screen**
Create the file **`android/app/src/main/res/layout/launch_screen.xml`** as per requirement:
```xml
```
#### **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
<item name="android:windowExitAnimation">@android:anim/fade_out</item>
<item name="android:windowLightStatusBar">true</item>
```
#### **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
import com.facebook.react.ReactActivity
import com.splashview.SplashView
class MainActivity : ReactActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
SplashView.showSplashView(this) // Show the splash screen
super.onCreate(savedInstanceState)
}
}
```
---
## **🚀 Usage**
### **Basic Example**
```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**
### **1️⃣ Cannot find `SplashView` in Pods folder (iOS)**
Then run:
```sh
cd ios && pod install --repo-update && cd ..
```
### **3️⃣ `SplashView` not found in `MainActivity.kt` (Android)**
Ensure your package is correctly linked. Run the following:
```sh
cd android && ./gradlew clean && cd ..
npx react-native run-android
```
---
## **💡 Contributing**
Feel free to open issues and pull requests! Contributions are welcome.
---
## **📜 License**
This project is licensed under the **MIT License**.
---