{"id":26060005,"url":"https://github.com/jagnesh/react-native-splash-view","last_synced_at":"2025-04-11T07:36:39.853Z","repository":{"id":278949834,"uuid":"937075434","full_name":"jagnesh/react-native-splash-view","owner":"jagnesh","description":"🚀 A lightweight and flexible splash screen solution for React Native 0.76+ with New Architecture support!","archived":false,"fork":false,"pushed_at":"2025-03-23T12:53:14.000Z","size":1528,"stargazers_count":13,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-23T12:55:13.426Z","etag":null,"topics":["android","launch-screen","react-native","react-native-splash-view","splash-screen","splashscreen"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jagnesh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-22T09:18:57.000Z","updated_at":"2025-03-23T12:51:26.000Z","dependencies_parsed_at":null,"dependency_job_id":"fa79bfd0-594a-47cb-a184-9f1784bf33f8","html_url":"https://github.com/jagnesh/react-native-splash-view","commit_stats":null,"previous_names":["jagnesh/react-native-splash-view"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jagnesh%2Freact-native-splash-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jagnesh%2Freact-native-splash-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jagnesh%2Freact-native-splash-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jagnesh%2Freact-native-splash-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jagnesh","download_url":"https://codeload.github.com/jagnesh/react-native-splash-view/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248359038,"owners_count":21090466,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","launch-screen","react-native","react-native-splash-view","splash-screen","splashscreen"],"created_at":"2025-03-08T13:48:59.544Z","updated_at":"2025-04-11T07:36:39.836Z","avatar_url":"https://github.com/jagnesh.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\n# **📖 react-native-splash-view**  \nA lightweight and customizable splash screen module for React Native.\n\n[![npm version](https://img.shields.io/npm/v/react-native-splash-view)](https://www.npmjs.com/package/react-native-splash-view)\n[![License](https://img.shields.io/github/license/jagnesh/react-native-splash-view)](https://github.com/jagnesh/react-native-splash-view?tab=MIT-1-ov-file#readme) \n\n---\n\n## **✨ Features**  \n✅ Show and hide splash screen programmatically  \n✅ Lightweight and fast  \n✅ Supports both iOS and Android  \n\n\n---\n### Demo Video\n\n[![IMAGE ALT TEXT HERE](https://img.youtube.com/vi/7OAoN9VlYCg/0.jpg)](https://www.youtube.com/watch?v=7OAoN9VlYCg)\n\n---\n\n\n## **📦 Installation**  \n\n### **Using npm**  \n```sh\nnpm install react-native-splash-view\n```\n\n### **Using yarn**  \n```sh\nyarn add react-native-splash-view\n```\n\n---\n\n## **🛠️ Setup Instructions**  \n\n### **📱 iOS Setup**  \n1️⃣ Install CocoaPods dependencies:  \n```sh\ncd ios \u0026\u0026 pod install --repo-update \u0026\u0026 cd ..\n```\n2️⃣ Ensure `SplashView` is correctly linked.  \n\n3️⃣ **Create a Storyboard for Splash Screen**:  \n- Open **Xcode** and go to the **LaunchScreen.storyboard** file.  \n- Ensure the **Storyboard Name** is set as `LaunchScreen`.  \n- This will be used as the splash screen when the app starts.  \n\n4️⃣ **Modify `AppDelegate`** to show the splash screen programmatically:  \n### If you are using swift update AppDelegate.swift \n```swift\nimport UIKit\n\n@UIApplicationMain\nclass AppDelegate: UIResponder, UIApplicationDelegate {\n\n    var window: UIWindow?\n\n    func application(\n        _ application: UIApplication,\n        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil\n    ) -\u003e Bool {\n        \n        showSplashScreen() // Call the method to display the splash screen\n        \n        return true\n    }\n\n    //Add below method in AppDelegate.swift\n\n    private func showSplashScreen() {\n        DispatchQueue.main.async {\n            if let splashClass = NSClassFromString(\"SplashView\") as? NSObject.Type,\n               let splashInstance = splashClass.perform(NSSelectorFromString(\"sharedInstance\"))?.takeUnretainedValue() as? NSObject {\n                splashInstance.perform(NSSelectorFromString(\"showSplash\"))\n            }\n        }\n    }\n}\n```\n### If you are using Obj C update AppDelegate.m or AppDelegate.mm \n```objc\n\n@implementation AppDelegate\n\n- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions\n{\n  self.moduleName = @\"yourapp\";\n  self.initialProps = @{};\n\n  [self showSplashScreen]; // Call the method to display the splash screen\n \n  return [super application:application didFinishLaunchingWithOptions:launchOptions];\n}\n\n// Add this method to AppDelegate.m\n- (void)showSplashScreen {\n    dispatch_async(dispatch_get_main_queue(), ^{\n        Class splashClass = NSClassFromString(@\"SplashView\");\n        if (splashClass) {\n            id splashInstance = [splashClass performSelector:NSSelectorFromString(@\"sharedInstance\")];\n            if (splashInstance \u0026\u0026 [splashInstance respondsToSelector:NSSelectorFromString(@\"showSplash\")]) {\n                [splashInstance performSelector:NSSelectorFromString(@\"showSplash\")];\n            }\n        }\n    });\n}\n```\n---\n\n### **🤖 Android Setup**  \n\n#### **1️⃣ Create `launch_screen.xml` for Splash Screen**  \nCreate the file **`android/app/src/main/res/layout/launch_screen.xml`** as per requirement:  \n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003cFrameLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:background=\"@color/white\"\u003e\n\n    \u003cImageView\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:layout_gravity=\"center\"\n        android:src=\"@drawable/splash_logo\" /\u003e\n\n\u003c/FrameLayout\u003e\n```\n\n#### **2️⃣ Optionally, Define a Custom Theme**  \nYou can specify a theme in `android/app/src/main/res/values/styles.xml` and style name should be `SplashViewTheme`. \n\n```xml\n\u003cresources\u003e\n  \u003cstyle name=\"SplashViewTheme\" parent=\"Theme.AppCompat.NoActionBar\"\u003e\n    \u003citem name=\"android:windowExitAnimation\"\u003e@android:anim/fade_out\u003c/item\u003e\n    \u003citem name=\"android:windowLightStatusBar\"\u003etrue\u003c/item\u003e\n  \u003c/style\u003e\n\u003c/resources\u003e\n```\n\n#### **3️⃣ Modify `MainActivity.kt` to Show the Splash Screen**  \nUpdate **`MainActivity.kt`** to display the splash screen on launch:  \n\n```kotlin\npackage com.example\n\nimport android.os.Bundle\nimport com.facebook.react.ReactActivity\nimport com.splashview.SplashView\n\nclass MainActivity : ReactActivity() {\n\n    override fun onCreate(savedInstanceState: Bundle?) {\n        SplashView.showSplashView(this) // Show the splash screen\n        super.onCreate(savedInstanceState)\n    }\n}\n```\n\n---\n\n## **🚀 Usage**  \n\n### **Basic Example**  \n```tsx\nimport { hideSplash, showSplash } from 'react-native-splash-view';\n\n\nshowSplash(); // Show the splash screen (If you don't want to start it from native side)\n\nuseEffect(() =\u003e {\n    setTimeout(() =\u003e {\n      hideSplash(); // Hide after some time\n    }, 5000);\n}, []);\n```\n\n---\n\n## **⚙️ API**  \n\n| Method          | Description                        |\n|----------------|----------------------------------|\n| `showSplash()`  | Shows the splash screen   |\n| `hideSplash()`  | Hides the splash screen   |\n\n---\n\n## **🐞 Troubleshooting**  \n\n### **1️⃣ Cannot find `SplashView` in Pods folder (iOS)**  \n\nThen run:  \n```sh\ncd ios \u0026\u0026 pod install --repo-update \u0026\u0026 cd ..\n```\n\n### **3️⃣ `SplashView` not found in `MainActivity.kt` (Android)**  \nEnsure your package is correctly linked. Run the following:  \n```sh\ncd android \u0026\u0026 ./gradlew clean \u0026\u0026 cd ..\nnpx react-native run-android\n```\n\n---\n## **💡 Contributing**  \nFeel free to open issues and pull requests! Contributions are welcome.  \n\n---\n\n## **📜 License**  \nThis project is licensed under the **MIT License**.  \n\n---\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjagnesh%2Freact-native-splash-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjagnesh%2Freact-native-splash-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjagnesh%2Freact-native-splash-view/lists"}