react-native-splashscreens
A splash screen API for react-native which can programatically hide and show the splash screen. Works on iOS and Android.
Content
Changes
For React Native >= 0.47.0 use v3.+, for React Native < 0.47.0 use v2.1.0
Examples
Installation
First step(Download):
Run npm i react-native-splashscreens --save
Second step(Plugin Installation):
Automatic installation
react-native link react-native-splashscreens
or rnpm link react-native-splashscreens
Manual installation
Android:
- In your
android/settings.gradle
file, make the following additions:
include ':react-native-splashscreens'.projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splashscreens/android')
- In your android/app/build.gradle file, add the
:react-native-splashscreens
project as a compile-time dependency:
...dependencies { ... implementation }
- Update the MainApplication.java file to use
react-native-splashscreens
via the following changes:
// react-native-splashscreens >= 0.3.1 // react-native-splashscreens < 0.3.1
iOS:
-
In XCode, in the project navigator, right click
Libraries
➜Add Files to [your project's name]
-
Go to
node_modules
➜react-native-splashscreens
and addsplashscreens.xcodeproj
-
In XCode, in the project navigator, select your project. Add
libsplashscreens.a
to your project'sBuild Phases
➜Link Binary With Libraries
-
To fix
'RNsplashscreens.h' file not found
, you have to select your project → Build Settings → Search Paths → Header Search Paths to add:$(SRCROOT)/../node_modules/react-native-splashscreens/ios
Third step(Plugin Configuration):
Android:
Update the MainActivity.java
to use react-native-splashscreens
via the following changes:
// here // react-native-splashscreens >= 0.3.1 // here // react-native-splashscreens < 0.3.1 // here
iOS:
Update AppDelegate.m
with the following additions:
#import "AppDelegate.h" #import <React/RCTBundleURLProvider.h>#import <React/RCTRootView.h>#import "RNsplashscreens.h" // here @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{ // ...other code [RNsplashscreens show]; // here // or //[RNsplashscreens showSplash:@"LaunchScreen" inRootView:rootView]; return YES;} @end
Getting started
Import react-native-splashscreens
in your JS file.
import splashscreens from 'react-native-splashscreens'
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:
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:
<!-- Base application theme. --> <!-- Customize your theme here. --> <!--设置透明背景--> true
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
<!-- Colour of your status bar here -->
Create a style definition for this in android/app/src/main/res/values/styles.xml
:
@color/status_bar_color
Change your show
method to include your custom style:
splashscreens.;
iOS
Customize your splash screen via LaunchImage
or LaunchScreen.xib
,
Learn more to see examples
Usage
Use like so:
; { // do stuff while splash screen is shown // After having done stuff (such as async tasks) hide the splash screen splashscreens; }
API
Method | Type | Optional | Description |
---|---|---|---|
show() | 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-splashscreens.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.