Skip to content

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

License

Notifications You must be signed in to change notification settings

jakobvase/react-native-splash-screen

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-splash-screen

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

Content

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:

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 {
    ...
    compile project(':react-native-splash-screen')
}	

3.Update the MainApplication.java file to use react-native-splash-screen via the following changes:

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        protected 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. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-native-launch-image and add SplashScreen.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libSplashScreen.a to your project's Build PhasesLink Binary With Libraries
  4. Run your project (Cmd+R).

Third step(Plugin Configuration):

Android:

Update the MainActivity.java file to use react-native-splash-screen via the following changes:

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

iOS:

You should add following code to AppDelegate.m for keeping launch image:

#import "AppDelegate.h"
#import "RCTRootView.h"
#import "SplashScreen.h"  // here

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // ...other code
    
    [SplashScreen show];  // here
    return YES;
}

@end

Demo

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

Getting started

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

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

Android:

Add a file called launch_screen.xml in the layout as the splash screen.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/launch_screen">
</LinearLayout>

Then you can use it like this:

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

export default class WelcomePage extends Component {

    componentDidMount() {
    	 // do anything while splash screen keeps, use await to wait for an async task.
        SplashScreen.hide();
    }
}

API

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

Contribution

Issues are welcome. Please add a screenshot of bug and code snippet. Quickest way to solve issue is to reproduce it on one of the examples.

Pull requests are welcome. If you want to change API or making something big better to create issue and discuss it first.


MIT Licensed

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Java 76.6%
  • Objective-C 18.1%
  • JavaScript 5.3%