{"id":3930,"url":"https://github.com/crazycodeboy/react-native-splash-screen","last_synced_at":"2025-05-12T15:20:12.463Z","repository":{"id":37493332,"uuid":"68197895","full_name":"crazycodeboy/react-native-splash-screen","owner":"crazycodeboy","description":"A splash screen for react-native, hide when application loaded ,it works on iOS and Android.","archived":false,"fork":false,"pushed_at":"2024-07-30T16:31:56.000Z","size":3912,"stargazers_count":5645,"open_issues_count":408,"forks_count":1104,"subscribers_count":62,"default_branch":"master","last_synced_at":"2025-04-23T12:52:27.460Z","etag":null,"topics":["android","ios","launchimage","react-native","react-native-splashscreen","splash-screen","splashscreen"],"latest_commit_sha":null,"homepage":"","language":"Java","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/crazycodeboy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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":"2016-09-14T10:43:55.000Z","updated_at":"2025-04-23T09:15:59.000Z","dependencies_parsed_at":"2023-02-05T03:45:37.082Z","dependency_job_id":"af71073a-7529-44fa-8b2c-398b39aafac3","html_url":"https://github.com/crazycodeboy/react-native-splash-screen","commit_stats":{"total_commits":111,"total_committers":50,"mean_commits":2.22,"dds":0.6036036036036037,"last_synced_commit":"b47197626804a742b8569cad50d5e0ed92fc765c"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crazycodeboy%2Freact-native-splash-screen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crazycodeboy%2Freact-native-splash-screen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crazycodeboy%2Freact-native-splash-screen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crazycodeboy%2Freact-native-splash-screen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/crazycodeboy","download_url":"https://codeload.github.com/crazycodeboy/react-native-splash-screen/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250477812,"owners_count":21437049,"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","ios","launchimage","react-native","react-native-splashscreen","splash-screen","splashscreen"],"created_at":"2024-01-05T20:16:55.658Z","updated_at":"2025-04-23T17:10:57.278Z","avatar_url":"https://github.com/crazycodeboy.png","language":"Java","readme":"# react-native-splash-screen\n\n\n[![Download](https://img.shields.io/badge/Download-v3.3.0-ff69b4.svg) ](https://www.npmjs.com/package/react-native-splash-screen)\n[ ![PRs Welcome](https://img.shields.io/badge/PRs-Welcome-brightgreen.svg)](https://github.com/crazycodeboy/react-native-splash-screen/pulls)\n[ ![react-native-splash-screen release](https://img.shields.io/github/release/crazycodeboy/react-native-splash-screen.svg?maxAge=2592000?style=flat-square)](https://github.com/crazycodeboy/GitHubPopular/releases)\n[ ![语言 中文](https://img.shields.io/badge/语言-中文-feb252.svg)](https://github.com/crazycodeboy/react-native-splash-screen/blob/master/README.zh.md)\n[![License MIT](http://img.shields.io/badge/license-MIT-orange.svg?style=flat)](https://raw.githubusercontent.com/crazycodeboy/react-native-check-box/master/LICENSE)\n[ ![原理 解析](https://img.shields.io/badge/原理-解析-brightgreen.svg)](https://github.com/crazycodeboy/RNStudyNotes/blob/master/React%20Native%20%E9%97%AE%E9%A2%98%E5%8F%8A%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%E5%90%88%E9%9B%86/React%20Native%20%E5%90%AF%E5%8A%A8%E7%99%BD%E5%B1%8F%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3%E6%95%99%E7%A8%8B/React%20Native%20%E5%90%AF%E5%8A%A8%E7%99%BD%E5%B1%8F%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3%E6%95%99%E7%A8%8B.md)\n[ ![Flutter](https://img.shields.io/badge/Flutter-brightgreen.svg)](https://github.com/crazycodeboy/flutter_splash_screen)\n\nA splash screen API for react-native which can programatically hide and show the splash screen. Works on iOS and Android.\n\n## Content\n\n- [Changes](#changes)\n- [Installation](#installation)\n- [Examples](#examples)\n- [Getting started](#getting-started)\n- [API](#api)\n- [Testing](#testing)\n- [Troubleshooting](#troubleshooting)\n- [Contribution](#contribution)\n\n\n## Changes\nFor React Native \u003e= 0.47.0 use [v3.+](https://github.com/crazycodeboy/react-native-splash-screen/releases), for React Native \u003c 0.47.0 use [v2.1.0](https://github.com/crazycodeboy/react-native-splash-screen/releases/tag/v1.0.9)\n\n## Examples  \n* [Examples](https://github.com/crazycodeboy/react-native-splash-screen/tree/master/examples)\n\n![react-native-splash-screen-Android](https://raw.githubusercontent.com/crazycodeboy/react-native-splash-screen/v3.0.0/examples/Screenshots/react-native-splash-screen-Android.gif)\n![react-native-splash-screen-iOS](https://raw.githubusercontent.com/crazycodeboy/react-native-splash-screen/v3.0.0/examples/Screenshots/react-native-splash-screen-iOS.gif)\n\n\n\n## Installation\n\n### First step(Download):\nRun `npm i react-native-splash-screen --save`\n\n### Second step(Plugin Installation):\n\n#### Automatic installation\n\n`react-native link react-native-splash-screen` or `rnpm link react-native-splash-screen`\n\n#### Manual installation  \n\n**Android:**\n\n1. In your `android/settings.gradle` file, make the following additions:\n```java\ninclude ':react-native-splash-screen'   \nproject(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')\n```\n\n2. In your android/app/build.gradle file, add the `:react-native-splash-screen` project as a compile-time dependency:\n\n```java\n...\ndependencies {\n    ...\n    implementation project(':react-native-splash-screen')\n}\n```\n\n3. Update the MainApplication.java file to use `react-native-splash-screen` via the following changes:   \n\n```java\n// react-native-splash-screen \u003e= 0.3.1\nimport org.devio.rn.splashscreen.SplashScreenReactPackage;\n// react-native-splash-screen \u003c 0.3.1\nimport com.cboy.rn.splashscreen.SplashScreenReactPackage;\n\npublic class MainApplication extends Application implements ReactApplication {\n\n    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {\n        @Override\n        public boolean getUseDeveloperSupport() {\n            return BuildConfig.DEBUG;\n        }\n\n        @Override\n        protected List\u003cReactPackage\u003e getPackages() {\n            return Arrays.\u003cReactPackage\u003easList(\n                    new MainReactPackage(),\n            new SplashScreenReactPackage()  //here\n            );\n        }\n    };\n\n    @Override\n    public ReactNativeHost getReactNativeHost() {\n        return mReactNativeHost;\n    }\n}\n```\n\n**iOS:**\n\n1. `cd ios`\n2. `run pod install`\n\n\u003eOR\n\n1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`\n2. Go to `node_modules` ➜ `react-native-splash-screen` and add `SplashScreen.xcodeproj`\n3. In XCode, in the project navigator, select your project. Add `libSplashScreen.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`\n4. To fix `'RNSplashScreen.h' file not found`, you have to select your project → Build Settings → Search Paths → Header Search Paths to add:\n\n   `$(SRCROOT)/../node_modules/react-native-splash-screen/ios`\n\n\n\n### Third step(Plugin Configuration):\n\n**Android:**\n\nUpdate the `MainActivity.java` to use `react-native-splash-screen` via the following changes:\n\n```java\nimport android.os.Bundle; // here\nimport com.facebook.react.ReactActivity;\n// react-native-splash-screen \u003e= 0.3.1\nimport org.devio.rn.splashscreen.SplashScreen; // here\n// react-native-splash-screen \u003c 0.3.1\nimport com.cboy.rn.splashscreen.SplashScreen; // here\n\npublic class MainActivity extends ReactActivity {\n   @Override\n    protected void onCreate(Bundle savedInstanceState) {\n        SplashScreen.show(this);  // here\n        super.onCreate(savedInstanceState);\n    }\n    // ...other code\n}\n```\n\n**iOS:**\n\nUpdate `AppDelegate.m` with the following additions:\n\n\n```obj-c\n#import \"AppDelegate.h\"\n\n#import \u003cReact/RCTBundleURLProvider.h\u003e\n#import \u003cReact/RCTRootView.h\u003e\n#import \"RNSplashScreen.h\"  // here\n\n@implementation AppDelegate\n\n- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions\n{\n    // ...other code\n\n    [RNSplashScreen show];  // here\n    // or\n    //[RNSplashScreen showSplash:@\"LaunchScreen\" inRootView:rootView];\n    return YES;\n}\n\n@end\n\n```\n\n## Getting started  \n\nImport `react-native-splash-screen` in your JS file.\n\n`import SplashScreen from 'react-native-splash-screen'`    \n\n### Android:\n\nCreate a file called `launch_screen.xml` in `app/src/main/res/layout` (create the `layout`-folder if it doesn't exist). The contents of the file should be the following:\n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003cRelativeLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"\n    android:orientation=\"vertical\" android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\u003e\n    \u003cImageView android:layout_width=\"match_parent\" android:layout_height=\"match_parent\" android:src=\"@drawable/launch_screen\" android:scaleType=\"centerCrop\" /\u003e\n\u003c/RelativeLayout\u003e\n```\n\nCustomize your launch screen by creating a `launch_screen.png`-file and placing it in an appropriate `drawable`-folder. Android automatically scales drawable, so you do not necessarily need to provide images for all phone densities.\nYou can create splash screens in the following folders:\n* `drawable-ldpi`\n* `drawable-mdpi`\n* `drawable-hdpi`\n* `drawable-xhdpi`\n* `drawable-xxhdpi`\n* `drawable-xxxhdpi`\n\nAdd a color called `primary_dark` in `app/src/main/res/values/colors.xml`\n\n```\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003cresources\u003e\n    \u003ccolor name=\"primary_dark\"\u003e#000000\u003c/color\u003e\n\u003c/resources\u003e\n```\n\n\n**Optional steps：**\n\nIf you want the splash screen to be transparent, follow these steps.\n\nOpen `android/app/src/main/res/values/styles.xml` and add `\u003citem name=\"android:windowIsTranslucent\"\u003etrue\u003c/item\u003e` to the file. It should look like this:\n\n```xml\n\u003cresources\u003e\n    \u003c!-- Base application theme. --\u003e\n    \u003cstyle name=\"AppTheme\" parent=\"Theme.AppCompat.Light.NoActionBar\"\u003e\n        \u003c!-- Customize your theme here. --\u003e\n        \u003c!--设置透明背景--\u003e\n        \u003citem name=\"android:windowIsTranslucent\"\u003etrue\u003c/item\u003e\n    \u003c/style\u003e\n\u003c/resources\u003e\n```\n\n**To learn more see [examples](https://github.com/crazycodeboy/react-native-splash-screen/tree/master/examples)**\n\n\nIf you want to customize the color of the status bar when the splash screen is displayed:\n\nCreate `android/app/src/main/res/values/colors.xml` and add\n```xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003cresources\u003e\n    \u003ccolor name=\"status_bar_color\"\u003e\u003c!-- Colour of your status bar here --\u003e\u003c/color\u003e\n\u003c/resources\u003e\n```\n\nCreate a style definition for this in `android/app/src/main/res/values/styles.xml`:\n```xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003cresources\u003e\n    \u003cstyle name=\"SplashScreenTheme\" parent=\"SplashScreen_SplashTheme\"\u003e\n        \u003citem name=\"colorPrimaryDark\"\u003e@color/status_bar_color\u003c/item\u003e\n    \u003c/style\u003e\n\u003c/resources\u003e\n```\n\nChange your `show` method to include your custom style:\n```java\nSplashScreen.show(this, R.style.SplashScreenTheme);\n```\n\n### iOS    \n\nCustomize your splash screen via `LaunchScreen.storyboard` or `LaunchScreen.xib`。\n\n**Learn more to see [examples](https://github.com/crazycodeboy/react-native-splash-screen/tree/master/examples)**\n\n- [via LaunchScreen.storyboard Tutorial](https://github.com/crazycodeboy/react-native-splash-screen/blob/master/add-LaunchScreen-tutorial-for-ios.md)\n\n\n## Usage\n\nUse like so:\n\n```javascript\nimport SplashScreen from 'react-native-splash-screen'\n\nexport default class WelcomePage extends Component {\n\n    componentDidMount() {\n    \t// do stuff while splash screen is shown\n        // After having done stuff (such as async tasks) hide the splash screen\n        SplashScreen.hide();\n    }\n}\n```\n\n## API\n\n\n| Method | Type     | Optional | Description                         |\n|--------|----------|----------|-------------------------------------|\n| show() | function | false    | Open splash screen (Native Method ) |\n| show(final Activity activity, final boolean fullScreen) | function | false    | Open splash screen (Native Method ) |\n| hide() | function | false    | Close splash screen                 |\n\n## Testing\n\n### Jest\n\nFor Jest to work you will need to mock this component. Here is an example:\n\n```\n// __mocks__/react-native-splash-screen.js\nexport default {\n  show: jest.fn().mockImplementation( () =\u003e { console.log('show splash screen'); } ),\n  hide: jest.fn().mockImplementation( () =\u003e { console.log('hide splash screen'); } ),\n}\n```\n\n## Troubleshooting \n\n### Splash screen always appears stretched/distorted\nAdd the ImageView with a scaleType in the `launch_screen.xml`, e.g.:\n```\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003cFrameLayout\n  xmlns:android=\"http://schemas.android.com/apk/res/android\"\n  android:layout_width=\"match_parent\"\n  android:layout_height=\"match_parent\"\n  android:orientation=\"vertical\"\n\u003e\n  \u003cImageView \n    android:src=\"@drawable/launch_screen\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:scaleType=\"centerCrop\"\n  \u003e\n  \u003c/ImageView\u003e\n\u003c/FrameLayout\u003e\n```\n\n## Contribution\n\nIssues are welcome. Please add a screenshot of you bug and a code snippet. Quickest way to solve issue is to reproduce it in one of the examples.\n\nPull requests are welcome. If you want to change the API or do something big it is best to create an issue and discuss it first.\n\n---\n\n**[MIT Licensed](https://github.com/crazycodeboy/react-native-splash-screen/blob/master/LICENSE)**\n","funding_links":[],"categories":["Components","Java","Libraries","Others","Splash Screen"],"sub_categories":["UI","Splash Screen"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrazycodeboy%2Freact-native-splash-screen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcrazycodeboy%2Freact-native-splash-screen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrazycodeboy%2Freact-native-splash-screen/lists"}