react-native-splash-view v0.0.12

📖 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

Demo Video

📦 Installation

Using npm

npm install react-native-splash-view

Using yarn

yarn add react-native-splash-view

🛠️ Setup Instructions

📱 iOS Setup

1️⃣ Install CocoaPods dependencies:

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

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

@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 version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white">

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

</FrameLayout>

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.

<resources>
  <style name="SplashViewTheme" parent="Theme.AppCompat.NoActionBar">
    <item name="android:windowExitAnimation">@android:anim/fade_out</item>
    <item name="android:windowLightStatusBar">true</item>
  </style>
</resources>

3️⃣ Modify MainActivity.kt to Show the Splash Screen

Update MainActivity.kt to display the splash screen on launch:

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

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

🐞 Troubleshooting

1️⃣ Cannot find SplashView in Pods folder (iOS)

Then run:

cd ios && pod install --repo-update && cd ..

3️⃣ SplashView not found in MainActivity.kt (Android)

Ensure your package is correctly linked. Run the following:

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.