App.js

@@ -15,6 +15,7 @@ import {
 } from 'mobx-react/native';  // import from mobx-react/native instead of mobx-react fix test
 
 import NavigationService from './src/navigation/NavigationService';
+import RNBootSplash from "react-native-bootsplash";
 
 import {
   BackHandler,
@@ -94,6 +95,10 @@ sessionService.onLogin(async () => {
   pushService.registerToken();
 
   logService.info('[App] navigating to initial screen', sessionService.initialScreen);
+
+  // hide splash
+  RNBootSplash.hide({ duration: 250 });
+
   NavigationService.navigate(sessionService.initialScreen);
 
   // check onboarding progress and navigate if necessary
@@ -213,6 +218,7 @@ export default class App extends Component<Props, State> {
 
         if (!token) {
           logService.info('[App] there is no active session');
+          RNBootSplash.hide({ duration: 250 });
           NavigationService.navigate('Login');
         } else {
           logService.info('[App] session initialized');

android/app/src/main/AndroidManifest.xml

@@ -40,10 +40,9 @@
         android:label="@string/app_name"
         android:screenOrientation="portrait"
         android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
-        android:windowSoftInputMode="adjustResize">
+        android:windowSoftInputMode="adjustResize"
+        android:exported="true">
         <intent-filter>
-            <action android:name="android.intent.action.MAIN" />
-            <category android:name="android.intent.category.LAUNCHER" />
             <action android:name="android.intent.action.DOWNLOAD_COMPLETE"/>
         </intent-filter>
         <intent-filter>
@@ -75,6 +74,15 @@
         </intent-filter>
       </activity>
       <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
+      <activity
+        android:name="com.zoontek.rnbootsplash.RNBootSplashActivity"
+        android:theme="@style/BootTheme"> <!-- apply the theme you created at step 3. -->
+        <intent-filter>
+            <action android:name="android.intent.action.MAIN" />
+            <category android:name="android.intent.category.LAUNCHER" />
+        </intent-filter>
+      </activity>
+
       <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/ic_stat_name" />
       <provider
             android:name="androidx.core.content.FileProvider"

android/app/src/main/java/com/minds/mobile/MainActivity.java

 package com.minds.mobile;
 
+import android.os.Bundle;
+import com.zoontek.rnbootsplash.RNBootSplash;
 import com.facebook.react.ReactActivity;
 
 // image picker imports
@@ -43,6 +45,12 @@ public class MainActivity extends ReactActivity implements OnImagePickerPermissi
       };
     }
 
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        RNBootSplash.show(R.drawable.bootsplash, MainActivity.this);
+    }
+
 
     @Override
     public void onRequestPermissionsResult(int requestCode, String[] permissions, int[] grantResults)

android/app/src/main/res/drawable/bootsplash.xml

+<?xml version="1.0" encoding="utf-8"?>
+
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
+  <!-- the background color. it can be a system color or a custom one defined in colors.xml -->
+  <item android:drawable="@android:color/white" />
+
+  <item>
+    <!-- the app logo, centered horizontally and vertically -->
+    <bitmap
+      android:src="@mipmap/ic_logo"
+      android:gravity="center" />
+  </item>
+</layer-list>
\ No newline at end of file

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

@@ -6,4 +6,10 @@
         <!-- Customize your theme here. -->
     </style>
 
+    <style name="BootTheme" parent="AppTheme">
+        <!-- set bootsplash.xml as activity background -->
+        <item name="android:background">@drawable/bootsplash</item>
+    </style>
+
+
 </resources>

ios/Minds/AppDelegate.m

@@ -7,6 +7,7 @@
 
 #import "RNNotifications.h"
 #import "AppDelegate.h"
+#import "RNBootSplash.h"
 
 #import <React/RCTBridge.h>
 #import <React/RCTBundleURLProvider.h>
@@ -29,6 +30,9 @@
   rootViewController.view = rootView;
   self.window.rootViewController = rootViewController;
   [self.window makeKeyAndVisible];
+
+  [RNBootSplash show:@"LaunchScreen" inView:rootView];
+
   [RNNotifications startMonitorNotifications];
   return YES;
 }

ios/Minds/Base.lproj/LaunchScreen.xib

 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="13771" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" colorMatched="YES">
-    <device id="retina5_9" orientation="portrait">
-        <adaptation id="fullscreen"/>
-    </device>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15505" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" colorMatched="YES">
+    <device id="retina5_9" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="13772"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15510"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <objects>
@@ -14,10 +12,19 @@
         <view contentMode="scaleToFill" id="iN0-l3-epB">
             <rect key="frame" x="0.0" y="0.0" width="480" height="480"/>
             <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+            <subviews>
+                <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="Logo" id="Cdt-IG-Ocz">
+                    <rect key="frame" x="121" y="176" width="239.99999999999991" height="128.00000000000023"/>
+                    <autoresizingMask key="autoresizingMask" flexibleMinX="YES" widthSizable="YES" flexibleMaxX="YES" flexibleMinY="YES" heightSizable="YES" flexibleMaxY="YES"/>
+                </imageView>
+            </subviews>
             <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
             <nil key="simulatedStatusBarMetrics"/>
             <freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
             <point key="canvasLocation" x="548" y="455"/>
         </view>
     </objects>
+    <resources>
+        <image name="Logo" width="1878" height="691"/>
+    </resources>
 </document>

ios/Minds/Images.xcassets/Contents.json

@@ -3,4 +3,4 @@
     "version" : 1,
     "author" : "xcode"
   }
