Onboarding modal overlaps Abracadabra you’re signed in! screen

src/libs/Navigation/AppNavigator/AuthScreens.tsx

@@ -615,7 +615,7 @@ function AuthScreens() {
                     component={FeatureTrainingModalNavigator}
                     listeners={modalScreenListeners}
                 />
-                {isOnboardingCompleted === false && (
+                {isOnboardingCompleted === false && !Navigation.isValidateLoginFlow() && (
                     <RootStack.Screen
                         name={NAVIGATORS.ONBOARDING_MODAL_NAVIGATOR}
                         options={{...rootNavigatorScreenOptions.basicModalNavigator, gestureEnabled: false}}

src/libs/Navigation/Navigation.ts

@@ -661,6 +661,12 @@ function isOnboardingFlow() {
     return isOnboardingFlowName(currentFocusedRoute?.name);
 }
 
+function isValidateLoginFlow() {
+    const state = navigationRef.getRootState();
+    const currentFocusedRoute = findFocusedRoute(state);
+    return currentFocusedRoute?.name === SCREENS.VALIDATE_LOGIN;
+}
+
 function clearPreloadedRoutes() {
     const rootStateWithoutPreloadedRoutes = {...navigationRef.getRootState(), preloadedRoutes: []} as NavigationState;
     navigationRef.reset(rootStateWithoutPreloadedRoutes);
@@ -716,6 +722,7 @@ export default {
     clearPreloadedRoutes,
     onModalDismissedOnce,
     fireModalDismissed,
+    isValidateLoginFlow,
 };
 
 export {navigationRef};

tests/navigation/NavigationTests.tsx

@@ -0,0 +1,43 @@
+import {render} from '@testing-library/react-native';
+import React from 'react';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import getIsNarrowLayout from '@libs/getIsNarrowLayout';
+import Navigation from '@libs/Navigation/Navigation';
+import CONST from '@src/CONST';
+import TestNavigationContainer from '../utils/TestNavigationContainer';
+
+jest.mock('@hooks/useResponsiveLayout', () => jest.fn());
+jest.mock('@libs/getIsNarrowLayout', () => jest.fn());
+
+jest.mock('@pages/home/sidebar/NavigationTabBarAvatar');
+jest.mock('@src/components/Navigation/TopLevelNavigationTabBar');
+
+const mockedGetIsNarrowLayout = getIsNarrowLayout as jest.MockedFunction<typeof getIsNarrowLayout>;
+const mockedUseResponsiveLayout = useResponsiveLayout as jest.MockedFunction<typeof useResponsiveLayout>;
+
+describe('Navigation', () => {
+    beforeEach(() => {
+        mockedGetIsNarrowLayout.mockReturnValue(false);
+        mockedUseResponsiveLayout.mockReturnValue({...CONST.NAVIGATION_TESTS.DEFAULT_USE_RESPONSIVE_LAYOUT_VALUE, shouldUseNarrowLayout: false});
+    });
+
+    describe('isValidateLoginFlow', () => {
+        it('should return true when the current focused route is the validate login screen', () => {
+            // Given the navigation state with the validate login screen
+            render(
+                <TestNavigationContainer
+                    initialState={{
+                        index: 0,
+                        routes: [
+                            {
+                                name: 'ValidateLogin',
+                            },
+                        ],
+                    }}
+                />,
+            );
+
+            expect(Navigation.isValidateLoginFlow()).toBe(true);
+        });
+    });
+});

tests/utils/TestNavigationContainer.tsx

@@ -145,6 +145,10 @@ function TestNavigationContainer({initialState}: TestNavigationContainerProps) {
                     name={NAVIGATORS.SEARCH_FULLSCREEN_NAVIGATOR}
                     component={TestSearchFullscreenNavigator}
                 />
+                <RootStack.Screen
+                    name={SCREENS.VALIDATE_LOGIN}
+                    component={getEmptyComponent()}
+                />
             </RootStack.Navigator>
         </NavigationContainer>
     );