Add useIsReportOpenInRHP

src/hooks/useIsReportOpenInRHP.ts

@@ -0,0 +1,9 @@
+import {useNavigationState} from '@react-navigation/native';
+import getTopmostRouteName from '@libs/Navigation/getTopmostRouteName';
+import SCREENS from '@src/SCREENS';
+
+// This hook checks if the currently open route is ReportScreen in RHP.
+export default function useIsReportOpenInRHP() {
+    const activeRoute = useNavigationState(getTopmostRouteName);
+    return activeRoute === SCREENS.SEARCH.REPORT_RHP;
+}

src/hooks/useThumbnailDimensions.ts

@@ -2,7 +2,8 @@ import {useMemo} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import type {DimensionValue} from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
 import CONST from '@src/CONST';
-import useResponsiveLayout from './useResponsiveLayout';
+import useIsReportOpenInRHP from './useIsReportOpenInRHP';
+import useWindowDimensions from './useWindowDimensions';
 
 type ThumbnailDimensions = {
     thumbnailDimensionsStyles: {
@@ -13,7 +14,9 @@ type ThumbnailDimensions = {
 };
 
 export default function useThumbnailDimensions(width: number, height: number): ThumbnailDimensions {
-    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const isReportOpenInRHP = useIsReportOpenInRHP();
+    const {isSmallScreenWidth} = useWindowDimensions();
+    const shouldUseNarrowLayout = isSmallScreenWidth || isReportOpenInRHP;
     const fixedDimension = shouldUseNarrowLayout ? CONST.THUMBNAIL_IMAGE.SMALL_SCREEN.SIZE : CONST.THUMBNAIL_IMAGE.WIDE_SCREEN.SIZE;
     const thumbnailDimensionsStyles = useMemo(() => {
         if (!width || !height) {

src/libs/Navigation/Navigation.ts

@@ -61,7 +61,7 @@ const dismissModal = (reportID?: string, ref = navigationRef) => {
     const report = getReport(reportID);
     originalDismissModalWithReport({reportID, ...report}, ref);
 };
-// Re-exporting the closeRHPFlow here to fill in default value for navigationRef. The dismissModal isn't defined in this file to avoid cyclic dependencies.
+// Re-exporting the closeRHPFlow here to fill in default value for navigationRef. The closeRHPFlow isn't defined in this file to avoid cyclic dependencies.
 const closeRHPFlow = (ref = navigationRef) => originalCloseRHPFlow(ref);
 
 // Re-exporting the dismissModalWithReport here to fill in default value for navigationRef. The dismissModalWithReport isn't defined in this file to avoid cyclic dependencies.

src/libs/Navigation/closeRHPFlow.ts

@@ -5,7 +5,7 @@ import NAVIGATORS from '@src/NAVIGATORS';
 import type {RootStackParamList} from './types';
 
 /**
- * Closes the last RHP flow, if there is only one, it closes the entire navigator.
+ * Closes the last RHP flow, if there is only one, closes the entire RHP.
  */
 export default function closeRHPFlow(navigationRef: NavigationContainerRef<RootStackParamList>) {
     if (!navigationRef.isReady()) {

src/pages/home/ReportScreen.tsx

@@ -21,12 +21,13 @@ import TaskHeaderActionButton from '@components/TaskHeaderActionButton';
 import type {CurrentReportIDContextValue} from '@components/withCurrentReportID';
 import withCurrentReportID from '@components/withCurrentReportID';
 import useAppFocusEvent from '@hooks/useAppFocusEvent';
+import useIsReportOpenInRHP from '@hooks/useIsReportOpenInRHP';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import usePrevious from '@hooks/usePrevious';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useViewportOffsetTop from '@hooks/useViewportOffsetTop';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import Timing from '@libs/actions/Timing';
 import Navigation from '@libs/Navigation/Navigation';
 import clearReportNotifications from '@libs/Notification/clearReportNotifications';
@@ -158,8 +159,9 @@ function ReportScreen({
     const flatListRef = useRef<FlatList>(null);
     const reactionListRef = useRef<ReactionListRef>(null);
     const {isOffline} = useNetwork();
-    const {shouldUseNarrowLayout, isInModal} = useResponsiveLayout();
-
+    const isReportOpenInRHP = useIsReportOpenInRHP();
+    const {isSmallScreenWidth} = useWindowDimensions();
+    const shouldUseNarrowLayout = isSmallScreenWidth || isReportOpenInRHP;
     /**
      * Create a lightweight Report so as to keep the re-rendering as light as possible by
      * passing in only the required props.
@@ -372,7 +374,7 @@ function ReportScreen({
         return reportIDFromRoute !== '' && !!report.reportID && !isTransitioning;
     }, [report, reportIDFromRoute]);
 
-    const isLoading = !reportIDFromRoute || (!isSidebarLoaded && !isInModal) || PersonalDetailsUtils.isPersonalDetailsEmpty();
+    const isLoading = !reportIDFromRoute || (!isSidebarLoaded && !isReportOpenInRHP) || PersonalDetailsUtils.isPersonalDetailsEmpty();
     const shouldShowSkeleton =
         !isLinkedMessageAvailable &&
         (isLinkingToMessage ||

src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx

@@ -11,10 +11,10 @@ import type {PopoverMenuItem} from '@components/PopoverMenu';
 import PopoverMenu from '@components/PopoverMenu';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
+import useIsReportOpenInRHP from '@hooks/useIsReportOpenInRHP';
 import useLocalize from '@hooks/useLocalize';
 import usePermissions from '@hooks/usePermissions';
 import usePrevious from '@hooks/usePrevious';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -118,7 +118,9 @@ function AttachmentPickerWithMenuItems({
     const {translate} = useLocalize();
     const {windowHeight, windowWidth} = useWindowDimensions();
     const {canUseTrackExpense} = usePermissions();
-    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const {isSmallScreenWidth} = useWindowDimensions();
+    const isReportOpenInRHP = useIsReportOpenInRHP();
+    const shouldUseNarrowLayout = isReportOpenInRHP || isSmallScreenWidth;
 
     /**
      * Returns the list of IOU Options