[$250] Migrate YearPickerModal 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 and the sub-issue breakdown comment.

Problem

YearPickerModal animates in from right-to-left like a regular screen, but uses react-native-modal internally. This causes inconsistent animations compared to standard @react-navigation screens on native.

Migration approach (Group 2 — Lift local useState to Onyx)

• File: src/components/DatePicker/CalendarPicker/YearPickerModal.tsx
• Used by: Only CalendarPicker/index.tsx
• On select: onYearChange(option.value) → updates currentDateView state in CalendarPicker
• State to lift: The currentDateView year component from CalendarPicker → a shared Onyx key.
• Note: CalendarPicker is embedded in DatePickerModal and ScheduleCallPage and owns complex month/year/day state, making this the trickiest in Group 2.

Steps

1. Lift the selected year state from CalendarPicker to an Onyx key.
2. Create a new @react-navigation modal route for year selection.
3. Extract YearPickerModal content into a standalone screen component that writes the selected year to Onyx.
4. Update CalendarPicker to read from Onyx instead of local state for the year.
5. Test all flows that use DatePicker (date of birth, IOURequestStepDate, SetDatePage, etc.) on iOS, Android, and web.

Reference

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

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022054512616348356516
• Upwork Job ID: 2054512616348356516
• Last Price Increase: 2026-05-13

Issue Owner

Current Issue Owner: @trasnake87

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @parasharrajat (External)

[melvin-bot]

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

[nkdengineer]

@mountiny Is the open for contributor? I'd like to work on this if it opens.

[yusufdeveloper2903]

Proposal

What is the root cause of that problem?

YearPickerModal is a react-native-modal-based RHP that animates differently from real @react-navigation modal screens on native, so we want to convert it into a navigation screen and lift the selection state into Onyx per the Group 2 migration pattern.

The complication for this specific picker is that CalendarPicker is mounted in four host screens — DatePickerModal (popover used by every form DatePicker), RangeDatePicker, DatePresetFilterBase, and ScheduleCallPage — and each instance owns its own currentDateView useState, with the modal's onYearChange doing setYear(currentDateView, year) locally:

• YearPickerModal (modal wrapper to remove):

  App/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx

  Lines 61 to 98 in 1465400

  	return (
  	<Modal
  	type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
  	isVisible={isVisible}
  	onClose={() => onClose?.()}
  	onModalHide={onClose}
  	shouldHandleNavigationBack
  	shouldUseCustomBackdrop
  	onBackdropPress={onClose}
  	enableEdgeToEdgeBottomSafeAreaPadding
  	>
  	<ScreenWrapper
  	style={[styles.pb0]}
  	includePaddingTop={false}
  	enableEdgeToEdgeBottomSafeAreaPadding
  	testID="YearPickerModal"
  	>
  	<HeaderWithBackButton
  	title={translate('yearPickerPage.year')}
  	onBackButtonPress={onClose}
  	/>
  	<SelectionList
  	data={data}
  	ListItem={SingleSelectListItem}
  	onSelectRow={(option) => {
  	Keyboard.dismiss();
  	onYearChange?.(option.value);
  	}}
  	textInputOptions={textInputOptions}
  	initiallyFocusedItemKey={currentYear.toString()}
  	disableMaintainingScrollPosition
  	addBottomSafeAreaPadding
  	shouldStopPropagation
  	showScrollIndicator
  	/>
  	</ScreenWrapper>
  	</Modal>
  	);

• CalendarPicker year-related state + selection handler:

  App/src/components/DatePicker/CalendarPicker/index.tsx

  Lines 83 to 117 in 1465400

  	const [isYearPickerVisible, setIsYearPickerVisible] = useState(false);
  	const [isMonthPickerVisible, setIsMonthPickerVisible] = useState(false);
  	const isFirstRender = useRef(true);
  	const currentMonthView = currentDateView.getMonth();
  	const currentYearView = currentDateView.getFullYear();
  	const calendarDaysMatrix = generateMonthMatrix(currentYearView, currentMonthView);
  	const initialHeight = (calendarDaysMatrix?.length || CONST.MAX_CALENDAR_PICKER_ROWS) * CONST.CALENDAR_PICKER_DAY_HEIGHT;
  	const heightValue = useSharedValue(initialHeight);
  	const minYear = CONST.CALENDAR_PICKER.MIN_YEAR;
  	const maxYear = CONST.CALENDAR_PICKER.MAX_YEAR;
  	const [years, setYears] = useState<CalendarPickerListItem[]>(() =>
  	Array.from({length: maxYear - minYear + 1}, (v, i) => i + minYear).map((year) => ({
  	text: year.toString(),
  	value: year,
  	keyForList: year.toString(),
  	isSelected: year === currentDateView.getFullYear(),
  	})),
  	);
  	const onYearSelected = (year: number) => {
  	setCurrentDateView((prev) => {
  	const newCurrentDateView = setYear(new Date(prev), year);
  	setYears((prevYears) =>
  	prevYears.map((item) => ({
  	...item,
  	isSelected: item.value === newCurrentDateView.getFullYear(),
  	})),
  	);
  	return newCurrentDateView;
  	});
  	requestAnimationFrame(() => setIsYearPickerVisible(false));
  	};

