Skip to content

xuansontrinh/react-native-splashscreen

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Installation (Android)

...
include ':react-native-splashscreen'
project(':react-native-splashscreen').projectDir = new File(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)

import com.remobile.splashscreen.*;  // <--- import

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 RCTSplashScreenPackage()  // <--- add this
        );
      }
  };
  ......
}

Screencasts

gif

Usage

Example

'use strict';
var React = require('react-native');
var {
    AppRegistry,
    View,
    Text,
} = React;
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);

methods

  • hide() hide SplashScreen

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Java 75.1%
  • Objective-C 21.9%
  • JavaScript 3.0%