[$250] Global change to improve date picker layout in New Expensify

[jamesdeanexpensify]

Background

Coming from this convo, we'd like to make a global change to the date picker in New Expensify for improved usability.

Current example

Proposed update

See below, but note these details:

• Arrows go back/forward for month and year
• Clicking on the actual month name or year name launches the RHP pickers

cc @shawnborton @JmillsExpensify for viz since we were discussing this

Issue Owner

Current Issue Owner: @mukhrr

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022026565734206630887
• Upwork Job ID: 2026565734206630887
• Last Price Increase: 2026-03-04

[melvin-bot]

Triggered auto assignment to @RachCHopkins (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO. Remember to draft any necessary HelpDot updates by following the instructions here.

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @shawnborton (NewFeature)

[mukhrr]

Proposal

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

When a user needs to navigate to a different month or year in the CalendarPicker, they are forced to either click the month arrows one-by-one (no way to jump directly to a specific month) or open a full RHP modal just to change the year by one. This makes date navigation slow and cumbersome, especially when selecting dates far from the current view.

What is the root cause of that problem?

The CalendarPicker header in CalendarPicker/index.tsx uses a layout where the year on the left only opens a YearPickerModal RHP (no increment/decrement arrows), and the month on the right only has prev/next arrows (no direct month picker). There is no MonthPickerModal component at all, and the year lacks arrow-based navigation.

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

Lines 183 to 245 in 8af1e14

	<View
	style={[themeStyles.calendarHeader, themeStyles.flexRow, themeStyles.justifyContentBetween, themeStyles.alignItemsCenter, themeStyles.ph5]}
	dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
	>
	<PressableWithFeedback
	onPress={() => {
	pressableRef?.current?.blur();
	setIsYearPickerVisible(true);
	}}
	ref={pressableRef}
	style={[themeStyles.alignItemsCenter, themeStyles.flexRow, themeStyles.flex1, themeStyles.justifyContentStart]}
	wrapperStyle={[themeStyles.alignItemsCenter]}
	hoverDimmingValue={1}
	disabled={years.length <= 1}
	testID="currentYearButton"
	accessibilityLabel={`${currentYearView}, ${translate('common.currentYear')}`}
	role={CONST.ROLE.BUTTON}
	sentryLabel={CONST.SENTRY_LABEL.CALENDAR_PICKER.YEAR_PICKER}
	>
	<Text
	style={themeStyles.sidebarLinkTextBold}
	testID="currentYearText"
	>
	{currentYearView}
	</Text>
	<ArrowIcon disabled={years.length <= 1} />
	</PressableWithFeedback>
	<View style={[themeStyles.alignItemsCenter, themeStyles.flexRow, themeStyles.flex1, themeStyles.justifyContentEnd, themeStyles.mrn2]}>
	<Text
	style={themeStyles.sidebarLinkTextBold}
	testID="currentMonthText"
	accessibilityLabel={`${monthNames.at(currentMonthView)}, ${translate('common.currentMonth')}`}
	>
	{monthNames.at(currentMonthView)}
	</Text>
	<PressableWithFeedback
	shouldUseAutoHitSlop={false}
	testID="prev-month-arrow"
	disabled={!hasAvailableDatesPrevMonth}
	onPress={moveToPrevMonth}
	hoverDimmingValue={1}
	accessibilityLabel={translate('common.previous')}
	role={CONST.ROLE.BUTTON}
	sentryLabel={CONST.SENTRY_LABEL.CALENDAR_PICKER.PREV_MONTH}
	>
	<ArrowIcon
	disabled={!hasAvailableDatesPrevMonth}
	direction={CONST.DIRECTION.LEFT}
	/>
	</PressableWithFeedback>
	<PressableWithFeedback
	shouldUseAutoHitSlop={false}
	testID="next-month-arrow"
	disabled={!hasAvailableDatesNextMonth}
	onPress={moveToNextMonth}
	hoverDimmingValue={1}
	accessibilityLabel={translate('common.next')}
	role={CONST.ROLE.BUTTON}
	sentryLabel={CONST.SENTRY_LABEL.CALENDAR_PICKER.NEXT_MONTH}
	>
	<ArrowIcon disabled={!hasAvailableDatesNextMonth} />
	</PressableWithFeedback>
	</View>

The header is split into two sections: the left side (lines 187-209) renders a year label + single right arrow that opens YearPickerModal, and the right side (lines 210-245) renders a month label + left/right arrows for month-by-month navigation. There is no symmetry between month and year controls.

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

Lines 187 to 209 in 8af1e14

	<PressableWithFeedback
	onPress={() => {
	pressableRef?.current?.blur();
	setIsYearPickerVisible(true);
	}}
	ref={pressableRef}
	style={[themeStyles.alignItemsCenter, themeStyles.flexRow, themeStyles.flex1, themeStyles.justifyContentStart]}
	wrapperStyle={[themeStyles.alignItemsCenter]}
	hoverDimmingValue={1}
	disabled={years.length <= 1}
	testID="currentYearButton"
	accessibilityLabel={`${currentYearView}, ${translate('common.currentYear')}`}
	role={CONST.ROLE.BUTTON}
	sentryLabel={CONST.SENTRY_LABEL.CALENDAR_PICKER.YEAR_PICKER}
	>
	<Text
	style={themeStyles.sidebarLinkTextBold}
	testID="currentYearText"
	>
	{currentYearView}
	</Text>
	<ArrowIcon disabled={years.length <= 1} />
	</PressableWithFeedback>

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

1. Restructure the calendar header layout in CalendarPicker/index.tsx to use < Month > < Year > format where both month and year have left/right arrow navigation and clickable text labels that open their respective RHP pickers.
   

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

   Lines 183 to 245 in 8af1e14

   	<View
   	style={[themeStyles.calendarHeader, themeStyles.flexRow, themeStyles.justifyContentBetween, themeStyles.alignItemsCenter, themeStyles.ph5]}
   	dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
   	>
   	<PressableWithFeedback
   	onPress={() => {
   	pressableRef?.current?.blur();
   	setIsYearPickerVisible(true);
   	}}
   	ref={pressableRef}
   	style={[themeStyles.alignItemsCenter, themeStyles.flexRow, themeStyles.flex1, themeStyles.justifyContentStart]}
   	wrapperStyle={[themeStyles.alignItemsCenter]}
   	hoverDimmingValue={1}
   	disabled={years.length <= 1}
   	testID="currentYearButton"
   	accessibilityLabel={`${currentYearView}, ${translate('common.currentYear')}`}
   	role={CONST.ROLE.BUTTON}
   	sentryLabel={CONST.SENTRY_LABEL.CALENDAR_PICKER.YEAR_PICKER}
   	>
   	<Text
   	style={themeStyles.sidebarLinkTextBold}
   	testID="currentYearText"
   	>
   	{currentYearView}
   	</Text>
   	<ArrowIcon disabled={years.length <= 1} />
   	</PressableWithFeedback>
   	<View style={[themeStyles.alignItemsCenter, themeStyles.flexRow, themeStyles.flex1, themeStyles.justifyContentEnd, themeStyles.mrn2]}>
   	<Text
   	style={themeStyles.sidebarLinkTextBold}
   	testID="currentMonthText"
   	accessibilityLabel={`${monthNames.at(currentMonthView)}, ${translate('common.currentMonth')}`}
   	>
   	{monthNames.at(currentMonthView)}
   	</Text>
   	<PressableWithFeedback
   	shouldUseAutoHitSlop={false}
   	testID="prev-month-arrow"
   	disabled={!hasAvailableDatesPrevMonth}
   	onPress={moveToPrevMonth}
   	hoverDimmingValue={1}
   	accessibilityLabel={translate('common.previous')}
   	role={CONST.ROLE.BUTTON}
   	sentryLabel={CONST.SENTRY_LABEL.CALENDAR_PICKER.PREV_MONTH}
   	>
   	<ArrowIcon
   	disabled={!hasAvailableDatesPrevMonth}
   	direction={CONST.DIRECTION.LEFT}
   	/>
   	</PressableWithFeedback>
   	<PressableWithFeedback
   	shouldUseAutoHitSlop={false}
   	testID="next-month-arrow"
   	disabled={!hasAvailableDatesNextMonth}
   	onPress={moveToNextMonth}
   	hoverDimmingValue={1}
   	accessibilityLabel={translate('common.next')}
   	role={CONST.ROLE.BUTTON}
   	sentryLabel={CONST.SENTRY_LABEL.CALENDAR_PICKER.NEXT_MONTH}
   	>
   	<ArrowIcon disabled={!hasAvailableDatesNextMonth} />
   	</PressableWithFeedback>
   	</View>

--- a/src/components/DatePicker/CalendarPicker/index.tsx
+++ b/src/components/DatePicker/CalendarPicker/index.tsx
@@ -1,4 +1,4 @@
-import {addMonths, endOfDay, endOfMonth, format, getYear, isSameDay, parseISO, setDate, setYear, startOfDay, startOfMonth, subMonths} from 'date-fns';
+import {addMonths, addYears, endOfDay, endOfMonth, endOfYear, format, getYear, isSameDay, parseISO, setDate, setMonth, setYear, startOfDay, startOfMonth, startOfYear, subMonths, subYears} from 'date-fns';
 ...
 import ArrowIcon from './ArrowIcon';
 import Day from './Day';
 import generateMonthMatrix from './generateMonthMatrix';
 import type CalendarPickerListItem from './types';
+import MonthPickerModal from './MonthPickerModal';
 import YearPickerModal from './YearPickerModal';
 ...
     const [isYearPickerVisible, setIsYearPickerVisible] = useState(false);
+    const [isMonthPickerVisible, setIsMonthPickerVisible] = useState(false);
 ...

2. Add year navigation handlers (moveToPrevYear, moveToNextYear) and a month selection handler (onMonthSelected) in the same file.
   

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

   Lines 117 to 151 in 8af1e14

   	const moveToPrevMonth = () => {
   	setCurrentDateView((prev) => {
   	const prevMonth = subMonths(new Date(prev), 1);
   	// if year is subtracted, we need to update the years list
   	if (prevMonth.getFullYear() < prev.getFullYear()) {
   	setYears((prevYears) =>
   	prevYears.map((item) => ({
   	...item,
   	isSelected: item.value === prevMonth.getFullYear(),
   	})),
   	);
   	}
   	return prevMonth;
   	});
   	};
   	/**
   	* Handles the user pressing the next month arrow of the calendar picker.
   	*/
   	const moveToNextMonth = () => {
   	setCurrentDateView((prev) => {
   	const nextMonth = addMonths(new Date(prev), 1);
   	// if year is added, we need to update the years list
   	if (nextMonth.getFullYear() > prev.getFullYear()) {
   	setYears((prevYears) =>
   	prevYears.map((item) => ({
   	...item,
   	isSelected: item.value === nextMonth.getFullYear(),
   	})),
   	);
   	}
   	return nextMonth;
   	});
   	};

--- a/src/components/DatePicker/CalendarPicker/index.tsx
+++ b/src/components/DatePicker/CalendarPicker/index.tsx
@@ +100,0 @@
+    const onMonthSelected = (month: number) => {
+        setCurrentDateView((prev) => setMonth(new Date(prev), month));
+        requestAnimationFrame(() => setIsMonthPickerVisible(false));
+    };
+
+    const moveToPrevYear = () => {
+        setCurrentDateView((prev) => {
+            const prevYear = subYears(new Date(prev), 1);
+            setYears((prevYears) =>
+                prevYears.map((item) => ({...item, isSelected: item.value === prevYear.getFullYear()})),
+            );
+            return prevYear;
+        });
+    };
+
+    const moveToNextYear = () => {
+        setCurrentDateView((prev) => {
+            const nextYear = addYears(new Date(prev), 1);
+            setYears((prevYears) =>
+                prevYears.map((item) => ({...item, isSelected: item.value === nextYear.getFullYear()})),
+            );
+            return nextYear;
+        });
+    };

3. Add year boundary checks alongside the existing month boundary checks.
   

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

   Lines 155 to 156 in 8af1e14

   	const hasAvailableDatesNextMonth = startOfDay(new Date(maxDate)) > endOfMonth(new Date(currentDateView));
   	const hasAvailableDatesPrevMonth = endOfDay(new Date(minDate)) < startOfMonth(new Date(currentDateView));

--- a/src/components/DatePicker/CalendarPicker/index.tsx
+++ b/src/components/DatePicker/CalendarPicker/index.tsx
@@ -155,2 +155,4 @@
     const hasAvailableDatesNextMonth = startOfDay(new Date(maxDate)) > endOfMonth(new Date(currentDateView));
     const hasAvailableDatesPrevMonth = endOfDay(new Date(minDate)) < startOfMonth(new Date(currentDateView));
+    const hasAvailableDatesNextYear = startOfDay(new Date(maxDate)) > endOfYear(new Date(currentDateView));
+    const hasAvailableDatesPrevYear = endOfDay(new Date(minDate)) < startOfYear(new Date(currentDateView));

4. Replace the header JSX with the new < Month > < Year > layout where both have arrow navigation and clickable labels.
   

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

   Lines 183 to 245 in 8af1e14

   	<View
   	style={[themeStyles.calendarHeader, themeStyles.flexRow, themeStyles.justifyContentBetween, themeStyles.alignItemsCenter, themeStyles.ph5]}
   	dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
   	>
   	<PressableWithFeedback
   	onPress={() => {
   	pressableRef?.current?.blur();
   	setIsYearPickerVisible(true);
   	}}
   	ref={pressableRef}
   	style={[themeStyles.alignItemsCenter, themeStyles.flexRow, themeStyles.flex1, themeStyles.justifyContentStart]}
   	wrapperStyle={[themeStyles.alignItemsCenter]}
   	hoverDimmingValue={1}
   	disabled={years.length <= 1}
   	testID="currentYearButton"
   	accessibilityLabel={`${currentYearView}, ${translate('common.currentYear')}`}
   	role={CONST.ROLE.BUTTON}
   	sentryLabel={CONST.SENTRY_LABEL.CALENDAR_PICKER.YEAR_PICKER}
   	>
   	<Text
   	style={themeStyles.sidebarLinkTextBold}
   	testID="currentYearText"
   	>
   	{currentYearView}
   	</Text>
   	<ArrowIcon disabled={years.length <= 1} />
   	</PressableWithFeedback>
   	<View style={[themeStyles.alignItemsCenter, themeStyles.flexRow, themeStyles.flex1, themeStyles.justifyContentEnd, themeStyles.mrn2]}>
   	<Text
   	style={themeStyles.sidebarLinkTextBold}
   	testID="currentMonthText"
   	accessibilityLabel={`${monthNames.at(currentMonthView)}, ${translate('common.currentMonth')}`}
   	>
   	{monthNames.at(currentMonthView)}
   	</Text>
   	<PressableWithFeedback
   	shouldUseAutoHitSlop={false}
   	testID="prev-month-arrow"
   	disabled={!hasAvailableDatesPrevMonth}
   	onPress={moveToPrevMonth}
   	hoverDimmingValue={1}
   	accessibilityLabel={translate('common.previous')}
   	role={CONST.ROLE.BUTTON}
   	sentryLabel={CONST.SENTRY_LABEL.CALENDAR_PICKER.PREV_MONTH}
   	>
   	<ArrowIcon
   	disabled={!hasAvailableDatesPrevMonth}
   	direction={CONST.DIRECTION.LEFT}
   	/>
   	</PressableWithFeedback>
   	<PressableWithFeedback
   	shouldUseAutoHitSlop={false}
   	testID="next-month-arrow"
   	disabled={!hasAvailableDatesNextMonth}
   	onPress={moveToNextMonth}
   	hoverDimmingValue={1}
   	accessibilityLabel={translate('common.next')}
   	role={CONST.ROLE.BUTTON}
   	sentryLabel={CONST.SENTRY_LABEL.CALENDAR_PICKER.NEXT_MONTH}
   	>
   	<ArrowIcon disabled={!hasAvailableDatesNextMonth} />
   	</PressableWithFeedback>
   	</View>

--- a/src/components/DatePicker/CalendarPicker/index.tsx
+++ b/src/components/DatePicker/CalendarPicker/index.tsx
@@ -183,63 +183,80 @@
             <View
                 style={[themeStyles.calendarHeader, themeStyles.flexRow, themeStyles.justifyContentBetween, themeStyles.alignItemsCenter, themeStyles.ph5]}
                 dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
             >
-                <PressableWithFeedback ... > {/* old year button with single arrow */}
-                    <Text ...>{currentYearView}</Text>
-                    <ArrowIcon ... />
-                </PressableWithFeedback>
-                <View ...> {/* old month section */}
-                    <Text ...>{monthNames.at(currentMonthView)}</Text>
-                    <PressableWithFeedback onPress={moveToPrevMonth} ...>
-                        <ArrowIcon direction={CONST.DIRECTION.LEFT} />
-                    </PressableWithFeedback>
-                    <PressableWithFeedback onPress={moveToNextMonth} ...>
-                        <ArrowIcon />
-                    </PressableWithFeedback>
-                </View>
+                {/* Month section: < Month > */}
+                <View style={[themeStyles.alignItemsCenter, themeStyles.flexRow, themeStyles.flex1, themeStyles.justifyContentStart]}>
+                    <PressableWithFeedback
+                        testID="prev-month-arrow"
+                        disabled={!hasAvailableDatesPrevMonth}
+                        onPress={moveToPrevMonth}
+                        ...
+                    >
+                        <ArrowIcon disabled={!hasAvailableDatesPrevMonth} direction={CONST.DIRECTION.LEFT} />
+                    </PressableWithFeedback>
+                    <PressableWithFeedback
+                        testID="currentMonthButton"
+                        onPress={() => setIsMonthPickerVisible(true)}
+                        ...
+                    >
+                        <Text style={themeStyles.sidebarLinkTextBold}>{monthNames.at(currentMonthView)}</Text>
+                    </PressableWithFeedback>
+                    <PressableWithFeedback
+                        testID="next-month-arrow"
+                        disabled={!hasAvailableDatesNextMonth}
+                        onPress={moveToNextMonth}
+                        ...
+                    >
+                        <ArrowIcon disabled={!hasAvailableDatesNextMonth} />
+                    </PressableWithFeedback>
+                </View>
+
+                {/* Year section: < Year > */}
+                <View style={[themeStyles.alignItemsCenter, themeStyles.flexRow, themeStyles.flex1, themeStyles.justifyContentEnd]}>
+                    <PressableWithFeedback
+                        testID="prev-year-arrow"
+                        disabled={!hasAvailableDatesPrevYear}
+                        onPress={moveToPrevYear}
+                        ...
+                    >
+                        <ArrowIcon disabled={!hasAvailableDatesPrevYear} direction={CONST.DIRECTION.LEFT} />
+                    </PressableWithFeedback>
+                    <PressableWithFeedback
+                        testID="currentYearButton"
+                        onPress={() => setIsYearPickerVisible(true)}
+                        disabled={years.length <= 1}
+                        ...
+                    >
+                        <Text style={themeStyles.sidebarLinkTextBold}>{currentYearView}</Text>
+                    </PressableWithFeedback>
+                    <PressableWithFeedback
+                        testID="next-year-arrow"
+                        disabled={!hasAvailableDatesNextYear}
+                        onPress={moveToNextYear}
+                        ...
+                    >
+                        <ArrowIcon disabled={!hasAvailableDatesNextYear} />
+                    </PressableWithFeedback>
+                </View>
             </View>

5. Add MonthPickerModal render alongside the existing YearPickerModal at the bottom of the component.
   

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

   Lines 313 to 319 in 8af1e14

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

--- a/src/components/DatePicker/CalendarPicker/index.tsx
+++ b/src/components/DatePicker/CalendarPicker/index.tsx
@@ -313,6 +313,12 @@
             <YearPickerModal
                 ...
             />
+            <MonthPickerModal
+                isVisible={isMonthPickerVisible}
+                currentMonth={currentMonthView}
+                onMonthChange={onMonthSelected}
+                onClose={() => setIsMonthPickerVisible(false)}
+            />
         </View>

6. Create new MonthPickerModal.tsx following the same pattern as YearPickerModal — a RIGHT_DOCKED modal with SelectionList and RadioListItem showing the 12 month names.
   

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

   Lines 1 to 101 in 8af1e14

   	import React, {useEffect, useMemo, useState} from 'react';
   	import {Keyboard} from 'react-native';
   	import HeaderWithBackButton from '@components/HeaderWithBackButton';
   	import Modal from '@components/Modal';
   	import ScreenWrapper from '@components/ScreenWrapper';
   	import SelectionList from '@components/SelectionList';
   	import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
   	import useLocalize from '@hooks/useLocalize';
   	import useThemeStyles from '@hooks/useThemeStyles';
   	import CONST from '@src/CONST';
   	import type CalendarPickerListItem from './types';
   	type YearPickerModalProps = {
   	/** Whether the modal is visible */
   	isVisible: boolean;
   	/** The list of years to render */
   	years: CalendarPickerListItem[];
   	/** Currently selected year */
   	currentYear?: number;
   	/** Function to call when the user selects a year */
   	onYearChange?: (year: number) => void;
   	/** Function to call when the user closes the year picker */
   	onClose?: () => void;
   	};
   	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={RadioListItem}
   	onSelectRow={(option) => {
   	Keyboard.dismiss();
   	onYearChange?.(option.value);
   	}}
   	textInputOptions={textInputOptions}
   	initiallyFocusedItemKey={currentYear.toString()}
   	disableMaintainingScrollPosition
   	addBottomSafeAreaPadding
   	shouldStopPropagation
   	showScrollIndicator
   	/>
   	</ScreenWrapper>
   	</Modal>
   	);
   	}
   	export default YearPickerModal;

