A splashscreen for react-native, hide when application loaded
npm install @remobile/react-native-splashscreen --save-
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:nil launchOptions: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]; return YES;... include ':react-native-splashscreen' project(':react-native-splashscreen').projectDir = new File(settingsDir, '../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)
...... import com.remobile.splashscreen.RCTSplashScreenPackage; // <--- import ...... @Override protected List<ReactPackage> getPackages() { ...... new RCTSplashScreenPackage(MainActivity.activity, true), // <------ add here [the seconde params is translucent] ...... }- register module (in MainActivity.java)
public class MainActivity extends ReactActivity { public static Activity activity; // <------ add here ...... @Override protected String getMainComponentName() { activity = this; // <------ add here ...... } }
'use strict'; var React = require('react'); var ReactNative = require('react-native'); var { AppRegistry, View, Text, } = ReactNative; var SplashScreen = require('@remobile/react-native-splashscreen'); var KitchenSink = React.createClass({ componentDidMount: function() { SplashScreen.hide(); }, render() { return( <View> <Text> fangyunjiang is a good developer! </Text> </View> ); } }); AppRegistry.registerComponent('KitchenSink', () => KitchenSink);- hide() hide SplashScreen