Splash screen in progress

App.js

 import {View, Text} from 'react-native';
-import React from 'react';
+import React, {useEffect} from 'react';
 import {Provider} from 'react-redux';
 import store from './src/store/store';
 import Routes from './src/Routes/Routes';
-
+import SplashScreen from 'react-native-splash-screen';
 
 const App = () => {
+    useEffect(() => {
+      SplashScreen.hide();
+    }, []);
   return (
     <Provider store={store}>
       <Routes />

android/app/src/main/java/com/baitussalam_app/MainActivity.java

 package com.baitussalam_app;
 
+import android.os.Bundle;
 import com.facebook.react.ReactActivity;
 import com.facebook.react.ReactActivityDelegate;
 import com.facebook.react.ReactRootView;
 
-public class MainActivity extends ReactActivity {
+import org.devio.rn.splashscreen.SplashScreen;
 
+public class MainActivity extends ReactActivity {
+  @Override
+  protected void onCreate(Bundle savedInstanceState) {
+    SplashScreen.show(this);  // here
+    super.onCreate(savedInstanceState);
+  }
   /**
    * Returns the name of the main component registered from JavaScript. This is used to schedule
    * rendering of the component.

android/app/src/main/java/com/baitussalam_app/MainApplication.java

@@ -4,6 +4,7 @@ import android.app.Application;
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+import org.devio.rn.splashscreen.SplashScreenReactPackage;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;

android/app/src/main/res/layout/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>
\ No newline at end of file

android/app/src/main/res/values/colors.xml

+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="primary_dark">#000000</color>
+    <color name="status_bar_color">#000000</color>
+
+</resources>
\ No newline at end of file

android/app/src/main/res/values/styles.xml

@@ -5,5 +5,7 @@
         <!-- Customize your theme here. -->
         <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
     </style>
-
+    <style name="SplashScreenTheme" parent="SplashScreen_SplashTheme">
+        <item name="colorPrimaryDark">@color/status_bar_color</item>
+    </style>
 </resources>

android/settings.gradle

 rootProject.name = 'baitussalam_app'
+include ':react-native-splash-screen'
+project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'
 includeBuild('../node_modules/react-native-gradle-plugin')

ios/Podfile

@@ -19,6 +19,8 @@ target 'baitussalam_app' do
     :app_path => "#{Pod::Config.instance.installation_root}/.."
   )
 
+  pod 'react-native-splash-screen', :path => '../node_modules/react-native-splash-screen'
+
   target 'baitussalam_appTests' do
     inherit! :complete
     # Pods for testing

package-lock.json

@@ -15,6 +15,7 @@
         "react-native": "0.68.2",
         "react-native-safe-area-context": "^4.2.5",
         "react-native-screens": "^3.13.1",
+        "react-native-splash-screen": "^3.3.0",
         "react-redux": "^8.0.2"
       },
       "devDependencies": {
@@ -10230,6 +10231,14 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-splash-screen": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/react-native-splash-screen/-/react-native-splash-screen-3.3.0.tgz",
+      "integrity": "sha512-rGjt6HkoSXxMqH4SQUJ1gnPQlPJV8+J47+4yhgTIan4bVvAwJhEeJH7wWt9hXSdH4+VfwTS0GTaflj1Tw83IhA==",
+      "peerDependencies": {
+        "react-native": ">=0.57.0"
+      }
+    },
     "node_modules/react-native/node_modules/ws": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
@@ -19952,6 +19961,12 @@
         "warn-once": "^0.1.0"
       }
     },
+    "react-native-splash-screen": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/react-native-splash-screen/-/react-native-splash-screen-3.3.0.tgz",
+      "integrity": "sha512-rGjt6HkoSXxMqH4SQUJ1gnPQlPJV8+J47+4yhgTIan4bVvAwJhEeJH7wWt9hXSdH4+VfwTS0GTaflj1Tw83IhA==",
+      "requires": {}
+    },
     "react-redux": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.2.tgz",

package.json

@@ -17,6 +17,7 @@
     "react-native": "0.68.2",
     "react-native-safe-area-context": "^4.2.5",
     "react-native-screens": "^3.13.1",
+    "react-native-splash-screen": "^3.3.0",
     "react-redux": "^8.0.2"
   },
   "devDependencies": {

src/Components/SplashScreen/SplashScreen.js

-import { View, Text } from 'react-native'
-import React from 'react'
+import {View, Text} from 'react-native';
+import React from 'react';
+import SplashScreen from 'react-native-splash-screen'
+import {useEffect} from 'react';
+
+const SplashScreenComp = () => {
   
-const SplashScreen = () => {
   return (
     <View>
       <Text>SplashScreen</Text>
     </View>
-  )
-}
+  );
+};
 
-export default SplashScreen
\ No newline at end of file
+export default SplashScreenComp;

src/Routes/Routes.js

@@ -2,7 +2,7 @@ import {View, Text} from 'react-native';
 import React from 'react';
 import {NavigationContainer} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
-import SplashScreen from '../Components/SplashScreen/SplashScreen';
+import SplashScreenComp from '../Components/SplashScreen/SplashScreen';
 
 const Stack = createNativeStackNavigator();
 
@@ -10,7 +10,11 @@ const Routes = () => {
   return (
     <NavigationContainer>
       <Stack.Navigator>
-        <Stack.Screen name="Home" component={SplashScreen} />
+        <Stack.Screen
+          name="Home"
+          component={SplashScreenComp}
+          options={{headerShown: false}}
+        />
       </Stack.Navigator>
     </NavigationContainer>
   );

yarn.lock

@@ -5751,7 +5751,12 @@
     "react-freeze" "^1.0.0"
     "warn-once" "^0.1.0"
 
-"react-native@*", "react-native@>=0.59", "react-native@0.68.2":
+"react-native-splash-screen@^3.3.0":
+  "integrity" "sha512-rGjt6HkoSXxMqH4SQUJ1gnPQlPJV8+J47+4yhgTIan4bVvAwJhEeJH7wWt9hXSdH4+VfwTS0GTaflj1Tw83IhA=="
+  "resolved" "https://registry.npmjs.org/react-native-splash-screen/-/react-native-splash-screen-3.3.0.tgz"
+  "version" "3.3.0"
+
+"react-native@*", "react-native@>=0.57.0", "react-native@>=0.59", "react-native@0.68.2":
   "integrity" "sha512-qNMz+mdIirCEmlrhapAtAG+SWVx6MAiSfCbFNhfHqiqu1xw1OKXdzIrjaBEPihRC2pcORCoCHduHGQe/Pz9Yuw=="
   "resolved" "https://registry.npmjs.org/react-native/-/react-native-0.68.2.tgz"
   "version" "0.68.2"