Splash screen in React Native
YOUTUBE VIDEO: https://youtu.be/rBMiusSqjCk
----------------------SPLASH SCREEN IN REACT NATIVE----------------------
a) Go to file 'MainApplication.java'
b) Add these lines into file 'android/settings.gradle'
include ':react-native-splash-screen'
project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
c) Add this line into file 'android/app/build.gradle' in section 'dependencies'
dependencies {
implementation project(':react-native-splash-screen') // here
...
}
d) In file 'MainApplication.java', using package 'SplashScreenReactPackage':
import org.devio.rn.splashscreen.SplashScreenReactPackage;
.....
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new SplashScreenReactPackage() // here
);
}
e) Settings: in file 'MainActivity.java' import package base on your module version 'react-native-splash-screen', my version >= 0.3.1
// 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
f) Import package Bundle (if it does not exist):
import android.os.Bundle; // here
g) After that, add this line to function 'onCreate()' or create if it does not exist
@Override
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this); // here
super.onCreate(savedInstanceState);
}
a) If you want to show static image as a splash screen, use this:
<?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>
b) Or, If you want to show dynamic image (gif) as a splash screen, use this:
<?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">
<pl.droidsonroids.gif.GifTextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/launch_screen"
/>
</RelativeLayout>
And also add this line in file 'android/app/build.gradle'
dependencies {
...
compile 'pl.droidsonroids.gif:android-gif-drawable:1.2.10' // here
...
}
In 'Step 3': we have this line:
<ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" />
or this line:
<pl.droidsonroids.gif.GifTextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/launch_screen"
/>
And you see that we have '@drawable/launch_screen', here 'launch_screen' is the name of image
as a splash screen in the folder 'drawable', so let create a folder 'drawable' in
'android/app/src/main/res/' and add image 'launch_screen' to this folder
a) Import module 'react-native-splash-screen':
import SplashScreen from 'react-native-splash-screen';
b) I want to hide splash screen after 3 seconds:
constructor(props: Props) {
super(props);
this.state = {
splashScreenTimer: null
};
}
componentDidMount() {
let splashScreenTimer = setInterval(this.hideSplashScreen, 3000); // hide splash screen after 3s
this.setState({ splashScreenTimer });
// you can also add sound here :D
}
hideSplashScreen = () => {
SplashScreen.hide();
clearInterval(this.state.splashScreenTimer);
}
THANK YOU FOR WATCHING VIDEO, REMEMBER TO LIKE AND SUBSCRIBE FOR NEW VIDEOS