[Due for payment 2026-06-16] [$250] Migrate PaymentCardCurrencyModal 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

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

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

• File: src/components/AddPaymentCard/PaymentCardCurrencyModal.tsx
• Used by: Only PaymentCardChangeCurrencyForm.tsx
• On select: onCurrencyChange(selectedCurrency) → setCurrency(...) local state, consumed by changeBillingCurrency(currency, values) on form submit
• State to lift: currency in PaymentCardChangeCurrencyForm → CHANGE_BILLING_CURRENCY_FORM draft or a dedicated Onyx key.

Steps

1. Lift the currency state from PaymentCardChangeCurrencyForm to the CHANGE_BILLING_CURRENCY_FORM draft or a dedicated Onyx key.
2. Create a new @react-navigation modal route for currency selection.
3. Extract the modal content into a standalone screen component that writes the selected currency to Onyx.
4. Replace the <PaymentCardCurrencyModal /> usage with a navigation call.
5. Test the currency change flow 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/~022054512639937790325
• Upwork Job ID: 2054512639937790325
• Last Price Increase: 2026-05-13

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

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

[melvin-bot]

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

[trasnake87]

Proposal

PaymentCardCurrencyModal is the currency picker on the Change billing currency screen (Settings → Subscription → change card → CVV step). Today it is a react-native-modal rendered inline inside the form, which on native causes the modal to animate at the same time as the RHP screen below it. Replace it with a dedicated @react-navigation modal screen following the dynamic-route pattern just landed for ExpenseLimitTypeSelector in PR #88915.

Root cause

The picker lives in src/components/AddPaymentCard/PaymentCardCurrencyModal.tsx:47-79 and is rendered inside PaymentCardChangeCurrencyForm at src/components/AddPaymentCard/PaymentCardChangeCurrencyForm.tsx:120-126. Two structural problems flow from that:

1 – Modal is mounted inside a navigation screen. Because PaymentCardCurrencyModal is wrapped in a <Modal type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}> (from react-native-modal), it animates as an overlay on top of the underlying RHP screen rather than as a real navigation step. On iOS this produces a cut-off animation when dismissed, and on Android the modal can be left hanging when the parent screen unmounts. The parent tracking issue #53493 explicitly lists PaymentCardCurrencyModal under the "MEDIUM" group of selectors to migrate for exactly this reason.

2 – Local useState cannot survive a route push. The selected currency is stored in useState here:

// src/components/AddPaymentCard/PaymentCardChangeCurrencyForm.tsx:34-35
const [isCurrencyModalVisible, setIsCurrencyModalVisible] = useState(false);
const [currency, setCurrency] = useState<ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>>(initialCurrency ?? CONST.PAYMENT_CARD_CURRENCY.USD);

Once the picker is its own route, the form must still know what the user picked after the route pops. The state therefore has to be lifted to Onyx. The CHANGE_BILLING_CURRENCY_FORM form already declares a CURRENCY input id (src/types/form/ChangeBillingCurrencyForm.ts:5-8) and a draft key (src/ONYXKEYS.ts:970-971), so we can reuse the existing form draft rather than minting a new dedicated key.

Note: the inline-list branch of PaymentCardChangeCurrencyForm (isSecurityCodeRequired === false, used by pages/settings/PaymentCard/ChangeCurrency/index.tsx) never opens PaymentCardCurrencyModal — it commits via selectCurrency directly — so it does not need to be touched.

Proposed fix

1 – Register a dynamic route, screen name, navigator entry, linking config, and param type.

// src/ROUTES.ts (inside DYNAMIC_ROUTES, around line 102)
PAYMENT_CARD_CURRENCY_SELECTOR: {
    path: 'payment-card-currency',
    entryScreens: [SCREENS.SETTINGS.SUBSCRIPTION.CHANGE_BILLING_CURRENCY],
},

// src/SCREENS.ts (inside SETTINGS.SUBSCRIPTION, near line 268)
DYNAMIC_PAYMENT_CARD_CURRENCY_SELECTOR: 'Settings_Subscription_Dynamic_Payment_Card_Currency_Selector',

// src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx (alongside line 876)
[SCREENS.SETTINGS.SUBSCRIPTION.DYNAMIC_PAYMENT_CARD_CURRENCY_SELECTOR]: () =>
    require<ReactComponentModule>('../../../../pages/settings/Subscription/PaymentCard/DynamicPaymentCardCurrencySelectorPage').default,

