Fix HeaderWithBackButton header buttons remounts which causes modals closing on orientation change

src/components/HeaderWithBackButton/index.tsx

@@ -82,6 +82,10 @@ function HeaderWithBackButton({
     shouldDisplaySearchRouter = false,
     progressBarPercentage,
     style,
+    shouldDisplayResponsiveChildrenInSeparateLine = false,
+    responsiveChildren,
+    responsiveChildrenContainerStyle,
+    bottomContent,
     subTitleLink = '',
     shouldMinimizeMenuButton = false,
     openParentReportInCurrentTab = false,
@@ -232,22 +236,55 @@ function HeaderWithBackButton({
         shouldSetModalVisibility,
     ]);
 
+    const shouldUseMultiLineLayout = shouldDisplayResponsiveChildrenInSeparateLine || !!bottomContent;
+    const movableChildrenContent = !!responsiveChildren && (
+        <View
+            key="movableChildren"
+            style={[
+                !shouldDisplayResponsiveChildrenInSeparateLine && styles.reportOptions,
+                !shouldDisplayResponsiveChildrenInSeparateLine && styles.flexRow,
+                styles.flexShrink0,
+                !shouldDisplayResponsiveChildrenInSeparateLine && styles.alignItemsCenter,
+                !shouldDisplayResponsiveChildrenInSeparateLine && shouldUseMultiLineLayout && styles.headerBarHeight,
+                shouldDisplayResponsiveChildrenInSeparateLine && styles.headerBarSeparateLineChildren,
+                responsiveChildrenContainerStyle,
+            ]}
+        >
+            {responsiveChildren}
+        </View>
+    );
+
     return (
         <View
             style={[
                 styles.headerBar,
+                styles.flexRow,
+                styles.alignItemsCenter,
                 shouldUseHeadlineHeader && styles.headerBarHeight,
                 shouldShowBorderBottom && styles.borderBottom,
                 // progressBarPercentage can be 0 which would
                 // be falsy, hence using !== undefined explicitly
                 progressBarPercentage !== undefined && styles.pl0,
                 shouldShowBackButton && [styles.pl2],
+                shouldUseMultiLineLayout && styles.headerBarWithSeparateLine,
                 shouldOverlay && StyleSheet.absoluteFill,
                 style,
             ]}
             onTouchStart={isInLandscapeMode ? () => Keyboard.dismiss() : undefined}
         >
-            <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.flexGrow1, styles.justifyContentBetween, styles.overflowHidden, styles.mr3]}>
+            <View
+                key="mainContent"
+                style={[
+                    styles.dFlex,
+                    styles.flexRow,
+                    styles.alignItemsCenter,
+                    styles.flex1,
+                    styles.overflowHidden,
+                    shouldUseMultiLineLayout && styles.mr3,
+                    shouldUseMultiLineLayout && styles.headerBarHeight,
+                    shouldUseMultiLineLayout && (shouldShowBackButton ? styles.pl2 : styles.pl5),
+                ]}
+            >
                 {shouldShowBackButton && (
                     <Tooltip text={translate('common.back')}>
                         <PressableWithoutFeedback
@@ -294,7 +331,13 @@ function HeaderWithBackButton({
                     />
                 )}
                 {middleContent}
-                <View style={[styles.reportOptions, styles.flexRow, styles.alignItemsCenter]}>
+            </View>
+            {!shouldDisplayResponsiveChildrenInSeparateLine && movableChildrenContent}
+            <View
+                key="systemActions"
+                style={[styles.flexRow, styles.flexShrink0, styles.alignItemsCenter, styles.mr3, shouldUseMultiLineLayout && styles.headerBarHeight]}
+            >
+                <View style={[styles.flexRow, styles.alignItemsCenter]}>
                     <View style={[styles.pr2, styles.flexRow, styles.alignItemsCenter]}>
                         {children}
                         {shouldShowDownloadButton &&
@@ -375,6 +418,15 @@ function HeaderWithBackButton({
                 {shouldDisplaySearchRouter && <SearchButton />}
                 {shouldDisplayHelpButton && <SidePanelButton />}
             </View>
+            {!!bottomContent && (
+                <View
+                    key="bottomContent"
+                    style={[styles.flexShrink0, styles.w100]}
+                >
+                    {bottomContent}
+                </View>
+            )}
+            {shouldDisplayResponsiveChildrenInSeparateLine && movableChildrenContent}
         </View>
     );
 }

src/components/HeaderWithBackButton/types.ts

@@ -166,6 +166,18 @@ type HeaderWithBackButtonProps = Partial<ChildrenProps> & {
     /** Additional styles to add to the component */
     style?: StyleProp<ViewStyle>;
 
+    /** Whether responsive children should be displayed in a full-width line below the main header row */
+    shouldDisplayResponsiveChildrenInSeparateLine?: boolean;
+
+    /** Header actions that can move to a separate line. Regular children always stay in the main row. */
+    responsiveChildren?: ReactNode;
+
+    /** Additional styles for the responsive children container */
+    responsiveChildrenContainerStyle?: StyleProp<ViewStyle>;
+
+    /** Full-width content displayed below the main header row and above responsive children */
+    bottomContent?: ReactNode;
+
     /** The URL link associated with the attachment's subtitle, if available */
     subTitleLink?: string;
 

src/components/MoneyReportHeader.tsx

@@ -131,24 +131,17 @@ function MoneyReportHeaderContent({reportID: reportIDProp, shouldDisplayBackButt
                 shouldShowBorderBottom={false}
                 shouldEnableDetailPageNavigation
                 openParentReportInCurrentTab
-            >
-                {shouldShowHeaderButtonsInHeaderRow && (
+                shouldDisplayResponsiveChildrenInSeparateLine={!shouldShowHeaderButtonsInHeaderRow}
+                responsiveChildrenContainerStyle={!shouldShowHeaderButtonsInHeaderRow && styles.ph0}
+                responsiveChildren={
                     <MoneyReportHeaderActions
                         reportID={reportIDProp}
                         primaryAction={primaryAction}
                         isReportInSearch={isReportInSearch}
                         backTo={backTo}
                     />
-                )}
-            </HeaderWithBackButton>
-            {!shouldShowHeaderButtonsInHeaderRow && (
-                <MoneyReportHeaderActions
-                    reportID={reportIDProp}
-                    primaryAction={primaryAction}
-                    isReportInSearch={isReportInSearch}
-                    backTo={backTo}
-                />
-            )}
+                }
+            />
             <MoneyReportHeaderMoreContent reportID={reportIDProp} />
             <HeaderLoadingBar />
         </View>

src/components/MoneyRequestHeader.tsx

@@ -178,26 +178,21 @@ function MoneyRequestHeader({reportID: reportIDProp, onBackButtonPress}: MoneyRe
                 onBackButtonPress={() => onBackButtonPress(isFromReviewDuplicates)}
                 shouldEnableDetailPageNavigation
                 openParentReportInCurrentTab={shouldOpenParentReportInCurrentTab}
-            >
-                {!shouldDisplayButtonsInSeparateLine && (
+                shouldDisplayResponsiveChildrenInSeparateLine={shouldDisplayButtonsInSeparateLine}
+                responsiveChildren={
                     <MoneyRequestHeaderActions
                         reportID={reportID}
                         onBackButtonPress={onBackButtonPress}
                     />
-                )}
+                }
+            >
                 {shouldDisplayTransactionNavigation && !!transaction && (
                     <MoneyRequestReportTransactionsNavigation
                         currentTransactionID={transaction.transactionID}
                         isFromReviewDuplicates={isFromReviewDuplicates}
                     />
                 )}
             </HeaderWithBackButton>
-            {shouldDisplayButtonsInSeparateLine && (
-                <MoneyRequestHeaderActions
-                    reportID={reportID}
-                    onBackButtonPress={onBackButtonPress}
-                />
-            )}
             {!!statusBarProps && (
                 <View style={[styles.ph5, styles.pb3]}>
                     <MoneyRequestHeaderStatusBar

src/pages/domain/Admins/DomainAdminsPage.tsx

@@ -145,10 +145,9 @@ function DomainAdminsPage({route}: DomainAdminsPageProps) {
                     shouldShowBackButton={shouldUseNarrowLayout}
                     shouldUseHeadlineHeader
                     shouldDisplayHelpButton
-                >
-                    {!shouldDisplayButtonsInSeparateLine && headerContent}
-                </HeaderWithBackButton>
-                {shouldDisplayButtonsInSeparateLine && !!headerContent && <View style={[styles.ph5, styles.flexRow, styles.gap2]}>{headerContent}</View>}
+                    shouldDisplayResponsiveChildrenInSeparateLine={shouldDisplayButtonsInSeparateLine}
+                    responsiveChildren={headerContent}
+                />
                 <DomainAdminsTable
                     domainAccountID={domainAccountID}
                     admins={admins}

src/pages/domain/BaseDomainMembersPage.tsx

@@ -94,10 +94,9 @@ function BaseDomainMembersPage({
                     shouldShowBackButton={shouldUseNarrowLayout}
                     shouldUseHeadlineHeader={!useSelectionModeHeader}
                     shouldDisplayHelpButton
-                >
-                    {!shouldDisplayButtonsInSeparateLine && !!headerContent && <View style={[styles.flexRow, styles.gap2]}>{headerContent}</View>}
-                </HeaderWithBackButton>
-                {shouldDisplayButtonsInSeparateLine && !!headerContent && <View style={[styles.ph5, styles.flexRow, styles.gap2]}>{headerContent}</View>}
+                    shouldDisplayResponsiveChildrenInSeparateLine={shouldDisplayButtonsInSeparateLine}
+                    responsiveChildren={!!headerContent && <View style={[styles.flexRow, styles.gap2]}>{headerContent}</View>}
+                />
                 <DomainMembersTable
                     domainAccountID={domainAccountID}
                     members={members}

src/pages/domain/Groups/DomainGroupsPage.tsx

@@ -116,10 +116,9 @@ function DomainGroupsPage({route}: DomainGroupsPageProps) {
                     icon={illustrations.Members}
                     shouldShowBackButton={shouldUseNarrowLayout}
                     shouldUseHeadlineHeader
-                >
-                    {!shouldDisplayButtonsInSeparateLine && <View style={[styles.flexRow, styles.gap2]}>{createGroupHeaderButton}</View>}
-                </HeaderWithBackButton>
-                {shouldDisplayButtonsInSeparateLine && <View style={[styles.pl5, styles.pr5]}>{createGroupHeaderButton}</View>}
+                    shouldDisplayResponsiveChildrenInSeparateLine={shouldDisplayButtonsInSeparateLine}
+                    responsiveChildren={createGroupHeaderButton}
+                />
 
                 <DomainGroupsTable
                     domainAccountID={domainAccountID}

src/pages/settings/Rules/ExpenseRulesPage.tsx

@@ -188,10 +188,9 @@ function ExpenseRulesPage() {
                 shouldUseHeadlineHeader={!selectionModeHeader}
                 shouldDisplayHelpButton
                 title={selectionModeHeader ? translate('common.selectMultiple') : translate('expenseRulesPage.title')}
-            >
-                {!shouldDisplayButtonsInSeparateLine && hasRules && headerButton}
-            </HeaderWithBackButton>
-            {shouldDisplayButtonsInSeparateLine && hasRules && <View style={[styles.pl5, styles.pr5]}>{headerButton}</View>}
+                shouldDisplayResponsiveChildrenInSeparateLine={shouldDisplayButtonsInSeparateLine}
+                responsiveChildren={hasRules && headerButton}
+            />
 
             <View style={[styles.ph5, styles.pb5, styles.pt3, shouldUseNarrowLayout && styles.workspaceSectionMobile]}>
                 <Text style={[styles.textNormal, styles.colorMuted]}>{translate('expenseRulesPage.subtitle')}</Text>

src/pages/workspace/WorkspaceMembersPage.tsx

@@ -702,11 +702,10 @@ function WorkspaceMembersPage({personalDetails, route, policy}: WorkspaceMembers
 
     const shouldDisplayButtonsInSeparateLine = useShouldDisplayButtonsInSeparateLine();
 
-    const getHeaderButtons = () => {
-        if (!canWriteMembers) {
-            return null;
-        }
-        return (shouldUseNarrowLayout ? canSelectMultiple : selectedEmployees.length > 0) ? (
+    const shouldShowBulkActions = shouldUseNarrowLayout ? canSelectMultiple : selectedEmployees.length > 0;
+    let headerButtons = null;
+    if (canWriteMembers) {
+        headerButtons = shouldShowBulkActions ? (
             <ButtonWithDropdownMenu<WorkspaceMemberBulkActionType>
                 variant={CONST.BUTTON_VARIANT.SUCCESS}
                 shouldAlwaysShowDropdownMenu
@@ -742,7 +741,7 @@ function WorkspaceMembersPage({personalDetails, route, policy}: WorkspaceMembers
                 />
             </View>
         );
-    };
+    }
 
     const selectionModeHeader = isMobileSelectionModeEnabled && shouldUseNarrowLayout;
 
@@ -751,7 +750,8 @@ function WorkspaceMembersPage({personalDetails, route, policy}: WorkspaceMembers
             headerText={selectionModeHeader ? translate('common.selectMultiple') : translate('workspace.common.members')}
             route={route}
             icon={!selectionModeHeader ? illustrations.ReceiptWrangler : undefined}
-            headerContent={!shouldDisplayButtonsInSeparateLine && getHeaderButtons()}
+            headerContent={headerButtons}
+            shouldDisplayResponsiveChildrenInSeparateLine={shouldDisplayButtonsInSeparateLine}
             testID="WorkspaceMembersPage"
             shouldShowLoading={false}
             shouldUseHeadlineHeader={!selectionModeHeader}
@@ -769,7 +769,6 @@ function WorkspaceMembersPage({personalDetails, route, policy}: WorkspaceMembers
         >
             {() => (
                 <>
-                    {shouldDisplayButtonsInSeparateLine && <View style={[styles.pl5, styles.pr5]}>{getHeaderButtons()}</View>}
                     <DecisionModal
                         title={translate('common.downloadFailedTitle')}
                         prompt={translate('common.downloadFailedDescription')}

src/pages/workspace/WorkspaceOverviewPage.tsx

@@ -509,11 +509,11 @@ function WorkspaceOverviewPage({policyDraft, policy: policyProp, route}: Workspa
             shouldShowNotFoundPage={policy === undefined}
             onBackButtonPress={handleBackButtonPress}
             addBottomSafeAreaPadding
-            headerContent={!shouldDisplayButtonsInSeparateLine && headerButtons}
+            headerContent={headerButtons}
+            shouldDisplayResponsiveChildrenInSeparateLine={shouldDisplayButtonsInSeparateLine}
             modals={modals}
         >
             <View style={[styles.flex1, styles.mt3, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>
-                {shouldDisplayButtonsInSeparateLine && <View style={[styles.pl5, styles.pr5, styles.pb5]}>{headerButtons}</View>}
                 <Section
                     isCentralPane
                     title=""

src/pages/workspace/WorkspacePageWithSections.tsx

@@ -40,7 +40,16 @@ import type {WithPolicyAndFullscreenLoadingProps} from './withPolicyAndFullscree
 import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading';
 
 type WorkspacePageWithSectionsProps = WithPolicyAndFullscreenLoadingProps &
-    Pick<HeaderWithBackButtonProps, 'shouldShowThreeDotsButton' | 'threeDotsMenuItems' | 'shouldShowBackButton' | 'onBackButtonPress'> & {
+    Pick<
+        HeaderWithBackButtonProps,
+        | 'shouldShowThreeDotsButton'
+        | 'threeDotsMenuItems'
+        | 'shouldShowBackButton'
+        | 'onBackButtonPress'
+        | 'shouldDisplayResponsiveChildrenInSeparateLine'
+        | 'responsiveChildrenContainerStyle'
+        | 'bottomContent'
+    > & {
         shouldSkipVBBACall?: boolean;
 
         /** The text to display in the header */
@@ -146,6 +155,9 @@ function WorkspacePageWithSections({
     shouldUseHeadlineHeader = true,
     addBottomSafeAreaPadding = false,
     modals,
+    shouldDisplayResponsiveChildrenInSeparateLine = false,
+    responsiveChildrenContainerStyle,
+    bottomContent,
 }: WorkspacePageWithSectionsProps) {
     const styles = useThemeStyles();
     const policyID = route.params?.policyID;
@@ -246,9 +258,11 @@ function WorkspacePageWithSections({
                     threeDotsMenuItems={threeDotsMenuItems}
                     shouldUseHeadlineHeader={shouldUseHeadlineHeader}
                     shouldDisplayHelpButton
-                >
-                    {headerContent}
-                </HeaderWithBackButton>
+                    shouldDisplayResponsiveChildrenInSeparateLine={shouldDisplayResponsiveChildrenInSeparateLine}
+                    responsiveChildrenContainerStyle={responsiveChildrenContainerStyle}
+                    responsiveChildren={headerContent}
+                    bottomContent={bottomContent}
+                />
                 {!isOffline && (isLoading || shouldShowInitialLoading) && shouldShowLoading && isFocused ? (
                     <View style={[styles.flex1, styles.fullScreenLoading]}>
                         <ActivityIndicator

src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

@@ -660,6 +660,7 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) {
                     icon={!selectionModeHeader ? illustrations.FolderOpen : undefined}
                     shouldUseHeadlineHeader={!selectionModeHeader}
                     shouldDisplayHelpButton
+                    shouldDisplayResponsiveChildrenInSeparateLine={shouldDisplayButtonsInSeparateLine}
                     onBackButtonPress={() => {
                         if (isMobileSelectionModeEnabled) {
                             clearTableSelection();
@@ -674,10 +675,8 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) {
 
                         Navigation.goBack();
                     }}
-                >
-                    {!shouldDisplayButtonsInSeparateLine && getHeaderButtons()}
-                </HeaderWithBackButton>
-                {shouldDisplayButtonsInSeparateLine && !!getHeaderButtons() && <View style={[styles.pl5, styles.pr5]}>{getHeaderButtons()}</View>}
+                    responsiveChildren={getHeaderButtons()}
+                />
 
                 {(!hasVisibleCategories || isLoading) && headerContent}
 

src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx

@@ -470,10 +470,9 @@ function PolicyDistanceRatesPage({
                         }
                         Navigation.goBack();
                     }}
-                >
-                    {!shouldDisplayButtonsInSeparateLine && headerButtons}
-                </HeaderWithBackButton>
-                {shouldDisplayButtonsInSeparateLine && !!headerButtons && <View style={[styles.ph5]}>{headerButtons}</View>}
+                    shouldDisplayResponsiveChildrenInSeparateLine={shouldDisplayButtonsInSeparateLine}
+                    responsiveChildren={headerButtons}
+                />
                 {isLoading && (
                     <ActivityIndicator
                         size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}

src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx

@@ -305,10 +305,9 @@ function WorkspaceExpensifyCardListPage({route, cardsList, fundID}: WorkspaceExp
                 shouldShowBackButton={shouldUseNarrowLayout}
                 shouldDisplayHelpButton
                 onBackButtonPress={handleBackButtonPress}
-            >
-                {!shouldShowSelector && !shouldDisplayButtonsInSeparateLine && isBankAccountVerified && shouldShowHeaderButtons && getHeaderButtons()}
-            </HeaderWithBackButton>
-            {!shouldShowSelector && shouldDisplayButtonsInSeparateLine && isBankAccountVerified && shouldShowHeaderButtons && <View style={styles.ph5}>{getHeaderButtons()}</View>}
+                shouldDisplayResponsiveChildrenInSeparateLine={shouldDisplayButtonsInSeparateLine}
+                responsiveChildren={!shouldShowSelector && isBankAccountVerified && shouldShowHeaderButtons && getHeaderButtons()}
+            />
             {shouldShowSelector && (
                 <View style={[styles.w100, styles.ph5, styles.pb3, (!shouldChangeLayout || isInLandscapeMode) && [styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]]}>
                     <FeedSelector