Add useIsInSidePanel context hook to replace prop drilling

src/components/SidePanel/SidePanelReport/index.tsx

@@ -1,5 +1,6 @@
 import {NavigationRouteContext} from '@react-navigation/native';
 import React from 'react';
+import {IsInSidePanelContext} from '@hooks/useIsInSidePanel';
 import type {ExtraContentProps, PlatformStackNavigationProp} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {ReportsSplitNavigatorParamList} from '@libs/Navigation/types';
 import ReportScreen from '@pages/inbox/ReportScreen';
@@ -14,13 +15,14 @@ function SidePanelReport({navigation, reportID}: SidePanelReportProps) {
     const route = {name: SCREENS.REPORT, params: {reportID}, key: `Report-SidePanel-${reportID}`} as const;
 
     return (
-        <NavigationRouteContext.Provider value={route}>
-            <ReportScreen
-                route={route}
-                navigation={navigation as unknown as PlatformStackNavigationProp<ReportsSplitNavigatorParamList, typeof SCREENS.REPORT>}
-                isInSidePanel
-            />
-        </NavigationRouteContext.Provider>
+        <IsInSidePanelContext.Provider value>
+            <NavigationRouteContext.Provider value={route}>
+                <ReportScreen
+                    route={route}
+                    navigation={navigation as unknown as PlatformStackNavigationProp<ReportsSplitNavigatorParamList, typeof SCREENS.REPORT>}
+                />
+            </NavigationRouteContext.Provider>
+        </IsInSidePanelContext.Provider>
     );
 }
 

src/hooks/useIsInSidePanel.ts

@@ -0,0 +1,10 @@
+import {createContext, useContext} from 'react';
+
+const IsInSidePanelContext = createContext(false);
+
+function useIsInSidePanel(): boolean {
+    return useContext(IsInSidePanelContext);
+}
+
+export default useIsInSidePanel;
+export {IsInSidePanelContext};

src/pages/inbox/HeaderView.tsx

@@ -23,6 +23,7 @@ import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useHasTeam2025Pricing from '@hooks/useHasTeam2025Pricing';
+import useIsInSidePanel from '@hooks/useIsInSidePanel';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
@@ -100,15 +101,13 @@ type HeaderViewProps = {
 
     /** Whether we should display the header as in narrow layout */
     shouldUseNarrowLayout?: boolean;
-
-    /** Whether the header view is being displayed in the side panel */
-    isInSidePanel?: boolean;
 };
 
-function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked, shouldUseNarrowLayout = false, isInSidePanel}: HeaderViewProps) {
+function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked, shouldUseNarrowLayout = false}: HeaderViewProps) {
     const icons = useMemoizedLazyExpensifyIcons(['BackArrow', 'Close', 'DotIndicator'] as const);
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth} = useResponsiveLayout();
+    const isInSidePanel = useIsInSidePanel();
     const route = useRoute();
     const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(report?.parentReportID) ?? getNonEmptyStringOnyxID(report?.reportID)}`);
     const [grandParentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(parentReport?.parentReportID)}`);

src/pages/inbox/ReportScreen.tsx

@@ -27,6 +27,7 @@ import {useCurrentReportIDState} from '@hooks/useCurrentReportID';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useDocumentTitle from '@hooks/useDocumentTitle';
 import useIsAnonymousUser from '@hooks/useIsAnonymousUser';
+import useIsInSidePanel from '@hooks/useIsInSidePanel';
 import useIsReportReadyToDisplay from '@hooks/useIsReportReadyToDisplay';
 import useNetwork from '@hooks/useNetwork';
 import useNewTransactions from '@hooks/useNewTransactions';
@@ -121,10 +122,7 @@ type ReportScreenNavigationProps =
     | PlatformStackScreenProps<ReportsSplitNavigatorParamList, typeof SCREENS.REPORT>
     | PlatformStackScreenProps<RightModalNavigatorParamList, typeof SCREENS.RIGHT_MODAL.SEARCH_REPORT>;
 