// src/libs/Navigation/linkingConfig/config.ts (next to line 164)
[SCREENS.SETTINGS.SUBSCRIPTION.DYNAMIC_PAYMENT_CARD_CURRENCY_SELECTOR]: DYNAMIC_ROUTES.PAYMENT_CARD_CURRENCY_SELECTOR.path,

// src/libs/Navigation/types.ts (SettingsNavigatorParamList)
[SCREENS.SETTINGS.SUBSCRIPTION.DYNAMIC_PAYMENT_CARD_CURRENCY_SELECTOR]: undefined;

2 – Create the new screen src/pages/settings/Subscription/PaymentCard/DynamicPaymentCardCurrencySelectorPage.tsx. It owns the same content the modal had, but writes the selection to the form draft and navigates back via useDynamicBackPath — mirroring DynamicExpenseLimitTypeSelectorPage from PR #88915:

// src/pages/settings/Subscription/PaymentCard/DynamicPaymentCardCurrencySelectorPage.tsx
import React, {useMemo} from 'react';
import type {ValueOf} from 'type-fest';
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 useOnyx from '@hooks/useOnyx';
import usePermissions from '@hooks/usePermissions';
import useThemeStyles from '@hooks/useThemeStyles';
import {setDraftValues} from '@libs/actions/FormActions';
import Navigation from '@libs/Navigation/Navigation';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import {DYNAMIC_ROUTES} from '@src/ROUTES';
import INPUT_IDS from '@src/types/form/ChangeBillingCurrencyForm';

type Currency = ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>;

function DynamicPaymentCardCurrencySelectorPage() {
    const styles = useThemeStyles();
    const {translate} = useLocalize();
    const {isBetaEnabled} = usePermissions();
    const backPath = useDynamicBackPath(DYNAMIC_ROUTES.PAYMENT_CARD_CURRENCY_SELECTOR.path);
    const [formDraft] = useOnyx(ONYXKEYS.FORMS.CHANGE_BILLING_CURRENCY_FORM_DRAFT);
    const [fundList] = useOnyx(ONYXKEYS.FUND_LIST);

    const fallbackCurrency = useMemo(
        () => Object.values(fundList ?? {}).find((card) => card.accountData?.additionalData?.isBillingCard)?.accountData?.currency ?? CONST.PAYMENT_CARD_CURRENCY.USD,
        [fundList],
    );
    const currentCurrency = (formDraft?.currency ?? fallbackCurrency) as Currency;

    const currencyOptions = useMemo(() => {
        const canUseEurBilling = isBetaEnabled(CONST.BETAS.EUR_BILLING);
        return (Object.keys(CONST.PAYMENT_CARD_CURRENCY) as Currency[])
            .filter((c) => c !== CONST.PAYMENT_CARD_CURRENCY.EUR || canUseEurBilling)
            .map((c) => ({text: c, value: c, keyForList: c, isSelected: c === currentCurrency}));
    }, [currentCurrency, isBetaEnabled]);

    return (
        <ScreenWrapper
            style={styles.pb0}
            includePaddingTop={false}
            enableEdgeToEdgeBottomSafeAreaPadding
            testID={DynamicPaymentCardCurrencySelectorPage.displayName}
        >
            <HeaderWithBackButton
                title={translate('common.currency')}
                onBackButtonPress={() => Navigation.goBack(backPath)}
            />
            <SelectionList
                data={currencyOptions}
                ListItem={RadioListItem}
                onSelectRow={(option) => {
                    setDraftValues(ONYXKEYS.FORMS.CHANGE_BILLING_CURRENCY_FORM, {[INPUT_IDS.CURRENCY]: option.value});
                    Navigation.goBack(backPath);
                }}
                initiallyFocusedItemKey={currentCurrency}
                shouldSingleExecuteRowSelect
                showScrollIndicator
                addBottomSafeAreaPadding
            />
        </ScreenWrapper>
    );
}

DynamicPaymentCardCurrencySelectorPage.displayName = 'DynamicPaymentCardCurrencySelectorPage';
export default DynamicPaymentCardCurrencySelectorPage;

