fix crash when swiping to chat immediately after creating a room

src/libs/Navigation/OnyxTabNavigator.tsx

@@ -44,6 +44,9 @@ type OnyxTabNavigatorProps = ChildrenProps & {
 
     /** Whether to show the label when the tab is inactive */
     shouldShowLabelWhenInactive?: boolean;
+
+    /** Disable swipe between tabs */
+    disableSwipe?: boolean;
 };
 
 // eslint-disable-next-line rulesdir/no-inline-named-export
@@ -66,6 +69,7 @@ function OnyxTabNavigator({
     onTabSelected = () => {},
     screenListeners,
     shouldShowLabelWhenInactive = true,
+    disableSwipe = false,
     ...rest
 }: OnyxTabNavigatorProps) {
     // Mapping of tab name to focus trap container element
@@ -137,7 +141,10 @@ function OnyxTabNavigator({
                     },
                     ...(screenListeners ?? {}),
                 }}
-                screenOptions={defaultScreenOptions}
+                screenOptions={{
+                    ...defaultScreenOptions,
+                    swipeEnabled: !disableSwipe,
+                }}
             >
                 {children}
             </TopTab.Navigator>

src/libs/actions/Report.ts

@@ -4547,6 +4547,10 @@ function updateLoadingInitialReportAction(reportID: string) {
     Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`, {isLoadingInitialReportActions: false});
 }
 
+function setNewRoomFormLoading(isLoading = true) {
+    Onyx.merge(`${ONYXKEYS.FORMS.NEW_ROOM_FORM}`, {isLoading});
+}
+
 function clearNewRoomFormError() {
     Onyx.set(ONYXKEYS.FORMS.NEW_ROOM_FORM, {
         isLoading: false,
@@ -5346,6 +5350,7 @@ export {
     clearGroupChat,
     clearIOUError,
     clearNewRoomFormError,
+    setNewRoomFormLoading,
     clearPolicyRoomNameErrors,
     clearPrivateNotesError,
     clearReportFieldKeyErrors,

src/pages/NewChatSelectorPage.tsx

@@ -1,13 +1,17 @@
 import {useNavigation} from '@react-navigation/native';
-import React, {useCallback, useMemo, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import {useOnyx} from 'react-native-onyx';
 import FocusTrapContainerElement from '@components/FocusTrap/FocusTrapContainerElement';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import TabSelector from '@components/TabSelector/TabSelector';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {setNewRoomFormLoading} from '@libs/actions/Report';
 import OnyxTabNavigator, {TabScreenWithFocusTrapWrapper, TopTab} from '@libs/Navigation/OnyxTabNavigator';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import NewChatPage from './NewChatPage';
 import WorkspaceNewRoomPage from './workspace/WorkspaceNewRoomPage';
 
@@ -19,6 +23,8 @@ function NewChatSelectorPage() {
     const [headerWithBackBtnContainerElement, setHeaderWithBackButtonContainerElement] = useState<HTMLElement | null>(null);
     const [tabBarContainerElement, setTabBarContainerElement] = useState<HTMLElement | null>(null);
     const [activeTabContainerElement, setActiveTabContainerElement] = useState<HTMLElement | null>(null);
+    const [formState] = useOnyx(ONYXKEYS.FORMS.NEW_ROOM_FORM);
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     // Theoretically, the focus trap container element can be null (due to component unmount/remount), so we filter out the null elements
     const containerElements = useMemo(() => {
@@ -29,6 +35,10 @@ function NewChatSelectorPage() {
         setActiveTabContainerElement(activeTabElement ?? null);
     }, []);
 
+    useEffect(() => {
+        setNewRoomFormLoading(false);
+    }, []);
+
     return (
         <ScreenWrapper
             shouldEnableKeyboardAvoidingView={false}
@@ -53,6 +63,7 @@ function NewChatSelectorPage() {
                 tabBar={TabSelector}
                 onTabBarFocusTrapContainerElementChanged={setTabBarContainerElement}
                 onActiveTabFocusTrapContainerElementChanged={onTabFocusTrapContainerElementChanged}
+                disableSwipe={!!formState?.isLoading && shouldUseNarrowLayout}
             >
                 <TopTab.Screen name={CONST.TAB.NEW_CHAT}>
                     {() => (

src/pages/workspace/WorkspaceNewRoomPage.tsx

@@ -1,6 +1,6 @@
 import {useIsFocused} from '@react-navigation/core';
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
-import {View} from 'react-native';
+import {InteractionManager, View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import BlockingView from '@components/BlockingViews/BlockingView';
@@ -31,7 +31,7 @@ import {getActivePolicies} from '@libs/PolicyUtils';
 import {buildOptimisticChatReport, getCommentLength, getParsedComment, isPolicyAdmin} from '@libs/ReportUtils';
 import {isExistingRoomName, isReservedRoomName, isValidRoomNameWithoutLimits} from '@libs/ValidationUtils';
 import variables from '@styles/variables';
-import {addPolicyReport, clearNewRoomFormError} from '@userActions/Report';
+import {addPolicyReport, clearNewRoomFormError, setNewRoomFormLoading} from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -92,6 +92,7 @@ function WorkspaceNewRoomPage() {
      * @param values - form input values passed by the Form component
      */
     const submit = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.NEW_ROOM_FORM>) => {
+        setNewRoomFormLoading();
         const participants = [session?.accountID ?? CONST.DEFAULT_NUMBER_ID];
         const parsedDescription = getParsedComment(values.reportDescription ?? '', {policyID});
         const policyReport = buildOptimisticChatReport({
@@ -106,8 +107,12 @@ function WorkspaceNewRoomPage() {
             description: parsedDescription,
         });
 
-        setNewRoomReportID(policyReport.reportID);
-        addPolicyReport(policyReport);
+        InteractionManager.runAfterInteractions(() => {
+            requestAnimationFrame(() => {
+                setNewRoomReportID(policyReport.reportID);
+                addPolicyReport(policyReport);
+            });
+        });
     };
 
     useEffect(() => {