react-native-splash-screen

by crazycodeboy

A splash screen for react-native, hide when application loaded ,it works on iOS and Android.

4.5K Stars 872 Forks Last release: over 1 year ago (v3.2.0) MIT License 157 Commits 11 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

react-native-splash-screen

Download PRs Welcome react-native-splash-screen release 语言 中文 License MIT 原理 解析 Flutter

A splash screen API for react-native which can programatically hide and show the splash screen. Works on iOS and Android.

Content

Changes

For React Native >= 0.47.0 use v3.+, for React Native < 0.47.0 use v2.1.0

Examples

react-native-splash-screen-Android react-native-splash-screen-iOS

Installation

First step(Download):

Run

npm i react-native-splash-screen --save

Second step(Plugin Installation):

Automatic installation

react-native link react-native-splash-screen
or
rnpm link react-native-splash-screen

Manual installation

Android:

  1. In your

    android/settings.gradle
    file, make the following additions:
    java
    include ':react-native-splash-screen'   
    project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
    
  2. In your android/app/build.gradle file, add the

    :react-native-splash-screen
    project as a compile-time dependency:
...
dependencies {
    ...
    implementation project(':react-native-splash-screen')
}
  1. Update the MainApplication.java file to use
    react-native-splash-screen
    via the following changes:
// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreenReactPackage;
// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreenReactPackage;

public class MainApplication extends Application implements ReactApplication {

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
        return BuildConfig.DEBUG;
    }

    @Override
    protected List<reactpackage> getPackages() {
        return Arrays.<reactpackage>asList(
                new MainReactPackage(),
        new SplashScreenReactPackage()  //here
        );
    }
};

@Override
public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
}

}

iOS:

  1. cd ios
  2. run pod install

OR

  1. In XCode, in the project navigator, right click
    Libraries
    Add Files to [your project's name]
  2. Go to
    node_modules
    react-native-splash-screen
    and add
    SplashScreen.xcodeproj
  3. In XCode, in the project navigator, select your project. Add
    libSplashScreen.a
    to your project's
    Build Phases
    Link Binary With Libraries
  4. To fix
    'RNSplashScreen.h' file not found
    , you have to select your project → Build Settings → Search Paths → Header Search Paths to add:

$(SRCROOT)/../node_modules/react-native-splash-screen/ios

Third step(Plugin Configuration):

Android:

Update the

MainActivity.java
to use
react-native-splash-screen
via the following changes:
import android.os.Bundle; // here
import com.facebook.react.ReactActivity;
// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreen; // here
// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreen; // here

public class MainActivity extends ReactActivity { @Override protected void onCreate(Bundle savedInstanceState) { SplashScreen.show(this); // here super.onCreate(savedInstanceState); } // ...other code }

iOS:

Update

AppDelegate.m
with the following additions:
#import "AppDelegate.h"

#import #import #import "RNSplashScreen.h" // here

@implementation AppDelegate

  • (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // ...other code

    [RNSplashScreen show]; // here // or //[RNSplashScreen showSplash:@"LaunchScreen" inRootView:rootView]; return YES; }

@end

Getting started

Import

react-native-splash-screen
in your JS file.

import SplashScreen from 'react-native-splash-screen'

Android:

Create 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:
    

Customize 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. You can create splash screens in the following folders: *
drawable-ldpi
*
drawable-mdpi
*
drawable-hdpi
*
drawable-xhdpi
*
drawable-xxhdpi
*
drawable-xxxhdpi

Add a color called

primary_dark
in
app/src/main/res/values/colors.xml
    #000000

Optional steps:

If you want the splash screen to be transparent, follow these steps.

Open

android/app/src/main/res/values/styles.xml
and add
true
to the file. It should look like this:
    
    

To learn more see examples

If you want to customize the color of the status bar when the splash screen is displayed:

Create

android/app/src/main/res/values/colors.xml
and add
xml


    

Create a style definition for this in

android/app/src/main/res/values/styles.xml
:
xml


    

Change your

show
method to include your custom style:
java
SplashScreen.show(this, R.style.SplashScreenTheme);

iOS

Customize your splash screen via

LaunchScreen.storyboard
or
LaunchScreen.xib

Learn more to see examples

Usage

Use like so:

import SplashScreen from 'react-native-splash-screen'

export default class WelcomePage extends Component {

componentDidMount() {
    // do stuff while splash screen is shown
    // After having done stuff (such as async tasks) hide the splash screen
    SplashScreen.hide();
}

}

API

| Method | Type | Optional | Description | |--------|----------|----------|-------------------------------------| | show() | function | false | Open splash screen (Native Method ) | | hide() | function | false | Close splash screen |

Testing

Jest

For Jest to work you will need to mock this component. Here is an example:

// __mocks__/react-native-splash-screen.js
export default {
  show: jest.fn().mockImplementation( () => { console.log('show splash screen'); } ),
  hide: jest.fn().mockImplementation( () => { console.log('hide splash screen'); } ),
}

Troubleshooting

Splash screen always appears stretched/distorted

Add the ImageView with a scaleType in the

launch_screen.xml
, e.g.: ``` <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layoutwidth="matchparent" android:layoutheight="matchparent" android:orientation="vertical"

<ImageView android:src="@drawable/launchscreen" android:layoutwidth="matchparent" android:layoutheight="match_parent" android:scaleType="centerCrop"

```

Contribution

Issues 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.

Pull 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.


MIT Licensed

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.