done splash

App.js

-import React from 'react';
-
+import React, {useEffect, useRef, useState} from 'react';
+import {Animated, Dimensions, StyleSheet, Text, View} from 'react-native';
+import BootSplash from 'react-native-bootsplash';
 import {Provider} from 'react-redux';
 import {createStore, applyMiddleware} from 'redux';
 import rootReducer from './src/Reducers/index';
@@ -7,16 +8,104 @@ import RootView from './src/RootView';
 import createSagaMiddleware from 'redux-saga';
 import rootSaga from './src/Saga/rootSaga';
 
+let bootSplashLogo = require('./src/assets/images/iconSplash.png');
+
+let fakeApiCallWithoutBadNetwork = (ms) =>
+  new Promise((resolve) => setTimeout(resolve, ms));
+
 const sagaMiddleware = createSagaMiddleware();
 
 let store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
 sagaMiddleware.run(rootSaga);
-const App = () => {
+
+let App = () => {
+  let [bootSplashIsVisible, setBootSplashIsVisible] = useState(true);
+  let [bootSplashLogoIsLoaded, setBootSplashLogoIsLoaded] = useState(false);
+  let opacity = useRef(new Animated.Value(1));
+  let translateY = useRef(new Animated.Value(0));
+
+  let init = async () => {
+    // You can uncomment this line to add a delay on app startup
+    await fakeApiCallWithoutBadNetwork(1000);
+    await BootSplash.hide();
+
+    Animated.stagger(250, [
+      Animated.spring(translateY.current, {
+        useNativeDriver: true,
+        toValue: -50,
+      }),
+      Animated.spring(translateY.current, {
+        useNativeDriver: true,
+        toValue: Dimensions.get('window').height,
+      }),
+    ]).start();
+
+    Animated.timing(opacity.current, {
+      useNativeDriver: true,
+      toValue: 0,
+      duration: 150,
+      delay: 350,
+    }).start(() => {
+      setBootSplashIsVisible(false);
+    });
+  };
+
+  useEffect(() => {
+    bootSplashLogoIsLoaded && init();
+  }, [bootSplashLogoIsLoaded]);
+
   return (
-    <Provider store={store}>
-      <RootView />
-    </Provider>
+    <View style={styles.container}>
+      <Provider store={store}>
+        <RootView />
+      </Provider>
+
+      {bootSplashIsVisible && (
+        <Animated.View
+          style={[
+            StyleSheet.absoluteFill,
+            styles.bootsplash,
+            {opacity: opacity.current},
+          ]}>
+          <Animated.Image
+            resizeMode={'contain'}
+            source={bootSplashLogo}
+            fadeDuration={0}
+            onLoadEnd={() => setBootSplashLogoIsLoaded(true)}
+            style={[
+              styles.logo,
+              {transform: [{translateY: translateY.current}]},
+            ]}
+          />
+        </Animated.View>
+      )}
+    </View>
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  text: {
+    fontSize: 24,
+    fontWeight: '700',
+    margin: 20,
+    lineHeight: 30,
+    color: '#333',
+    textAlign: 'center',
+  },
+  bootsplash: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#1C6AF6',
+  },
+  logo: {
+    width: 250,
+    height: 80,
+    resizeMode: 'contain',
+  },
+});
+
 export default App;

android/app/build.gradle

@@ -196,7 +196,7 @@ implementation platform('com.google.firebase:firebase-bom:26.6.0')
 implementation 'com.google.firebase:firebase-analytics'
 implementation 'com.google.firebase:firebase-core:16.0.4'
 
-
+ implementation project(':react-native-bootsplash')
 implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
 implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
     implementation 'com.google.firebase:firebase-messaging:17.3.4'

android/app/src/main/AndroidManifest.xml

@@ -27,13 +27,21 @@
         android:name=".MainActivity"
         android:label="@string/app_name"
         android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
-        android:launchMode="singleTop"
+         android:exported="true"
+      android:launchMode="singleTask"
         android:windowSoftInputMode="adjustResize">
-        <intent-filter>
-            <action android:name="android.intent.action.MAIN" />
-            <category android:name="android.intent.category.LAUNCHER" />
-        </intent-filter>
       </activity>
+  <activity
+      android:name="com.zoontek.rnbootsplash.RNBootSplashActivity"
+      android:theme="@style/BootTheme"
+      android:launchMode="singleTask">
+      <intent-filter>
+        <action android:name="android.intent.action.MAIN" />
+        <category android:name="android.intent.category.LAUNCHER" />
+      </intent-filter>
+    </activity>
+
+
       <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
     </application>
 

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

 package com.invest;
-
+import android.os.Bundle;
 import com.facebook.react.ReactActivity;