3 – Lift currency state and drop the modal in PaymentCardChangeCurrencyForm.tsx. Replace the useState+PaymentCardCurrencyModal flow with an Onyx-backed read of the draft and a navigation call from the menu item:

// src/components/AddPaymentCard/PaymentCardChangeCurrencyForm.tsx (replaces lines 34-77 and 120-126)
import {useCallback, useEffect, useMemo} from 'react';
import useOnyx from '@hooks/useOnyx';
import {clearDraftValues, setDraftValues} from '@libs/actions/FormActions';
import createDynamicRoute from '@libs/Navigation/helpers/dynamicRoutesUtils/createDynamicRoute';
import Navigation from '@libs/Navigation/Navigation';
import {DYNAMIC_ROUTES} from '@src/ROUTES';
// ...

const [formDraft] = useOnyx(ONYXKEYS.FORMS.CHANGE_BILLING_CURRENCY_FORM_DRAFT);
const currency = (formDraft?.currency ?? initialCurrency ?? CONST.PAYMENT_CARD_CURRENCY.USD) as ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>;

useEffect(() => {
    // Seed the draft so the selector screen reads the same starting value as the form.
    if (formDraft?.currency || !initialCurrency) {
        return;
    }
    setDraftValues(ONYXKEYS.FORMS.CHANGE_BILLING_CURRENCY_FORM, {[INPUT_IDS.CURRENCY]: initialCurrency});
}, [formDraft?.currency, initialCurrency]);

useEffect(() => () => clearDraftValues(ONYXKEYS.FORMS.CHANGE_BILLING_CURRENCY_FORM), []);

// ...inside the isSecurityCodeRequired branch, the MenuItemWithTopDescription becomes:
<MenuItemWithTopDescription
    shouldShowRightIcon
    title={currency}
    descriptionTextStyle={styles.textNormal}
    description={translate('common.currency')}
    onPress={() => Navigation.navigate(createDynamicRoute(DYNAMIC_ROUTES.PAYMENT_CARD_CURRENCY_SELECTOR.path))}
/>

Then delete the <PaymentCardCurrencyModal /> element, the isCurrencyModalVisible/changeCurrency/showCurrenciesModal callbacks, the availableCurrencies/currencyOptions memos that are no longer referenced in this branch, and the import PaymentCardCurrencyModal from './PaymentCardCurrencyModal' line. Update the submit handler so it pulls from the lifted state:

// FormProvider onSubmit (was line 92)
onSubmit={(values) => changeBillingCurrency(currency, values)}

(currency is now the value read from the draft above, so this line stays correct.)

4 – Delete src/components/AddPaymentCard/PaymentCardCurrencyModal.tsx entirely — it has no other importers after step 3 (verified by grep -rn "PaymentCardCurrencyModal" src returning only the file itself and the import being removed).

5 – Update the form type src/types/form/ChangeBillingCurrencyForm.ts:15 is already typed as ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>, so no change is required there.

Why this approach

This is a near-1:1 reuse of the dynamic-route migration template merged in PR #88915 for ExpenseLimitTypeSelectorModal — same DYNAMIC_ROUTES entry shape, same useDynamicBackPath + setDraftValues + clearDraftValues lifecycle, same MenuItemWithTopDescription + createDynamicRoute call site. Reusing the existing CHANGE_BILLING_CURRENCY_FORM draft (instead of a new dedicated Onyx key) avoids introducing an extra key, keeps the lifted state co-located with the rest of the form's draft data, and means the existing teardown path (clearDraftValues on unmount) covers both currency and securityCode together. A non-dynamic route was considered, but the dynamic-route pattern is the convention now applied to every selector migrated under #53493 because it keeps the back path correct when the same selector is reachable from multiple entry screens — and PaymentCardCurrencyModal already lives behind the existing CHANGE_BILLING_CURRENCY RHP screen, so the entry list is a single screen today and trivially extensible later.

[aswin-s]

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

Currently, PaymentCardCurrencyModal uses react-native-modal, which causes animation inconsistencies on native platforms. Users expect the currency selection screen to slide in with platform-consistent animations and integrate seamlessly with the app's navigation stack, but the legacy modal implementation breaks animation coherence. This feature migrates the modal to a @react-navigation modal screen following the pattern established in PR #88915.

What is the current gap in the implementation?

