React Native SplashScreen (remobile)

A splashscreen for react-native, hide when application loaded

Installation

npm install @remobile/react-native-splashscreen --save

Installation (iOS)

• Drag RCTSplashScreen.xcodeproj to your project on Xcode.

• Click on your main project file (the one that represents the .xcodeproj) select Build Phases and drag libRCTSplashScreen.a from the Products folder inside the RCTSplashScreen.xcodeproj.

• Look for Header Search Paths and make sure it contains $(SRCROOT)/../../../react-native/React as recursive.

• In your project, Look for Header Search Paths and make sure it contains $(SRCROOT)/../node_modules/@remobile/react-native-splashscreen/ios/RCTSplashScreen

• delete your project's LaunchScreen.xib

• Dray SplashScreenResource to your project [if you want change image, replace splash.png]

• In AppDelegate.m

...
#import"RCTSplashScreen.h"//<--- import
...
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"KitchenSink"initialProperties:nillaunchOptions:launchOptions];
[RCTSplashScreen show:rootView]; //<--- add show SplashScreen
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [[UIViewController alloc] init];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
returnYES;

Installation (Android)

...
include ':react-native-splashscreen'
project(':react-native-splashscreen').projectDir =newFile(rootProject.projectDir, '../node_modules/@remobile/react-native-splashscreen/android')

• In android/app/build.gradle

...
dependencies {
...
compile project(':react-native-splashscreen')
}

• if you want change image, replace res/drawable/splash.png

• register module (in MainApplication.java)

importcom.remobile.splashscreen.*; // <--- importpublicclassMainApplicationextendsApplicationimplementsReactApplication {
......
privatefinalReactNativeHostmReactNativeHost = newReactNativeHost(this) {
@OverrideprotectedbooleangetUseDeveloperSupport() {
returnBuildConfig.DEBUG;
}
@OverrideprotectedList<ReactPackage> getPackages() {
returnArrays.<ReactPackage>asList(
newMainReactPackage(),
newRCTSplashScreenPackage() // <--- add this
);
}
};
......
}

Screencasts

Usage

Example

'use strict';varReact=require('react-native');var{
AppRegistry,
View,
Text,}=React;varSplashScreen=require('@remobile/react-native-splashscreen');varKitchenSink=React.createClass({componentDidMount: function(){SplashScreen.hide();},render(){return(<View><Text>
fangyunjiang is a good developer!
</Text></View>);}});AppRegistry.registerComponent('KitchenSink',()=>KitchenSink);

methods

• hide() hide SplashScreen