[Due for payment 2026-09-09] [$250] [] Migrate HRSyncResultsModal to @react-navigation modal screen

[mountiny]

Context

This is a sub-issue of #53493 (Replace modal screens with modals from @react-navigation).

For full background and migration approach, see the triage analysis comment, the sub-issue breakdown comment, and the updated status comment.

Problem

HRSyncResultsModal uses react-native-modal internally (via @components/Modal) with RIGHT_DOCKED animation. It is shown imperatively via useModal().showModal() when an HR sync completes, which causes animation inconsistencies compared to standard @react-navigation screens on native.

Migration approach (Group 1/2 — Navigate instead of imperative modal)

• File: src/components/HRSyncResultsModal.tsx
• Hook: src/hooks/useHRSyncResultsModal.ts
• Used by: WorkspaceHRPage.tsx, WorkspaceMembersPage.tsx
• Current behavior: Imperative useModal().showModal() when HR sync transitions to JOB_DONE with a result payload; defers via TransitionTracker.runAfterTransitions and waits if another modal is active
• Modal type: RIGHT_DOCKED
• Data source: PolicyConnectionSyncProgress.result is already on Onyx — route params only need policyID + connectionName. Do not pass HrSyncResult through route params.

Steps

1. Add route/screen (e.g. WORKSPACE_HR_SYNC_RESULTS) under the workspace HR navigator.
2. Page receives policyID + connectionName via route params; reads connectionSyncProgress.result and provider display name from Onyx.
3. Replace modal.showModal({ component: HRSyncResultsModal }) with Navigation.navigate(...).
4. Preserve existing deferral logic (TransitionTracker, isAnyModalActive guard, pendingSyncResultRef).
5. Delete HRSyncResultsModal.tsx and remove ModalContext dependency from the hook.
6. QA: trigger HR sync completion on both Workspace HR and Members pages; verify no double-open, correct counts/skipped employees, and back navigation.

Reference

• Reference PR for direct-navigation pattern: Migrate ExpenseLimitTypeSelectorModal to nav RHP #88915
• Parent tracking issue: Replace modal screens with modals from @react-navigation #53493

Issue Owner

Current Issue Owner: @mallenexpensify

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022079944223494515476
• Upwork Job ID: 2079944223494515476
• Last Price Increase: 2026-07-22

[melvin-bot]

Current assignee @parasharrajat is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022079944223494515476

[dilshodmackbook-sketch]

🚨 Edited by proposal-police: This proposal was edited at 2026-07-22 15:03:15 UTC.

Proposal

What is the root cause of that problem?

This is a migration task from #53493, not a regression. HRSyncResultsModal renders its whole surface through @components/Modal (react-native-modal) with the RIGHT_DOCKED type:

App/src/components/HRSyncResultsModal.tsx

Lines 61 to 68 in 3bcf18d

	<Modal
	type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
	isVisible={isVisible}
	onClose={hideModal}
	onModalHide={closeModal}
	shouldHandleNavigationBack
	enableEdgeToEdgeBottomSafeAreaPadding
	>

and it is opened imperatively from the hook via the modal context rather than by navigating:

App/src/hooks/useHRSyncResultsModal.ts

Lines 34 to 38 in 3bcf18d

	modal.showModal({
	component: HRSyncResultsModal,
	props: {result: syncResult, policyID},
	id: `${syncConnectionName}-sync-results-${policyID}`,
	});

Because it's a react-native-modal layered over the current screen rather than a @react-navigation RHP screen, its presentation/animation and back handling don't match the rest of the RHP surfaces on native — the inconsistency the parent issue is eliminating. It also forces the component to own its own visibility (isVisible/hideModal) and to be coordinated manually against other modals and navigation transitions.

Nothing about the data forces this design: the payload already lives on Onyx as PolicyConnectionSyncProgress.result under the POLICY_CONNECTION_SYNC_PROGRESS key, so a screen can read everything from policyID + connectionName alone.

What changes do you think we should make in order to solve the problem?