--- /dev/null
+++ b/src/components/DatePicker/CalendarPicker/MonthPickerModal.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import {Keyboard} from 'react-native';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import Modal from '@components/Modal';
+import ScreenWrapper from '@components/ScreenWrapper';
+import SelectionList from '@components/SelectionList';
+import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import DateUtils from '@libs/DateUtils';
+import CONST from '@src/CONST';
+
+type MonthPickerModalProps = {
+    isVisible: boolean;
+    currentMonth?: number;
+    onMonthChange?: (month: number) => void;
+    onClose?: () => void;
+};
+
+function MonthPickerModal({isVisible, currentMonth = new Date().getMonth(), onMonthChange, onClose}: MonthPickerModalProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const monthNames = DateUtils.getMonthNames();
+
+    const data = monthNames.map((month, index) => ({
+        text: month.charAt(0).toUpperCase() + month.slice(1),
+        value: index,
+        keyForList: index.toString(),
+        isSelected: index === currentMonth,
+    }));
+
+    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="MonthPickerModal"
+            >
+                <HeaderWithBackButton
+                    title={translate('monthPickerPage.month')}
+                    onBackButtonPress={onClose}
+                />
+                <SelectionList
+                    data={data}
+                    ListItem={RadioListItem}
+                    onSelectRow={(option) => {
+                        Keyboard.dismiss();
+                        onMonthChange?.(option.value);
+                    }}
+                    initiallyFocusedItemKey={currentMonth.toString()}
+                    addBottomSafeAreaPadding
+                    shouldStopPropagation
+                    showScrollIndicator
+                />
+            </ScreenWrapper>
+        </Modal>
+    );
+}
+
+export default MonthPickerModal;

