react-native-smart-splash-screen

A smart splash screen for React Native apps, written in JS, oc and java for cross-platform support. It works on iOS and Android.

##Tutorial for installation (https://www.youtube.com/watch?v=XaKqek_m2mI)

Preview

Installation

npm install react-native-smart-splash-screen --save

Notice

React-native-smart-splash-screen can only be used with react-native version >= 0.4.0 for ios, if you want to use the package with react-native version < 0.4.0, use npm install [email protected] --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/react-native-smart-splash-screen/ios/RCTSplashScreen/RCTSplashScreen

Using an Image

• delete your project's LaunchScreen.xib

• Drag SplashScreenResource folder to your project if you want change image, replace splash.png or add a image with your custom name

• In AppDelegate.m

...
#import "RCTSplashScreen.h" //import interface
...
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                  moduleName:@"ReactNativeComponents"
                                           initialProperties:nil
                                               launchOptions:launchOptions];

//[RCTSplashScreen open:rootView];
[RCTSplashScreen open:rootView withImageNamed:@"splash"]; // activate splashscreen, imagename from LaunchScreen.xib

rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [UIViewController new];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
return YES;

Using a Xib

• Design your XIB in Xcode, setting proper autolayout constraints

• Configure your project:

  • Click on your main project file (the one that represents the .xcodeproj)
  • Click on your Target
  • Select "General"
  • Scroll down to "App Icons and Launch Images"
  • Set your "Launch Screen File" to the XIB you're using

• In AppDelegate.m

...
#import "RCTSplashScreen.h" //import interface
...
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                  moduleName:@"ReactNativeComponents"
                                           initialProperties:nil
                                               launchOptions:launchOptions];

//[RCTSplashScreen open:rootView];
[RCTSplashScreen open:rootView withXibNamed:@"LaunchScreen"]; // activate splashscreen, using LaunchScreen.xib

rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [UIViewController new];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
return YES;

Installation (Android)

• In android/settings.gradle

...
include ':react-native-smart-splashscreen'
project(':react-native-smart-splashscreen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-smart-splash-screen/android')

• In android/app/build.gradle

...
dependencies {
    ...
    // From node_modules
    compile project(':react-native-smart-splashscreen')
}

• Add your own drawable/splash.png to android/app/src/main/res/, it is recommended to add drawable-?dpi folders that you need.

• in MainApplication.java

...
import com.reactnativecomponent.splashscreen.RCTSplashScreenPackage;    //import package
...
/**
 * A list of packages used by the app. If the app uses additional views
 * or modules besides the default ones, add more packages here.
 */
@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new RCTSplashScreenPackage()    //register Module
    );
}
...

• in MainActivity.java

...
import com.reactnativecomponent.splashscreen.RCTSplashScreen;    //import RCTSplashScreen
...
@Override
protected void onCreate(Bundle savedInstanceState) {
    RCTSplashScreen.openSplashScreen(this);   //open splashscreen
    //RCTSplashScreen.openSplashScreen(this, true, ImageView.ScaleType.FIT_XY);   //open splashscreen fullscreen
    super.onCreate(savedInstanceState);
}

• In android/app/**/styles.xml

...
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="android:windowIsTranslucent">true</item>
</style>
...

Using an Image

Add splash.png to drawable@* folders

Using Custom Layout

Create splash_screen.xml file inside res/layout

ex:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#333"
    android:orientation="vertical"
    >
    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="60dp"
        android:src="@drawable/mylogo_logo" />
</RelativeLayout>

Then modify onCreate method in MainActivity.java:

  @Override
  protected void onCreate(Bundle saveInstanceState) {
    RCTSplashScreen.openSplashScreen(this, R.layout.splash_screen, true , ImageView.ScaleType.CENTER_INSIDE);
    super.onCreate(saveInstanceState);
  }

Full Demo

see ReactNativeComponentDemos

Usage

...
import SplashScreen from 'react-native-smart-splash-screen'
...
componentDidMount () {
     //SplashScreen.close(SplashScreen.animationType.scale, 850, 500)
     SplashScreen.close({
        animationType: SplashScreen.animationType.scale,
        duration: 850,
        delay: 500,
     })
}
...

Method

• close(animationType, duration, delay) close splash screen with custom animation

  • animationType: determine the type of animation.enum(animationType.none, animationType.fade, animationType.scale)
  • duration: determine the duration of animation
  • delay: determine the delay of animation