[$250] Migrate InitialListValueSelectorModal 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

InitialListValueSelectorModal is currently implemented using react-native-modal, which causes animation inconsistencies on native platforms.

Migration approach (Group 3 — Write to known form draft)

Used via InputWrapper in only one place with a known formID/inputID. The new navigation page writes directly to the Onyx form draft, and FormProvider merges it reactively.

• File: src/pages/workspace/reports/InitialListValueSelector/InitialListValueSelectorModal.tsx
• Used by: Only InitialListValueSelector → CreateReportFieldsPage.tsx
• On select: updateValueInput(initialValue) → onInputChange(value === initialValue ? '' : initialValue) (toggle behavior)
• State destination: Form WORKSPACE_REPORT_FIELDS_FORM, field initialValue

Steps

1. Create a new @react-navigation modal route for initial list value selection.
2. Extract the modal content into a standalone screen component.
3. On selection, write directly to WORKSPACE_REPORT_FIELDS_FORM form draft field initialValue via Onyx (preserving the toggle behavior: if selected value equals current value, write empty string), then navigate back.
4. Replace the <InitialListValueSelectorModal /> usage with a navigation call.
5. Test the report fields creation flow on iOS, Android, and web.

Reference

• Reference PR for this migration pattern: Migrate AmountSelectorModal to be nav RHP #90346
• 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/~022054512687743799204
• Upwork Job ID: 2054512687743799204
• Last Price Increase: 2026-05-20

Issue Owner

Current Issue Owner: @ShridharGoel

[melvin-bot]

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

[melvin-bot]

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

[MestreY0d4-Uninter]

Proposal

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

InitialListValueSelectorModal presents a picker inside a <Modal> component backed by react-native-modal. On iOS and Android this produces animation inconsistencies (the modal does not participate in the native navigation stack), and the imperative isVisible prop contract couples picker visibility to the parent's local state rather than to the navigation system.

What is the root cause of that problem?

The component (src/pages/workspace/reports/InitialListValueSelector/InitialListValueSelectorModal.tsx, line 4) imports and renders @components/Modal, which delegates to react-native-modal. The parent (src/pages/workspace/reports/InitialListValueSelector/index.tsx, lines 66–71) controls visibility via an isPickerVisible boolean and showPickerModal/hidePickerModal callbacks. Because this bypasses @react-navigation, the transition animations diverge from the rest of the app on native platforms.

The component has exactly one callsite and writes to a single known Onyx form draft key (WORKSPACE_REPORT_FIELDS_FORM / initialValue), which makes it a clean candidate for the Group 3 migration pattern.

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

1. Create InitialListValueSelectorPage.tsx — a new standalone screen that:

   • Reads the current initialValue from the WORKSPACE_REPORT_FIELDS_FORM Onyx draft (via useOnyx).
   • Renders ReportFieldsInitialListValuePicker (already extracted in the existing modal).
   • On selection applies the toggle: if the selected value equals the current draft value, writes ''; otherwise writes the selected value — directly to the Onyx form draft via FormActions.setDraftValues.
   • Calls navigation.goBack() after writing.

2. Add a screen constant in src/SCREENS.ts (e.g. WORKSPACE_REPORT_FIELDS_INITIAL_LIST_VALUE_SELECTOR).

3. Add a route in src/ROUTES.ts with any params needed to scope the form draft (policyID, fieldID as applicable).

