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
• Getting started
• API
• Testing
• Troubleshooting
• Contribution

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:

1. cd ios
2. 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>

Contribution

Issues are welcome. Please add a screenshot of you bug and a code snippet. Quickest way to solve issue is to reproduce it in one of the examples.

Pull requests are welcome. If you want to change the API or do something big it is best to create an issue and discuss it first.

License

MIT

Made with create-react-native-library

Special thanks to react-native-splash-screen, for the inspiration and even entire basic codebase.