+import com.zoontek.rnbootsplash.RNBootSplash; 
+
+
 
 public class MainActivity extends ReactActivity {
 
@@ -12,4 +15,10 @@ public class MainActivity extends ReactActivity {
   protected String getMainComponentName() {
     return "Invest";
   }
+
+  @Override
+  protected void onCreate(Bundle savedInstanceState) {
+    super.onCreate(savedInstanceState);
+    RNBootSplash.init(R.drawable.bootsplash, MainActivity.this); // <- display the generated bootsplash.xml drawable over our MainActivity
+  }
 }

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

 package com.invest;
-
+import android.os.Bundle;
 import android.app.Application;
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+import com.zoontek.rnbootsplash.RNBootSplashPackage;
 import com.BV.LinearGradient.LinearGradientPackage;
 import com.oblador.vectoricons.VectorIconsPackage;
 import io.invertase.firebase.RNFirebasePackage;
@@ -17,6 +18,8 @@ import java.util.List;
 import com.facebook.react.ReactApplication; //<- Dòng này
 import io.invertase.firebase.messaging.RNFirebaseMessagingPackage;//<- Dòng này
 import io.invertase.firebase.notifications.RNFirebaseNotificationsPackage;//<- Dòng này
+import com.zoontek.rnbootsplash.RNBootSplashPackage; 
+import com.zoontek.rnbootsplash.RNBootSplash; 
 
 public class MainApplication extends Application implements ReactApplication {
 
@@ -35,6 +38,7 @@ public class MainApplication extends Application implements ReactApplication {
           // packages.add(new MyReactNativePackage());
             packages.add(new RNFirebaseMessagingPackage());//<- Dòng này
       packages.add(new RNFirebaseNotificationsPackage());//<- Dòng này
+      // packages.add(new RNBootSplashPackage());
           return packages;
         }
 
@@ -54,6 +58,7 @@ public class MainApplication extends Application implements ReactApplication {
     super.onCreate();
     SoLoader.init(this, /* native exopackage */ false);
     initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
+    // RNBootSplash.init(R.drawable.bootsplash, MainActivity.this);
   }
 
   /**

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">
+    <item android:drawable="@color/bootsplash_background" />
+
+    <item>
+        <bitmap android:src="@mipmap/bootsplash_logo" android:gravity="center" />
+    </item>
+</layer-list>

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

+<resources>
+    <color name="bootsplash_background">#1C6AF6</color>
+</resources>

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

@@ -5,5 +5,8 @@
         <!-- Customize your theme here. -->
         <item name="android:textColor">#000000</item>
     </style>
-
+ <style name="BootTheme" parent="AppTheme">
+    <!-- set the generated bootsplash.xml drawable as activity background -->
+    <item name="android:background">@drawable/bootsplash</item>
+  </style>
 </resources>

android/settings.gradle

 rootProject.name = 'Invest'
+include ':react-native-bootsplash'
+project(':react-native-bootsplash').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-bootsplash/android')
 include ':react-native-linear-gradient'
 project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android')
 include ':react-native-vector-icons'
+include ':react-native-bootsplash'
+project(':react-native-bootsplash').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-bootsplash/android')
 project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
 include ':react-native-firebase'
 project(':react-native-firebase').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-firebase/android')

ios/Invest.xcodeproj/project.pbxproj

@@ -20,6 +20,8 @@
 		48E6A9A75AE9C55476F21D2D /* libPods-Invest-tvOSTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 4ECD31835B4784D2DC719E76 /* libPods-Invest-tvOSTests.a */; };
 		52B7A0A425F722CF00CEDA09 /* GoogleService-Info.plist in Resources */ = {isa = PBXBuildFile; fileRef = 52B7A0A325F722CF00CEDA09 /* GoogleService-Info.plist */; };
 		52B7A0A525F722CF00CEDA09 /* GoogleService-Info.plist in Resources */ = {isa = PBXBuildFile; fileRef = 52B7A0A325F722CF00CEDA09 /* GoogleService-Info.plist */; };
+		52FB2B09262400D400DD7983 /* BootSplash.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 52FB2B08262400D400DD7983 /* BootSplash.storyboard */; };
+		52FB2B0A262400D400DD7983 /* BootSplash.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 52FB2B08262400D400DD7983 /* BootSplash.storyboard */; };
 		BEE4F63E354049C2D225330D /* libPods-Invest.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5F96EA7789D1E36A43479651 /* libPods-Invest.a */; };
 		C58809ADB943708AF0E7E27E /* libPods-Invest-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = FC653233E0AC368FCB03B57C /* libPods-Invest-tvOS.a */; };
 /* End PBXBuildFile section */
