Merge pull request Expensify#65199 from Eskalifer1/fix/65151

fix:65151: Onyx Tab navigator error if per-diem is selected

Author: inimaga

src/libs/Navigation/OnyxTabNavigator.tsx

@@ -2,7 +2,7 @@ import type {MaterialTopTabNavigationEventMap} from '@react-navigation/material-
 import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
 import type {EventMapCore, NavigationState, ParamListBase, ScreenListeners} from '@react-navigation/native';
 import {useRoute} from '@react-navigation/native';
-import React, {useCallback, useContext, useEffect, useRef, useState} from 'react';
+import React, {useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import FocusTrapContainerElement from '@components/FocusTrap/FocusTrapContainerElement';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
@@ -69,6 +69,24 @@ const TopTab = createMaterialTopTabNavigator<ParamListBase, string>();
 // This provider is placed in the OnyxTabNavigator component and the consumer is in the TabScreenWithFocusTrapWrapper component.
 const TabFocusTrapContext = React.createContext<(tabName: string, containerElement: HTMLElement | null) => void>(() => {});
 
+const getTabNames = (children: React.ReactNode): string[] => {
+    const result: string[] = [];
+
+    React.Children.forEach(children, (child) => {
+        if (!React.isValidElement(child)) {
+            return;
+        }
+
+        const element = child as React.ReactElement<{name?: string}>;
+
+        if (typeof element.props.name === 'string') {
+            result.push(element.props.name);
+        }
+    });
+
+    return result;
+};
+
 // This takes all the same props as MaterialTopTabsNavigator: https://reactnavigation.org/docs/material-top-tab-navigator/#props,
 // except ID is now required, and it gets a `selectedTab` from Onyx
 // It also takes 2 more optional callbacks to manage the focus trap container elements of the tab bar and the active tab
@@ -94,6 +112,10 @@ function OnyxTabNavigator({
     const [focusTrapContainerElementMapping, setFocusTrapContainerElementMapping] = useState<Record<string, HTMLElement>>({});
     const [selectedTab, selectedTabResult] = useOnyx(`${ONYXKEYS.COLLECTION.SELECTED_TAB}${id}`, {canBeMissing: false});
 
+    const tabNames = useMemo(() => getTabNames(children), [children]);
+
+    const validInitialTab = selectedTab && tabNames.includes(selectedTab) ? selectedTab : defaultSelectedTab;
+
     const LazyPlaceholder = useCallback(() => {
         return <FullScreenLoadingIndicator />;
     }, []);
@@ -146,7 +168,7 @@ function OnyxTabNavigator({
                 /* eslint-disable-next-line react/jsx-props-no-spreading */
                 {...rest}
                 id={id}
-                initialRouteName={selectedTab ?? defaultSelectedTab}
+                initialRouteName={validInitialTab}
                 backBehavior="initialRoute"
                 keyboardDismissMode="none"
                 tabBar={TabBarWithFocusTrapInclusion}