7. Add translations for the new month picker modal.
   

   App/src/languages/en.ts

   Lines 3059 to 3062 in 8af1e14

   	yearPickerPage: {
   	year: 'Year',
   	selectYear: 'Please select a year',
   	},

--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -3062,6 +3062,10 @@
     yearPickerPage: {
         year: 'Year',
         selectYear: 'Please select a year',
     },
+    monthPickerPage: {
+        month: 'Month',
+        selectMonth: 'Please select a month',
+    },

App/src/languages/es.ts

Lines 2870 to 2873 in 8af1e14

	yearPickerPage: {
	year: 'Año',
	selectYear: 'Por favor, selecciona un año',
	},

--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -2873,6 +2873,10 @@
     yearPickerPage: {
         year: 'Año',
         selectYear: 'Por favor, selecciona un año',
     },
+    monthPickerPage: {
+        month: 'Mes',
+        selectMonth: 'Por favor, selecciona un mes',
+    },

8. Add Sentry labels for the new navigation elements.
   

   App/src/CONST/index.ts

   Lines 8583 to 8588 in 8af1e14

   	CALENDAR_PICKER: {
   	YEAR_PICKER: 'CalendarPicker-YearPicker',
   	PREV_MONTH: 'CalendarPicker-PrevMonth',
   	NEXT_MONTH: 'CalendarPicker-NextMonth',
   	DAY: 'CalendarPicker-Day',
   	},

--- a/src/CONST/index.ts
+++ b/src/CONST/index.ts
@@ -8583,6 +8583,9 @@
         CALENDAR_PICKER: {
             YEAR_PICKER: 'CalendarPicker-YearPicker',
+            MONTH_PICKER: 'CalendarPicker-MonthPicker',
             PREV_MONTH: 'CalendarPicker-PrevMonth',
             NEXT_MONTH: 'CalendarPicker-NextMonth',
+            PREV_YEAR: 'CalendarPicker-PrevYear',
+            NEXT_YEAR: 'CalendarPicker-NextYear',
             DAY: 'CalendarPicker-Day',
         },

[shawnborton]

I think we're good to put the External label on here and get some proposals.

[JmillsExpensify]

Agreed. Done

[melvin-bot]

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