@@ -60,6 +62,7 @@
 		4ECD31835B4784D2DC719E76 /* libPods-Invest-tvOSTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-Invest-tvOSTests.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		52B7A0A325F722CF00CEDA09 /* GoogleService-Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = "GoogleService-Info.plist"; sourceTree = "<group>"; };
 		52E1A15225F1255E00EA970D /* Invest.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; name = Invest.entitlements; path = Invest/Invest.entitlements; sourceTree = "<group>"; };
+		52FB2B08262400D400DD7983 /* BootSplash.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = BootSplash.storyboard; path = Invest/BootSplash.storyboard; sourceTree = "<group>"; };
 		5F96EA7789D1E36A43479651 /* libPods-Invest.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-Invest.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		72B39130AB01DE9359CED049 /* Pods-Invest-InvestTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Invest-InvestTests.release.xcconfig"; path = "Target Support Files/Pods-Invest-InvestTests/Pods-Invest-InvestTests.release.xcconfig"; sourceTree = "<group>"; };
 		7A8D76C2B302272AF1BB9AE1 /* Pods-Invest-InvestTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Invest-InvestTests.debug.xcconfig"; path = "Target Support Files/Pods-Invest-InvestTests/Pods-Invest-InvestTests.debug.xcconfig"; sourceTree = "<group>"; };
@@ -145,6 +148,7 @@
 		13B07FAE1A68108700A75B9A /* Invest */ = {
 			isa = PBXGroup;
 			children = (
+				52FB2B08262400D400DD7983 /* BootSplash.storyboard */,
 				9345F6C125FF213F006B5233 /* Fonts */,
 				52B7A0A325F722CF00CEDA09 /* GoogleService-Info.plist */,
 				52E1A15225F1255E00EA970D /* Invest.entitlements */,
@@ -402,6 +406,7 @@
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
 				13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
 				52B7A0A425F722CF00CEDA09 /* GoogleService-Info.plist in Resources */,
+				52FB2B09262400D400DD7983 /* BootSplash.storyboard in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -409,6 +414,7 @@
 			isa = PBXResourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				52FB2B0A262400D400DD7983 /* BootSplash.storyboard in Resources */,
 				2D02E4BD1E0B4A84006451C7 /* Images.xcassets in Resources */,
 				52B7A0A525F722CF00CEDA09 /* GoogleService-Info.plist in Resources */,
 			);

ios/Invest/AppDelegate.m

@@ -8,7 +8,7 @@
 #import "RNFirebaseMessaging.h"
   
 #import <AVFoundation/AVFoundation.h>
-
+#import "RNBootSplash.h"
 #if DEBUG
 #import <FlipperKit/FlipperClient.h>
 #import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
@@ -53,7 +53,7 @@ static void InitializeFlipper(UIApplication *application) {
   rootViewController.view = rootView;
   self.window.rootViewController = rootViewController;
   [self.window makeKeyAndVisible];
-  
+  [RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView];
 //  [CallAppInterface setHomeViewController:rootViewController];
   return YES;
 }

ios/Invest/BootSplash.storyboard

+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="17147" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+    <device id="retina4_7" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17120"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <scenes>
+        <!--View Controller-->
+        <scene sceneID="EHf-IW-A2E">
+            <objects>
+                <viewController id="01J-lp-oVM" sceneMemberID="viewController">
+                    <view key="view" autoresizesSubviews="NO" userInteractionEnabled="NO" contentMode="scaleToFill" id="Ze5-6b-2t3">
+                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
+                        <autoresizingMask key="autoresizingMask"/>
+                        <subviews>
+                            <imageView autoresizesSubviews="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" image="BootSplashLogo" translatesAutoresizingMaskIntoConstraints="NO" id="3lX-Ut-9ad">
+                                <rect key="frame" x="77.5" y="296.5" width="220" height="74"/>
+                                <accessibility key="accessibilityConfiguration">
+                                    <accessibilityTraits key="traits" image="YES" notEnabled="YES"/>
+                                </accessibility>
+                            </imageView>
+                        </subviews>
+                        <viewLayoutGuide key="safeArea" id="Bcu-3y-fUS"/>
+                        <color key="backgroundColor" red="0.109803921568627" green="0.415686274509804" blue="0.964705882352941" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                        <accessibility key="accessibilityConfiguration">
+                            <accessibilityTraits key="traits" notEnabled="YES"/>
+                        </accessibility>
+                        <constraints>
+                            <constraint firstItem="3lX-Ut-9ad" firstAttribute="centerX" secondItem="Ze5-6b-2t3" secondAttribute="centerX" id="Fh9-Fy-1nT"/>
+                            <constraint firstItem="3lX-Ut-9ad" firstAttribute="centerY" secondItem="Ze5-6b-2t3" secondAttribute="centerY" id="nvB-Ic-PnI"/>
+                        </constraints>
+                    </view>
+                </viewController>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
+            </objects>
+            <point key="canvasLocation" x="0.0" y="0.0"/>
+        </scene>
+    </scenes>
+    <resources>
+        <image name="BootSplashLogo" width="220" height="74"/>
+    </resources>
+</document>

ios/Invest/Images.xcassets/BootSplashLogo.imageset/Contents.json

+{
+  "images": [
+    {
+      "idiom": "universal",
+      "filename": "bootsplash_logo.png",
+      "scale": "1x"
+    },
+    {
+      "idiom": "universal",
+      "filename": "bootsplash_logo@2x.png",
+      "scale": "2x"
+    },
+    {
+      "idiom": "universal",
+      "filename": "bootsplash_logo@3x.png",
+      "scale": "3x"
+    }
+  ],
+  "info": {
+    "version": 1,
+    "author": "xcode"
+  }
+}

ios/Invest/Info.plist

@@ -42,7 +42,7 @@
 		</dict>
 	</dict>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
+	<string/>
 	<key>NSPhotoLibraryUsageDescription</key>
 	<string>To upload images</string>
 	<key>UIAppFonts</key>
@@ -66,7 +66,7 @@
 		<string>remote-notification</string>
 	</array>
 	<key>UILaunchStoryboardName</key>
-	<string>LaunchScreen</string>
+	<string>BootSplash</string>
 	<key>UIRequiredDeviceCapabilities</key>
 	<array>
 		<string>armv7</string>

ios/Podfile

@@ -82,7 +82,7 @@ target 'Invest' do
   pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
 
 
- 
+  pod 'RNBootSplash', :path => '../node_modules/react-native-bootsplash'
 
 
   pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

ios/Podfile.lock

@@ -389,6 +389,8 @@ PODS:
     - React-cxxreact (= 0.62.2)
     - React-jsi (= 0.62.2)
     - ReactCommon/callinvoker (= 0.62.2)
+  - RNBootSplash (3.2.0):
+    - React-Core
   - RNCAsyncStorage (1.12.1):
     - React-Core
   - RNCCheckbox (0.5.7):
@@ -483,6 +485,7 @@ DEPENDENCIES:
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - ReactCommon/callinvoker (from `../node_modules/react-native/ReactCommon`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - RNBootSplash (from `../node_modules/react-native-bootsplash`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-community/async-storage`)"
   - "RNCCheckbox (from `../node_modules/@react-native-community/checkbox`)"
   - "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)"
@@ -586,6 +589,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/Libraries/Vibration"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNBootSplash:
+    :path: "../node_modules/react-native-bootsplash"
   RNCAsyncStorage:
     :path: "../node_modules/@react-native-community/async-storage"
   RNCCheckbox:
@@ -666,6 +671,7 @@ SPEC CHECKSUMS:
   React-RCTText: fae545b10cfdb3d247c36c56f61a94cfd6dba41d
   React-RCTVibration: 4356114dbcba4ce66991096e51a66e61eda51256
   ReactCommon: ed4e11d27609d571e7eee8b65548efc191116eb3
+  RNBootSplash: 24175aa28fe203b10c48dc34e78d946fd33c77af
   RNCAsyncStorage: b03032fdbdb725bea0bd9e5ec5a7272865ae7398
   RNCCheckbox: d1749e6a92178ce5dbc31e63becd1f34f0c76bbd
   RNCClipboard: 245417a78ab585e0d4d83926c28907e7b2bc24bd
@@ -681,6 +687,6 @@ SPEC CHECKSUMS:
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
   YoutubePlayer-in-WKWebView: cfbf46da51d7370662a695a8f351e5fa1d3e1008
 
-PODFILE CHECKSUM: f02917090f1c2c208cddccf3054d7b56a8888192
+PODFILE CHECKSUM: a0276896cf4bf6dbd0e780acaa769b26a97ccce1
 
 COCOAPODS: 1.10.1

package.json

@@ -25,6 +25,7 @@
     "react": "16.11.0",
     "react-hook-form": "^6.15.4",
     "react-native": "0.62.2",
+    "react-native-bootsplash": "^3.2.0",
     "react-native-confirmation-code-field": "^6.5.1",
     "react-native-datepicker": "^1.7.2",
     "react-native-firebase": "^5.6.0",

src/RootView.js

@@ -8,8 +8,6 @@ import {SkypeIndicator} from 'react-native-indicators';
 import {HEIGHT, HEIGHTXD} from './Config/Functions';
 import R from './assets/R';
 import FirebaseNotification from './helper/FirebaseNotification';
-import {enableScreens} from 'react-native-screens';
-enableScreens();
 
 const RootView = (props) => {
   onReceived = (notification) => {};