REF: Use NavigationStack for handling launch screens

LoadingScreen.js

@@ -0,0 +1,41 @@
+import React, { useEffect, useState, useRef } from 'react';
+import LottieView from 'lottie-react-native';
+import WalletMigrate from './screen/wallets/walletMigrate';
+import * as NavigationService from './NavigationService';
+import { StackActions } from '@react-navigation/native';
+
+const LoadingScreen = () => {
+  const [isMigratingData, setIsMigratinData] = useState(true);
+  const loadingAnimation = useRef();
+
+  const handleMigrationComplete = async () => {
+    setIsMigratinData(false);
+  };
+  const walletMigrate = new WalletMigrate(handleMigrationComplete);
+
+  const replaceStackNavigation = () => {
+    NavigationService.dispatch(StackActions.replace('UnlockWithScreenRoot'));
+  };
+
+  const onAnimationFinish = () => {
+    if (isMigratingData) {
+      loadingAnimation.current.play(0);
+    } else {
+      replaceStackNavigation();
+    }
+  };
+
+  useEffect(() => {
+    walletMigrate.start();
+  }, [walletMigrate]);
+  return (
+    <LottieView
+      ref={loadingAnimation}
+      source={require('./img/bluewalletsplash.json')}
+      autoPlay
+      loop={false}
+      onAnimationFinish={onAnimationFinish}
+    />
+  );
+};
+export default LoadingScreen;

Navigation.js

@@ -59,6 +59,8 @@ import LappBrowser from './screen/lnd/browser';
 import LNDCreateInvoice from './screen/lnd/lndCreateInvoice';
 import LNDViewInvoice from './screen/lnd/lndViewInvoice';
 import LNDViewAdditionalInvoiceInformation from './screen/lnd/lndViewAdditionalInvoiceInformation';
+import LoadingScreen from './LoadingScreen';
+import UnlockWith from './UnlockWith';
 const BlueApp = require('./BlueApp');
 const loc = require('./loc');
 
@@ -270,11 +272,31 @@ 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 }}>
+    <UnlockWithScreenStack.Screen name="UnlockWithScreen" component={UnlockWith} />
+  </UnlockWithScreenStack.Navigator>
+);
+
 const RootStack = createStackNavigator();
 const Navigation = () => (
-  <RootStack.Navigator mode="modal" screenOptions={defaultScreenOptions}>
+  <RootStack.Navigator mode="modal" screenOptions={defaultScreenOptions} initialRouteName="LoadingScreenRoot">
     {/* stacks */}
-    <RootStack.Screen name="WalletsRoot" component={WalletsRoot} options={{ headerShown: false }} />
+    <RootStack.Screen name="LoadingScreenRoot" component={LoadingScreenRoot} options={{ headerShown: false, animationEnabled: false }} />
+    <RootStack.Screen
+      name="UnlockWithScreenRoot"
+      component={UnlockWithScreenRoot}
+      options={{ headerShown: false, animationEnabled: false }}
+    />
+    <RootStack.Screen name="WalletsRoot" component={WalletsRoot} options={{ headerShown: false, animationEnabled: false }} />
     <RootStack.Screen name="AddWalletRoot" component={AddWalletRoot} options={{ headerShown: false }} />
     <RootStack.Screen name="SendDetailsRoot" component={SendDetailsRoot} options={{ headerShown: false }} />
     <RootStack.Screen name="LNDCreateInvoiceRoot" component={LNDCreateInvoiceRoot} options={{ headerShown: false }} />

UnlockWith.js

@@ -2,8 +2,9 @@ import React, { Component } from 'react';
 import { View, Image, TouchableOpacity, StyleSheet } from 'react-native';
 import { Icon } from 'react-native-elements';
 import Biometric from './class/biometrics';
-import PropTypes from 'prop-types';
 import { SafeAreaView } from 'react-native-safe-area-context';
+import * as NavigationService from './NavigationService';
+import { StackActions } from '@react-navigation/native';
 /** @type {AppStorage} */
 
 const BlueApp = require('./BlueApp');
@@ -64,7 +65,7 @@ export default class UnlockWith extends Component {
   }
 
   successfullyAuthenticated = () => {
-    this.props.onSuccessfullyAuthenticated();
+    NavigationService.dispatch(StackActions.replace('WalletsRoot'));
   };
 
   unlockWithBiometrics = async () => {
@@ -75,7 +76,7 @@ export default class UnlockWith extends Component {
       if (await Biometric.unlockWithBiometrics()) {
         this.setState({ isAuthenticating: false });
         await BlueApp.startAndDecrypt();
-        return this.props.onSuccessfullyAuthenticated();
+        return this.successfullyAuthenticated();
       }
       this.setState({ isAuthenticating: false });
     });
@@ -84,7 +85,7 @@ export default class UnlockWith extends Component {
   unlockWithKey = () => {
     this.setState({ isAuthenticating: true }, async () => {
       await BlueApp.startAndDecrypt();
-      this.props.onSuccessfullyAuthenticated();
+      this.successfullyAuthenticated();
     });
   };
 
@@ -130,7 +131,3 @@ export default class UnlockWith extends Component {
     );
   }
 }
-
-UnlockWith.propTypes = {
-  onSuccessfullyAuthenticated: PropTypes.func,
-};

index.js

@@ -1,10 +1,7 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import './shim.js';
 import { AppRegistry } from 'react-native';
-import WalletMigrate from './screen/wallets/walletMigrate';
 import App from './App';
-import LottieView from 'lottie-react-native';
-import UnlockWith from './UnlockWith.js';
 
 const A = require('./analytics');
 
@@ -13,65 +10,12 @@ if (!Error.captureStackTrace) {
   Error.captureStackTrace = () => {};
 }
 
-class BlueAppComponent extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { isMigratingData: true, onAnimationFinished: false, successfullyAuthenticated: false };
-  }
-
-  componentDidMount() {
-    const walletMigrate = new WalletMigrate(this.setIsMigratingData);
-    walletMigrate.start();
-  }
-
-  setIsMigratingData = async () => {
+const BlueAppComponent = () => {
+  useEffect(() => {
     A(A.ENUM.INIT);
-    this.setState({ isMigratingData: false });
-  };
+  }, []);
 
-  onAnimationFinish = () => {
-    if (this.state.isMigratingData) {
-      this.loadingSplash.play(0);
-    } else {
-      this.setState({ onAnimationFinished: true });
-    }
-  };
-
-  onSuccessfullyAuthenticated = () => {
-    this.setState({ successfullyAuthenticated: true });
-  };
-
-  render() {
-    if (this.state.isMigratingData) {
-      return (
-        <LottieView
-          ref={ref => (this.loadingSplash = ref)}
-          onAnimationFinish={this.onAnimationFinish}
-          source={require('./img/bluewalletsplash.json')}
-          autoPlay
-          loop={false}
-        />
-      );
-    } else {
-      if (this.state.onAnimationFinished) {
-        return this.state.successfullyAuthenticated ? (
-          <App />
-        ) : (
-          <UnlockWith onSuccessfullyAuthenticated={this.onSuccessfullyAuthenticated} />
-        );
-      } else {
-        return (
-          <LottieView
-            ref={ref => (this.loadingSplash = ref)}
-            onAnimationFinish={this.onAnimationFinish}
-            source={require('./img/bluewalletsplash.json')}
-            autoPlay
-            loop={false}
-          />
-        );
-      }
-    }
-  }
-}
+  return <App />;
+};
 
 AppRegistry.registerComponent('BlueWallet', () => BlueAppComponent);