Migrate YearPickerModal to a @react-navigation modal screen by trasnake87 · Pull Request #91106 · Expensify/App

trasnake87 · 2026-05-19T17:39:58Z

Explanation of Change

YearPickerModal was a react-native-modal (RIGHT_DOCKED) rendered inside CalendarPicker, driven by local isYearPickerVisible/currentDateView state. Because react-native-modal mounts and animates independently of the native stack, it animated inconsistently with the surrounding @react-navigation screens (the problem described in the parent migration #53493).

This migrates the year picker to a dynamic @react-navigation modal route, following the pattern established by PR #88915 (DynamicExpenseLimitTypeSelectorPage):

Adds DYNAMIC_ROUTES.YEAR_SELECTOR and a standalone DynamicYearSelectorPage screen (the year list + search input, built from route query params), wired through ROUTES, SCREENS, ModalStackNavigators, linkingConfig, and navigation types.
Lifts the picker result out of CalendarPicker's local state into a transient Onyx key (CALENDAR_PICKER_SELECTED_YEAR), tagged with a per-instance contextID. CalendarPicker is rendered in multiple places, and RangeDatePicker mounts two instances simultaneously, so the result is matched back to the instance that opened the picker via contextID and cleared once consumed.
CalendarPicker now navigates to the year route (via createDynamicRoute) and applies the returned year to the displayed date. Hosts that render CalendarPicker inside a popover (DatePickerModal, the Search date dropdown) pass onBeforeOpenYearPicker so the popover is dismissed before the year screen is shown, instead of stacking a screen behind a react-native-modal.
Removes YearPickerModal and the now-unused year-list state in CalendarPicker.

Fixed Issues

$ #90469
PROPOSAL: #90469 (comment)

Tests

Open Settings → Profile → Date of birth (or any date field, e.g. an expense's date).
Tap the date field to open the calendar.
Tap the year in the calendar header.
Verify the year selector opens as a screen that slides in like other native screens (not a modal that animates independently), with a working search box.
Select a year and verify you return to the date flow and the calendar is showing the year you picked.
Repeat for a Search date filter (Advanced filters → a date filter → switch to a single date / range) and for Schedule a call, and verify the year selector works in each and updates the correct calendar (for a range, the calendar you opened it from).
Verify the month picker still opens and works as before.

Verify that no errors appear in the JS console

Offline tests

The year selector is client-side navigation and writes only to a transient local Onyx value; behavior is identical offline.

Verify that no errors appear in the JS console

QA Steps

Same as tests.

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

and_91106_trim.mp4

Android: mWeb Chrome

web_91106_mweb_20260521_040950.mp4

iOS: Native

ios_91106.mp4

iOS: mWeb Safari

MacOS: Chrome / Safari

web_91106_20260519_202020.mp4

melvin-bot · 2026-05-19T17:40:04Z

Hey! I see that you made changes to our Form component. Make sure to update the docs in FORMS.md accordingly. Cheers!

melvin-bot · 2026-05-19T17:40:06Z

@parasharrajat 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]

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 9781e56e2a

ℹ️ 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-05-19T17:44:56Z

+        entryScreens: [
+            SCREENS.SETTINGS.PROFILE.DATE_OF_BIRTH,
+            SCREENS.SETTINGS.PROFILE.STATUS_CLEAR_AFTER_DATE,
+            SCREENS.MONEY_REQUEST.STEP_DATE,
+            SCREENS.MONEY_REQUEST.STEP_TIME,
+            SCREENS.MONEY_REQUEST.STEP_TIME_EDIT,
+            SCREENS.MONEY_REQUEST.SPLIT_EXPENSE_CREATE_DATE_RANGE,
+            SCREENS.SEARCH.ROOT,
+            SCREENS.SEARCH.ADVANCED_FILTERS_DATE_RHP,
+            SCREENS.SEARCH.EDIT_MULTIPLE_DATE_RHP,
+            SCREENS.CHRONOS_SCHEDULE_OOO_ROOT,
+            SCREENS.SCHEDULE_CALL,
+        ],


Add missing YEAR_SELECTOR entry screens for DatePicker flows

CalendarPicker now always opens the year chooser through a dynamic route, and getStateFromPath() only authorizes that route when the current screen is in DYNAMIC_ROUTES.YEAR_SELECTOR.entryScreens; otherwise it falls back as an unauthorized dynamic route. The new allowlist here omits several screens that still render DatePicker (SCREENS.SETTINGS.WALLET.PERSONAL_CARD_EDIT_TRANSACTION_START_DATE, SCREENS.WORKSPACE.COMPANY_CARDS_ASSIGN_CARD_TRANSACTION_START_DATE, SCREENS.WORKSPACE.COMPANY_CARD_EDIT_TRANSACTION_START_DATE, and SCREENS.DEBUG.DYNAMIC_DETAILS_DATE_TIME_PICKER_PAGE), so tapping the calendar year on those pages will not navigate to the new year selector.

Useful? React with 👍 / 👎.

trasnake87 · 2026-05-19T19:09:27Z

Good catch on the entry screens. Rather than extend the allowlist, I switched YEAR_SELECTOR to entryScreens: ['*'].

Reasoning: CalendarPicker is a generic component reachable from a lot of screens — direct date input fields plus DateSelectPopup, RangeDatePicker, DatePresetFilterBase, ScheduleCallPage, the company/personal card transaction start date pages, the debug datetime picker, and so on. The previous in-place YearPickerModal had no screen restriction, so an explicit allowlist is both a behavior change and inherently fragile — it would silently break the year picker again whenever a new date-input screen is added. The '*' wildcard keeps it reachable from every host and matches the existing generic flows (KEYBOARD_SHORTCUTS, EXIT_SURVEY_*).

Added a regression test in CalendarPickerTest.tsx asserting the route stays unrestricted so this can't quietly regress to a partial allowlist. jest and eslint are green (83b38b6).

Replace the react-native-modal based YearPickerModal, rendered inside CalendarPicker, with a dynamic @react-navigation route so it animates consistently with the surrounding native stack. - Add the DYNAMIC_YEAR_SELECTOR dynamic route and the standalone DynamicYearSelectorPage screen (year list + search), built from route query params. - Lift the picker result out of CalendarPicker local state into a transient Onyx key, tagged with a per-instance contextID so the correct CalendarPicker consumes it (range pickers mount two). - CalendarPicker navigates to the year route and applies the returned year; hosts that render it inside a popover pass onBeforeOpenYearPicker to dismiss the popover before the year screen is shown. - Remove YearPickerModal and the now-unused year list state. - Update CalendarPicker tests for the navigation flow and add coverage for the year selection action.

CalendarPicker is a generic component reached from many screens (date input fields, DateSelectPopup, RangeDatePicker, DatePresetFilterBase, ScheduleCallPage, ...). The previous in-place YearPickerModal had no screen restriction, so a hand-maintained entryScreens allowlist silently broke the year picker on omitted screens (e.g. company/personal card transaction start date pages, debug datetime picker). Use the '*' wildcard so the year selector stays reachable from every CalendarPicker host and does not regress when new date-input screens are added. Added a regression test asserting the route remains unrestricted.

codecov · 2026-05-20T19:22:15Z

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/ONYXKEYS.ts	`100.00% <ø> (ø)`
src/ROUTES.ts	`19.09% <ø> (+1.46%)`	⬆️
src/SCREENS.ts	`100.00% <ø> (ø)`
...s/Search/FilterComponents/DatePresetFilterBase.tsx	`61.26% <100.00%> (+0.27%)`	⬆️
...s/Search/FilterDropdowns/DateSelectPopup/index.tsx	`0.00% <ø> (ø)`
src/libs/Navigation/linkingConfig/config.ts	`76.92% <ø> (ø)`
src/libs/actions/CalendarPicker.ts	`100.00% <100.00%> (ø)`
src/pages/ScheduleCall/ScheduleCallPage.tsx	`0.00% <ø> (ø)`
src/components/DatePicker/DatePickerModal.tsx	`8.33% <0.00%> (-0.37%)`	⬇️
...onents/Search/FilterComponents/RangeDatePicker.tsx	`0.00% <0.00%> (ø)`
... and 3 more
... and 351 files with indirect coverage changes

parasharrajat · 2026-05-21T10:32:07Z

Fix the checklist @trasnake87 and add vids for all platforms.

trasnake87 · 2026-05-21T13:08:01Z

Added the Android: mWeb Chrome video and ticked the offline-steps box (the section was already in the body, just hadn't been checked). iOS to follow.

parasharrajat · 2026-05-22T19:21:16Z

    const [currentDateView, setCurrentDateView] = useState(() => getInitialCurrentDateView(value, minDate, maxDate));
-    const [isYearPickerVisible, setIsYearPickerVisible] = useState(false);
    const [isMonthPickerVisible, setIsMonthPickerVisible] = useState(false);
+    const [fallbackContextID] = useState(() => `calendarPicker-${Math.random().toString(36).slice(2)}`);


Good call on the unused useState setter. I switched the fallback identifier to useId() rather than useRef: contextID is read during render, and the repo's React Compiler lint rules reject reading ref.current during render. useId() gives a stable per-instance id with no unused setter, so it's the cleaner fit here. (426a100)

parasharrajat · 2026-05-22T19:22:06Z

+        }
+        const {year} = selectedYearResult;
+        clearCalendarPickerSelectedYear();
+        requestAnimationFrame(() => setCurrentDateView((prev) => setYear(new Date(prev), year)));


why we need requestAnimationFrame here?

The effect reacts to the year that the year picker screen writes into Onyx. Calling setCurrentDateView synchronously in the effect body trips react-hooks/set-state-in-effect (the cascading-render rule), so it's deferred one frame. I added a comment in 426a100 making that explicit.

parasharrajat · 2026-05-22T19:24:26Z

                onSelected={handleSingleDateSelected}
                minDate={CONST.CALENDAR_PICKER.MIN_DATE}
                maxDate={CONST.CALENDAR_PICKER.MAX_DATE}
+                pickerContextID="searchSingleDate"


I think we can just leave these to CalendarPicker auto-calculated values. What is the benefit of passing static values?

fallbackContextID is regenerated each time a CalendarPicker mounts. This host's popover is dismissed when the year picker opens, so the CalendarPicker unmounts and remounts fresh when it's reopened — a regenerated fallback wouldn't match the contextID the year picker tagged its result with in Onyx, and the selection would be dropped. A stable static id keeps that round-trip intact (and the range picker needs two distinct ids so its calendars don't pick up each other's result).

Then we should remove the fallback ID as it is prone to this bug. we should make sure the contextID is provided from parent.

Done in cd94220 — pickerContextID is now required on CalendarPicker, the useId() fallback and the pickerContextID ?? fallbackContextID coalescence are gone, and useEffect / openYearPicker reference pickerContextID directly. All five product call sites (ScheduleCallPage, DatePresetFilterBase, RangeDatePicker × 2, DatePickerModal) were already passing stable ids, so this just tightens the contract. Added a small CalendarPickerForTest wrapper in tests/unit/CalendarPickerTest.tsx so existing tests that don't exercise the contextID still satisfy the required prop.

Done in cd94220 — pickerContextID is now a required prop on CalendarPicker (no internal useId fallback), so every host has to provide a stable ID explicitly. The DatePresetFilterBase call site still passes pickerContextID="searchSingleDate" since that is now the explicit parent-provided ID.

parasharrajat · 2026-05-22T19:27:26Z

    forceVerticalCalendars?: boolean;

+    /** Called right before navigating to the year picker screen (used by popover hosts to dismiss themselves) */
+    onBeforeOpenYearPicker?: () => void;


Maybe instead of this, you can call Modal.closeTop from modal action file.

Done in 426a100 — CalendarPicker now calls Modal.closeTop() directly instead of taking a close callback from each host. I gated it behind a boolean prop (shouldCloseModalOnYearPickerOpen): the wide-screen popover hosts set it, but the full-screen mobile DateSelectPopup overlay deliberately stays mounted while the year picker is open, so the dismissal needs to stay opt-in rather than fire unconditionally from CalendarPicker.

…xt id

trasnake87 · 2026-05-23T04:39:14Z

@parasharrajat I've added the iOS native recording to the Screenshots/Videos section. The flow shows opening Search → Date filter → Custom date and tapping the year label, which now navigates to the migrated @react-navigation Year screen (full-screen page with its own header + Back, replacing the old react-native-modal). Selecting 2024 returns to the calendar with the new year applied.

Web/Android boxes were already ticked with their respective recordings; iOS row is now ticked too.

parasharrajat · 2026-05-23T09:31:20Z

+        // previous in-place YearPickerModal had no screen restriction. Use '*' so the year selector
+        // remains reachable from every CalendarPicker host and doesn't silently break when new
+        // date-input screens are added (matches KEYBOARD_SHORTCUTS / EXIT_SURVEY_* generic flows).
+        entryScreens: ['*'],


Add a getRoute handler here to add queryParams.

Done in cd94220 — added a getRoute on YEAR_SELECTOR that takes {contextID, currentYear, minYear, maxYear} and goes through getUrlWithParams('year-selector', …) so encoding stays in one place and matches the declared queryParams.

Done in cd94220 — YEAR_SELECTOR now has a typed getRoute({contextID, currentYear, minYear, maxYear}) handler that builds the query params via getUrlWithParams.

parasharrajat · 2026-05-23T09:31:51Z

+            closeTop();
+        }
+        Navigation.navigate(
+            createDynamicRoute(`${DYNAMIC_ROUTES.YEAR_SELECTOR.path}?contextID=${encodeURIComponent(contextID)}&currentYear=${currentYearView}&minYear=${minYear}&maxYear=${maxYear}`),


Use the getRoute handler here to create the route path

Done in cd94220 — openYearPicker now calls DYNAMIC_ROUTES.YEAR_SELECTOR.getRoute({contextID: pickerContextID, currentYear: currentYearView, minYear, maxYear}) and passes that into createDynamicRoute. Existing CalendarPickerTest assertions (year-selector, contextID=…, currentYear=…) still pass.

Done in cd94220 — this site now uses DYNAMIC_ROUTES.YEAR_SELECTOR.getRoute({contextID: pickerContextID, currentYear: currentYearView, minYear, maxYear}) instead of the manual string concatenation.

Make pickerContextID required so every CalendarPicker host owns a stable id; remove the useId-based fallback that regenerated on mount and could mis-route the year picker's selection back to a remounted instance. Add a getRoute handler on the YEAR_SELECTOR dynamic route and use it from CalendarPicker.openYearPicker so the path/queryParams stay co-located with the route definition.

…ps-no-spreading

trasnake87 requested review from a team as code owners May 19, 2026 17:39

melvin-bot Bot assigned trasnake87 May 19, 2026

melvin-bot Bot requested review from flaviadefaria and parasharrajat and removed request for a team May 19, 2026 17:40

trasnake87 mentioned this pull request May 19, 2026

[$250] Migrate YearPickerModal to @react-navigation modal screen #90469

Open

chatgpt-codex-connector Bot reviewed May 19, 2026

View reviewed changes

trasnake87 force-pushed the yearpicker-rnav-90469 branch from 83b38b6 to 2a4c5ce Compare May 20, 2026 03:34

trasnake87 force-pushed the yearpicker-rnav-90469 branch from 2a4c5ce to 364652d Compare May 20, 2026 19:11

trasnake87 force-pushed the yearpicker-rnav-90469 branch from 364652d to 883930e Compare May 20, 2026 19:22

parasharrajat reviewed May 22, 2026

View reviewed changes

Use Modal.closeTop for popover hosts and useId for the fallback conte…

426a100

…xt id

parasharrajat reviewed May 23, 2026

View reviewed changes

trasnake87 added 2 commits May 23, 2026 07:33

Use createElement in CalendarPickerForTest wrapper to satisfy jsx-pro…

46ff704

…ps-no-spreading

Conversation

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

Uh oh!

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

melvin-bot Bot commented May 19, 2026

Uh oh!

melvin-bot Bot commented May 19, 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 May 19, 2026

Choose a reason for hiding this comment

Uh oh!

trasnake87 commented May 19, 2026

Uh oh!

codecov Bot commented May 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!

parasharrajat commented May 21, 2026

Uh oh!

trasnake87 commented May 21, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

trasnake87 commented May 23, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

trasnake87 commented May 19, 2026 •

edited

Loading

codecov Bot commented May 20, 2026 •

edited by github-actions Bot

Loading