rn-splash
v0.0.5
Published
react native splash screen
Downloads
3
Maintainers
Readme
RN-SPLASH
yarn add rn-splash
- A splash screen that runs on the native thread and is dismissed on the JavaScript thread
Two separate set-ups, same implementation in React-Native land
IOS
- Uses the Launch Image catalog (a single image) to show while the app is loading.
- Launch Images are specific to phone sizes to you will have to create separate images for each screen size
Android
- Since there are 13,000+ Android devices, creating an image for each screen would be counter productive.
- I have decided to go with a 2-image approach
- One image is used as the
background
and the other image is centered within the background and is called thelogo
Installation (iOS)
Drag RNSplashScreen.xcodeproj to your project on Xcode.
Click on your main project file (the one that represents the .xcodeproj) select Build Phases and drag libRNSplashScreen.a from the Products folder inside the RNSplashScreen.xcodeproj.
Look for Header Search Paths and make sure it contains
$(SRCROOT)/../../../react-native/React
as recursive.In your project, Look for Header Search Paths and make sure it contains
$(SRCROOT)/../node_modules/rn-splash/ios/RNSplashScreen/RNSplashScreen
as recursivedelete your project's LaunchScreen.xib
In AppDelegate.m add two lines of code, remove one
// right below other imports
#import "RNSplashScreen.h"
// remove this
// rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
// replace with this
[RNSplashScreen open:rootView];
Installation (Android)
- In
android/settings.gradle
...
include ':rn-splash'
project(':rn-splash').projectDir = new File(rootProject.projectDir, '../node_modules/rn-splash/android')
- In
android/app/build.gradle
...
dependencies {
...
// From node_modules
compile project(':rn-splash')
}
Create a drawable folder to put your splash images in. The path should be
android/app/src/main/res/drawable
Make the background image title is
background.{extension}
full pathres/drawable/background.{extension}
Make the logo image title is
logo.{extension}
full pathres/drawable/logo.{extension}
drawable-ldpi/
background.png
logo.png
drawable-mdpi/
background.png
logo.png
drawable-hdpi/
background.png
logo.png
drawable-xhdpi/
background.png
logo.png
drawable-xxhdpi/
background.png
logo.png
drawable-xxxhdpi/
background.png
logo.png
We also need to tell Java Land how big to make the center logo within the background.
- Create a file called
integers/xml
within your projectsvalues
- full path
android/app/src/main/res/values/integers.xml
- put two values,
logo_height
andlogo_width
within
<resources>
<integer name="logo_height">100</integer>
<integer name="logo_width">100</integer>
</resources>
MainActivity.java
// import these FOUR things
import com.parkerdan.rnsplashscreen.RNSplashScreen;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.ReactInstanceManager;
import android.os.Bundle;
// Add this method to the MainActivity class
@Override
protected void onCreate(Bundle savedInstanceState) {
RNSplashScreen.show(this);
super.onCreate(savedInstanceState);
}
MainApplication.java
// import the package
import com.parkerdan.rnsplashscreen.RNSplashScreen;
// Add to packages
...
new MainReactPackage(),
new RNSplashScreenPackage()
...
Usage
...
import SplashScreen from 'rn-splash'
...
componentDidMount () {
SplashScreen.close("scale", 850, 500)
}
...
Method
close(animationType, duration, delay) close splash screen with custom animation
- animationType: one of ("scale","fade","none")
- duration: determine the duration of animation
- delay: determine the delay of animation