PaymentCardCurrencyModal is currently rendered as a legacy react-native-modal-backed component at src/components/AddPaymentCard/PaymentCardChangeCurrencyForm.tsx:118, where it receives isVisible, currencies, currentCurrency, and onCurrencyChange props, and manages visibility state locally via two useState hooks — isCurrencyModalVisible and currency (lines 34–35). The currency local state is consumed directly in the FormProvider's onSubmit callback on line 88 (changeBillingCurrency(currency, values)), which means any migration must also update that submission path to read from Onyx instead of local state. The feature is absent because there is no corresponding dynamic route, screen definition, or modal stack navigator entry that would allow the currency selector to render as a @react-navigation modal screen with platform-correct animations.

The working analog is DynamicExpenseLimitTypeSelectorPage (src/pages/workspace/categories/DynamicExpenseLimitTypeSelectorPage.tsx), which demonstrates the full pattern: a dynamic route with useDynamicBackPath for back navigation, a page component that reads form drafts via Onyx with safe optional-chaining fallbacks, renders a selection list, and persists the selection back to the form draft on selection.

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

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

1. File: src/ROUTES.ts

   • Add a DYNAMIC_PAYMENT_CARD_CURRENCY_SELECTOR entry to the DYNAMIC_ROUTES object with the path /settings/payments/payment-card/currency-selector.

2. File: src/SCREENS.ts

   • Add DYNAMIC_PAYMENT_CARD_CURRENCY_SELECTOR: 'DynamicPaymentCardCurrencySelectorPage' entry.

