From 181e372d2378b85bc5d3c476226f814f026c218c Mon Sep 17 00:00:00 2001 From: Md Neyaz Ahmad Date: Sat, 29 Nov 2025 16:27:35 +0530 Subject: [PATCH 1/5] fix: broken screen animation during navigation transition --- src/libs/Navigation/OnyxTabNavigator.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/libs/Navigation/OnyxTabNavigator.tsx b/src/libs/Navigation/OnyxTabNavigator.tsx index 28860325a069e..34ee7b26c7b66 100644 --- a/src/libs/Navigation/OnyxTabNavigator.tsx +++ b/src/libs/Navigation/OnyxTabNavigator.tsx @@ -1,8 +1,9 @@ import type {MaterialTopTabNavigationEventMap} from '@react-navigation/material-top-tabs'; 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 {useIsFocused, useRoute} from '@react-navigation/native'; import React, {useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react'; +import {StyleSheet, View} from 'react-native'; import FocusTrapContainerElement from '@components/FocusTrap/FocusTrapContainerElement'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import type {TabSelectorProps} from '@components/TabSelector/TabSelector'; @@ -232,6 +233,7 @@ function OnyxTabNavigator({ function TabScreenWithFocusTrapWrapper({children}: {children?: React.ReactNode}) { const route = useRoute(); const styles = useThemeStyles(); + const isFocused = useIsFocused(); const setTabContainerElement = useContext(TabFocusTrapContext); const handleContainerElementChanged = useCallback( (element: HTMLElement | null) => { @@ -246,6 +248,7 @@ function TabScreenWithFocusTrapWrapper({children}: {children?: React.ReactNode}) style={[styles.w100, styles.h100]} > {children} + {!isFocused && } ); } From 800d10e64636fae705cfb6da1e60b9c9a7fad6d9 Mon Sep 17 00:00:00 2001 From: Md Neyaz Ahmad Date: Mon, 8 Dec 2025 14:45:43 +0530 Subject: [PATCH 2/5] Revert "fix: broken screen animation during navigation transition" This reverts commit 181e372d2378b85bc5d3c476226f814f026c218c. --- src/libs/Navigation/OnyxTabNavigator.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/libs/Navigation/OnyxTabNavigator.tsx b/src/libs/Navigation/OnyxTabNavigator.tsx index 34ee7b26c7b66..28860325a069e 100644 --- a/src/libs/Navigation/OnyxTabNavigator.tsx +++ b/src/libs/Navigation/OnyxTabNavigator.tsx @@ -1,9 +1,8 @@ import type {MaterialTopTabNavigationEventMap} from '@react-navigation/material-top-tabs'; import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs'; import type {EventMapCore, NavigationState, ParamListBase, ScreenListeners} from '@react-navigation/native'; -import {useIsFocused, useRoute} from '@react-navigation/native'; +import {useRoute} from '@react-navigation/native'; import React, {useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react'; -import {StyleSheet, View} from 'react-native'; import FocusTrapContainerElement from '@components/FocusTrap/FocusTrapContainerElement'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import type {TabSelectorProps} from '@components/TabSelector/TabSelector'; @@ -233,7 +232,6 @@ function OnyxTabNavigator({ function TabScreenWithFocusTrapWrapper({children}: {children?: React.ReactNode}) { const route = useRoute(); const styles = useThemeStyles(); - const isFocused = useIsFocused(); const setTabContainerElement = useContext(TabFocusTrapContext); const handleContainerElementChanged = useCallback( (element: HTMLElement | null) => { @@ -248,7 +246,6 @@ function TabScreenWithFocusTrapWrapper({children}: {children?: React.ReactNode}) style={[styles.w100, styles.h100]} > {children} - {!isFocused && } ); } From 816979f8c44a1f260769bf9f69aecc8791a02487 Mon Sep 17 00:00:00 2001 From: Md Neyaz Ahmad Date: Mon, 8 Dec 2025 14:57:57 +0530 Subject: [PATCH 3/5] fix: disable swipe gesture on material top tab navigator to resolve animation issue --- src/libs/Navigation/OnyxTabNavigator.tsx | 6 +----- src/pages/NewChatSelectorPage.tsx | 3 --- src/pages/iou/request/IOURequestStartPage.tsx | 3 --- 3 files changed, 1 insertion(+), 11 deletions(-) diff --git a/src/libs/Navigation/OnyxTabNavigator.tsx b/src/libs/Navigation/OnyxTabNavigator.tsx index 28860325a069e..a815b15a690bd 100644 --- a/src/libs/Navigation/OnyxTabNavigator.tsx +++ b/src/libs/Navigation/OnyxTabNavigator.tsx @@ -47,9 +47,6 @@ type OnyxTabNavigatorProps = ChildrenProps & { /** Whether to show the label when the tab is inactive */ shouldShowLabelWhenInactive?: boolean; - /** Disable swipe between tabs */ - disableSwipe?: boolean; - /** Determines whether the product training tooltip should be displayed to the user. */ shouldShowProductTrainingTooltip?: boolean; @@ -103,7 +100,6 @@ function OnyxTabNavigator({ onTabSelected = () => {}, screenListeners, shouldShowLabelWhenInactive = true, - disableSwipe = false, shouldShowProductTrainingTooltip, renderProductTrainingTooltip, lazyLoadEnabled = false, @@ -201,7 +197,7 @@ function OnyxTabNavigator({ }} screenOptions={{ ...defaultScreenOptions, - swipeEnabled: !disableSwipe, + swipeEnabled: false, lazy: lazyLoadEnabled, lazyPlaceholder: LazyPlaceholder, }} diff --git a/src/pages/NewChatSelectorPage.tsx b/src/pages/NewChatSelectorPage.tsx index 97b244e8662e0..06c774447a957 100755 --- a/src/pages/NewChatSelectorPage.tsx +++ b/src/pages/NewChatSelectorPage.tsx @@ -7,7 +7,6 @@ import ScreenWrapper from '@components/ScreenWrapper'; import TabSelector from '@components/TabSelector/TabSelector'; import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; -import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; import {setNewRoomFormLoading} from '@libs/actions/Report'; import Navigation from '@libs/Navigation/Navigation'; @@ -25,7 +24,6 @@ function NewChatSelectorPage() { const [tabBarContainerElement, setTabBarContainerElement] = useState(null); const [activeTabContainerElement, setActiveTabContainerElement] = useState(null); const [formState] = useOnyx(ONYXKEYS.FORMS.NEW_ROOM_FORM, {canBeMissing: true}); - const {shouldUseNarrowLayout} = useResponsiveLayout(); const chatPageInputRef = useRef(null); const roomPageInputRef = useRef(null); @@ -86,7 +84,6 @@ function NewChatSelectorPage() { tabBar={TabSelector} onTabBarFocusTrapContainerElementChanged={setTabBarContainerElement} onActiveTabFocusTrapContainerElementChanged={onTabFocusTrapContainerElementChanged} - disableSwipe={!!formState?.isLoading && shouldUseNarrowLayout} onTabSelect={onTabSelectFocusHandler} > diff --git a/src/pages/iou/request/IOURequestStartPage.tsx b/src/pages/iou/request/IOURequestStartPage.tsx index 2f470eaaf9431..44f44f546ab46 100644 --- a/src/pages/iou/request/IOURequestStartPage.tsx +++ b/src/pages/iou/request/IOURequestStartPage.tsx @@ -18,7 +18,6 @@ import usePolicy from '@hooks/usePolicy'; import usePrevious from '@hooks/usePrevious'; import useThemeStyles from '@hooks/useThemeStyles'; import {dismissProductTraining} from '@libs/actions/Welcome'; -import {isMobile} from '@libs/Browser'; import {canUseTouchScreen} from '@libs/DeviceCapabilities'; import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID'; import getPlatform from '@libs/getPlatform'; @@ -279,8 +278,6 @@ function IOURequestStartPage({ shouldShowProductTrainingTooltip={shouldShowProductTrainingTooltip} renderProductTrainingTooltip={renderProductTrainingTooltip} lazyLoadEnabled - // We're disabling swipe on mWeb fo the Per Diem tab because the keyboard will hang on the other tab after switching - disableSwipe={(isMultiScanEnabled && selectedTab === CONST.TAB_REQUEST.SCAN) || (selectedTab === CONST.TAB_REQUEST.PER_DIEM && isMobile())} > {() => ( From c2f5d793aba9ba8f74b20540460c190996785ea2 Mon Sep 17 00:00:00 2001 From: Md Neyaz Ahmad Date: Tue, 9 Dec 2025 18:26:57 +0530 Subject: [PATCH 4/5] chore: resolve linting issues --- src/pages/NewChatSelectorPage.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/pages/NewChatSelectorPage.tsx b/src/pages/NewChatSelectorPage.tsx index 06c774447a957..cf2a0c9351643 100755 --- a/src/pages/NewChatSelectorPage.tsx +++ b/src/pages/NewChatSelectorPage.tsx @@ -12,7 +12,6 @@ import {setNewRoomFormLoading} from '@libs/actions/Report'; import Navigation from '@libs/Navigation/Navigation'; 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'; @@ -23,7 +22,6 @@ function NewChatSelectorPage() { const [headerWithBackBtnContainerElement, setHeaderWithBackButtonContainerElement] = useState(null); const [tabBarContainerElement, setTabBarContainerElement] = useState(null); const [activeTabContainerElement, setActiveTabContainerElement] = useState(null); - const [formState] = useOnyx(ONYXKEYS.FORMS.NEW_ROOM_FORM, {canBeMissing: true}); const chatPageInputRef = useRef(null); const roomPageInputRef = useRef(null); From 5520388d63203080d751b54ac0b267b2c0f70537 Mon Sep 17 00:00:00 2001 From: Md Neyaz Ahmad Date: Tue, 9 Dec 2025 18:57:27 +0530 Subject: [PATCH 5/5] chore: fix lint errors --- src/pages/NewChatSelectorPage.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/NewChatSelectorPage.tsx b/src/pages/NewChatSelectorPage.tsx index cf2a0c9351643..8c90d64b2a9f8 100755 --- a/src/pages/NewChatSelectorPage.tsx +++ b/src/pages/NewChatSelectorPage.tsx @@ -6,7 +6,6 @@ import type {AnimatedTextInputRef} from '@components/RNTextInput'; import ScreenWrapper from '@components/ScreenWrapper'; import TabSelector from '@components/TabSelector/TabSelector'; import useLocalize from '@hooks/useLocalize'; -import useOnyx from '@hooks/useOnyx'; import useThemeStyles from '@hooks/useThemeStyles'; import {setNewRoomFormLoading} from '@libs/actions/Report'; import Navigation from '@libs/Navigation/Navigation';