Merge pull request Expensify#63588 from software-mansion-labs/war-in/use-listener

Reintroduce "Improve HybridApp initialProps"

Author: mjasikowski

src/App.tsx

@@ -39,10 +39,12 @@ import CONFIG from './CONFIG';
 import Expensify from './Expensify';
 import {CurrentReportIDContextProvider} from './hooks/useCurrentReportID';
 import useDefaultDragAndDrop from './hooks/useDefaultDragAndDrop';
+import HybridAppHandler from './HybridAppHandler';
 import OnyxUpdateManager from './libs/actions/OnyxUpdateManager';
 import {ReportAttachmentsProvider} from './pages/home/report/ReportAttachmentsContext';
 import type {Route} from './ROUTES';
 import './setup/backgroundTask';
+import './setup/hybridApp';
 import {SplashScreenStateContextProvider} from './SplashScreenStateContext';
 
 /**
@@ -54,8 +56,6 @@ type AppProps = {
     url?: Route;
     /** Serialized configuration data required to initialize the React Native app (e.g. authentication details) */
     hybridAppSettings?: string;
-    /** A timestamp indicating when the initial properties were last updated, used to detect changes */
-    timestamp?: string;
 };
 
 LogBox.ignoreLogs([
@@ -71,18 +71,14 @@ const fill = {flex: 1};
 
 const StrictModeWrapper = CONFIG.USE_REACT_STRICT_MODE_IN_DEV ? React.StrictMode : ({children}: {children: React.ReactElement}) => children;
 
-function App({url, hybridAppSettings, timestamp}: AppProps) {
+function App({url, hybridAppSettings}: AppProps) {
     useDefaultDragAndDrop();
     OnyxUpdateManager();
 
     return (
         <StrictModeWrapper>
             <SplashScreenStateContextProvider>
-                <InitialURLContextProvider
-                    url={url}
-                    hybridAppSettings={hybridAppSettings}
-                    timestamp={timestamp}
-                >
+                <InitialURLContextProvider url={url}>
                     <GestureHandlerRootView style={fill}>
                         <ComposeProviders
                             components={[
@@ -119,6 +115,7 @@ function App({url, hybridAppSettings, timestamp}: AppProps) {
                         >
                             <CustomStatusBarAndBackground />
                             <ErrorBoundary errorMessage="NewExpensify crash caught by error boundary">
+                                <HybridAppHandler hybridAppSettings={hybridAppSettings} />
                                 <ColorSchemeWrapper>
                                     <Expensify />
                                 </ColorSchemeWrapper>

src/Expensify.tsx

@@ -209,6 +209,10 @@ function Expensify() {
 
         // Open chat report from a deep link (only mobile native)
         Linking.addEventListener('url', (state) => {
+            // We use custom deeplink handler in setup/hybridApp
+            if (CONFIG.IS_HYBRID_APP) {
+                return;
+            }
             Report.openReportFromDeepLink(state.url);
         });
 

src/HybridAppHandler.tsx

@@ -0,0 +1,26 @@
+import {useContext, useState} from 'react';
+import type {AppProps} from './App';
+import CONFIG from './CONFIG';
+import CONST from './CONST';
+import {signInAfterTransitionFromOldDot} from './libs/actions/Session';
+import SplashScreenStateContext from './SplashScreenStateContext';
+
+function HybridAppHandler({hybridAppSettings}: AppProps) {
+    const [signInHandled, setSignInHandled] = useState(false);
+    const {setSplashScreenState} = useContext(SplashScreenStateContext);
+
+    if (!CONFIG.IS_HYBRID_APP || !hybridAppSettings || signInHandled) {
+        return null;
+    }
+
+    signInAfterTransitionFromOldDot(hybridAppSettings).then(() => {
+        setSplashScreenState(CONST.BOOT_SPLASH_STATE.READY_TO_BE_HIDDEN);
+        setSignInHandled(true);
+    });
+
+    return null;
+}
+
+HybridAppHandler.displayName = 'HybridAppHandler';
+
+export default HybridAppHandler;

src/components/InitialURLContextProvider.tsx

@@ -1,15 +1,8 @@
-import {findFocusedRoute} from '@react-navigation/native';
 import React, {createContext, useEffect, useMemo, useState} from 'react';
 import type {ReactNode} from 'react';
 import {Linking} from 'react-native';
-import {signInAfterTransitionFromOldDot} from '@libs/actions/Session';
-import Navigation, {navigationRef} from '@navigation/Navigation';
 import type {AppProps} from '@src/App';
-import CONST from '@src/CONST';
 import type {Route} from '@src/ROUTES';
-import ROUTES from '@src/ROUTES';
-import SCREENS from '@src/SCREENS';
-import {useSplashScreenStateContext} from '@src/SplashScreenStateContext';
 
 type InitialUrlContextType = {
     initialURL: Route | undefined;
@@ -27,40 +20,18 @@ type InitialURLContextProviderProps = AppProps & {
     children: ReactNode;
 };
 
-function InitialURLContextProvider({children, url, hybridAppSettings, timestamp}: InitialURLContextProviderProps) {
+function InitialURLContextProvider({children, url}: InitialURLContextProviderProps) {
     const [initialURL, setInitialURL] = useState<Route | undefined>();
-    const {splashScreenState, setSplashScreenState} = useSplashScreenStateContext();
 
     useEffect(() => {
-        if (url && hybridAppSettings) {
-            signInAfterTransitionFromOldDot(hybridAppSettings).then(() => {
-                setInitialURL(url);
-
-                const parsedUrl = Navigation.parseHybridAppUrl(url);
-
-                Navigation.isNavigationReady().then(() => {
-                    if (parsedUrl.startsWith(`/${ROUTES.SHARE_ROOT}`)) {
-                        const focusRoute = findFocusedRoute(navigationRef.getRootState());
-                        if (focusRoute?.name === SCREENS.SHARE.SHARE_DETAILS || focusRoute?.name === SCREENS.SHARE.SUBMIT_DETAILS) {
-                            Navigation.goBack(ROUTES.SHARE_ROOT);
-                            return;
-                        }
-                    }
-                    Navigation.navigate(parsedUrl);
-                });
-
-                if (splashScreenState === CONST.BOOT_SPLASH_STATE.HIDDEN) {
-                    return;
-                }
-                setSplashScreenState(CONST.BOOT_SPLASH_STATE.READY_TO_BE_HIDDEN);
-            });
+        if (url) {
+            setInitialURL(url);
             return;
         }
         Linking.getInitialURL().then((initURL) => {
             setInitialURL(initURL as Route);
         });
-        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
-    }, [url, hybridAppSettings, timestamp]);
+    }, [url]);
 
     const initialUrlContext = useMemo(
         () => ({

src/setup/hybridApp/index.native.ts

@@ -0,0 +1,28 @@
+import {findFocusedRoute} from '@react-navigation/native';
+import {Linking} from 'react-native';
+import Navigation, {navigationRef} from '@navigation/Navigation';
+import CONFIG from '@src/CONFIG';
+import type {Route} from '@src/ROUTES';
+import ROUTES from '@src/ROUTES';
+import SCREENS from '@src/SCREENS';
+
+if (CONFIG.IS_HYBRID_APP) {
+    Linking.addEventListener('url', (state) => {
+        handleHybridUrlNavigation(state.url as Route);
+    });
+}
+
+function handleHybridUrlNavigation(url: Route) {
+    const parsedUrl = Navigation.parseHybridAppUrl(url);
+
+    Navigation.isNavigationReady().then(() => {
+        if (parsedUrl.startsWith(`/${ROUTES.SHARE_ROOT}`)) {
+            const focusRoute = findFocusedRoute(navigationRef.getRootState());
+            if (focusRoute?.name === SCREENS.SHARE.SHARE_DETAILS || focusRoute?.name === SCREENS.SHARE.SUBMIT_DETAILS) {
+                Navigation.goBack(ROUTES.SHARE_ROOT);
+                return;
+            }
+        }
+        Navigation.navigate(parsedUrl);
+    });
+}

src/setup/hybridApp/index.ts

@@ -0,0 +1,2 @@
+// This file is intentionally empty as Hybrid App is a native mobile platforms feature
+// See `index.native.ts` for the native implementation.