REF: Reorder

Navigation.tsx

@@ -26,7 +26,6 @@ import WalletDetails from './screen/wallets/details';
 import ExportMultisigCoordinationSetup from './screen/wallets/ExportMultisigCoordinationSetup';
 import GenerateWord from './screen/wallets/generateWord';
 import WalletsList from './screen/wallets/WalletsList';
-import ReorderWallets from './screen/wallets/reorderWallets';
 import SelectWallet from './screen/wallets/selectWallet';
 import SignVerify from './screen/wallets/signVerify';
 import WalletTransactions from './screen/wallets/transactions';
@@ -73,6 +72,7 @@ import LNDCreateInvoiceRoot from './navigation/LNDCreateInvoiceStack';
 import ReceiveDetailsStackRoot from './navigation/ReceiveDetailsStack';
 import ScanLndInvoiceRoot from './navigation/ScanLndInvoiceStack';
 import { useExtendedNavigation } from './hooks/useExtendedNavigation';
+import ReorderWalletsStackRoot from './navigation/ReorderWalletsStack';
 
 const LDKOpenChannelStack = createNativeStackNavigator();
 const LDKOpenChannelRoot = () => {
@@ -118,21 +118,6 @@ const ScanQRCodeRoot = () => (
   </ScanQRCodeStack.Navigator>
 );
 
-const ReorderWalletsStack = createNativeStackNavigator();
-const ReorderWalletsStackRoot = () => {
-  const theme = useTheme();
-
-  return (
-    <ReorderWalletsStack.Navigator id="ReorderWalletsRoot" screenOptions={{ headerShadowVisible: false }}>
-      <ReorderWalletsStack.Screen
-        name="ReorderWalletsScreen"
-        component={ReorderWallets}
-        options={ReorderWallets.navigationOptions(theme)}
-      />
-    </ReorderWalletsStack.Navigator>
-  );
-};
-
 const DrawerListContent = (props: any) => {
   return <DrawerList {...props} />;
 };

navigation/LazyLoadReorderWalletsStack.tsx

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

navigation/ReorderWalletsStack.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { ReorderWalletsComponent } from './LazyLoadReorderWalletsStack';
+import { useTheme } from '../components/themes';
+import navigationStyle from '../components/navigationStyle';
+import loc from '../loc';
+
+const Stack = createNativeStackNavigator();
+
+const ReorderWalletsStackRoot = () => {
+  const theme = useTheme();
+
+  return (
+    <Stack.Navigator screenOptions={{ headerShadowVisible: false }}>
+      <Stack.Screen
+        name="ReorderWalletsScreen"
+        component={ReorderWalletsComponent}
+        options={navigationStyle({
+          headerBackVisible: false,
+          headerLargeTitle: true,
+          closeButton: true,
+
+          headerTitle: loc.wallets.reorder_title,
+        })(theme)}
+      />
+    </Stack.Navigator>
+  );
+};
+
+export default ReorderWalletsStackRoot;

screen/wallets/reorderWallets.js

@@ -1,7 +1,6 @@
 import React, { useEffect, useRef, useContext, useState, useLayoutEffect } from 'react';
 import { StyleSheet, useColorScheme, Platform } from 'react-native';
 import DraggableFlatList, { ScaleDecorator } from 'react-native-draggable-flatlist';
-import navigationStyle from '../../components/navigationStyle';
 import loc from '../../loc';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
@@ -66,7 +65,8 @@ const ReorderWallets = () => {
         placeholder: loc.wallets.search_wallets,
       },
     });
-  }, [setSearchQuery, setIsSearchFocused, setOptions]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const navigateToWallet = wallet => {
     const walletID = wallet.getID();
@@ -132,13 +132,4 @@ const ReorderWallets = () => {
   );
 };
 
-ReorderWallets.navigationOptions = navigationStyle(
-  {
-    headerBackVisible: false,
-    headerLargeTitle: true,
-    closeButton: true,
-  },
-  opts => ({ ...opts, headerTitle: loc.wallets.reorder_title }),
-);
-
 export default ReorderWallets;