4. Register the screen in the appropriate navigator (following the pattern from PR Migrate AmountSelectorModal to be nav RHP #90346) with presentation: TRANSPARENT_MODAL on web and headerShown: false on native, matching attachmentModalScreenOptions.

5. Update src/pages/workspace/reports/InitialListValueSelector/index.tsx: remove the isPickerVisible state, showPickerModal/hidePickerModal handlers, and the <InitialListValueSelectorModal> JSX; replace with a Navigation.navigate(ROUTES.WORKSPACE_REPORT_FIELDS_INITIAL_LIST_VALUE_SELECTOR.getRoute(...)) call inside onPress.

6. Delete InitialListValueSelectorModal.tsx — it has no other consumers.

What alternative solutions did you explore? (Optional)

• Keep the modal, fix animation only: patching react-native-modal animations would not address the deeper incompatibility with the navigation stack and would diverge from the project-wide migration effort (Replace modal screens with modals from @react-navigation #53493).
• Inline the picker into CreateReportFieldsPage via a bottom sheet: possible but adds complexity and diverges from the established Group 3 pattern where a navigation screen writes back to the form draft, which FormProvider already handles reactively.

[trasnake87]

Proposal

InitialListValueSelectorModal is the list‑value picker that appears when creating a Report Field of type "List" on a workspace. Because it's mounted via react-native-modal inside the CreateReportFieldsPage RHP, its animation overlaps the RHP's own mount/unmount, producing the inconsistent animations described in the parent issue #53493.

Root cause

The picker is rendered as a <Modal type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}> (i.e. react-native-modal) inside InitialListValueSelector and controlled by local useState, so the modal and the host RHP screen animate independently. On iOS the modal can't animate in (host RHP is still mounting) and on Android it can't animate out (host unmounts first), as documented in #53493.

Current modal wrapper at src/pages/workspace/reports/InitialListValueSelector/InitialListValueSelectorModal.tsx:33-69:

// src/pages/workspace/reports/InitialListValueSelector/InitialListValueSelectorModal.tsx
function InitialListValueSelectorModal({isVisible, currentValue, label, subtitle, onValueSelected, onClose}: InitialListValueSelectorModalProps) {
    const styles = useThemeStyles();
    const [formDraft] = useOnyx(ONYXKEYS.FORMS.WORKSPACE_REPORT_FIELDS_FORM_DRAFT);

    return (
        <Modal
            type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
            isVisible={isVisible}
            onClose={onClose}
            onModalHide={onClose}
            enableEdgeToEdgeBottomSafeAreaPadding
        >
            <ScreenWrapper /* ... */>
                <HeaderWithBackButton title={label} shouldShowBackButton onBackButtonPress={onClose}/>
                <View style={[styles.ph5, styles.pb4]}>
                    <Text style={[styles.sidebarLinkText, styles.optionAlternateText]}>{subtitle}</Text>
                </View>
                <ReportFieldsInitialListValuePicker
                    listValues={formDraft?.listValues ?? []}
                    disabledOptions={formDraft?.disabledListValues ?? []}
                    value={currentValue}
                    onValueChange={onValueSelected}
                />
            </ScreenWrapper>
        </Modal>
    );
}

It is the sole consumer of InitialListValueSelector, which holds local visibility state (src/pages/workspace/reports/InitialListValueSelector/index.tsx:29-43):

// src/pages/workspace/reports/InitialListValueSelector/index.tsx
const [isPickerVisible, setIsPickerVisible] = useState(false);
const showPickerModal = () => setIsPickerVisible(true);
const hidePickerModal = () => { setIsPickerVisible(false); blurActiveElement(); };
const updateValueInput = (initialValue: string) => {
    onInputChange?.(value === initialValue ? '' : initialValue);
    hidePickerModal();
};

InitialListValueSelector is rendered via InputWrapper in exactly one place — src/pages/workspace/reports/CreateReportFieldsPage.tsx:271-278 — with the known formID WORKSPACE_REPORT_FIELDS_FORM and inputID INITIAL_VALUE. That makes this a clean Group 3 (write to known form draft) migration per the parent triage, identical in pattern to PR #90346 (AmountSelectorModal → WorkspaceCreateTaxValuePage).

Proposed fix

1 — Add route, screen, type, linking config, modal stack entry, and WORKSPACE_TO_RHP relation.

// src/ROUTES.ts — add after WORKSPACE_EDIT_REPORT_FIELDS_INITIAL_VALUE (line 2642)
WORKSPACE_REPORT_FIELDS_INITIAL_VALUE_SELECTOR: {
    route: 'workspaces/:policyID/reports/newReportField/initialValue',
    getRoute: (policyID: string) => `workspaces/${policyID}/reports/newReportField/initialValue` as const,
},

// src/SCREENS.ts — add inside WORKSPACE near line 748
REPORT_FIELDS_INITIAL_VALUE_SELECTOR: 'Workspace_ReportFields_InitialValueSelector',

// src/libs/Navigation/types.ts — add in SettingsNavigatorParamList
[SCREENS.WORKSPACE.REPORT_FIELDS_INITIAL_VALUE_SELECTOR]: {
    policyID: string;
};

// src/libs/Navigation/linkingConfig/config.ts — alongside other REPORT_FIELDS entries (~line 1172)
[SCREENS.WORKSPACE.REPORT_FIELDS_INITIAL_VALUE_SELECTOR]: {
    path: ROUTES.WORKSPACE_REPORT_FIELDS_INITIAL_VALUE_SELECTOR.route,
},

// src/libs/Navigation/linkingConfig/RELATIONS/WORKSPACE_TO_RHP.ts — add to WORKSPACE.REPORTS array (line 231-240)
SCREENS.WORKSPACE.REPORT_FIELDS_INITIAL_VALUE_SELECTOR,

// src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx — add inside SettingsModalStackNavigator near line 884
[SCREENS.WORKSPACE.REPORT_FIELDS_INITIAL_VALUE_SELECTOR]: () =>
    require<ReactComponentModule>('../../../../pages/workspace/reports/InitialListValueSelector/InitialListValueSelectorPage').default,

2 — Create the new navigation page at src/pages/workspace/reports/InitialListValueSelector/InitialListValueSelectorPage.tsx. It reads the existing form draft (which already contains listValues, disabledListValues, and the current initialValue), writes the toggled value back to the draft, and navigates back. FormProvider in CreateReportFieldsPage then reactively merges the new initialValue (see src/components/Form/FormProvider.tsx:145-156).

// src/pages/workspace/reports/InitialListValueSelector/InitialListValueSelectorPage.tsx
import React from 'react';
import {View} from 'react-native';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import ScreenWrapper from '@components/ScreenWrapper';
import Text from '@components/Text';
import useLocalize from '@hooks/useLocalize';
import useOnyx from '@hooks/useOnyx';
import useThemeStyles from '@hooks/useThemeStyles';
import {setDraftValues} from '@libs/actions/FormActions';
import Navigation from '@libs/Navigation/Navigation';
import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
import ONYXKEYS from '@src/ONYXKEYS';
import type SCREENS from '@src/SCREENS';
import INPUT_IDS from '@src/types/form/WorkspaceReportFieldForm';
import ReportFieldsInitialListValuePicker from './ReportFieldsInitialListValuePicker';

type InitialListValueSelectorPageProps = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.REPORT_FIELDS_INITIAL_VALUE_SELECTOR>;

function InitialListValueSelectorPage({}: InitialListValueSelectorPageProps) {
    const styles = useThemeStyles();
    const {translate} = useLocalize();
    const [formDraft] = useOnyx(ONYXKEYS.FORMS.WORKSPACE_REPORT_FIELDS_FORM_DRAFT);

    const currentValue = formDraft?.[INPUT_IDS.INITIAL_VALUE] ?? '';

    const onValueSelected = (value: string) => {
        // Preserve the toggle behavior from the previous modal:
        // re-selecting the active option clears it.
        setDraftValues(ONYXKEYS.FORMS.WORKSPACE_REPORT_FIELDS_FORM, {
            [INPUT_IDS.INITIAL_VALUE]: currentValue === value ? '' : value,
        });
        Navigation.goBack();
    };

    return (
        <ScreenWrapper
            style={styles.pb0}
            includePaddingTop={false}
            enableEdgeToEdgeBottomSafeAreaPadding
            testID={InitialListValueSelectorPage.displayName}
        >
            <HeaderWithBackButton
                title={translate('common.initialValue')}
                onBackButtonPress={Navigation.goBack}
            />
            <View style={[styles.ph5, styles.pb4]}>
                <Text style={[styles.sidebarLinkText, styles.optionAlternateText]}>
                    {translate('workspace.reportFields.listValuesInputSubtitle')}
                </Text>
            </View>
            <ReportFieldsInitialListValuePicker
                listValues={formDraft?.[INPUT_IDS.LIST_VALUES] ?? []}
                disabledOptions={formDraft?.[INPUT_IDS.DISABLED_LIST_VALUES] ?? []}
                value={currentValue}
                onValueChange={onValueSelected}
            />
        </ScreenWrapper>
    );
}

InitialListValueSelectorPage.displayName = 'InitialListValueSelectorPage';
export default InitialListValueSelectorPage;

3 — Slim InitialListValueSelector/index.tsx down to a stateless menu item that navigates to the new route. The auto-clear useEffect (which clears the field when the chosen option becomes disabled) must stay, since InputWrapper still owns value and onInputChange here.

// src/pages/workspace/reports/InitialListValueSelector/index.tsx
import type {ForwardedRef} from 'react';
import React, {useEffect} from 'react';
import {View} from 'react-native';
import type {MenuItemBaseProps} from '@components/MenuItem';
import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
import useOnyx from '@hooks/useOnyx';
import Navigation from '@libs/Navigation/Navigation';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';

type InitialListValueSelectorProps = Pick<MenuItemBaseProps, 'label' | 'rightLabel' | 'errorText'> & {
    value?: string;
    onInputChange?: (value: string) => void;
    policyID: string;
    ref: ForwardedRef<View>;
};

function InitialListValueSelector({value = '', label = '', rightLabel, errorText = '', onInputChange, policyID, ref}: InitialListValueSelectorProps) {
    const [formDraft] = useOnyx(ONYXKEYS.FORMS.WORKSPACE_REPORT_FIELDS_FORM_DRAFT);

    useEffect(() => {
        const currentValueIndex = Object.values(formDraft?.listValues ?? {}).findIndex((listValue) => listValue === value);
        const isCurrentValueDisabled = formDraft?.disabledListValues?.[currentValueIndex] ?? true;
        if (isCurrentValueDisabled && value !== '') {
            onInputChange?.('');
        }
    }, [formDraft?.disabledListValues, formDraft?.listValues, onInputChange, value]);

    return (
        <View>
            <MenuItemWithTopDescription
                ref={ref}
                shouldShowRightIcon
                title={value}
                description={label}
                rightLabel={rightLabel}
                brickRoadIndicator={errorText ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
                errorText={errorText}
                onPress={() => Navigation.navigate(ROUTES.WORKSPACE_REPORT_FIELDS_INITIAL_VALUE_SELECTOR.getRoute(policyID))}
            />
        </View>
    );
}

export default InitialListValueSelector;

4 — Update the InputWrapper usage in CreateReportFieldsPage.tsx:271-278 to pass policyID, and add a draft-cleanup effect on unmount (matching WorkspaceCreateTaxPage in PR #90346):

// src/pages/workspace/reports/CreateReportFieldsPage.tsx
import {clearDraftValues} from '@libs/actions/FormActions';
// ...
useEffect(() => () => clearDraftValues(ONYXKEYS.FORMS.WORKSPACE_REPORT_FIELDS_FORM), []);
// ...
{inputValues[INPUT_IDS.TYPE] === CONST.REPORT_FIELD_TYPES.LIST && availableListValuesLength > 0 && (
    <InputWrapper
        InputComponent={InitialListValueSelector}
        inputID={INPUT_IDS.INITIAL_VALUE}
        label={translate('common.initialValue')}
        policyID={policyID}
    />
)}

The subtitle prop is dropped — it's now rendered inside InitialListValueSelectorPage directly from the localization key, eliminating the need to forward it through route params.

5 — Delete src/pages/workspace/reports/InitialListValueSelector/InitialListValueSelectorModal.tsx once nothing imports it.

Why this approach

This is the canonical Group 3 pattern established by PR #90346 (which migrated AmountSelectorModal in the analogous WorkspaceCreateTaxPage flow): the new page writes the field directly to the existing form draft, and FormProvider reactively merges it via its useOnyx+previousDraftValues diff at src/components/Form/FormProvider.tsx:154-156, so no callback plumbing or state lifting is required. Lifting to a dedicated Onyx key (Group 2) was considered but is unnecessary here because the formID/inputID is single-site and statically known, so the draft is already the right destination. The auto-clear useEffect is retained in InitialListValueSelector rather than moved into the new page, because it must fire whenever disabledListValues changes — including while the picker page is not mounted — and InputWrapper continues to own the value/onInputChange contract for the form.

[yusufdeveloper2903]

🚫 Duplicated proposal withdrawn by 🤖 ProposalPolice.

[github-actions]

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

[dilshodmackbook-sketch]

Proposal

What is the root cause of that problem?

InitialListValueSelectorModal is rendered through react-native-modal via the <Modal type={RIGHT_DOCKED}> wrapper, the source of the animation inconsistencies tracked by parent issue #53493. The picker (InitialListValueSelector/index.tsx) owns the modal's visibility locally with useState, and on selection routes the value through onInputChange with a small toggle twist — picking the current value clears the field. The selector is used in exactly one place (CreateReportFieldsPage) via <InputWrapper inputID={INITIAL_VALUE}> against WORKSPACE_REPORT_FIELDS_FORM, so this is a clean Group 3 — Write to known form draft case.

Relevant code on main:

• Modal wrapper: https://github.com/Expensify/App/blob/main/src/pages/workspace/reports/InitialListValueSelector/InitialListValueSelectorModal.tsx#L33-L69
• Local visibility state + toggle logic in the picker: https://github.com/Expensify/App/blob/main/src/pages/workspace/reports/InitialListValueSelector/index.tsx#L29-L43
• Consumer (single InputWrapper call site): https://github.com/Expensify/App/blob/main/src/pages/workspace/reports/CreateReportFieldsPage.tsx#L271-L278

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

I'd follow the same pattern as #90346 (AmountSelectorModal → nav RHP):

1. Register a new RHP route + screen for the initial-value selector:

• ROUTES.WORKSPACE_REPORT_FIELDS_INITIAL_LIST_VALUE → workspaces/:policyID/reports/fields/new/initial-list-value
• SCREENS.WORKSPACE.REPORT_FIELDS_INITIAL_LIST_VALUE
• Wire it up in ModalStackNavigators/index.tsx, WORKSPACE_TO_RHP.ts, and linkingConfig/config.ts.

2. Create ReportFieldsInitialListValuePage.tsx — the new screen. It reads the draft directly and writes back with the same toggle behavior the picker had:

- const updateValueInput = (initialValue: string) => {
-     onInputChange?.(value === initialValue ? '' : initialValue);
-     hidePickerModal();
- };
+ const onValueSelected = (selectedValue: string) => {
+     const currentValue = formDraft?.[INPUT_IDS.INITIAL_VALUE] ?? '';
+     setDraftValues(ONYXKEYS.FORMS.WORKSPACE_REPORT_FIELDS_FORM, {
+         [INPUT_IDS.INITIAL_VALUE]: currentValue === selectedValue ? '' : selectedValue,
+     });
+     Navigation.goBack();
+ };

The new page renders the same content as the modal's body (<Text subtitle> + <ReportFieldsInitialListValuePicker>), reads listValues/disabledListValues/current initialValue from WORKSPACE_REPORT_FIELDS_FORM_DRAFT, and FormProvider in CreateReportFieldsPage picks up the new value reactively the moment we write the draft — no onInputChange plumbing needed.

3. Slim down InitialListValueSelector/index.tsx — drop the modal state and JSX; it becomes just a navigator:

- function InitialListValueSelector({value = '', label = '', rightLabel, subtitle = '', errorText = '', onInputChange, ref}: InitialListValueSelectorProps) {
-     const [formDraft] = useOnyx(ONYXKEYS.FORMS.WORKSPACE_REPORT_FIELDS_FORM_DRAFT);
-     const [isPickerVisible, setIsPickerVisible] = useState(false);
-     ...
-     return (
-         <View>
-             <MenuItemWithTopDescription ... onPress={showPickerModal} />
-             <InitialListValueSelectorModal isVisible={isPickerVisible} ... />
-         </View>
-     );
- }
+ function InitialListValueSelector({value = '', label = '', rightLabel, errorText = '', policyID, ref}: InitialListValueSelectorProps) {
+     // existing useEffect that clears value when it becomes disabled stays — still needs onInputChange via InputWrapper
+     return (
+         <MenuItemWithTopDescription
+             ref={ref}
+             shouldShowRightIcon
+             title={value}
+             description={label}
+             rightLabel={rightLabel}
+             brickRoadIndicator={errorText ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
+             errorText={errorText}
+             onPress={() => Navigation.navigate(ROUTES.WORKSPACE_REPORT_FIELDS_INITIAL_LIST_VALUE.getRoute(policyID))}
+         />
+     );
+ }

The existing useEffect that clears the value when the currently selected entry becomes disabled (index.tsx#L45-L52) stays put — that's a separate invariant from the modal lifecycle and still belongs to the picker.

4. Update CreateReportFieldsPage.tsx — pass policyID to the picker via InputWrapper (<InputWrapper InputComponent={InitialListValueSelector} inputID={INPUT_IDS.INITIAL_VALUE} policyID={policyID} ... />). The subtitle prop moves onto the new page (header subtitle) since the modal was the one rendering it.

5. Delete InitialListValueSelectorModal.tsx — fully replaced by the new route.

What alternative solutions did you explore?

I considered keeping subtitle on the picker and passing it through nav params, but subtitle is a static translation key tied to the LIST field type, so hard-coding it in the new page is cleaner than threading params just to render a label. I also considered handling the toggle on the picker side (read draft after goBack, then re-write), but that's a round-trip — applying the toggle inside the new screen before setDraftValues keeps the write atomic and matches the reference PR's "draft is the source of truth" model.