• Imperative YearPickerModal render and isYearPickerVisible toggle in the header:

  App/src/components/DatePicker/CalendarPicker/index.tsx

  Lines 421 to 427 in 1465400

  	<YearPickerModal
  	isVisible={isYearPickerVisible}
  	years={years}
  	currentYear={currentYearView}
  	onYearChange={onYearSelected}
  	onClose={() => setIsYearPickerVisible(false)}
  	/>

Lifting the entire currentDateView to Onyx isn't viable here — CalendarPicker is a controlled component (it takes value from its parent and emits onSelected), and four different parents each pass their own initial value and own the resulting selected date. A global currentDateView key would let two mounted pickers (e.g. Search filter + RHP date input) stomp on each other.

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

I'd lift only the picker's "selected year" signal to a dedicated transient Onyx key (mirroring the reference PR #88915 Group 2 pattern, but using a plain Onyx key instead of a form draft because CalendarPicker isn't always inside a FormProvider). The new page writes the year and navigates back; CalendarPicker subscribes via useOnyx, applies setYear to its local currentDateView, then clears the key so it can't leak across mounts.

1. CalendarPicker/index.tsx — replace local modal toggle with a navigation push, and react to the Onyx-delivered year:

- const [isYearPickerVisible, setIsYearPickerVisible] = useState(false);
+ const [selectedYearFromPicker] = useOnyx(ONYXKEYS.CALENDAR_PICKER_SELECTED_YEAR, {canBeMissing: true});
+
+ useEffect(() => {
+     if (selectedYearFromPicker === undefined) {
+         return;
+     }
+     setCurrentDateView((prev) => setYear(new Date(prev), selectedYearFromPicker));
+     setYears((prevYears) => prevYears.map((item) => ({...item, isSelected: item.value === selectedYearFromPicker})));
+     Onyx.set(ONYXKEYS.CALENDAR_PICKER_SELECTED_YEAR, null);
+ }, [selectedYearFromPicker]);

- onPress={() => {
-     pressableRef?.current?.blur();
-     setIsYearPickerVisible(true);
- }}
+ onPress={() => {
+     pressableRef?.current?.blur();
+     Navigation.navigate(ROUTES.YEAR_PICKER.getRoute(currentYearView, minYear, maxYear, Navigation.getActiveRoute()));
+ }}

and delete the <YearPickerModal ... /> render at the bottom of the file.

2. New pages/YearPickerPage.tsx (extracted from YearPickerModal): same SelectionList UI, but reads the years list from route params (range only — minYear/maxYear/currentYear), writes the chosen year via Onyx.merge(ONYXKEYS.CALENDAR_PICKER_SELECTED_YEAR, value), then Navigation.goBack(backTo).

Supporting wiring (small, mechanical — same shape as #88915):

• Add ONYXKEYS.CALENDAR_PICKER_SELECTED_YEAR (with a Form-style KEY_TO_PRESERVE_ON_LOGOUT exclusion since it's transient UI state).
• Add SCREENS.YEAR_PICKER and a ROUTES.YEAR_PICKER builder with policyID-free params (currentYear, minYear, maxYear, backTo).
• Register the screen — because CalendarPicker is hosted from multiple stacks (Settings RHP, Search RHP, ScheduleCall RHP), I'd model this as a DYNAMIC_ROUTES.YEAR_PICKER entry (the same mechanism Migrate ExpenseLimitTypeSelectorModal to nav RHP #88915 introduced) so the picker is reachable from any host without enumerating every parent screen.
• Add to linkingConfig and types.ts per the reference PR.
• Delete YearPickerModal.tsx.

Test plan covers every CalendarPicker host: form DatePicker (e.g. DOB, IOURequestStepDate, SetDatePage), Search date filters (DatePresetFilterBase, RangeDatePicker), and ScheduleCallPage — on iOS, Android, and web, including back-gesture, hardware-back, and unmounting the host before the picker is closed (the transient Onyx key clear in the effect guards against stale values on the next mount).

What alternative solutions did you explore? (Optional)

• Lift the full currentDateView to Onyx. Rejected — CalendarPicker is a controlled component with four different parents passing their own value; a single global currentDateView would cross-contaminate concurrent mounts (e.g. Search filter + a DatePicker popover), and the parents would need to be rewritten to read from Onyx instead of owning the date themselves, which expands the blast radius well beyond Group 2.
• Pass the selected year back via a route param + a parent-supplied callback. Rejected — @react-navigation doesn't make callback-via-params clean (non-serializable), and the whole point of the migration is to remove the imperative modal coupling.
• Reuse a form draft like Migrate ExpenseLimitTypeSelectorModal to nav RHP #88915 did. Rejected — CalendarPicker isn't always inside a FormProvider (Search filters and ScheduleCallPage don't use one for this state), so a dedicated Onyx key is more honest than borrowing a form ID.

[trasnake87]

Proposal

YearPickerModal renders via react-native-modal (right-docked) and animates inconsistently with the surrounding @react-navigation native stack. Migrate it to a @react-navigation dynamic modal route and lift the picker result out of CalendarPicker's local useState into Onyx, following the pattern established in PR #88915.

Root cause

src/components/DatePicker/CalendarPicker/YearPickerModal.tsx:61-71 wraps the year selector in a react-native-modal of type RIGHT_DOCKED:

// src/components/DatePicker/CalendarPicker/YearPickerModal.tsx:61-71 (current)
<Modal
    type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
    isVisible={isVisible}
    onClose={() => onClose?.()}
    onModalHide={onClose}
    shouldHandleNavigationBack
    shouldUseCustomBackdrop
    onBackdropPress={onClose}
    enableEdgeToEdgeBottomSafeAreaPadding
>

Because react-native-modal mounts/animates independently of the native stack, on iOS it can animate at the same time as the parent screen, and on Android it gets cut off when the parent screen unmounts. Visibility and the selected year are both held in CalendarPicker's local state, which prevents an out-of-component navigation route from driving the picker:

// src/components/DatePicker/CalendarPicker/index.tsx:91-93
const [currentDateView, setCurrentDateView] = useState(() => getInitialCurrentDateView(value, minDate, maxDate));
const [isYearPickerVisible, setIsYearPickerVisible] = useState(false);
const [isMonthPickerVisible, setIsMonthPickerVisible] = useState(false);

// src/components/DatePicker/CalendarPicker/index.tsx:114-126
const onYearSelected = (year: number) => {
    setCurrentDateView((prev) => {
        const newCurrentDateView = setYear(new Date(prev), year);
        setYears((prevYears) =>
            prevYears.map((item) => ({
                ...item,
                isSelected: item.value === newCurrentDateView.getFullYear(),
            })),
        );
        return newCurrentDateView;
    });
    requestAnimationFrame(() => setIsYearPickerVisible(false));
};

A complicating wrinkle: CalendarPicker is rendered in DatePickerModal, ScheduleCallPage, DatePresetFilterBase, and RangeDatePicker, and RangeDatePicker mounts two CalendarPicker instances simultaneously (src/components/Search/FilterComponents/RangeDatePicker.tsx:51-71). Any lifted Onyx result must therefore disambiguate which instance triggered the picker — otherwise selecting a year on the "To" calendar would also reset the "From" calendar.

Proposed fix

Adopt the same dynamic-route + Onyx-write pattern PR #88915 used for DynamicExpenseLimitTypeSelectorPage (and which DynamicNetSuiteInvoiceItemPreferenceSelectPage.tsx:35-55 already uses in production). Because CalendarPicker is hosted by many entry screens, model the year picker as a DYNAMIC_ROUTES suffix appended to whichever screen is currently on top, and key the result on a per-instance id.

1 — Add the result Onyx key. In src/ONYXKEYS.ts add the key and its type:

// src/ONYXKEYS.ts (add to ONYXKEYS map and OnyxValues type)
CALENDAR_PICKER_SELECTED_YEAR: 'calendarPickerSelectedYear',
// ...
[ONYXKEYS.CALENDAR_PICKER_SELECTED_YEAR]: {instanceID: string; year: number};

2 — Register the new screen and dynamic route. In src/SCREENS.ts:

// src/SCREENS.ts
DYNAMIC_YEAR_SELECTOR: 'Dynamic_Year_Selector',

In src/ROUTES.ts:82-105:

// src/ROUTES.ts (inside DYNAMIC_ROUTES)
YEAR_SELECTOR: {
    path: 'year-selector',
    entryScreens: [
        SCREENS.SETTINGS.DATE_OF_BIRTH,
        SCREENS.MONEY_REQUEST.STEP_DATE,
        SCREENS.SEARCH.ADVANCED_FILTERS_DATE_RHP,
        SCREENS.SCHEDULE_CALL.BOOK,
        SCREENS.DEBUG.DETAILS,
        SCREENS.REPORT_FIELD.EDIT,
        // ...every screen that hosts CalendarPicker — enumerate from the grep
    ],
},

Wire it up in src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx, src/libs/Navigation/linkingConfig/config.ts, and src/libs/Navigation/types.ts exactly as PR #88915 did for DYNAMIC_EXPENSE_LIMIT_TYPE_SELECTOR:

// src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
[SCREENS.DYNAMIC_YEAR_SELECTOR]: () => require<ReactComponentModule>('../../../../components/DatePicker/CalendarPicker/DynamicYearSelectorPage').default,

3 — Create the standalone screen. Lift the existing modal body into a ScreenWrapper-only component (no <Modal>), reading the current year and bounds from route query params (passed via createDynamicRoute), writing the chosen year to Onyx, then navigating back:

// src/components/DatePicker/CalendarPicker/DynamicYearSelectorPage.tsx (new)
import React, {useMemo, useState} from 'react';
import {Keyboard} from 'react-native';
import Onyx from 'react-native-onyx';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import ScreenWrapper from '@components/ScreenWrapper';
import SelectionList from '@components/SelectionList';
import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
import useDynamicBackPath from '@hooks/useDynamicBackPath';
import useLocalize from '@hooks/useLocalize';
import useThemeStyles from '@hooks/useThemeStyles';
import Navigation from '@libs/Navigation/Navigation';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import {DYNAMIC_ROUTES} from '@src/ROUTES';

type Props = {route: {params: {instanceID: string; currentYear: string; minYear: string; maxYear: string}}};

function DynamicYearSelectorPage({route}: Props) {
    const styles = useThemeStyles();
    const {translate} = useLocalize();
    const backPath = useDynamicBackPath(DYNAMIC_ROUTES.YEAR_SELECTOR.path);
    const {instanceID} = route.params;
    const minY = Number(route.params.minYear);
    const maxY = Number(route.params.maxYear);
    const current = Number(route.params.currentYear);
    const [searchText, setSearchText] = useState('');

    const years = useMemo(
        () =>
            Array.from({length: maxY - minY + 1}, (_, i) => i + minY).map((year) => ({
                text: year.toString(),
                value: year,
                keyForList: year.toString(),
                isSelected: year === current,
            })),
        [minY, maxY, current],
    );

    const {data, headerMessage} = useMemo(() => {
        const list = searchText === '' ? years : years.filter((y) => y.text.includes(searchText));
        return {headerMessage: !list.length ? translate('common.noResultsFound') : '', data: list.sort((a, b) => b.value - a.value)};
    }, [years, searchText, translate]);

    return (
        <ScreenWrapper style={[styles.pb0]} includePaddingTop={false} enableEdgeToEdgeBottomSafeAreaPadding testID="DynamicYearSelectorPage">
            <HeaderWithBackButton title={translate('yearPickerPage.year')} onBackButtonPress={() => Navigation.goBack(backPath)} />
            <SelectionList
                data={data}
                ListItem={RadioListItem}
                onSelectRow={(option) => {
                    Keyboard.dismiss();
                    Onyx.set(ONYXKEYS.CALENDAR_PICKER_SELECTED_YEAR, {instanceID, year: option.value});
                    Navigation.goBack(backPath);
                }}
                textInputOptions={{
                    label: translate('yearPickerPage.selectYear'),
                    value: searchText,
                    onChangeText: (t) => setSearchText(t.replaceAll(CONST.REGEX.NON_NUMERIC, '').trim()),
                    headerMessage,
                    maxLength: 4,
                    inputMode: CONST.INPUT_MODE.NUMERIC,
                }}
                initiallyFocusedItemKey={current.toString()}
                disableMaintainingScrollPosition
                addBottomSafeAreaPadding
                shouldStopPropagation
                showScrollIndicator
            />
        </ScreenWrapper>
    );
}

export default DynamicYearSelectorPage;

4 — Update CalendarPicker/index.tsx. Remove isYearPickerVisible (src/components/DatePicker/CalendarPicker/index.tsx:92), the <YearPickerModal> render block (:425-431), and the import at :38. Replace the year-button onPress at :316-321 with a Navigation.navigate(createDynamicRoute(...)) call, and subscribe to the Onyx result with a stable per-instance id from useId():

// src/components/DatePicker/CalendarPicker/index.tsx (changes inside the CalendarPicker function)
import React, {useCallback, useEffect, useId, useRef, useState} from 'react';
import useOnyx from '@hooks/useOnyx';
import Navigation from '@libs/Navigation/Navigation';
import createDynamicRoute from '@libs/Navigation/helpers/dynamicRoutesUtils/createDynamicRoute';
import ONYXKEYS from '@src/ONYXKEYS';
import {DYNAMIC_ROUTES} from '@src/ROUTES';
import Onyx from 'react-native-onyx';
// remove: import YearPickerModal from './YearPickerModal';

const instanceID = useId();
const [selectedYearResult] = useOnyx(ONYXKEYS.CALENDAR_PICKER_SELECTED_YEAR);

useEffect(() => {
    if (!selectedYearResult || selectedYearResult.instanceID !== instanceID) {
        return;
    }
    setCurrentDateView((prev) => setYear(new Date(prev), selectedYearResult.year));
    setYears((prev) => prev.map((item) => ({...item, isSelected: item.value === selectedYearResult.year})));
    Onyx.set(ONYXKEYS.CALENDAR_PICKER_SELECTED_YEAR, null);
}, [selectedYearResult, instanceID]);

// Replace lines :316-321 (year PressableWithFeedback onPress):
onPress={() => {
    pressableRef?.current?.blur();
    Navigation.navigate(
        createDynamicRoute(
            `${DYNAMIC_ROUTES.YEAR_SELECTOR.path}?instanceID=${instanceID}&currentYear=${currentYearView}&minYear=${minYear}&maxYear=${maxYear}`,
        ),
    );
}}

Finally, delete src/components/DatePicker/CalendarPicker/YearPickerModal.tsx.

Why this approach

• The dynamic-route + useDynamicBackPath pattern is the exact precedent set by PR Migrate ExpenseLimitTypeSelectorModal to nav RHP #88915 (DynamicExpenseLimitTypeSelectorPage.tsx) and used in production at src/pages/workspace/accounting/netsuite/export/DynamicNetSuiteInvoiceItemPreferenceSelectPage.tsx:35-55. Reusing it gives native-stack animations on iOS/Android/web for free and matches the parent issue's stated migration target.
• The Onyx result key paired with a useId()-derived instanceID handles the multi-instance case (RangeDatePicker.tsx:51-71 mounts two CalendarPickers) without cross-talk between them. The Onyx key is cleared by the consumer after applying the change, so it never grows stale across navigations.
• An alternative — lifting the entire currentDateView to Onyx — was rejected because currentDateView is also mutated by moveToPrevMonth/moveToNextMonth/onDayPressed (src/components/DatePicker/CalendarPicker/index.tsx:137-202) and is intentionally per-instance, seeded from value/minDate/maxDate. Lifting only the picker result keeps the change surgical and avoids regressions in month/day navigation that the issue note flags as the trickiest part of Group 2.
• The same migration applies cleanly to MonthPickerModal (src/components/DatePicker/CalendarPicker/MonthPickerModal.tsx:69-80) in a follow-up since it has the identical RIGHT_DOCKED structure; scoping this PR to year first matches the bounded ask of the sub-issue.

[aswin-s]

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

Currently, YearPickerModal uses react-native-modal internally and animates in from right-to-left like a regular screen, causing inconsistent animations compared to standard @react-navigation screens on native platforms. Users expect a consistent native-style navigation transition when selecting a year in the date picker, matching the animation behavior of other RHP (Right-Hand Panel) modal screens in the app.

What is the current gap in the implementation?

YearPickerModal (src/components/DatePicker/CalendarPicker/YearPickerModal.tsx:30–99) is rendered inline inside CalendarPicker using react-native-modal with local component state (isYearPickerVisible, years, currentDateView). The feature is absent because year selection is not yet a proper @react-navigation modal screen with its own route, screen name, and navigation parameters. The insertion point is the CalendarPicker component (src/components/DatePicker/CalendarPicker/index.tsx:419–425), where YearPickerModal is currently rendered as an inline modal rather than as a navigated screen. The working analog is ExpenseLimitTypeSelectorModal (src/pages/workspace/categories/ExpenseLimitTypeSelector/ExpenseLimitTypeSelectorModal.tsx), which follows the Group 2 migration pattern by lifting selection state to a dedicated screen page and using navigation to display it.

App/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx

Lines 30 to 99 in af304c0

	function YearPickerModal({isVisible, years, currentYear = new Date().getFullYear(), onYearChange, onClose}: YearPickerModalProps) {
	const styles = useThemeStyles();
	const {translate} = useLocalize();
	const [searchText, setSearchText] = useState('');
	const {data, headerMessage} = useMemo(() => {
	const yearsList = searchText === '' ? years : years.filter((year) => year.text?.includes(searchText));
	return {
	headerMessage: !yearsList.length ? translate('common.noResultsFound') : '',
	data: yearsList.sort((a, b) => b.value - a.value),
	};
	}, [years, searchText, translate]);
	useEffect(() => {
	if (isVisible) {
	return;
	}
	setSearchText('');
	}, [isVisible]);
	const textInputOptions = useMemo(
	() => ({
	label: translate('yearPickerPage.selectYear'),
	value: searchText,
	onChangeText: (text: string) => setSearchText(text.replaceAll(CONST.REGEX.NON_NUMERIC, '').trim()),
	headerMessage,
	maxLength: 4,
	inputMode: CONST.INPUT_MODE.NUMERIC,
	}),
	[headerMessage, searchText, translate],
	);
	return (
	<Modal
	type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
	isVisible={isVisible}
	onClose={() => onClose?.()}
	onModalHide={onClose}
	shouldHandleNavigationBack
	shouldUseCustomBackdrop
	onBackdropPress={onClose}
	enableEdgeToEdgeBottomSafeAreaPadding
	>
	<ScreenWrapper
	style={[styles.pb0]}
	includePaddingTop={false}
	enableEdgeToEdgeBottomSafeAreaPadding
	testID="YearPickerModal"
	>
	<HeaderWithBackButton
	title={translate('yearPickerPage.year')}
	onBackButtonPress={onClose}
	/>
	<SelectionList
	data={data}
	ListItem={SingleSelectListItem}
	onSelectRow={(option) => {
	Keyboard.dismiss();
	onYearChange?.(option.value);
	}}
	textInputOptions={textInputOptions}
	initiallyFocusedItemKey={currentYear.toString()}
	disableMaintainingScrollPosition
	addBottomSafeAreaPadding
	shouldStopPropagation
	showScrollIndicator
	/>
	</ScreenWrapper>
	</Modal>
	);
	}

https://github.com/Expensify/App/blob/af304c0eef967c4e554ed314123cbf02bdccdab4/src/pages/workspace/categories/ExpenseLimitTypeSelector/ExpenseLimitTypeSelectorModal.tsx

What changes do you think we should make in order to implement this feature?

1. src/ROUTES.ts — Add SELECT_YEAR route with getRoute({minYear, maxYear, year, backTo}) parameter builder to define the year selection route with required navigation parameters.

2. src/SCREENS.ts — Add SCREENS.YEAR_SELECTION constant to register the new screen name in the navigation stack.

3. src/libs/Navigation/linkingConfig/config.ts — Add YEAR_SELECTION to the RightModalNavigator paths to enable deep-linking support for the year selection screen.

4. src/libs/Navigation/types.ts — Add YearSelectionNavigatorParamList interface and add entry to AuthScreensParamList with shape {minYear: number; maxYear: number; year: number; backTo: Route} to define TypeScript navigation parameters.

5. src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx — Register lazy loader for YearSelectionPage in the right modal stack navigator configuration.

6. src/pages/YearPickerPage.tsx (new file) — Create new screen component that reads route params {minYear, maxYear, year, backTo}, renders SelectionList of years with search input (mirroring the existing modal's filtering logic), and on year selection writes the year to ONYXKEYS.YEAR_PICKER_TEMPORARY_DATE and calls Navigation.goBack(backTo). The backTo param is typed as Route and Navigation.goBack accepts undefined; callers must pass a valid route string. To guard against edge cases where the active route is unavailable at call time, CalendarPicker should fall back to Navigation.goBack() with no argument if Navigation.getActiveRoute() returns a falsy value (see step 8).

   After writing to Onyx, YearPickerPage must immediately set YEAR_PICKER_TEMPORARY_DATE back to undefined using a second Onyx.set call so the key does not persist across sessions. This ensures the temporary key never carries stale state into future calendar opens.

7. src/ONYXKEYS.ts — Add YEAR_PICKER_TEMPORARY_DATE Onyx key (string or undefined type) to store the selected year value, enabling one-shot communication between YearPickerPage and CalendarPicker. The key is write-once per navigation round-trip; YearPickerPage clears it immediately after writing (see step 6).

8. src/components/DatePicker/CalendarPicker/index.tsx — Replace the inline YearPickerModal render (lines 419–425) and the year-pressable onPress handler (line 268) with:

   const activeRoute = Navigation.getActiveRoute();
   Navigation.navigate(
       ROUTES.SELECT_YEAR.getRoute(minYear, maxYear, currentYearView, activeRoute ?? ''),
   );

   Subscribe via useOnyx(ONYXKEYS.YEAR_PICKER_TEMPORARY_DATE) to receive the selected year. Add a useEffect that fires whenever the Onyx value changes: if the value is a non-empty string, parse it as a number, call setCurrentDateView (or the equivalent state setter for currentDateView) to trigger a re-render with the new year, then immediately clear the Onyx key by calling Onyx.set(ONYXKEYS.YEAR_PICKER_TEMPORARY_DATE, undefined). The clear call in CalendarPicker is a safety net; the primary clear is in YearPickerPage (step 6). This double-clear pattern ensures the key is always reset even if the user navigates away from YearPickerPage without selecting a year. Remove isYearPickerVisible, setIsYearPickerVisible, and all local YearPickerModal usage once the Onyx subscription is in place.

9. src/components/DatePicker/CalendarPicker/YearPickerModal.tsx — Delete this file; the component is replaced by the new YearPickerPage screen.

Platform animation consistency: @react-navigation RHP modals use the standard stack slide-from-right animation on iOS and Android and a fade/slide on web. The existing react-native-modal already slides from the right on native, so the visual delta for users is minimal. Web uses the same navigator-controlled animation as every other RHP modal, which is the desired outcome. No platform-specific animation overrides are needed beyond what the navigator provides by default; any fine-tuning can follow the same pattern used by other Group 2 migrated screens.

Blast radius: Scope is limited to year picker selection flow. CalendarPicker is used by DatePickerModal and ScheduleCallPage; both will benefit from the consistent native navigation animation. No other callers of YearPickerModal exist.

What alternative approaches did you explore? (Optional)

N/A

[aswin-s]

Updated the proposal above to tighten 4 edge cases (additional guards and broader coverage).

[KJ21-ENG]

Proposal

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

YearPickerModal should behave like the other modal screens that are owned by @react-navigation, but today the year picker is still rendered as a local react-native-modal child of CalendarPicker. On native this makes the year picker enter with the old modal animation instead of the standard navigation modal transition.

What is the root cause of that problem?

CalendarPicker keeps the year picker state inside the component: currentDateView, isYearPickerVisible, and the selected-year update callback all live in local useState.

App/src/components/DatePicker/CalendarPicker/index.tsx

Lines 82 to 88 in 1465400

	const [currentDateView, setCurrentDateView] = useState(() => getInitialCurrentDateView(value, minDate, maxDate));
	const [isYearPickerVisible, setIsYearPickerVisible] = useState(false);
	const [isMonthPickerVisible, setIsMonthPickerVisible] = useState(false);
	const isFirstRender = useRef(true);
	const currentMonthView = currentDateView.getMonth();
	const currentYearView = currentDateView.getFullYear();

Pressing the year header only flips that local boolean, and the picker is rendered inline with local props/callbacks instead of navigating to a screen.

App/src/components/DatePicker/CalendarPicker/index.tsx

Lines 313 to 317 in 1465400

	<PressableWithFeedback
	onPress={() => {
	pressableRef?.current?.blur();
	setIsYearPickerVisible(true);
	}}

App/src/components/DatePicker/CalendarPicker/index.tsx

Lines 421 to 427 in 1465400

	<YearPickerModal
	isVisible={isYearPickerVisible}
	years={years}
	currentYear={currentYearView}
	onYearChange={onYearSelected}
	onClose={() => setIsYearPickerVisible(false)}
	/>

YearPickerModal then wraps the content in Modal and calls the parent callback on row selection, so the screen has no route, no serializable state boundary, and no navigation-owned transition.

App/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx

Lines 61 to 97 in 1465400

	return (
	<Modal
	type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
	isVisible={isVisible}
	onClose={() => onClose?.()}
	onModalHide={onClose}
	shouldHandleNavigationBack
	shouldUseCustomBackdrop
	onBackdropPress={onClose}
	enableEdgeToEdgeBottomSafeAreaPadding
	>
	<ScreenWrapper
	style={[styles.pb0]}
	includePaddingTop={false}
	enableEdgeToEdgeBottomSafeAreaPadding
	testID="YearPickerModal"
	>
	<HeaderWithBackButton
	title={translate('yearPickerPage.year')}
	onBackButtonPress={onClose}
	/>
	<SelectionList
	data={data}
	ListItem={SingleSelectListItem}
	onSelectRow={(option) => {
	Keyboard.dismiss();
	onYearChange?.(option.value);
	}}
	textInputOptions={textInputOptions}
	initiallyFocusedItemKey={currentYear.toString()}
	disableMaintainingScrollPosition
	addBottomSafeAreaPadding
	shouldStopPropagation
	showScrollIndicator
	/>
	</ScreenWrapper>
	</Modal>

App/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx

Lines 85 to 88 in 1465400

	onSelectRow={(option) => {
	Keyboard.dismiss();
	onYearChange?.(option.value);
	}}

The state lift also cannot be a single scalar Onyx value because CalendarPicker is reused by generic DatePickerModal, schedule-call, and two side-by-side range calendars; one global year would leak between independent calendar instances.

App/src/components/DatePicker/DatePickerModal.tsx

Lines 80 to 85 in 1465400

	<CalendarPicker
	minDate={minDate}
	maxDate={maxDate}
	value={selectedDate}
	onSelected={handleDateSelection}
	/>

App/src/pages/ScheduleCall/ScheduleCallPage.tsx

Lines 190 to 197 in 1465400

	<CalendarPicker
	value={scheduleCallDraft?.date}
	minDate={minDate}
	maxDate={maxDate}
	selectableDates={Object.keys(timeSlotDateMap)}
	DayComponent={AvailableBookingDay}
	onSelected={loadTimeSlotsAndSaveDate}
	/>

App/src/components/Search/FilterComponents/RangeDatePicker.tsx

Lines 51 to 69 in 1465400

	<CalendarPicker
	value={fromValue}
	onSelected={onFromSelected}
	minDate={CONST.CALENDAR_PICKER.MIN_DATE}
	maxDate={fromMaxDate}
	headerContainerStyle={styles.ph4}
	/>
	</View>
	</View>
	<View style={[!shouldStack && styles.flex1, !shouldStack && styles.ml2, shouldStack && styles.mt4]}>
	<View style={[styles.borderedContentCard, !shouldStack && styles.flex1]}>
	<Text style={[styles.textLabelSupporting, styles.mb2, styles.ph4, styles.pt4]}>{translate('common.to')}</Text>
	<CalendarPicker
	value={toValue}
	onSelected={onToSelected}
	minDate={toMinDate}
	maxDate={CONST.CALENDAR_PICKER.MAX_DATE}
	headerContainerStyle={styles.ph4}

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

Add a transient, keyed Onyx collection for the calendar year picker state, for example ONYXKEYS.COLLECTION.CALENDAR_PICKER_YEAR_SELECTION, with a value containing the selected year for one calendar instance. CalendarPicker should create a stable instance ID with useRef(Str.guid('calendar-picker')), seed that keyed Onyx entry from currentDateView.getFullYear(), derive currentYearView from the keyed Onyx entry, and update the same key when year-changing actions run.

Replace the local isYearPickerVisible + inline <YearPickerModal /> flow with navigation. Add a dynamic route such as DYNAMIC_ROUTES.CALENDAR_YEAR_PICKER.getRoute(calendarPickerID), register a new screen in SCREENS, ROUTES, src/libs/Navigation/types.ts, src/libs/Navigation/linkingConfig/config.ts, and src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx, then navigate with createDynamicRoute(...) when the year header is pressed. Because this picker is shared across many host screens, use entryScreens: ['*']; the dynamic-route parser already accepts '*' as an allowed entry-screen wildcard.

App/src/libs/Navigation/helpers/getStateFromPath.ts

Lines 38 to 49 in 1465400

	const entryScreens: ReadonlyArray<Screen | '*'> = DYNAMIC_ROUTES[dynamicRoute as DynamicRouteKey]?.entryScreens ?? [];
	if (focusedRoute?.name) {
	if (entryScreens.some((s) => s === '*' || s === focusedRoute.name)) {
	// Merge the base route's params with
	// params extracted from the dynamic suffix.
	// This gives the dynamic route screen access to all context it needs.
	const mergedParams = {
	...(focusedRoute?.params as Record<string, unknown> | undefined),
	...pathParams,
	};
	const dynamicRouteState = getStateForDynamicRoute(normalizedPath, dynamicRoute as DynamicRouteKey, mergedParams);

Extract the reusable content from YearPickerModal into a navigation screen, for example YearPickerPage. The screen should read calendarPickerID from route params, read/write that keyed Onyx entry, keep only search text as local screen state, generate the same year rows from CONST.CALENDAR_PICKER.MIN_YEAR through MAX_YEAR, and call Navigation.goBack(useDynamicBackPath(DYNAMIC_ROUTES.CALENDAR_YEAR_PICKER.path)) after writing the selected year. This matches the current Group 2 migration pattern used by the reference PR: the selector screen reads Onyx, writes the draft value, then navigates back.

App/src/pages/workspace/categories/DynamicExpenseLimitTypeSelectorPage.tsx

Lines 31 to 49 in 1465400

	const backPath = useDynamicBackPath(DYNAMIC_ROUTES.EXPENSE_LIMIT_TYPE_SELECTOR.path);
	const [formDraft] = useOnyx(ONYXKEYS.FORMS.WORKSPACE_CATEGORY_FLAG_AMOUNTS_OVER_FORM_DRAFT);
	const [policyCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`);
	const currentExpenseLimitType = formDraft?.expenseLimitType ?? policyCategories?.[categoryName]?.expenseLimitType ?? CONST.POLICY.EXPENSE_LIMIT_TYPES.EXPENSE;
	const expenseLimitTypes = Object.values(CONST.POLICY.EXPENSE_LIMIT_TYPES).map((value) => ({
	value,
	text: translate(`workspace.rules.categoryRules.expenseLimitTypes.${value}`),
	alternateText: translate(`workspace.rules.categoryRules.expenseLimitTypes.${value}Subtitle`),
	keyForList: value,
	isSelected: currentExpenseLimitType === value,
	}));
	const onSelectRow = (item: {value: PolicyCategoryExpenseLimitType}) => {
	setDraftValues(ONYXKEYS.FORMS.WORKSPACE_CATEGORY_FLAG_AMOUNTS_OVER_FORM, {
	[INPUT_IDS.EXPENSE_LIMIT_TYPE]: item.value,
	});
	Navigation.goBack(backPath);

Finally, clear the keyed Onyx entry when the owning CalendarPicker unmounts and update tests/unit/CalendarPickerTest.tsx so the year-picker assertions mock navigation/Onyx instead of the removed local modal component.

Scope boundaries:

• Files touched (with call sites): src/components/DatePicker/CalendarPicker/index.tsx — year state/readers around lines 82-88, year button around lines 313-317, year modal render around lines 421-427, and year-changing writers around lines 105-130 and 184-203.
• Files touched (with call sites): src/components/DatePicker/CalendarPicker/YearPickerModal.tsx or its replacement screen — modal wrapper/content around lines 61-97 and row selection around lines 85-88.
• Files touched (registration/types): src/ONYXKEYS.ts, src/types/onyx/index.ts, src/ROUTES.ts, src/SCREENS.ts, src/libs/Navigation/types.ts, src/libs/Navigation/linkingConfig/config.ts, and src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx.
• Files touched (tests): tests/unit/CalendarPickerTest.tsx — the existing year-picker modal mock and assertions around lines 77-108 and 612-629.
• Platforms: all platforms through shared CalendarPicker and React Navigation modal registration.
• Code paths/callers explicitly NOT touched: MonthPickerModal remains local because this issue is scoped to YearPickerModal; date value submission/onSelected behavior remains owned by existing DatePicker, schedule-call, and search callers.
• API contracts or backend behavior changes: none.

What alternative solutions did you explore? (Optional)

We could keep YearPickerModal as a Modal and only change animation props, but that leaves the picker outside the navigation stack and does not satisfy the parent migration issue.

I also considered one shared Onyx key for the selected year, but rejected it because RangeDatePicker can render two CalendarPicker instances at the same time and generic date inputs can be opened from many screens. A keyed transient collection keeps the navigation screen serializable without cross-calendar state leakage.

The newer human proposals in this thread generally point at the same migration direction, but I would not use a single scalar result key or enumerate every possible entry screen. A scalar result key can still be overwritten by another mounted calendar before the consumer clears it, and enumerating every CalendarPicker host is brittle because generic DatePicker/search callers keep expanding. The keyed collection plus entryScreens: ['*'] is narrower and matches the dynamic-route parser's existing wildcard support.