Migrate it to a navigation-driven RHP screen, following the Group 1/2 direct-navigation pattern (reference PR #88915) and mirroring the wiring the sibling HR screens already use (e.g. WORKSPACE_HR_MERGE_GROUPS):

1. Wire a new route/screen. Add WORKSPACE_HR_SYNC_RESULTS (workspaces/:policyID/hr/sync-results) to src/ROUTES.ts with getRoute(policyID, connectionName), a SCREENS.WORKSPACE.HR_SYNC_RESULTS constant, a SettingsNavigatorParamList entry typed as {policyID: string; connectionName: string}, the linking-config entry, and a registration in the settings modal stack navigator — the same five spots the existing HR screens touch:

   App/src/ROUTES.ts

   Lines 2717 to 2720 in 3bcf18d

   	},
   	WORKSPACE_HR_ZENEFITS_APPROVAL_MODE: {
   	route: 'workspaces/:policyID/hr/zenefits/approval-mode',
   	getRoute: (policyID: string | undefined) => {

   App/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx

   Line 1012 in 3bcf18d

   [SCREENS.SETTINGS.LOCK.UNLOCK_ACCOUNT]: () => require<ReactComponentModule>('../../../../pages/settings/Security/LockAccount/UnlockAccountPage').default,

2. Turn the modal into a page. Move the content into src/pages/workspace/hr/WorkspaceHRSyncResultsPage.tsx: drop the <Modal> wrapper, the isVisible/hideModal/closeModal state and the ModalProps type, and render the existing body (HeaderWithBackButton, the ScrollView, the added/removed summaries, the expandable skipped-employees section and the FixedFooter button) inside a ScreenWrapper wrapped in AccessOrNotFoundWrapper. Back and the footer button call Navigation.goBack().

3. Read the result from Onyx, not route params. The page takes only policyID + connectionName and selects the payload itself, so no HrSyncResult is serialized through the URL:

   const [syncResult] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${policyID}`, {selector: (progress) => progress?.result});
   const [providerDisplayName = ''] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {selector: (policy) => getConnectedHRProvider(policy)?.displayName ?? ''});

   Render NotFoundPage when syncResult is empty.

4. Swap the imperative open for navigation, keeping the hook's deferral semantics intact:

   Navigation.navigate(ROUTES.WORKSPACE_HR_SYNC_RESULTS.getRoute(policyID, syncConnectionName));

   The pendingSyncResultRef, the isAnyModalActive guard, and the TransitionTracker.runAfterTransitions({waitForUpcomingTransition: true}) wrapper all stay as-is — they're what prevent a double-open and a mid-transition push, and they're equally necessary for a navigation push. The useModal/ModalContext import is removed. The hook stays the single convergence point, so both call sites are fixed at once:

   App/src/pages/workspace/hr/WorkspaceHRPage.tsx

   Line 71 in 3bcf18d

   useHRSyncResultsModal(policyID, connectionSyncProgress, isFocused);

   App/src/pages/workspace/WorkspaceMembersPage.tsx

   Line 439 in 3bcf18d

   useHRSyncResultsModal(policyID, connectionSyncProgress, isFocused);

5. Cleanup. Delete src/components/HRSyncResultsModal.tsx.

What alternative solutions did you explore? (Optional)

Using a dynamic route (DYNAMIC_ROUTES, as in the referenced PR #88915). That pattern fits selectors pushed from an existing RHP form, but here the screen is opened programmatically from the split-navigator pages and benefits from a stable, deep-linkable URL, so a regular static RHP route under the existing hr/ paths is simpler and consistent with the sibling HR screens. I also considered keeping the imperative trigger but rendering through the navigation stack (a hybrid) — rejected because it leaves the surface outside navigation state, so the back-handling and animation mismatch remain.

[samranahm]

Proposal

What is the root cause of that problem?

This is a migration task from #53493, not a regression. The HR sync results surface is a react-native-modal layered over the current screen instead of a @react-navigation RHP screen.

HRSyncResultsModal owns its own visibility state (isVisible/hideModal) and renders inside @components/Modal with RIGHT_DOCKED, receiving the result payload through props:

App/src/components/HRSyncResultsModal.tsx

Lines 35 to 114 in 3bcf18d

	function HRSyncResultsModal({result, policyID, closeModal}: HRSyncResultsModalProps) {
	const {translate} = useLocalize();
	const theme = useTheme();
	const styles = useThemeStyles();
	const icons = useMemoizedLazyExpensifyIcons(['DownArrow']);
	const illustrations = useMemoizedLazyIllustrations(['SyncUsers']);
	const [isSkippedSectionExpanded, setIsSkippedSectionExpanded] = useState(false);
	const [isVisible, setIsVisible] = useState(true);
	const [providerDisplayName = ''] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {
	selector: (policy) => getConnectedHRProvider(policy)?.displayName ?? '',
	});
	const addedCount = result.addedEmployeesCount ?? 0;
	const removedCount = result.removedEmployeesCount ?? 0;
	const skippedCount = result.skippedEmployees?.length ?? 0;
	const hideModal = () => setIsVisible(false);
	const renderResultSummary = (label: string, count: number) => (
	<View style={[styles.mb6]}>
	<Text style={[styles.textSupporting, styles.mb1]}>{label}</Text>
	<Text style={[styles.textNormalThemeText, styles.textStrong]}>{translate('workspace.hr.syncResults.employeeCount', {count})}</Text>
	</View>
	);
	return (
	<Modal
	type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
	isVisible={isVisible}
	onClose={hideModal}
	onModalHide={closeModal}
	shouldHandleNavigationBack
	enableEdgeToEdgeBottomSafeAreaPadding
	>
	<View
	testID="HRSyncResultsModal"
	style={[styles.flex1, styles.appBG]}
	>
	<HeaderWithBackButton
	title={translate('workspace.hr.syncResults.title', providerDisplayName)}
	onBackButtonPress={hideModal}
	/>
	<ScrollView
	contentContainerStyle={[styles.flexGrow1, styles.ph5, styles.pb8]}
	showsVerticalScrollIndicator={false}
	>
	<View style={[styles.alignItemsCenter, styles.mt4, styles.mb4, styles.pRelative]}>
	<Icon
	src={illustrations.SyncUsers}
	width={68}
	height={68}
	/>
	</View>
	<Text style={[styles.textHeadlineH1, styles.mb8]}>{translate('workspace.hr.syncResults.successTitle', providerDisplayName)}</Text>
	{renderResultSummary(translate('workspace.hr.syncResults.added'), addedCount)}
	{renderResultSummary(translate('workspace.hr.syncResults.removed'), removedCount)}
	<PressableWithoutFeedback
	accessibilityLabel={translate('workspace.hr.syncResults.skipped')}
	sentryLabel="HRSyncResultsModal-SkippedEmployees"
	role={CONST.ROLE.BUTTON}
	onPress={() => setIsSkippedSectionExpanded((isExpanded) => !isExpanded)}
	style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}
	>
	<View>
	<Text style={[styles.textSupporting, styles.mb1]}>{translate('workspace.hr.syncResults.skipped')}</Text>
	<Text style={[styles.textNormalThemeText, styles.textStrong]}>{translate('workspace.hr.syncResults.employeeCount', {count: skippedCount})}</Text>
	</View>
	<Icon
	src={icons.DownArrow}
	fill={theme.icon}
	additionalStyles={isSkippedSectionExpanded ? {transform: [{rotate: '180deg'}]} : undefined}
	/>
	</PressableWithoutFeedback>
	{isSkippedSectionExpanded &&
	result.skippedEmployees?.map((employee) => (
	<View
	key={employee.id}
	style={[styles.mt4]}
	>
	<Text style={[styles.textNormalThemeText, styles.textStrong]}>{employee.name}</Text>

It is opened imperatively from useHRSyncResultsModal through the modal context once a sync transitions to JOB_DONE with a result:

App/src/hooks/useHRSyncResultsModal.ts

Lines 22 to 75 in 3bcf18d

	function useHRSyncResultsModal(policyID: string, connectionSyncProgress: OnyxEntry<PolicyConnectionSyncProgress>, isFocused: boolean) {
	const modal = useModal();
	const previousSyncProgress = usePrevious(connectionSyncProgress);
	const pendingSyncResultRef = useRef<Pick<PolicyConnectionSyncProgress, 'connectionName' | 'result'> | null>(null);
	const [isAnyModalActive] = useOnyx(ONYXKEYS.MODAL, {selector: isModalActiveSelector});
	const connectionName = connectionSyncProgress?.connectionName;
	const showSyncResultsModal = useEffectEvent((syncResult: PolicyConnectionSyncProgress['result'], syncConnectionName: PolicyConnectionSyncProgress['connectionName']) => {
	if (!syncResult || !syncConnectionName) {
	return;
	}
	modal.showModal({
	component: HRSyncResultsModal,
	props: {result: syncResult, policyID},
	id: `${syncConnectionName}-sync-results-${policyID}`,
	});
	});
	useEffect(() => {
	const syncResult = connectionSyncProgress?.result;
	const isHRConnectionName = CONST.POLICY.CONNECTIONS.HR_CONNECTION_NAMES.some((hrConnectionName) => hrConnectionName === connectionName);
	const isHRSyncDoneWithResult = isHRConnectionName && connectionSyncProgress?.stageInProgress === CONST.POLICY.CONNECTIONS.SYNC_STAGE_NAME.JOB_DONE && !!syncResult;
	const didTransitionToJobDone = previousSyncProgress?.connectionName === connectionName && previousSyncProgress?.stageInProgress !== CONST.POLICY.CONNECTIONS.SYNC_STAGE_NAME.JOB_DONE;
	const didHRSyncComplete = isFocused && isHRSyncDoneWithResult && didTransitionToJobDone;
	if (didHRSyncComplete && syncResult && connectionName) {
	pendingSyncResultRef.current = {connectionName, result: syncResult};
	}
	const pendingSyncResult = pendingSyncResultRef.current;
	if (!pendingSyncResult || isAnyModalActive) {
	return;
	}
	const handle = TransitionTracker.runAfterTransitions({
	callback: () => {
	showSyncResultsModal(pendingSyncResult.result, pendingSyncResult.connectionName);
	pendingSyncResultRef.current = null;
	},
	waitForUpcomingTransition: true,
	});
	return () => handle.cancel();
	}, [
	connectionName,
	connectionSyncProgress?.result,
	connectionSyncProgress?.stageInProgress,
	connectionSyncProgress?.timestamp,
	isAnyModalActive,
	isFocused,
	previousSyncProgress?.connectionName,
	previousSyncProgress?.stageInProgress,
	]);
	}

Because this surface is a RIGHT_DOCKED react-native-modal (animated via getWebModalAnimation and the iOS timing in Modal/index.ios.tsx) rather than a navigation screen, its open/close animation and back handling do not match the RHP screens the parent issue standardizes on. The hook is the single convergence point mounted by both WorkspaceHRPage and WorkspaceMembersPage:

App/src/pages/workspace/hr/WorkspaceHRPage.tsx

Lines 46 to 125 in 3bcf18d

	function WorkspaceHRPage({
	route: {
	params: {policyID},
	},
	}: WorkspaceHRPageProps) {
	const {translate, getLocalDateFromDatetime, localeCompare} = useLocalize();
	const isFocused = useIsFocused();
	const styles = useThemeStyles();
	const StyleUtils = useStyleUtils();
	const {shouldUseNarrowLayout} = useResponsiveLayout();
	const policy = usePolicy(policyID);
	const [connectionSyncProgress] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${policyID}`);
	const icons = useMemoizedLazyExpensifyIcons(['GustoSquare', 'TriNetSquare']);
	const illustrations = useMemoizedLazyIllustrations(['NewUser']);
	const [activeHRFlow, setActiveHRFlow] = useState<{setupLink: string; key: number} | undefined>();
	const {showConfirmModal} = useConfirmModal();
	useWorkspaceDocumentTitle(undefined, 'workspace.common.hr');
	useNetwork({onReconnect: () => openPolicyHRPage(policyID)});
	useEffect(() => {
	openPolicyHRPage(policyID);
	}, [policyID]);
	useHRSyncResultsModal(policyID, connectionSyncProgress, isFocused);
	useMergeHRInitialSyncingModal(policyID, isFocused);
	const cards = getHRCards({
	policy,
	connectionSyncProgress,
	getLocalDateFromDatetime,
	translate,
	policyID,
	gustoIcon: icons.GustoSquare,
	trinetIcon: icons.TriNetSquare,
	});
	const connectedCards: HRCardDescriptor[] = [];
	const disconnectedCards: HRCardDescriptor[] = [];
	for (const card of cards) {
	(card.isConnected ? connectedCards : disconnectedCards).push(card);
	}
	const byName = (a: HRCardDescriptor, b: HRCardDescriptor) => localeCompare(a.displayName, b.displayName);
	connectedCards.sort(byName);
	disconnectedCards.sort(byName);
	const {canWrite: canWriteMoreFeatures, showReadOnlyModal} = usePolicyFeatureWriteAccess(policy, CONST.POLICY.POLICY_FEATURE.MORE_FEATURES);
	const handleConnect = (card: HRCardDescriptor) => {
	if (!card.setupLink) {
	return;
	}
	if (!canWriteMoreFeatures) {
	showReadOnlyModal();
	return;
	}
	if (!card.isConnected && connectedCards.length > 0) {
	showConfirmModal({
	title: translate('workspace.hr.alreadyConnectedTitle'),
	prompt: translate('workspace.hr.alreadyConnectedPrompt'),
	confirmText: translate('common.buttonConfirm'),
	shouldShowCancelButton: false,
	innerContainerStyle: shouldUseNarrowLayout ? undefined : StyleUtils.getWidthStyle(variables.wideConfirmModalWidth),
	});
	return;
	}
	// eslint-disable-next-line react-hooks/purity -- random key forces remount on every press, even for the same provider
	setActiveHRFlow({setupLink: card.setupLink, key: Math.random()});
	};
	return (
	<AccessOrNotFoundWrapper
	accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.CONTROL]}
	policyID={policyID}
	featureName={CONST.POLICY.MORE_FEATURES.IS_HR_ENABLED}
	policyFeature={CONST.POLICY.POLICY_FEATURE.MORE_FEATURES}

