REF: Scan QR Lazy

Navigation.tsx

@@ -39,7 +39,6 @@ import TransactionStatus from './screen/transactions/TransactionStatus';
 
 import AztecoRedeem from './screen/receive/aztecoRedeem';
 
-import ScanQRCode from './screen/send/ScanQRCode';
 import Broadcast from './screen/send/Broadcast';
 import IsItMyAddress from './screen/send/isItMyAddress';
 import Success from './screen/send/success';
@@ -73,6 +72,7 @@ import ScanLndInvoiceRoot from './navigation/ScanLndInvoiceStack';
 import { useExtendedNavigation } from './hooks/useExtendedNavigation';
 import ReorderWalletsStackRoot from './navigation/ReorderWalletsStack';
 import WalletXpubStackRoot from './navigation/WalletXpubStack';
+import ScanQRCodeStackRoot from './navigation/ScanQRCodeStack';
 
 const LDKOpenChannelStack = createNativeStackNavigator();
 const LDKOpenChannelRoot = () => {
@@ -107,17 +107,6 @@ const AztecoRedeemRoot = () => {
   );
 };
 
-const ScanQRCodeStack = createNativeStackNavigator();
-const ScanQRCodeRoot = () => (
-  <ScanQRCodeStack.Navigator
-    initialRouteName="ScanQRCode"
-    id="ScanQRCodeRoot"
-    screenOptions={{ headerShown: false, presentation: 'fullScreenModal' }}
-  >
-    <ScanQRCodeStack.Screen name="ScanQRCode" component={ScanQRCode} initialParams={ScanQRCode.initialParams} />
-  </ScanQRCodeStack.Navigator>
-);
-
 const DrawerListContent = (props: any) => {
   return <DrawerList {...props} />;
 };
@@ -396,13 +385,25 @@ const DetailViewStackScreensStack = () => {
 
           <DetailViewRoot.Screen
             name="ScanQRCodeRoot"
-            component={ScanQRCodeRoot}
+            component={ScanQRCodeStackRoot}
             options={{
               headerShown: false,
               presentation: 'fullScreenModal',
               statusBarHidden: true,
             }}
-            initialParams={ScanQRCode.initialParams}
+            initialParams={{
+              isLoading: false,
+              cameraStatusGranted: undefined,
+              backdoorPressed: undefined,
+              launchedBy: undefined,
+              urTotal: undefined,
+              urHave: undefined,
+              backdoorText: '',
+              onDismiss: undefined,
+              showFileImportButton: true,
+              backdoorVisible: false,
+              animatedQRCodeData: {},
+            }}
           />
 
           <DetailViewRoot.Screen name="PaymentCodeRoot" component={PaymentCodeStackRoot} options={NavigationDefaultOptions} />

navigation/LazyLoadScanQRCodeStack.tsx

@@ -0,0 +1,10 @@
+import React, { lazy, Suspense } from 'react';
+import { LazyLoadingIndicator } from './LazyLoadingIndicator';
+
+const ScanQRCode = lazy(() => import('../screen/send/ScanQRCode'));
+
+export const ScanQRCodeComponent = () => (
+  <Suspense fallback={<LazyLoadingIndicator />}>
+    <ScanQRCode />
+  </Suspense>
+);

navigation/ScanQRCodeStack.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { ScanQRCodeComponent } from './LazyLoadScanQRCodeStack';
+import { useTheme } from '../components/themes';
+import navigationStyle from '../components/navigationStyle';
+import loc from '../loc';
+
+const Stack = createNativeStackNavigator();
+
+const ScanQRCodeStackRoot = () => {
+  const theme = useTheme();
+
+  return (
+    <Stack.Navigator screenOptions={{ headerShadowVisible: false }}>
+      <Stack.Screen
+        name="ScanQRCode"
+        component={ScanQRCodeComponent}
+        options={navigationStyle({
+          headerShown: false,
+          statusBarHidden: true,
+          presentation: 'fullScreenModal',
+        })(theme)}
+      />
+    </Stack.Navigator>
+  );
+};
+
+export default ScanQRCodeStackRoot;

screen/send/ScanQRCode.js

@@ -402,17 +402,4 @@ const ScanQRCode = () => {
   return <View style={styles.root}>{render}</View>;
 };
 
-export default ScanQRCode;
-ScanQRCode.initialParams = {
-  isLoading: false,
-  cameraStatusGranted: undefined,
-  backdoorPressed: undefined,
-  launchedBy: undefined,
-  urTotal: undefined,
-  urHave: undefined,
-  backdoorText: '',
-  onDismiss: undefined,
-  showFileImportButton: true,
-  backdoorVisible: false,
-  animatedQRCodeData: {},
-};
+export default ScanQRCode;