A splash screen for react-native, hide when application loaded ,it works on iOS and Android.
npm install @metamask/react-native-splash-screen
A splash screen API for react-native which can programatically hide and show the splash screen. Works on iOS and Android.
- Changes
- Installation
- Examples
- Getting started
- API
- Testing
- Troubleshooting
- Contribution
!react-native-splash-screen-Android
!react-native-splash-screen-iOS
npm i react-native-splash-screen --save#### Automatic installation
react-native link react-native-splash-screen or rnpm link react-native-splash-screen
#### Manual installation
Android:
1. In your android/settings.gradle file, 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')
2. In your android/app/build.gradle file, add the :react-native-splash-screen project as a compile-time dependency:
`java`
...
dependencies {
...
implementation project(':react-native-splash-screen')
}
3. Update the MainApplication.java file to use react-native-splash-screen via the following changes:
`java
// 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
return Arrays.
new MainReactPackage(),
new SplashScreenReactPackage() //here
);
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
}
`
iOS:
1. cd ios
2.
>OR
1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to ➜ react-native-splash-screen and add SplashScreen.xcodeproj
3. In XCode, in the project navigator, select your project. Add to your project's Build Phases ➜ Link Binary With Libraries
4. To fix , 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.java to use react-native-splash-screen via the following changes:
`java
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; // 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:
`obj-c
#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-screen in your JS file.
import SplashScreen from 'react-native-splash-screen'
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`
android:layout_height="match_parent">
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.drawable-ldpi
You can create splash screens in the following folders:
*
*
*
*
*
*
Add a color called primary_dark in app/src/main/res/values/colors.xml
`
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 to the file. It should look like this:
`xml`
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`
Create a style definition for this in android/app/src/main/res/values/styles.xml:`xml`
Change your show method to include your custom style:`java`
SplashScreen.show(this, R.style.SplashScreenTheme);
Customize your splash screen via LaunchScreen.storyboard or LaunchScreen.xib。
Learn more to see examples
- via LaunchScreen.storyboard Tutorial
Use like so:
`javascript
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'); } ),
}
, e.g.:
`
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
android:layout_width="match_parent"
android:layout_height="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.
---