-}
+}
\ No newline at end of file

ios/Minds/Images.xcassets/Logo.imageset/Contents.json

+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "logo.png"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file

ios/Podfile.lock

@@ -196,7 +196,7 @@ PODS:
   - React-jsinspector (0.61.4)
   - react-native-cameraroll (1.3.0):
     - React
-  - react-native-image-picker (1.1.0):
+  - react-native-image-picker (0.28.1):
     - React
   - react-native-jitsi-meet (2.0.1):
     - JitsiMeetSDK (= 2.4.0)
@@ -255,6 +255,8 @@ PODS:
     - React
   - ReactNativeExceptionHandler (2.10.8):
     - React
+  - RNBootSplash (1.0.3):
+    - React
   - RNCAsyncStorage (1.6.2):
     - React
   - RNConvertPhAsset (1.0.3):
@@ -339,6 +341,7 @@ DEPENDENCIES:
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - "ReactNativeART (from `../node_modules/@react-native-community/art`)"
   - ReactNativeExceptionHandler (from `../node_modules/react-native-exception-handler`)
+  - RNBootSplash (from `../node_modules/react-native-bootsplash`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-community/async-storage`)"
   - RNConvertPhAsset (from `../node_modules/react-native-convert-ph-asset`)
   - RNDeviceInfo (from `../node_modules/react-native-device-info`)
@@ -438,6 +441,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-community/art"
   ReactNativeExceptionHandler:
     :path: "../node_modules/react-native-exception-handler"
+  RNBootSplash:
+    :path: "../node_modules/react-native-bootsplash"
   RNCAsyncStorage:
     :path: "../node_modules/@react-native-community/async-storage"
   RNConvertPhAsset:
@@ -491,7 +496,7 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 8dfb73b987afa9324e4009bdce62a18ce23d983c
   React-jsinspector: d15478d0a8ada19864aa4d1cc1c697b41b3fa92f
   react-native-cameraroll: 463aff54e37cff27ea76eb792e6f1fa43b876320
-  react-native-image-picker: 7a85cf7b0a53845f03ae52fb4592a2748ded069b
+  react-native-image-picker: fd93361c666f397bdf72f9c6c23f13d2685b9173
   react-native-jitsi-meet: becd37e8fa1c5f3321b9222c232d190a36f90880
   react-native-netinfo: fa32a5bb986924e9be82a261c262039042dde81e
   react-native-notifications: 163ddedac6fcc8d850ea15b06abdadcacdff00f1
@@ -511,6 +516,7 @@ SPEC CHECKSUMS:
   ReactCommon: a6a294e7028ed67b926d29551aa9394fd989c24c
   ReactNativeART: 103929e284be663b5a2f921ed912821f04120a70
   ReactNativeExceptionHandler: 8025d98049c25f186835a3af732dd7c9974d6dce
+  RNBootSplash: 161de9d2b5dc2af37c2777063b8e6d844ab2a6ff
   RNCAsyncStorage: 60a80e72d95bf02a01cace55d3697d9724f0d77f
   RNConvertPhAsset: 9b366b8a1abc194b76572712c6f7dd89c9e4e37f
   RNDeviceInfo: 687c1b2ab6d86ff1ca1208783320cd144138c7f2

package.json

@@ -38,6 +38,7 @@
     "react-native": "0.61.4",
     "react-native-actionsheet": "^2.4.2",
     "react-native-animatable": "^1.3.3",
+    "react-native-bootsplash": "^1.0.3",
     "react-native-collapsible-header-views": "^1.0.2",
     "react-native-convert-ph-asset": "^1.0.3",
     "react-native-device-info": "^4.0.1",

src/LoadingScreen.js

@@ -3,7 +3,6 @@ import React, {
 } from 'react';
 
 import {
-  Image,
   View,
 } from 'react-native';
 
@@ -18,13 +17,7 @@ export default class LoadingScreen extends Component {
 
   render() {
     return (
-      <View style={[CommonStyle.backgroundWhite ,CommonStyle.flexContainerCenter, CommonStyle.padding2x]}>
-        <Image
-          resizeMode={"contain"}
-          style={ComponentsStyle.logo}
-          source={require('./assets/logos/logo.png')}
-        />
-      </View>
+      <View style={[CommonStyle.backgroundWhite ,CommonStyle.flexContainerCenter, CommonStyle.padding2x]}/>
     );
   }
 }
\ No newline at end of file

yarn.lock

@@ -8418,6 +8418,11 @@ react-native-animatable@1.3.3, react-native-animatable@^1.3.3:
   dependencies:
     prop-types "^15.7.2"
 
+react-native-bootsplash@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/react-native-bootsplash/-/react-native-bootsplash-1.0.3.tgz#c0fbf46ba333b7bba880a430f4449aad0c04953a"
+  integrity sha512-YQ1sBlx+m5p41f0RPAbZ8v3i1YpbCylUbjLXeXWpi2mwmG5FE3NN6IO+GN1MTZWiqD7CtuucCp/dYBxmdL5Y2g==
+
 react-native-collapsible-header-views@^1.0.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/react-native-collapsible-header-views/-/react-native-collapsible-header-views-1.1.2.tgz#1eb671e6317698755d49d075c45e6101df6ea908"