-type ReportScreenProps = ReportScreenNavigationProps & {
-    /** Whether the report screen is being displayed in the side panel */
-    isInSidePanel?: boolean;
-};
+type ReportScreenProps = ReportScreenNavigationProps;
 
 const defaultReportMetadata = {
     hasOnceLoadedReportActions: false,
@@ -157,7 +155,7 @@ function isEmpty(report: OnyxEntry<OnyxTypes.Report>): boolean {
     return !Object.values(report).some((value) => value !== undefined && value !== '');
 }
 
-function ReportScreen({route, navigation, isInSidePanel = false}: ReportScreenProps) {
+function ReportScreen({route, navigation}: ReportScreenProps) {
     const styles = useThemeStyles();
     const reportIDFromRoute = getNonEmptyStringOnyxID(route.params?.reportID);
     const reportActionIDFromRoute = route?.params?.reportActionID;
@@ -169,6 +167,7 @@ function ReportScreen({route, navigation, isInSidePanel = false}: ReportScreenPr
     const {isBetaEnabled} = usePermissions();
     const {isOffline} = useNetwork();
     const {shouldUseNarrowLayout, isInNarrowPaneModal} = useResponsiveLayout();
+    const isInSidePanel = useIsInSidePanel();
 
     const {currentReportID: currentReportIDValue} = useCurrentReportIDState();
 
@@ -437,7 +436,6 @@ function ReportScreen({route, navigation, isInSidePanel = false}: ReportScreenPr
                 report={report}
                 parentReportAction={parentReportAction}
                 shouldUseNarrowLayout={shouldUseNarrowLayout}
-                isInSidePanel={isInSidePanel}
             />
         );
     }, [
@@ -452,7 +450,6 @@ function ReportScreen({route, navigation, isInSidePanel = false}: ReportScreenPr
         reportActions,
         reportIDFromRoute,
         shouldUseNarrowLayout,
-        isInSidePanel,
     ]);
 
     useEffect(() => {
@@ -1122,7 +1119,6 @@ function ReportScreen({route, navigation, isInSidePanel = false}: ReportScreenPr
                                                 reportTransactions={reportTransactions}
                                                 // If the report is from the 'Send Money' flow, we add the comment to the `iou` report because for these we don't combine reportActions even if there is a single transaction (they always have a single transaction)
                                                 transactionThreadReportID={isSentMoneyReport ? undefined : transactionThreadReportID}
-                                                isInSidePanel={isInSidePanel}
                                                 shouldHideStatusIndicators={isConciergeSidePanel && !hasUserSentMessage}
                                                 kickoffWaitingIndicator={kickoffWaitingIndicator}
                                             />

src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx

@@ -21,6 +21,7 @@ import useAncestors from '@hooks/useAncestors';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useHandleExceedMaxCommentLength from '@hooks/useHandleExceedMaxCommentLength';
 import useHandleExceedMaxTaskTitleLength from '@hooks/useHandleExceedMaxTaskTitleLength';
+import useIsInSidePanel from '@hooks/useIsInSidePanel';
 import useIsScrollLikelyLayoutTriggered from '@hooks/useIsScrollLikelyLayoutTriggered';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
@@ -112,9 +113,6 @@ type ReportActionComposeProps = Pick<ComposerWithSuggestionsProps, 'reportID' |
     /** Whether the main composer was hidden */
     didHideComposerInput?: boolean;
 
-    /** Whether the report screen is being displayed in the side panel */
-    isInSidePanel?: boolean;
-
     /** Whether to hide concierge status indicators (agent zero / typing) in the side panel */
     shouldHideStatusIndicators?: boolean;
     /** Function to trigger optimistic waiting indicator for Concierge */
@@ -142,7 +140,6 @@ function ReportActionCompose({
     didHideComposerInput,
     reportTransactions,
     transactionThreadReportID,
-    isInSidePanel = false,
     shouldHideStatusIndicators = false,
     kickoffWaitingIndicator,
 }: ReportActionComposeProps) {
@@ -152,6 +149,7 @@ function ReportActionCompose({
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth, isMediumScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout();
     const {isOffline} = useNetwork();
+    const isInSidePanel = useIsInSidePanel();
     const actionButtonRef = useRef<View | HTMLDivElement | null>(null);
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const personalDetails = usePersonalDetails();

src/pages/inbox/report/ReportFooter.tsx

@@ -13,6 +13,7 @@ import SwipeableView from '@components/SwipeableView';
 import useAncestors from '@hooks/useAncestors';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useIsAnonymousUser from '@hooks/useIsAnonymousUser';
+import useIsInSidePanel from '@hooks/useIsInSidePanel';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
@@ -65,9 +66,6 @@ type ReportFooterProps = {
     /** A method to call when the input is blur */
     onComposerBlur?: () => void;
 
-    /** Whether the report screen is being displayed in the side panel */
-    isInSidePanel?: boolean;
-
     /** Whether to hide concierge status indicators (agent zero / typing) in the side panel */
     shouldHideStatusIndicators?: boolean;
     /** Function to trigger optimistic waiting indicator for Concierge */
@@ -81,14 +79,14 @@ function ReportFooter({
     onComposerFocus,
     reportTransactions,
     transactionThreadReportID,
-    isInSidePanel,
     shouldHideStatusIndicators,
     kickoffWaitingIndicator,
 }: ReportFooterProps) {
     const styles = useThemeStyles();
     const {isOffline} = useNetwork();
     const {translate} = useLocalize();
     const {windowWidth} = useWindowDimensions();
+    const isInSidePanel = useIsInSidePanel();
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout();
     const personalDetail = useCurrentUserPersonalDetails();
@@ -266,7 +264,6 @@ function ReportFooter({
                             didHideComposerInput={didHideComposerInput}
                             reportTransactions={reportTransactions}
                             transactionThreadReportID={transactionThreadReportID}
-                            isInSidePanel={isInSidePanel}
                             shouldHideStatusIndicators={shouldHideStatusIndicators}
                             kickoffWaitingIndicator={kickoffWaitingIndicator}
                         />