A splash screen for react-native, hide when application loaded ,it works on iOS and Android.
A splash screen API for react-native which can programatically hide and show the splash screen. Works on iOS and Android.
For React Native >= 0.47.0 use v3.+, for React Native < 0.47.0 use v2.1.0
Run
npm i react-native-splash-screen --save
react-native link react-native-splash-screenor
rnpm link react-native-splash-screen
Android:
In your
android/settings.gradlefile, make the following additions:
java include ':react-native-splash-screen' project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
In your android/app/build.gradle file, add the
:react-native-splash-screenproject as a compile-time dependency:
... dependencies { ... implementation project(':react-native-splash-screen') }
react-native-splash-screenvia the following changes:
// react-native-splash-screen >= 0.3.1 import org.devio.rn.splashscreen.SplashScreenReactPackage; // react-native-splash-screen < 0.3.1 import com.cboy.rn.splashscreen.SplashScreenReactPackage;public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } @Override protected List<reactpackage> getPackages() { return Arrays.<reactpackage>asList( new MainReactPackage(), new SplashScreenReactPackage() //here ); } }; @Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; }
}
iOS:
cd ios
run pod install
OR
Libraries➜
Add Files to [your project's name]
node_modules➜
react-native-splash-screenand add
SplashScreen.xcodeproj
libSplashScreen.ato your project's
Build Phases➜
Link Binary With Libraries
'RNSplashScreen.h' file not found, you have to select your project → Build Settings → Search Paths → Header Search Paths to add:
$(SRCROOT)/../node_modules/react-native-splash-screen/ios
Android:
Update the
MainActivity.javato use
react-native-splash-screenvia the following changes:
import android.os.Bundle; // here import com.facebook.react.ReactActivity; // react-native-splash-screen >= 0.3.1 import org.devio.rn.splashscreen.SplashScreen; // here // react-native-splash-screen < 0.3.1 import com.cboy.rn.splashscreen.SplashScreen; // herepublic class MainActivity extends ReactActivity { @Override protected void onCreate(Bundle savedInstanceState) { SplashScreen.show(this); // here super.onCreate(savedInstanceState); } // ...other code }
iOS:
Update
AppDelegate.mwith the following additions:
#import "AppDelegate.h"#import #import #import "RNSplashScreen.h" // here
@implementation AppDelegate
(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // ...other code
[RNSplashScreen show]; // here // or //[RNSplashScreen showSplash:@"LaunchScreen" inRootView:rootView]; return YES; }
@end
Import
react-native-splash-screenin your JS file.
import SplashScreen from 'react-native-splash-screen'
Create a file called
launch_screen.xmlin
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_darkin
app/src/main/res/values/colors.xml
#000000
Optional steps:
If you want the splash screen to be transparent, follow these steps.
Open
android/app/src/main/res/values/styles.xmland add
trueto the file. It should look like this:
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.xmland add
xml
Create a style definition for this in
android/app/src/main/res/values/styles.xml:
xml
Change your
showmethod to include your custom style:
java SplashScreen.show(this, R.style.SplashScreenTheme);
Customize your splash screen via
LaunchScreen.storyboardor
LaunchScreen.xib。
Learn more to see examples
Use like so:
import SplashScreen from 'react-native-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(); }
}
| Method | Type | Optional | Description | |--------|----------|----------|-------------------------------------| | show() | function | false | Open splash screen (Native Method ) | | hide() | function | false | Close splash screen |
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'); } ), }
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:layoutwidth="matchparent" android:layoutheight="matchparent" android:orientation="vertical"
<ImageView android:src="@drawable/launchscreen" android:layoutwidth="matchparent" android:layoutheight="match_parent" android:scaleType="centerCrop"
```
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.