React-native-rive-splash-screen NPM

react-native-rive-splash-screen

A splash screen API for react-native which supports rive animations and can programatically hide and show the splash screen.

Works on iOS and Android& written in Swift & Kotlin.

Content

Installation

First step(Download):

via npm

npm i react-native-rive-splash-screen --save

OR via yarn

yarn add react-native-rive-splash-screen

iOS:

cd ios
run pod install

Third step(Plugin Configuration):

Android:

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

import android.os.Bundle; // here
import com.facebook.react.ReactActivity;
import com.reactnativerivesplashscreen.RiveSplashScreen; // here

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

iOS:

Update AppDelegate.m with the following additions:

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

// import goes here
@import react_native_rive_splash_screen;

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // ... rest of code

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [self.reactDelegate createRootViewController];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;

  [self.window makeKeyAndVisible];

  // show splash screen, with rive animation support.
  // it is mandatory to show splash here after self.window is visible.
  RiveSplashScreen *riveSplashScreen = [RiveSplashScreen staticInstance];
  [riveSplashScreen showSplash:@"SplashScreen" inRootView:rootView withArtboard:nil withRiveFile:@"loadingscreen"];

  [super application:application didFinishLaunchingWithOptions:launchOptions];
  return YES;
}

@end

Getting started

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

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

Android:

Create a file called launch_screen.xml in app/src/main/res/layout (create the layout-folder if it doesn't exist). The contents of the file should be the following:

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

Customize your launch screen by creating a launch_screen.png-file and placing it in an appropriate drawable-folder. Android automatically scales drawable, so you do not necessarily need to provide images for all phone densities. You can create splash screens in the following folders:

drawable-ldpi
drawable-mdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
drawable-xxxhdpi

Add a color called primary_dark in app/src/main/res/values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary_dark">#000000</color>
</resources>

Optional steps：

If you want the splash screen to be transparent, follow these steps.

Open android/app/src/main/res/values/styles.xml and add <item name="android:windowIsTranslucent">true</item> to the file. It should look like this:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <!--设置透明背景-->
        <item name="android:windowIsTranslucent">true</item>
    </style>
</resources>

To learn more see examples

If you want to customize the color of the status bar when the splash screen is displayed:

Create android/app/src/main/res/values/colors.xml and add

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="status_bar_color"><!-- Colour of your status bar here --></color>
</resources>

Create a style definition for this in android/app/src/main/res/values/styles.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="SplashScreenTheme" parent="SplashScreen_SplashTheme">
        <item name="colorPrimaryDark">@color/status_bar_color</item>
    </style>
</resources>

Change your show method to include your custom style:

SplashScreen.show(this, R.style.SplashScreenTheme);

iOS

Customize your splash screen via LaunchScreen.storyboard or LaunchScreen.xib。

Learn more to see examples

via LaunchScreen.storyboard Tutorial

Usage

Use like so:

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

export default class WelcomePage extends Component {

    componentDidMount() {
    	// do stuff while splash screen is shown
        // After having done stuff (such as async tasks) hide the splash screen
        SplashScreen.hide();
    }
}

API

Method	Type	Optional	Description
show()	function	false	Open splash screen (Native Method )
showSplash(splashScreen: String?, inRootView rootView: UIView?, withArtboard artboardName: String? = nil, withRiveFile fileName: String?)	function	false	Open splash screen (Native Method )
hide()	function	false	Close splash screen

Testing

Jest

For Jest to work you will need to mock this component. Here is an example:

// __mocks__/react-native-splash-screen.js
export default {
  show: jest.fn().mockImplementation( () => { console.log('show splash screen'); } ),
  hide: jest.fn().mockImplementation( () => { console.log('hide splash screen'); } ),
}

Troubleshooting

Splash screen always appears stretched/distorted

Add the ImageView with a scaleType in the launch_screen.xml, e.g.:

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