Upgrade react-navigation to latest by WojtekBoman · Pull Request #85743 · Expensify/App

WojtekBoman · 2026-03-19T08:21:54Z

Explanation of Change

This PR upgrades the react-navigation packages to the latest versions, which were previously reverted from staging (#78443) due to several deploy blockers caused by focus and navigation regressions. Those regressions have now been identified and fixed, allowing the upgrade to land cleanly.
Package version changes:

Package	Old	New
`@react-navigation/core`	(not pinned)	`7.16.1`
`@react-navigation/native`	`7.1.10`	`7.1.33`
`@react-navigation/native-stack`	`7.3.14`	`7.14.5`
`@react-navigation/stack`	`7.3.3`	`7.8.5`
`@react-navigation/material-top-tabs`	`7.2.13`	`7.4.19`
`@react-navigation/devtools`	`^6.0.10`	`7.0.52`

Why `useNavigationState` was replaced with `useRootNavigationState` in 2 files

In newer versions of react-navigation, useNavigationState reads the state from the nearest navigator in the component tree rather than the root navigator. Both SearchContextProvider (in SearchContext.tsx) and RequireTwoFactorAuthenticationOverlay are rendered outside of any navigator, which means useNavigationState no longer has access to a navigation context and throws an error or returns stale/incorrect state.
useRootNavigationState is a custom hook that subscribes directly to navigationRef (the root navigator ref), bypassing the context hierarchy entirely. This makes it safe to call from any component regardless of where it sits in the tree, and ensures both hooks always receive the full, up-to-date root navigation state.

Fixed Issues

$ #75700
PROPOSAL:

Tests

Verify that no errors appear in the JS console

Test steps

Login auto-focus (#78435) – Sign out from new.expensify.com. Verify the email field is auto-focused and no validation error appears underneath it on the sign-in page.
RHP backdrop click after creating expense (#78440) – Create a new expense in a workspace chat (+ → Create expense → Manual → enter amount → Next → Create expense). Immediately click outside the RHP. Verify the app does not navigate back to workspace settings or any other previous page.
RHP flash when editing split expense amount (#78444) – Create an expense, split it, open the detail page of one of the split expenses, tap the amount to edit. Verify the background does not briefly flash the detail page behind the new RHP.
Chat composer focus (#78449) – Open any chat, focus the composer, then navigate to Reports and back to Inbox. Verify the composer is focused. Then switch between two different chats and verify the composer is focused in the destination chat.

Offline tests

QA Steps

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

Screen.Recording.2026-03-19.at.15.04.50.mov

github-actions · 2026-03-19T08:22:02Z

⚠️ This PR is possibly changing native code and/or updating libraries, it may cause problems with HybridApp. Please check if any patch updates are required in the HybridApp repo and run an AdHoc build to verify that HybridApp will not break. Ask Contributor Plus for help if you are not sure how to handle this. ⚠️

adamgrzybowski · 2026-03-20T11:34:23Z

src/components/Search/SearchContext.tsx


 function SearchContextProvider({children}: SearchContextProps) {
-    const focusedScreen = useNavigationState((state) => getDeepestFocusedScreen(state));
+    const focusedScreen = useRootNavigationState((state) => getDeepestFocusedScreen(state));


Isn't this going to trigger rerender every focused screen change?

We may want to use much stronger selector for this one e.g. return undefined for screens other thant search root. You have something like that in the code below

adamgrzybowski · 2026-03-20T11:39:51Z

src/pages/RequireTwoFactorAuthenticationOverlay.tsx

 function RequireTwoFactorAuthenticationOverlay() {
    const shouldShowRequire2FAPage = useShouldShowRequire2FAPage();
-    const isIn2FASetupFlow = useNavigationState((state) => {
+    const isIn2FASetupFlow = useRootNavigationState((state) => {


This one looks safe 👍

melvin-bot · 2026-03-20T14:05:45Z

@aimane-chnaif Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

codecov · 2026-03-20T14:10:06Z

Codecov Report

❌ Looks like you've decreased code coverage for some files. Please write tests to increase, or at least maintain, the existing level of code coverage. See our documentation here for how to interpret this table.

Files with missing lines	Coverage Δ
src/components/Search/SearchContext.tsx	`42.85% <ø> (+0.82%)`	⬆️
...rc/pages/RequireTwoFactorAuthenticationOverlay.tsx	`37.03% <ø> (ø)`
...on/AppNavigator/Navigators/RightModalNavigator.tsx	`5.43% <0.00%> (-0.06%)`	⬇️
... and 488 files with indirect coverage changes

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: a3c9875f82

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

chatgpt-codex-connector · 2026-03-20T14:16:31Z

src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx

        isExecutingRef.current = true;
-        navigation.goBack();
-        setTimeout(() => {
-            isExecutingRef.current = false;
-        }, CONST.ANIMATED_TRANSITION);
+        const currentState = navigationRef.getRootState();
+
+        // There is a brief moment when the RHP is not in the state anymore but the overlay is still visible (closing RHP animation)
+        // We need to block overlay press function in such case because it would go back from the currently active  full screen.
+        if (currentState.routes.at(-1)?.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR) {


Reset overlay debounce flag when no back navigation occurs

handleOverlayPress now sets isExecutingRef.current = true before checking whether the root route is RIGHT_MODAL_NAVIGATOR, but the flag is only cleared inside that if block. In flows where the overlay press happens while another root route is on top (the exact race this change is guarding against), the function exits with the flag still true, so subsequent backdrop presses in the same mounted RHP instance are ignored and the overlay can appear unresponsive. Please clear the flag in the non-matching branch as well (or use a finally-style reset path).

Useful? React with 👍 / 👎.

github-actions · 2026-03-20T18:21:27Z

🚧 @mountiny has triggered a test Expensify/App build. You can view the workflow run here.

github-actions · 2026-03-20T18:32:20Z

🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
Built from App PR #85743.

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-android-Adhoc-a3c9875-9be7b50-aa48244787d8863913559889813414fafa8ea867/index.html	https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-ios-device-AdHoc-a3c9875-9be7b50-c2e4e52dd4c3b18d9aa456573fc568050ff894b6/index.html

Web 🕸️
https://85743.pr-testing.expensify.com

👀 View the workflow run that generated this build 👀

aimane-chnaif · 2026-03-23T12:53:17Z

Regression tests:

Login - Email field does not auto focus after sign out, error shows up #78435
Expense - Clicking outside RHP after creating expense navigates to previous page #78440
RHP - Background page show detail page when opening amount after splitting the expense #78444
Chat - Composer is not focused after returning from Reports to Inbox or switching between chat #78449
Share code page opens instead of Subscription settings on tapping back button in #admins room #78456

MelvinBot · 2026-03-23T13:01:59Z

🔍 PR Review

Summary: Upgrades @react-navigation packages to latest versions (previously reverted from staging due to regressions). The regressions have been identified and addressed in this PR.

CI Status

All checks pass (ESLint, typecheck, all 8 test shards, perf-tests, validate-patches, etc.).

Source Code Changes

SearchContext.tsx — Replaces useNavigationState with useRootNavigationState. The refactored code is cleaner: instead of extracting focusedScreenName / focusedScreenParams separately and combining in a useMemo, it derives the search params directly inside the selector. The hook stores the selector in a ref to avoid unnecessary re-subscriptions, so this is safe.

RequireTwoFactorAuthenticationOverlay.tsx — Same useNavigationState → useRootNavigationState swap. Both these components render outside any navigator, so useNavigationState (which reads from the nearest navigator context) breaks in the newer react-navigation versions. useRootNavigationState subscribes directly to navigationRef, which works from anywhere.

RightModalNavigator.tsx — Adds a guard in the overlay press handler: checks if RIGHT_MODAL_NAVIGATOR is still the top route before calling goBack(). This prevents a race condition during the closing animation where the overlay is still visible but the RHP has already been removed from the state — without this check, goBack() would navigate away from whatever screen is now active.

Patches

All existing patches properly re-targeted to new versions. The dontDetachScreen patch accounts for upstream structural changes (class → function component refactor in Card, isScreenActive → activityState rename, CardContainer → CardA11yWrapper). validate-patches check passes, confirming they apply cleanly.

Tests

Test mocks updated to match the new useRootNavigationState API (selector-based). Two additional test files (MoneyRequestReportActionsListRejectModalTest, TransactionGroupListItemTest) add missing mocks for useRootNavigationState and getDeepestFocusedScreen.

Verdict

The code changes look correct and well-motivated. The useRootNavigationState pattern is the right approach for components outside the navigator tree, the RHP race condition fix is sound, and the patches are properly maintained. No concerns from my review.

aimane-chnaif · 2026-03-23T13:13:45Z

Bug: After following steps in #78456, it lands on Search page. Tested in android adhoc build.
On production, it lands on Subscription settings page.

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: a3c9875f82

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

chatgpt-codex-connector · 2026-03-23T13:19:03Z

src/components/Search/SearchContext.tsx

+    const params = useRootNavigationState((state) => {
+        const focusedScreen = getDeepestFocusedScreen(state);
+        if (focusedScreen?.name !== SCREENS.SEARCH.ROOT) {
            return undefined;
        }


Read the initial search route before defaulting to empty query

useRootNavigationState initializes with selector(undefined) and only updates on later root state events, so on a cold load or deep link directly into Search the first value here is undefined and there is no initial ready-state update to correct it. That makes definedQueryParam fall back to buildSearchQueryString(), and useSearchPageSetup() then fires search() for the default hash instead of the requested q/rawQuery. In practice, refreshing or opening a saved-search URL will show the wrong search until some later navigation change happens.

Useful? React with 👍 / 👎.

chatgpt-codex-connector · 2026-03-23T13:19:03Z

src/pages/RequireTwoFactorAuthenticationOverlay.tsx

+    const isIn2FASetupFlow = useRootNavigationState((state) => {
        const focusedScreen = getDeepestFocusedScreen(state);
        return isTwoFactorSetupScreen(focusedScreen?.name);


Read the initial 2FA route before showing the blocking overlay

This has the same initial-state problem: when the app restores directly into a 2FA setup screen, useRootNavigationState returns undefined until some later navigation event, so isIn2FASetupFlow stays false on the initial load. Because useShouldShowRequire2FAPage() is still true during setup, the RequireTwoFactorAuthenticationOverlay renders on top of SETTINGS_2FA_ROOT/SETTINGS_2FA_VERIFY_ACCOUNT and can block the setup flow until the user triggers another navigation change.

Useful? React with 👍 / 👎.

…tors

…ted navigation changes

WojtekBoman · 2026-03-25T11:52:14Z

Bug: After following steps in #78456, it lands on Search page. Tested in android adhoc build. On production, it lands on Subscription settings page.

I've investigated it and I know what's causing this issue, now I want to check if this issue occurs on main as well. If so, I'll raise a separate PR to fix it!

…y when root state is undefined

melvin-bot bot assigned WojtekBoman Mar 19, 2026

WojtekBoman force-pushed the react-navi-packages-bump branch 3 times, most recently from e8614ab to 093c38c Compare March 19, 2026 11:02

WojtekBoman changed the title ~~React navi packages bump~~ Upgrade react-navigation to latest Mar 19, 2026

adamgrzybowski reviewed Mar 20, 2026

View reviewed changes

WojtekBoman force-pushed the react-navi-packages-bump branch from 2c50533 to a3c9875 Compare March 20, 2026 13:56

WojtekBoman mentioned this pull request Mar 20, 2026

[$250] Upgrade react-navigation to latest #75700

Open

WojtekBoman marked this pull request as ready for review March 20, 2026 14:05

WojtekBoman requested review from a team as code owners March 20, 2026 14:05

melvin-bot bot requested review from aimane-chnaif and trjExpensify and removed request for a team and trjExpensify March 20, 2026 14:05

chatgpt-codex-connector bot reviewed Mar 20, 2026

View reviewed changes

chatgpt-codex-connector bot reviewed Mar 23, 2026

View reviewed changes

aimane-chnaif mentioned this pull request Mar 24, 2026

[$250] Gesture - Safari on iPhone flickers previous screen on swipe-back gesture #75905

Open

16 tasks

WojtekBoman added 2 commits March 25, 2026 07:57

Bump react-navigation packages

c5abc5b

Replace useNavigationState with useRootNavigationState outside naviga…

4bc7d3a

…tors

WojtekBoman added 5 commits March 25, 2026 07:57

mock useRootNavigationState in tests using SearchContextProvider

536cbc4

Restore comment in edge-drag-gesture patch

083d9e3

prevent RHP overlay press from navigating back during closing animation

092cda8

tighten useRootNavigationState selector to avoid re-renders on unrela…

e46bcd8

…ted navigation changes

Fix updating isExecutingRef value

0236ffe

WojtekBoman force-pushed the react-navi-packages-bump branch from a3c9875 to 0236ffe Compare March 25, 2026 08:56

use navigation hook state as fallback in SearchContext and 2FA overla…

cf26342

…y when root state is undefined

WojtekBoman force-pushed the react-navi-packages-bump branch from 7ddfa70 to cf26342 Compare March 25, 2026 11:54

Conversation

WojtekBoman commented Mar 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Why useNavigationState was replaced with useRootNavigationState in 2 files

Fixed Issues

Tests

Test steps

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

github-actions bot commented Mar 19, 2026

Uh oh!

adamgrzybowski Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

adamgrzybowski Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

adamgrzybowski Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

melvin-bot bot commented Mar 20, 2026

Uh oh!

codecov bot commented Mar 20, 2026 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector bot Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Mar 20, 2026

Uh oh!

github-actions bot commented Mar 20, 2026

Uh oh!

aimane-chnaif commented Mar 23, 2026

Uh oh!

MelvinBot commented Mar 23, 2026

🔍 PR Review

CI Status

Source Code Changes

Patches

Tests

Verdict

Uh oh!

aimane-chnaif commented Mar 23, 2026

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector bot Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

chatgpt-codex-connector bot Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

WojtekBoman commented Mar 25, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

WojtekBoman commented Mar 19, 2026 •

edited

Loading

Why `useNavigationState` was replaced with `useRootNavigationState` in 2 files

codecov bot commented Mar 20, 2026 •

edited by github-actions bot

Loading