Easy way to implement splash screen in React Native application - reactjs

Question

I am new to React-Native development. I try to implement a splash screen in my app. I tried a lot of options from the web but not get success because some of the code is outdated and some process is very confusing.

Answer 1

Use react-native-splash-screen Sample code is below
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();
}
}
To learn more see examples
To make full screen
On MainActivity.java, just like that:
#Override
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this, R.style.SplashTheme); // Add theme here
super.onCreate(savedInstanceState);
}
IN res/values/styles.xml
<resources>
<style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">true</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
</style>
</resources>
launch_screen.xml
<?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>

Answer 2

I recommend react-native-bootsplash since it's still actively maintained.
Before implementing any library that asks you to add code to the Swift and Java bridge files it's a good idea to familiarize yourself with the RN folder structure. Once you understand the folder structure and some of the main files it becomes much easier to debug your app and you will be able to develop apps faster.