Nothing forces the imperative design: the payload already lives on Onyx (connectionSyncProgress.result), so a screen only needs policyID + connectionName.

What changes do you think we should make in order to solve the problem?

1. Register a static RHP route. Add WORKSPACE_HR_SYNC_RESULTS (workspaces/:policyID/hr/sync-results/:connectionName) with getRoute(policyID, connectionName) to ROUTES.ts, a SCREENS.WORKSPACE.HR_SYNC_RESULTS constant, a SettingsNavigatorParamList entry carrying only policyID + connectionName, a linking-config entry, and a screen registration in the Settings modal stack, mirroring the sibling HR screens.

2. Create WorkspaceHRSyncResultsPage.tsx reusing the existing body from HRSyncResultsModal.tsx (summary rows, expandable skipped-employees section, footer button) inside ScreenWrapper + HeaderWithBackButton, reading the payload from Onyx instead of props so no HrSyncResult goes through the URL:

App/src/components/HRSyncResultsModal.tsx

Lines 35 to 114 in 3bcf18d

	function HRSyncResultsModal({result, policyID, closeModal}: HRSyncResultsModalProps) {
	const {translate} = useLocalize();
	const theme = useTheme();
	const styles = useThemeStyles();
	const icons = useMemoizedLazyExpensifyIcons(['DownArrow']);
	const illustrations = useMemoizedLazyIllustrations(['SyncUsers']);
	const [isSkippedSectionExpanded, setIsSkippedSectionExpanded] = useState(false);
	const [isVisible, setIsVisible] = useState(true);
	const [providerDisplayName = ''] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {
	selector: (policy) => getConnectedHRProvider(policy)?.displayName ?? '',
	});
	const addedCount = result.addedEmployeesCount ?? 0;
	const removedCount = result.removedEmployeesCount ?? 0;
	const skippedCount = result.skippedEmployees?.length ?? 0;
	const hideModal = () => setIsVisible(false);
	const renderResultSummary = (label: string, count: number) => (
	<View style={[styles.mb6]}>
	<Text style={[styles.textSupporting, styles.mb1]}>{label}</Text>
	<Text style={[styles.textNormalThemeText, styles.textStrong]}>{translate('workspace.hr.syncResults.employeeCount', {count})}</Text>
	</View>
	);
	return (
	<Modal
	type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
	isVisible={isVisible}
	onClose={hideModal}
	onModalHide={closeModal}
	shouldHandleNavigationBack
	enableEdgeToEdgeBottomSafeAreaPadding
	>
	<View
	testID="HRSyncResultsModal"
	style={[styles.flex1, styles.appBG]}
	>
	<HeaderWithBackButton
	title={translate('workspace.hr.syncResults.title', providerDisplayName)}
	onBackButtonPress={hideModal}
	/>
	<ScrollView
	contentContainerStyle={[styles.flexGrow1, styles.ph5, styles.pb8]}
	showsVerticalScrollIndicator={false}
	>
	<View style={[styles.alignItemsCenter, styles.mt4, styles.mb4, styles.pRelative]}>
	<Icon
	src={illustrations.SyncUsers}
	width={68}
	height={68}
	/>
	</View>
	<Text style={[styles.textHeadlineH1, styles.mb8]}>{translate('workspace.hr.syncResults.successTitle', providerDisplayName)}</Text>
	{renderResultSummary(translate('workspace.hr.syncResults.added'), addedCount)}
	{renderResultSummary(translate('workspace.hr.syncResults.removed'), removedCount)}
	<PressableWithoutFeedback
	accessibilityLabel={translate('workspace.hr.syncResults.skipped')}
	sentryLabel="HRSyncResultsModal-SkippedEmployees"
	role={CONST.ROLE.BUTTON}
	onPress={() => setIsSkippedSectionExpanded((isExpanded) => !isExpanded)}
	style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}
	>
	<View>
	<Text style={[styles.textSupporting, styles.mb1]}>{translate('workspace.hr.syncResults.skipped')}</Text>
	<Text style={[styles.textNormalThemeText, styles.textStrong]}>{translate('workspace.hr.syncResults.employeeCount', {count: skippedCount})}</Text>
	</View>
	<Icon
	src={icons.DownArrow}
	fill={theme.icon}
	additionalStyles={isSkippedSectionExpanded ? {transform: [{rotate: '180deg'}]} : undefined}
	/>
	</PressableWithoutFeedback>
	{isSkippedSectionExpanded &&
	result.skippedEmployees?.map((employee) => (
	<View
	key={employee.id}
	style={[styles.mt4]}
	>
	<Text style={[styles.textNormalThemeText, styles.textStrong]}>{employee.name}</Text>

const [syncResult] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${policyID}`, {selector: (progress) => progress?.result});
const [providerDisplayName = ''] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {selector: (policy) => getConnectedHRProvider(policy)?.displayName ?? ''});

Render NotFoundPage when syncResult is absent, and route back button/footer to Navigation.goBack().

3. In useHRSyncResultsModal, swap the imperative showModal for navigation while keeping the deferral logic intact:

App/src/hooks/useHRSyncResultsModal.ts

Lines 22 to 75 in 3bcf18d

	function useHRSyncResultsModal(policyID: string, connectionSyncProgress: OnyxEntry<PolicyConnectionSyncProgress>, isFocused: boolean) {
	const modal = useModal();
	const previousSyncProgress = usePrevious(connectionSyncProgress);
	const pendingSyncResultRef = useRef<Pick<PolicyConnectionSyncProgress, 'connectionName' | 'result'> | null>(null);
	const [isAnyModalActive] = useOnyx(ONYXKEYS.MODAL, {selector: isModalActiveSelector});
	const connectionName = connectionSyncProgress?.connectionName;
	const showSyncResultsModal = useEffectEvent((syncResult: PolicyConnectionSyncProgress['result'], syncConnectionName: PolicyConnectionSyncProgress['connectionName']) => {
	if (!syncResult || !syncConnectionName) {
	return;
	}
	modal.showModal({
	component: HRSyncResultsModal,
	props: {result: syncResult, policyID},
	id: `${syncConnectionName}-sync-results-${policyID}`,
	});
	});
	useEffect(() => {
	const syncResult = connectionSyncProgress?.result;
	const isHRConnectionName = CONST.POLICY.CONNECTIONS.HR_CONNECTION_NAMES.some((hrConnectionName) => hrConnectionName === connectionName);
	const isHRSyncDoneWithResult = isHRConnectionName && connectionSyncProgress?.stageInProgress === CONST.POLICY.CONNECTIONS.SYNC_STAGE_NAME.JOB_DONE && !!syncResult;
	const didTransitionToJobDone = previousSyncProgress?.connectionName === connectionName && previousSyncProgress?.stageInProgress !== CONST.POLICY.CONNECTIONS.SYNC_STAGE_NAME.JOB_DONE;
	const didHRSyncComplete = isFocused && isHRSyncDoneWithResult && didTransitionToJobDone;
	if (didHRSyncComplete && syncResult && connectionName) {
	pendingSyncResultRef.current = {connectionName, result: syncResult};
	}
	const pendingSyncResult = pendingSyncResultRef.current;
	if (!pendingSyncResult || isAnyModalActive) {
	return;
	}
	const handle = TransitionTracker.runAfterTransitions({
	callback: () => {
	showSyncResultsModal(pendingSyncResult.result, pendingSyncResult.connectionName);
	pendingSyncResultRef.current = null;
	},
	waitForUpcomingTransition: true,
	});
	return () => handle.cancel();
	}, [
	connectionName,
	connectionSyncProgress?.result,
	connectionSyncProgress?.stageInProgress,
	connectionSyncProgress?.timestamp,
	isAnyModalActive,
	isFocused,
	previousSyncProgress?.connectionName,
	previousSyncProgress?.stageInProgress,
	]);
	}

const showSyncResultsModal = useEffectEvent((syncResult, syncConnectionName) => {
    if (!syncResult || !syncConnectionName) {
        return;
    }
    Navigation.navigate(ROUTES.WORKSPACE_HR_SYNC_RESULTS.getRoute(policyID, syncConnectionName));
});

The pendingSyncResultRef, isAnyModalActive guard, and TransitionTracker.runAfterTransitions({waitForUpcomingTransition: true}) all stay, and the useModal/ModalContext import is dropped. This keeps double-open and mid-transition protection.

4. Note the guard still holds after migration: an RHP screen registers on ONYXKEYS.MODAL as RIGHT_DOCKED per isRHPVisibleSelector, so the existing isAnyModalActive check naturally prevents a second navigation while the results screen is open:

App/src/selectors/Modal.ts

Lines 6 to 10 in 3bcf18d

	const willAlertModalBecomeVisibleSelector = (modal: OnyxEntry<Modal>) => modal?.willAlertModalBecomeVisible;
	const isRHPVisibleSelector = (modal: OnyxEntry<Modal>) => modal?.type === CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED;
	const isModalCoveringSelector = (modal: OnyxEntry<Modal>) => !!modal?.willAlertModalBecomeVisible && !modal?.isPopover;

5. Delete HRSyncResultsModal.tsx.

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[wildan-m]

Proposal

Please re-state the problem that we are trying to solve in this issue.

HRSyncResultsModal is rendered as a react-native-modal-based RIGHT_DOCKED modal that is shown imperatively through useModal().showModal() when an HR sync reaches JOB_DONE. Because it is not a @react-navigation screen, its open/close animation is inconsistent with every other RHP surface on native, and it sits outside the navigation stack (no URL, no real back-stack entry). It should be migrated to a @react-navigation modal screen under the workspace HR navigator, per the parent migration in #53493.

What is the root cause of that problem?

The results view is built as an imperatively-mounted component rather than a routed screen. Two things cause that:

1. The component owns its own Modal with local visibility state instead of being a page rendered by the navigator:

App/src/components/HRSyncResultsModal.tsx

Lines 61 to 68 in f6ebd68

	<Modal
	type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
	isVisible={isVisible}
	onClose={hideModal}
	onModalHide={closeModal}
	shouldHandleNavigationBack
	enableEdgeToEdgeBottomSafeAreaPadding
	>

2. The hook mounts it through the global ModalContext instead of navigating, and passes the result payload as a prop:

App/src/hooks/useHRSyncResultsModal.ts

Lines 34 to 39 in f6ebd68

	modal.showModal({
	component: HRSyncResultsModal,
	props: {result: syncResult, policyID},
	id: `${syncConnectionName}-sync-results-${policyID}`,
	});
	});

Since ModalContext mounts the component outside the navigator, its presentation is driven by react-native-modal rather than the navigator's screen transition, which is exactly the animation inconsistency described. It also means the surface has no route, so it cannot be deep-linked and back navigation is handled by the modal's own shouldHandleNavigationBack rather than by the stack.

What changes do you think we should make in order to solve the problem?

Convert the modal into a normal RHP screen and replace the imperative show with a navigate, keeping the existing deferral logic intact.

1. Add a new route WORKSPACE_HR_SYNC_RESULTS in ROUTES.ts with path workspaces/:policyID/hr/:connectionName/sync-results and a getRoute(policyID, connectionName), following the shape of the sibling HR routes:

App/src/ROUTES.ts

Lines 2744 to 2747 in f6ebd68

	WORKSPACE_HR_MERGE_GROUPS: {
	route: 'workspaces/:policyID/hr/merge/groups',
	getRoute: (policyID: string) => `workspaces/${policyID}/hr/merge/groups` as const,
	},

2. Add a matching SCREENS.WORKSPACE.HR_SYNC_RESULTS entry next to the existing HR screens:

App/src/SCREENS.ts

Lines 692 to 699 in f6ebd68

	HR: 'Workspace_HR',
	HR_GUSTO_APPROVAL_MODE: 'Workspace_HR_Gusto_Approval_Mode',
	HR_GUSTO_FINAL_APPROVER: 'Workspace_HR_Gusto_Final_Approver',
	HR_ZENEFITS_APPROVAL_MODE: 'Workspace_HR_Zenefits_Approval_Mode',
	HR_ZENEFITS_FINAL_APPROVER: 'Workspace_HR_Zenefits_Final_Approver',
	HR_MERGE_APPROVAL_MODE: 'Workspace_HR_Merge_Approval_Mode',
	HR_MERGE_FINAL_APPROVER: 'Workspace_HR_Merge_Final_Approver',
	HR_MERGE_GROUPS: 'Workspace_HR_Merge_Groups',

3. Wire the screen through the same four places the sibling HR screens are registered — the param list in Navigation/types.ts (typing policyID and connectionName), linkingConfig/config.ts, the WORKSPACE_TO_RHP relation list, and the settings modal stack navigator:

App/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx

Line 1020 in f6ebd68

[SCREENS.WORKSPACE.HR_MERGE_GROUPS]: () => require<ReactComponentModule>('../../../../pages/workspace/hr/merge/MergeHRGroupsPage').default,

4. Move the component to a page, e.g. src/pages/workspace/hr/WorkspaceHRSyncResultsPage.tsx. It reads policyID and connectionName from route params, pulls the result from Onyx via the existing policyConnectionSyncProgress collection key rather than from props, and keeps the provider display name lookup it already does through getConnectedHRProvider. The Modal wrapper, the local isVisible state and the closeModal prop all go away — the page renders AccessOrNotFoundWrapper + ScreenWrapper + HeaderWithBackButton like the other HR pages, and the header's back button plus the confirm button both call Navigation.goBack(). The skipped-employees expand/collapse state and the rest of the layout are carried over as-is, apart from the confirm button moving to the composed Button that new files are required to use.

5. In useHRSyncResultsModal, replace the modal.showModal({component: HRSyncResultsModal, ...}) call with Navigation.navigate(ROUTES.WORKSPACE_HR_SYNC_RESULTS.getRoute(policyID, syncConnectionName)) and drop the useModal import. Everything else in the hook stays as-is: the JOB_DONE transition detection, pendingSyncResultRef, the isAnyModalActive guard and the TransitionTracker.runAfterTransitions({waitForUpcomingTransition: true}) deferral are all still needed so the navigate does not fire mid-transition or on top of another modal.

6. Delete src/components/HRSyncResultsModal.tsx. Both call sites (WorkspaceHRPage and WorkspaceMembersPage) keep calling the hook unchanged, since the hook's signature does not change.

Because the result already lives on Onyx under the connection sync progress, nothing about the payload needs to travel through route params — only policyID and connectionName, which keeps the URL clean and makes the screen safe to deep-link and to restore after a refresh.

Compare branch: https://github.com/Expensify/App/compare/main...wildan-m:App:wildan/96755-hr-sync-results-navigation-screen?expand=1

What alternative solutions did you explore? (Optional)

Keeping the component mounted through ModalContext but swapping its inner Modal for a navigation-driven presentation. This would remove the react-native-modal animation but leave the surface outside the navigator, so it would still have no route, no back-stack entry and no deep link — it treats the symptom rather than the structure the parent issue is migrating toward.

[github-actions]

⚠️ @wildan-m Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.