[HybridApp] Fix explanation modal

src/components/HybridAppMiddleware.tsx

@@ -2,14 +2,18 @@ import {useNavigation} from '@react-navigation/native';
 import type {StackNavigationProp} from '@react-navigation/stack';
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {NativeModules} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import useSplashScreen from '@hooks/useSplashScreen';
 import BootSplash from '@libs/BootSplash';
 import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
 import type {RootStackParamList} from '@libs/Navigation/types';
 import * as Welcome from '@userActions/Welcome';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import type {Route} from '@src/ROUTES';
+import type {TryNewDot} from '@src/types/onyx';
 
 type HybridAppMiddlewareProps = {
     children: React.ReactNode;
@@ -24,6 +28,16 @@ const HybridAppMiddlewareContext = React.createContext<HybridAppMiddlewareContex
     showSplashScreenOnNextStart: () => {},
 });
 
+const onboardingStatusSelector = (tryNewDot: OnyxEntry<TryNewDot>) => {
+    let completedHybridAppOnboarding = tryNewDot?.classicRedirect?.completedHybridAppOnboarding;
+
+    if (typeof completedHybridAppOnboarding === 'string') {
+        completedHybridAppOnboarding = completedHybridAppOnboarding === 'true';
+    }
+
+    return completedHybridAppOnboarding;
+};
+
 /*
  * HybridAppMiddleware is responsible for handling BootSplash visibility correctly.
  * It is crucial to make transitions between OldDot and NewDot look smooth.
@@ -33,6 +47,20 @@ function HybridAppMiddleware(props: HybridAppMiddlewareProps) {
     const [startedTransition, setStartedTransition] = useState(false);
     const [finishedTransition, setFinishedTransition] = useState(false);
     const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
+    const [completedHybridAppOnboarding] = useOnyx(ONYXKEYS.NVP_TRYNEWDOT, {selector: onboardingStatusSelector});
+
+    /**
+     * This useEffect tracks changes of `nvp_tryNewDot` value.
+     * We propagate it from OldDot to NewDot with native method due to limitations of old app.
+     */
+    useEffect(() => {
+        if (completedHybridAppOnboarding === undefined) {
+            return;
+        }
+
+        Log.info(`[HybridApp] Onboarding status has changed. Propagating new value to OldDot`, true, {completedHybridAppOnboarding});
+        NativeModules.HybridAppModule.completeOnboarding(completedHybridAppOnboarding);
+    }, [completedHybridAppOnboarding]);
 
     /*
      * Handles navigation during transition from OldDot. For ordinary NewDot app it is just pure navigation.

src/libs/actions/Welcome.ts

@@ -95,7 +95,7 @@ function handleHybridAppOnboarding() {
             isOnboardingFlowCompleted({
                 onNotCompleted: () =>
                     setTimeout(() => {
-                        Navigation.navigate(ROUTES.EXPLANATION_MODAL_ROOT);
+                        Navigation.navigate(ROUTES.ONBOARDING_ROOT);
                     }, variables.explanationModalDelay),
             }),
     });

src/types/modules/react-native.d.ts

@@ -12,6 +12,7 @@ import type StartupTimer from '@libs/StartupTimer/types';
 
 type HybridAppModule = {
     closeReactNativeApp: () => void;
+    completeOnboarding: (status: boolean) => void;
     exitApp: () => void;
 };