From 1359c3b625290081a3362a87e83a52fb6be6de7e Mon Sep 17 00:00:00 2001
From: marcosrdz <marcospr@pm.me>
Date: Fri, 9 Apr 2021 18:57:05 -0400
Subject: [PATCH] REF: Use Unlock screen for splash screen

---
 LoadingScreen.js | 17 -----------------
 Navigation.js    | 13 ++-----------
 UnlockWith.js    | 47 ++++++++++++++++++++++++-----------------------
 3 files changed, 26 insertions(+), 51 deletions(-)
 delete mode 100644 LoadingScreen.js

diff --git a/LoadingScreen.js b/LoadingScreen.js
deleted file mode 100644
index a8370f9ae..000000000
--- a/LoadingScreen.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import LottieView from 'lottie-react-native';
-import * as NavigationService from './NavigationService';
-import { StackActions } from '@react-navigation/native';
-
-const LoadingScreen = () => {
-  const replaceStackNavigation = () => {
-    NavigationService.dispatch(StackActions.replace('UnlockWithScreenRoot'));
-  };
-
-  const onAnimationFinish = () => {
-    replaceStackNavigation();
-  };
-
-  return <LottieView source={require('./img/bluewalletsplash.json')} autoPlay loop={false} onAnimationFinish={onAnimationFinish} />;
-};
-export default LoadingScreen;
diff --git a/Navigation.js b/Navigation.js
index 921c740b4..eaad68282 100644
--- a/Navigation.js
+++ b/Navigation.js
@@ -75,7 +75,6 @@ import LNDViewInvoice from './screen/lnd/lndViewInvoice';
 import LNDViewAdditionalInvoiceInformation from './screen/lnd/lndViewAdditionalInvoiceInformation';
 import LnurlPay from './screen/lnd/lnurlPay';
 import LnurlPaySuccess from './screen/lnd/lnurlPaySuccess';
-import LoadingScreen from './LoadingScreen';
 import UnlockWith from './UnlockWith';
 import DrawerList from './screen/wallets/drawerList';
 import { isCatalyst, isTablet } from './blue_modules/environment';
@@ -312,13 +311,6 @@ const ScanQRCodeRoot = () => (
   </ScanQRCodeStack.Navigator>
 );
 
-const LoadingScreenStack = createStackNavigator();
-const LoadingScreenRoot = () => (
-  <LoadingScreenStack.Navigator name="LoadingScreenRoot" mode="modal" screenOptions={{ headerShown: false }}>
-    <LoadingScreenStack.Screen name="LoadingScreen" component={LoadingScreen} />
-  </LoadingScreenStack.Navigator>
-);
-
 const UnlockWithScreenStack = createStackNavigator();
 const UnlockWithScreenRoot = () => (
   <UnlockWithScreenStack.Navigator name="UnlockWithScreenRoot" screenOptions={{ headerShown: false }}>
@@ -424,8 +416,7 @@ const LappBrowserStackRoot = () => {
 
 const InitStack = createStackNavigator();
 const InitRoot = () => (
-  <InitStack.Navigator screenOptions={defaultScreenOptions} initialRouteName="LoadingScreenRoot">
-    <InitStack.Screen name="LoadingScreenRoot" component={LoadingScreenRoot} options={{ headerShown: false, animationEnabled: false }} />
+  <InitStack.Navigator screenOptions={defaultScreenOptions} initialRouteName="UnlockWithScreenRoot">
     <InitStack.Screen
       name="UnlockWithScreenRoot"
       component={UnlockWithScreenRoot}
@@ -479,7 +470,7 @@ const Navigation = () => {
   const theme = useTheme();
 
   return (
-    <RootStack.Navigator mode="modal" screenOptions={defaultScreenOptions} initialRouteName="LoadingScreenRoot">
+    <RootStack.Navigator mode="modal" screenOptions={defaultScreenOptions} initialRouteName="UnlockWithScreenRoot">
       {/* stacks */}
       <RootStack.Screen name="WalletsRoot" component={WalletsRoot} options={{ headerShown: false }} />
       <RootStack.Screen name="AddWalletRoot" component={AddWalletRoot} options={{ headerShown: false }} />
diff --git a/UnlockWith.js b/UnlockWith.js
index ee2a2685a..2c6f820dd 100644
--- a/UnlockWith.js
+++ b/UnlockWith.js
@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { View, Image, TouchableOpacity, StyleSheet, StatusBar, ActivityIndicator, useColorScheme } from 'react-native';
+import { View, Image, TouchableOpacity, StyleSheet, StatusBar, ActivityIndicator, useColorScheme, LayoutAnimation } from 'react-native';
 import { Icon } from 'react-native-elements';
 import Biometric from './class/biometrics';
 import LottieView from 'lottie-react-native';
@@ -44,6 +44,7 @@ const UnlockWith = () => {
   const [biometricType, setBiometricType] = useState(false);
   const [isStorageEncryptedEnabled, setIsStorageEncryptedEnabled] = useState(false);
   const [isAuthenticating, setIsAuthenticating] = useState(false);
+  const [animationDidFinish, setAnimationDidFinish] = useState(false);
   const colorScheme = useColorScheme();
 
   const initialRender = async () => {
@@ -51,14 +52,8 @@ const UnlockWith = () => {
     if (await Biometric.isBiometricUseCapableAndEnabled()) {
       biometricType = await Biometric.biometricType();
     }
-    const storageIsEncrypted = await isStorageEncrypted();
-    setIsStorageEncryptedEnabled(storageIsEncrypted);
+
     setBiometricType(biometricType);
-    if (unlockOnComponentMount) {
-      if (!biometricType || storageIsEncrypted) {
-        unlockWithKey();
-      } else if (typeof biometricType === 'string') unlockWithBiometrics();
-    }
   };
 
   useEffect(() => {
@@ -126,21 +121,27 @@ const UnlockWith = () => {
     }
   };
 
-  if (!biometricType && !isStorageEncryptedEnabled) {
-    return <View />;
-  } else {
-    return (
-      <SafeAreaView style={styles.root}>
-        <StatusBar barStyle="default" />
-        <View style={styles.container}>
-          <LottieView source={require('./img/bluewalletsplash.json')} progress={1} loop={false} />
-          <View style={styles.biometric}>
-            <View style={styles.biometricRow}>{renderUnlockOptions()}</View>
-          </View>
-        </View>
-      </SafeAreaView>
-    );
-  }
+  const onAnimationFinish = async () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    if (unlockOnComponentMount) {
+      const storageIsEncrypted = await isStorageEncrypted();
+      setIsStorageEncryptedEnabled(storageIsEncrypted);
+      if (!biometricType || storageIsEncrypted) {
+        unlockWithKey();
+      } else if (typeof biometricType === 'string') unlockWithBiometrics();
+    }
+    setAnimationDidFinish(true);
+  };
+
+  return (
+    <SafeAreaView style={styles.root}>
+      <StatusBar barStyle="default" />
+      <View style={styles.container}>
+        <LottieView source={require('./img/bluewalletsplash.json')} autoPlay loop={false} onAnimationFinish={onAnimationFinish} />
+        <View style={styles.biometric}>{animationDidFinish && <View style={styles.biometricRow}>{renderUnlockOptions()}</View>}</View>
+      </View>
+    </SafeAreaView>
+  );
 };
 
 export default UnlockWith;