3. File: src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx

   • Register DynamicPaymentCardCurrencySelectorPage in SettingsModalStackNavigator using createNativeStackNavigator, linking it to the SCREENS.DYNAMIC_PAYMENT_CARD_CURRENCY_SELECTOR screen. Set presentation: 'modal' in the screen options so the navigator applies the correct slide-up animation on iOS and the standard modal transition on Android; this config is what drives the platform-consistent behaviour — no additional per-platform branching is needed at the component level. The same presentation: 'modal' option is used by every other modal screen in SettingsModalStackNavigator and is already tested on iOS, Android, and web by the reference PR (Migrate ExpenseLimitTypeSelectorModal to nav RHP #88915).

4. File: src/libs/Navigation/linkingConfig/config.ts

   • Add a linkingConfig entry for SCREENS.DYNAMIC_PAYMENT_CARD_CURRENCY_SELECTOR mapping to the route path /settings/payments/payment-card/currency-selector.

5. File: src/libs/Navigation/types.ts

   • Add DynamicPaymentCardCurrencySelectorPage navigation type definition to the SettingsModalStackParamList union.

6. File: src/pages/settings/PaymentCard/DynamicPaymentCardCurrencySelectorPage.tsx (new file)

   Create the page component following the analog pattern:

   function DynamicPaymentCardCurrencySelectorPage() {
       const styles = useThemeStyles();
       const {translate} = useLocalize();
       const {isBetaEnabled} = usePermissions();
       const backPath = useDynamicBackPath(
           DYNAMIC_ROUTES.DYNAMIC_PAYMENT_CARD_CURRENCY_SELECTOR.path,
       );
   
       // Safe read: draft may not yet be hydrated
       const [formDraft] = useOnyx(
           ONYXKEYS.FORMS.CHANGE_BILLING_CURRENCY_FORM_DRAFT,
       );
   
       const canUseEurBilling = isBetaEnabled(CONST.BETAS.EUR_BILLING);
       const allCurrencies = Object.keys(
           CONST.PAYMENT_CARD_CURRENCY,
       ) as Array<ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>>;
       const availableCurrencies = allCurrencies.filter(
           (c) => c !== CONST.PAYMENT_CARD_CURRENCY.EUR || canUseEurBilling,
       );
   
       // Fallback chain: draft → USD default
       const currentCurrency =
           formDraft?.currency ?? CONST.PAYMENT_CARD_CURRENCY.USD;
   
       const currencyOptions = availableCurrencies.map((c) => ({
           text: c,
           value: c,
           keyForList: c,
           isSelected: c === currentCurrency,
       }));
   
       const onSelectRow = (item: {value: ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>}) => {
           setDraftValues(ONYXKEYS.FORMS.CHANGE_BILLING_CURRENCY_FORM, {
               currency: item.value,
           });
           Navigation.goBack(backPath);
       };
   
       return (
           <ScreenWrapper testID="DynamicPaymentCardCurrencySelectorPage">
               <HeaderWithBackButton
                   title={translate('common.currency')}
                   onBackButtonPress={() => Navigation.goBack(backPath)}
               />
               <SelectionList
                   data={currencyOptions}
                   ListItem={SingleSelectListItem}
                   onSelectRow={onSelectRow}
                   shouldSingleExecuteRowSelect
                   initiallyFocusedItemKey={currentCurrency}
               />
           </ScreenWrapper>
       );
   }

   Key points:

   • useDynamicBackPath resolves the correct screen to return to after selection, which is required for the dynamic route to navigate back properly within the modal stack.
   • formDraft?.currency uses optional chaining so the component renders safely before Onyx hydration; ?? CONST.PAYMENT_CARD_CURRENCY.USD provides a defined fallback that matches the initialCurrency default in PaymentCardChangeCurrencyForm.
   • setDraftValues writes directly to the CHANGE_BILLING_CURRENCY_FORM draft, which PaymentCardChangeCurrencyForm will read back on submission (see step 7).

7. File: src/components/AddPaymentCard/PaymentCardChangeCurrencyForm.tsx

   • Remove the useState declarations for isCurrencyModalVisible (line 34) and currency (line 35).
   • Remove the showCurrenciesModal, changeCurrency callbacks and all references to isCurrencyModalVisible.
   • Read the current currency from the Onyx form draft instead of local state:

     const [formDraft] = useOnyx(ONYXKEYS.FORMS.CHANGE_BILLING_CURRENCY_FORM_DRAFT);
     const currency = formDraft?.currency ?? initialCurrency ?? CONST.PAYMENT_CARD_CURRENCY.USD;

     This preserves the initialCurrency prop fallback so callers that pass an explicit initial value continue to work correctly, while the navigation screen's setDraftValues call will override it once the user makes a selection.
   • Update the MenuItemWithTopDescription onPress to navigate:

     onPress={() => Navigation.navigate(ROUTES.DYNAMIC_PAYMENT_CARD_CURRENCY_SELECTOR)}

   • The FormProvider's onSubmit callback on line 88 already reads currency:

     onSubmit={(values) => changeBillingCurrency(currency, values)}

     Because currency is now derived from the Onyx draft (see above), this line requires no change — when the user returns from the selector screen the draft value is already written and currency reflects the selection.
   • Remove the <PaymentCardCurrencyModal> JSX block (lines 114–119) and its import.

8. File: src/components/AddPaymentCard/PaymentCardCurrencyModal.tsx

   • This component is no longer used and can be deleted.

What alternative approaches did you explore? (Optional)

N/A

[mukhrr]

Proposal

What is the root cause of that problem?

Not a bug — this is the same react-native-modal → @react-navigation migration tracked under #53493. PaymentCardCurrencyModal is rendered inline on top of the RHP and toggled by local React state, which produces the slide-in/slide-out jank on iOS and Android.

• PaymentCardCurrencyModal.tsx#L47-L79 — uses <Modal type={RIGHT_DOCKED} isVisible={...}>.
• PaymentCardChangeCurrencyForm.tsx#L34-L35 and #L120-L126 — owns the modal visibility plus the selected currency in component state, so the value cannot survive a navigation push and the modal can't become its own screen until the state is lifted.

The form already has an Onyx-backed CHANGE_BILLING_CURRENCY_FORM_DRAFT, so the cleanest place to lift currency to is the form draft itself — no new top-level Onyx key required.

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

Lift currency to the form draft, replace the inline modal with a pushed RHP screen, and have the new screen write the selected currency to the draft before going back.

1. Add CURRENCY to the form's input IDs — src/types/form/ChangeBillingCurrencyForm.ts:

  const INPUT_IDS = {
      SECURITY_CODE: 'securityCode',
+     CURRENCY: 'currency',
  } as const;

  type ChangeBillingCurrencyForm = Form<
      InputID,
      {
          [INPUT_IDS.SECURITY_CODE]: string;
+         [INPUT_IDS.CURRENCY]: ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>;
      }
  >;

2. Replace local state + modal in PaymentCardChangeCurrencyForm.tsx with a draft read + navigation push:

- const [isCurrencyModalVisible, setIsCurrencyModalVisible] = useState(false);
- const [currency, setCurrency] = useState<ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>>(initialCurrency ?? CONST.PAYMENT_CARD_CURRENCY.USD);
+ const [draft] = useOnyx(ONYXKEYS.FORMS.CHANGE_BILLING_CURRENCY_FORM_DRAFT);
+ const currency = draft?.currency ?? initialCurrency ?? CONST.PAYMENT_CARD_CURRENCY.USD;
+
+ // Seed the draft once so the selector screen has a value to read.
+ useEffect(() => {
+     if (draft?.currency) {
+         return;
+     }
+     FormActions.setDraftValues(ONYXKEYS.FORMS.CHANGE_BILLING_CURRENCY_FORM, {currency});
+ }, [draft?.currency, currency]);
...
- <MenuItemWithTopDescription ... onPress={showCurrenciesModal} />
+ <MenuItemWithTopDescription ... onPress={() => Navigation.navigate(ROUTES.SETTINGS_SUBSCRIPTION_CHANGE_BILLING_CURRENCY_SELECTOR)} />
...
- <PaymentCardCurrencyModal
-     isVisible={isCurrencyModalVisible}
-     currencies={availableCurrencies}
-     currentCurrency={currency}
-     onCurrencyChange={changeCurrency}
-     onClose={() => setIsCurrencyModalVisible(false)}
- />

The selectCurrency path (no-security-code variant) keeps working — it just reads currency from the draft instead of local state. The FormProvider submit (onSubmit={(values) => changeBillingCurrency(values.currency, values)}) gets values.currency from the draft automatically.

3. Create the RHP screen — src/pages/settings/Subscription/PaymentCard/PaymentCardCurrencySelectorPage.tsx. It renders the same SelectionList that lived inside the modal, reads availableCurrencies (including the BETAS.EUR_BILLING filter from usePermissions), writes the chosen value with FormActions.setDraftValues(CHANGE_BILLING_CURRENCY_FORM, {currency: option.value}), then Navigation.goBack(). No new Onyx key needed.

4. Wire up navigation:

• Add SETTINGS_SUBSCRIPTION_CHANGE_BILLING_CURRENCY_SELECTOR to src/ROUTES.ts (e.g. settings/subscription/payment-card/change-billing-currency/currency).
• Add SETTINGS.SUBSCRIPTION.CHANGE_BILLING_CURRENCY_SELECTOR to src/SCREENS.ts.
• Register the screen in src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx under the Settings stack and in src/libs/Navigation/linkingConfig/config.ts.
• Add the screen entry to SettingsNavigatorParamList.

5. Delete PaymentCardCurrencyModal.tsx — no other call sites.

What alternative solutions did you explore? (Optional)

• A dedicated top-level Onyx key (e.g. NVP_BILLING_CURRENCY_SELECTION) — rejected. The value only matters for the duration of a single form interaction and naturally cleans up with the form draft on submit/cancel, so adding a new key just to hold transient UI state is overkill.
• Keep the local state and pass currency via route.params — rejected. The setter still lives in the parent, so we'd have to bounce the value back through navigation.setParams or a callback ref, which defeats the point of decoupling the selector into a real screen.
• Swap <Modal> for a Screen in place without lifting state — rejected for the same reason as the UnitSelectorModal migration: the umbrella issue specifically asks for navigator-driven animations and URL-addressable routes.

[aswin-s]

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

[yusufdeveloper2903]

Proposal

What is the root cause of that problem?

PaymentCardCurrencyModal is rendered via <Modal type=RIGHT_DOCKED isVisible …> (react-native-modal under the hood), and its visibility/selection are held in local useState inside PaymentCardChangeCurrencyForm, which causes the cross-platform animation inconsistencies called out by the parent migration tracker (#53493).

App/src/components/AddPaymentCard/PaymentCardCurrencyModal.tsx

Lines 47 to 78 in 1465400

	return (
	<Modal
	type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
	isVisible={isVisible}
	onClose={onClose}
	onModalHide={onClose}
	onBackdropPress={() => {
	onClose();
	Navigation.dismissModal();
	}}
	>
	<ScreenWrapper
	style={styles.pb0}
	includePaddingTop={false}
	includeSafeAreaPaddingBottom={false}
	testID="PaymentCardCurrencyModal"
	>
	<HeaderWithBackButton
	title={translate('common.currency')}
	onBackButtonPress={onClose}
	/>
	<SelectionList
	data={currencyOptions}
	ListItem={SingleSelectListItem}
	onSelectRow={(option) => {
	onCurrencyChange(option.value);
	}}
	initiallyFocusedItemKey={currentCurrency}
	showScrollIndicator
	/>
	</ScreenWrapper>
	</Modal>

App/src/components/AddPaymentCard/PaymentCardChangeCurrencyForm.tsx

Lines 34 to 77 in 1465400

	const [isCurrencyModalVisible, setIsCurrencyModalVisible] = useState(false);
	const [currency, setCurrency] = useState<ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>>(initialCurrency ?? CONST.PAYMENT_CARD_CURRENCY.USD);
	const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.CHANGE_BILLING_CURRENCY_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.CHANGE_BILLING_CURRENCY_FORM> => {
	const errors = getFieldRequiredErrors(values, REQUIRED_FIELDS, translate);
	if (values.securityCode && !isValidSecurityCode(values.securityCode)) {
	errors.securityCode = translate('addPaymentCardPage.error.securityCode');
	}
	return errors;
	};
	const availableCurrencies = useMemo(() => {
	const canUseEurBilling = isBetaEnabled(CONST.BETAS.EUR_BILLING);
	const allCurrencies = Object.keys(CONST.PAYMENT_CARD_CURRENCY) as Array<ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>>;
	// Filter out EUR if user doesn't have EUR billing beta
	return allCurrencies.filter((currencyItem) => {
	if (currencyItem === CONST.PAYMENT_CARD_CURRENCY.EUR && !canUseEurBilling) {
	return false;
	}
	return true;
	});
	}, [isBetaEnabled]);
	const currencyOptions = useMemo(
	() =>
	availableCurrencies.map((currencyItem) => ({
	text: currencyItem,
	value: currencyItem,
	keyForList: currencyItem,
	isSelected: currencyItem === currency,
	})),
	[availableCurrencies, currency],
	);
	const showCurrenciesModal = useCallback(() => {
	setIsCurrencyModalVisible(true);
	}, []);
	const changeCurrency = useCallback((selectedCurrency: ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>) => {
	setCurrency(selectedCurrency);
	setIsCurrencyModalVisible(false);
	}, []);

Two things to note before migrating:

1. The modal only renders in one branch. Only the isSecurityCodeRequired=true branch mounts <PaymentCardCurrencyModal />. The isSecurityCodeRequired=false branch (the add-debit-card flow in pages/settings/PaymentCard/ChangeCurrency) renders an inline <SelectionList> and never opens the modal, so this migration only affects the Settings_Subscription_Change_Billing_Currency entry. (form fork)
2. The form schema already has a CURRENCY field that is currently unused (the form only writes securityCode), so the draft of CHANGE_BILLING_CURRENCY_FORM is the natural place to lift the lifted currency state — no new Onyx key needed.

App/src/types/form/ChangeBillingCurrencyForm.ts

Lines 5 to 18 in 1465400

	const INPUT_IDS = {
	CURRENCY: 'currency',
	SECURITY_CODE: 'securityCode',
	} as const;
	type InputID = ValueOf<typeof INPUT_IDS>;
	type ChangeBillingCurrencyForm = Form<
	InputID,
	{
	[INPUT_IDS.CURRENCY]: ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>;
	[INPUT_IDS.SECURITY_CODE]: string;
	}
	>;

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

I'd follow the exact pattern that landed for ExpenseLimitTypeSelectorModal in #88915 (the reference PR named in the issue): a dynamic RHP route + form draft, no new dedicated Onyx key.

1. Wire a new dynamic route. Single entry screen, so entryScreens is the CHANGE_BILLING_CURRENCY screen.

src/ROUTES.ts (inside DYNAMIC_ROUTES):

+    PAYMENT_CARD_CURRENCY_SELECTOR: {
+        path: 'currency-selector',
+        entryScreens: [SCREENS.SETTINGS.SUBSCRIPTION.CHANGE_BILLING_CURRENCY],
+    },

Then add SCREENS.SETTINGS.SUBSCRIPTION.DYNAMIC_PAYMENT_CARD_CURRENCY_SELECTOR, register the screen in ModalStackNavigators/index.tsx, add the entry in linkingConfig/config.ts under the same group as CHANGE_BILLING_CURRENCY, and add the param-list entry in Navigation/types.ts (mirrors lines 99-105 / 778-784 of #88915). The URL becomes settings/subscription/change-billing-currency/currency-selector.

2. Replace local state + <PaymentCardCurrencyModal> with a navigation call in PaymentCardChangeCurrencyForm (only the secured branch is affected):

-    const [isCurrencyModalVisible, setIsCurrencyModalVisible] = useState(false);
-    const [currency, setCurrency] = useState<ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>>(initialCurrency ?? CONST.PAYMENT_CARD_CURRENCY.USD);
+    const [formDraft] = useOnyx(ONYXKEYS.FORMS.CHANGE_BILLING_CURRENCY_FORM_DRAFT);
+    const currency = formDraft?.currency ?? initialCurrency ?? CONST.PAYMENT_CARD_CURRENCY.USD;
...
-                        onPress={showCurrenciesModal}
+                        onPress={() => Navigation.navigate(createDynamicRoute(DYNAMIC_ROUTES.PAYMENT_CARD_CURRENCY_SELECTOR.path))}
...
-                <PaymentCardCurrencyModal
-                    isVisible={isCurrencyModalVisible}
-                    currencies={availableCurrencies}
-                    currentCurrency={currency}
-                    onCurrencyChange={changeCurrency}
-                    onClose={() => setIsCurrencyModalVisible(false)}
-                />

availableCurrencies (the EUR-beta filter) moves into the new selector page so the page is self-sufficient — the form no longer needs to compute it. changeCurrency/showCurrenciesModal are deleted.

3. Add the new selector page src/pages/settings/Subscription/PaymentCard/ChangeBillingCurrency/DynamicPaymentCardCurrencySelectorPage.tsx. Mirrors DynamicExpenseLimitTypeSelectorPage: reads currency from the same draft, writes the chosen value with setDraftValues, then Navigation.goBack(backPath) using useDynamicBackPath(DYNAMIC_ROUTES.PAYMENT_CARD_CURRENCY_SELECTOR.path). EUR-beta filtering lives here. SingleSelect list with initiallyFocusedItemKey={currentCurrency} to preserve a11y/keyboard focus on the current value.

4. Clear the draft on unmount of ChangeBillingCurrency so a discarded selection doesn't leak into the next visit (matches CategoryFlagAmountsOverPage's cleanup effect):

useEffect(() => () => clearDraftValues(ONYXKEYS.FORMS.CHANGE_BILLING_CURRENCY_FORM), []);

The currency argument to changeBillingCurrency(currency, values) on submit comes from the same formDraft?.currency ?? initialCurrency expression, so the existing submit handler in ChangeBillingCurrency/index.tsx is unchanged.

5. Delete src/components/AddPaymentCard/PaymentCardCurrencyModal.tsx — it has exactly one importer (the form), which we've just rewired.

I verified deep-link behavior: hitting /settings/subscription/change-billing-currency/currency-selector directly will land on the selector under the CHANGE_BILLING_CURRENCY RHP stack thanks to entryScreens, so refresh/back works on web the same way it does for the reference PR.

What alternative solutions did you explore? (Optional)

• A dedicated Onyx key (e.g., paymentCardCurrencySelection) instead of the form draft. Rejected — the form schema already has a CURRENCY input id sitting unused, and reusing the form's draft keeps cleanup centralized (clearDraftValues(CHANGE_BILLING_CURRENCY_FORM) covers both securityCode and currency in one call).
• A static route (SETTINGS_SUBSCRIPTION_CHANGE_BILLING_CURRENCY_SELECTOR with its own screen constant and param list). Functionally equivalent, but the issue explicitly names Migrate ExpenseLimitTypeSelectorModal to nav RHP #88915 as the reference pattern, which is the dynamic-route flavor — staying consistent with that keeps the migration uniform across the parent tracker.
• Keep local state, just swap <Modal> for <ScreenWrapper> inside a sibling <Stack.Screen>. Rejected — it doesn't get the platform-native animation fix the parent issue is asking for, since the screen would still be a custom in-tree overlay rather than a real @react-navigation modal route.

[dilshodmackbook-sketch]

🚫 Duplicated proposal withdrawn by 🤖 ProposalPolice.