Merge pull request #42532 from rezkiy37/refactor/report-screen-and-lhn

perf: Optimize AppNavigator

src/libs/Navigation/AppNavigator/index.native.tsx

@@ -0,0 +1,38 @@
+import React, {memo, useContext, useEffect} from 'react';
+import {NativeModules} from 'react-native';
+import {InitialURLContext} from '@components/InitialURLContextProvider';
+import Navigation from '@libs/Navigation/Navigation';
+
+type AppNavigatorProps = {
+    /** If we have an authToken this is true */
+    authenticated: boolean;
+};
+
+function AppNavigator({authenticated}: AppNavigatorProps) {
+    const initUrl = useContext(InitialURLContext);
+
+    useEffect(() => {
+        if (!NativeModules.HybridAppModule || !initUrl) {
+            return;
+        }
+
+        Navigation.isNavigationReady().then(() => {
+            Navigation.navigate(initUrl);
+        });
+    }, [initUrl]);
+
+    if (authenticated) {
+        const AuthScreens = require('./AuthScreens').default;
+
+        // These are the protected screens and only accessible when an authToken is present
+        return <AuthScreens />;
+    }
+
+    const PublicScreens = require('./PublicScreens').default;
+
+    return <PublicScreens />;
+}
+
+AppNavigator.displayName = 'AppNavigator';
+
+export default memo(AppNavigator);

src/libs/Navigation/AppNavigator/index.tsx

@@ -1,8 +1,11 @@
-import React, {useContext, useEffect} from 'react';
+import React, {lazy, memo, Suspense, useContext, useEffect} from 'react';
 import {NativeModules} from 'react-native';
 import {InitialURLContext} from '@components/InitialURLContextProvider';
 import Navigation from '@libs/Navigation/Navigation';
 
+const AuthScreens = lazy(() => import('./AuthScreens'));
+const PublicScreens = lazy(() => import('./PublicScreens'));
+
 type AppNavigatorProps = {
     /** If we have an authToken this is true */
     authenticated: boolean;
@@ -22,14 +25,21 @@ function AppNavigator({authenticated}: AppNavigatorProps) {
     }, [initUrl]);
 
     if (authenticated) {
-        const AuthScreens = require('./AuthScreens').default;
-
         // These are the protected screens and only accessible when an authToken is present
-        return <AuthScreens />;
+        return (
+            <Suspense fallback={null}>
+                <AuthScreens />
+            </Suspense>
+        );
     }
-    const PublicScreens = require('./PublicScreens').default;
-    return <PublicScreens />;
+
+    return (
+        <Suspense fallback={null}>
+            <PublicScreens />
+        </Suspense>
+    );
 }
 
 AppNavigator.displayName = 'AppNavigator';
-export default AppNavigator;
+
+export default memo(AppNavigator);