customizing splashscreen

app/client/mobile/android/app/src/main/java/com/databag/MainActivity.kt

@@ -5,6 +5,9 @@ import com.facebook.react.ReactActivityDelegate
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
 import com.facebook.react.defaults.DefaultReactActivityDelegate
 
+import android.os.Bundle;
+import org.devio.rn.splashscreen.Splashscreen;
+
 class MainActivity : ReactActivity() {
 
   /**
@@ -13,6 +16,11 @@ class MainActivity : ReactActivity() {
    */
   override fun getMainComponentName(): String = "Databag"
 
+  override fun onCreate(savedInstanceState: Bundle?) {
+    SplashScreen.show(this)
+    super.onCreate(savedInstanceState)
+  }
+
   /**
    * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
    * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]

app/client/mobile/android/app/src/main/res/layout/launch_screen.xml

@@ -0,0 +1,13 @@
+<?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"
+    android:background="#121928">
+    <ImageView 
+        android:layout_width="wrap_content" 
+        android:layout_height="wrap_content" 
+        android:src="@drawable/splashscreen_image" 
+        android:scaleType="centerCrop" 
+        android:layout_centerInParent="true" />
+</RelativeLayout>

app/client/mobile/ios/Databag/AppDelegate.mm

@@ -1,6 +1,8 @@
 #import "AppDelegate.h"
 #import <Firebase.h>
 
+#import "RNSplashScreen.h"
+
 #import <React/RCTBundleURLProvider.h>
 
 @implementation AppDelegate
@@ -13,7 +15,11 @@
   // They will be passed down to the ViewController used by React Native.
   self.initialProps = @{};
 
-  return [super application:application didFinishLaunchingWithOptions:launchOptions];
+  [super application:application didFinishLaunchingWithOptions:launchOptions];
+  
+  [RNSplashScreen show];
+
+  return YES;
 }
 
 - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge

app/client/mobile/ios/Podfile.lock

@@ -1364,6 +1364,8 @@ PODS:
     - React
   - react-native-safe-area-context (4.14.1):
     - React-Core
+  - react-native-splash-screen (3.3.0):
+    - React-Core
   - react-native-sqlite-storage (6.0.1):
     - React-Core
   - react-native-video (6.10.0):
@@ -1910,6 +1912,7 @@ DEPENDENCIES:
   - "react-native-keep-awake (from `../node_modules/@sayem314/react-native-keep-awake`)"
   - react-native-rsa-native (from `../node_modules/react-native-rsa-native`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
+  - react-native-splash-screen (from `../node_modules/react-native-splash-screen`)
   - react-native-sqlite-storage (from `../node_modules/react-native-sqlite-storage`)
   - react-native-video (from `../node_modules/react-native-video`)
   - react-native-webrtc (from `../node_modules/react-native-webrtc`)
@@ -2061,6 +2064,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-rsa-native"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
+  react-native-splash-screen:
+    :path: "../node_modules/react-native-splash-screen"
   react-native-sqlite-storage:
     :path: "../node_modules/react-native-sqlite-storage"
   react-native-video:
@@ -2204,6 +2209,7 @@ SPEC CHECKSUMS:
   react-native-keep-awake: 294e077916c643d38883731ea1b2fe5e4903b255
   react-native-rsa-native: 12132eb627797529fdb1f0d22fd0f8f9678df64a
   react-native-safe-area-context: 141eca0fd4e4191288dfc8b96a7c7e1c2983447a
+  react-native-splash-screen: 4312f786b13a81b5169ef346d76d33bc0c6dc457
   react-native-sqlite-storage: f6d515e1c446d1e6d026aa5352908a25d4de3261
   react-native-video: 5ea06ea0e26fbe924734af76de16db586914e309
   react-native-webrtc: 0f1c94069ff1eb9d8fb1618c2dc71f73542c8cfa
@@ -2250,7 +2256,7 @@ SPEC CHECKSUMS:
   SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
   TOCropViewController: 80b8985ad794298fb69d3341de183f33d1853654
-  Yoga: a9ef4f5c2cd79ad812110525ef61048be6a582a4
+  Yoga: b05994d1933f507b0a28ceaa4fdb968dc18da178
 
 PODFILE CHECKSUM: 9cf7373afef7b881c911fda82ff1f94eacee3e98
 

app/client/mobile/package.json

@@ -47,6 +47,7 @@
     "react-native-safe-area-context": "^4.10.8",
     "react-native-screens": "^3.34.0",
     "react-native-securerandom": "^1.0.1",
+    "react-native-splash-screen": "^3.3.0",
     "react-native-sqlite-storage": "^6.0.1",
     "react-native-vector-icons": "^10.2.0",
     "react-native-video": "^6.8.2",

app/client/mobile/src/root/useRoot.hook.ts

@@ -2,6 +2,7 @@ import {useState, useContext, useEffect} from 'react';
 import {AppContext} from '../context/AppContext';
 import {ContextType} from '../context/ContextType';
 import {useLocation, useNavigate} from 'react-router-dom';
+import SplashScreen from 'react-native-splash-screen';
 
 export function useRoot() {
   const app = useContext(AppContext) as ContextType;
@@ -15,6 +16,12 @@ export function useRoot() {
     setState(s => ({...s, ...value}));
   };
 
+  useEffect(() => {
+    setTimeout(() => {
+      SplashScreen.hide();
+    }, 1000);
+  }, []);
+
   useEffect(() => {
     const {pathname} = location;
     updateState({pathname});

app/client/mobile/yarn.lock

@@ -3952,6 +3952,7 @@ __metadata:
     react-native-safe-area-context: ^4.10.8
     react-native-screens: ^3.34.0
     react-native-securerandom: ^1.0.1
+    react-native-splash-screen: ^3.3.0
     react-native-sqlite-storage: ^6.0.1
     react-native-vector-icons: ^10.2.0
     react-native-video: ^6.8.2
@@ -9766,6 +9767,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-splash-screen@npm:^3.3.0":
+  version: 3.3.0
+  resolution: "react-native-splash-screen@npm:3.3.0"
+  peerDependencies:
+    react-native: ">=0.57.0"
+  checksum: 14c565d5d4214f55586dcf6f7abd12d99d3e0667f67de3bda7aa24988971567b283a4187fbc0c6269c83b3c21d59d1950335c61bb0780ec2d065e20b3b9199d0
+  languageName: node
+  linkType: hard
+
 "react-native-sqlite-storage@npm:^6.0.1":
   version: 6.0.1
   resolution: "react-native-sqlite-storage@npm:6.0.1"