[Due for payment 2026-05-29] [$250] Migrate WorkspaceMemberDetailsRoleSelectionModal 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

WorkspaceMemberDetailsRoleSelectionModal 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/pages/workspace/WorkspaceMemberRoleSelectionModal.tsx
• Used by: Only ImportedMembersConfirmationPage.tsx
• On select: onRoleChange(item) → setRole(item.value) local state, consumed by importPolicyMembers(policy, membersWithRole) API on submit
• State to lift: role in ImportedMembersConfirmationPage → spreadsheet import form draft or a dedicated Onyx key, so the navigation page can write it and the parent reads it reactively.

Steps

1. Lift the role state from ImportedMembersConfirmationPage to an Onyx key or form draft.
2. Create a new @react-navigation modal route for role selection.
3. Extract the modal content into a standalone screen component that writes the selected role to Onyx on selection.
4. Replace the <WorkspaceMemberRoleSelectionModal /> usage with a navigation call.
5. Test 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/~022054512594363288628
• Upwork Job ID: 2054512594363288628
• Last Price Increase: 2026-05-13

Issue Owner

Current Issue Owner: @mallenexpensify

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

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

[melvin-bot]

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

[MestreY0d4-Uninter]

Proposal

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

WorkspaceMemberDetailsRoleSelectionModal (in src/pages/workspace/WorkspaceMemberRoleSelectionModal.tsx) is implemented using @components/Modal, which wraps react-native-modal. On iOS and Android this produces animation inconsistencies compared to the rest of the app, which uses @react-navigation for modal presentation. The goal is to replace the inline modal with a proper @react-navigation modal screen so animations are consistent across all platforms.

What is the root cause of that problem?

The component's visibility and selected value are controlled entirely by local useState inside ImportedMembersConfirmationPage (isRoleModalVisible, role). Because @react-navigation screens are standalone route nodes rather than imperatively-toggled overlay components, the local state must first be externalised to Onyx before the modal can be replaced with a navigation call. Without that lift, the new screen has no way to communicate the selected role back to the parent page.

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

1. Add an Onyx key for the role draft (src/ONYXKEYS.ts)
Add a new key — e.g. FORMS.WORKSPACE_MEMBER_IMPORT_ROLE_SELECTION_DRAFT — to hold the selected role value. This is the bridge between the new screen and the parent page.

2. Add route and screen constants (src/ROUTES.ts, src/SCREENS.ts)
Add WORKSPACE_MEMBER_IMPORT_ROLE_SELECTION (with policyID param for Onyx key scoping) following the pattern used by other recently-migrated modals (ref PR #88915).

3. Create WorkspaceMemberRoleSelectionPage.tsx (src/pages/workspace/members/)
A standalone screen component that:

• Renders the role SelectionList currently inside WorkspaceMemberRoleSelectionModal
• Uses HeaderWithBackButton for the header (no Modal wrapper, no isVisible prop)
• On item selection, writes the chosen role value to the Onyx draft key then calls Navigation.goBack()

4. Register the screen in the navigator
Add the new screen to the relevant navigator (SettingsNavigator or equivalent) with presentation: Presentation.TRANSPARENT_MODAL on web and default modal options on native, mirroring the platform-split attachmentModalScreenOptions pattern.

5. Update ImportedMembersConfirmationPage.tsx

• Remove the import of WorkspaceMemberDetailsRoleSelectionModal and the isRoleModalVisible / role useState calls.
• Replace with useOnyx(ONYXKEYS.FORMS.WORKSPACE_MEMBER_IMPORT_ROLE_SELECTION_DRAFT) to reactively read the selected role.
• Replace the <WorkspaceMemberDetailsRoleSelectionModal> JSX with a pressable/button that calls Navigation.navigate(ROUTES.WORKSPACE_MEMBER_IMPORT_ROLE_SELECTION.getRoute(policyID)).
• On submit, pass the Onyx-stored role to importPolicyMembers and clear the draft key.

6. Delete WorkspaceMemberRoleSelectionModal.tsx
Once ImportedMembersConfirmationPage no longer references it, remove the file. Move ListItemType to a shared types file or inline it in the new page.

What alternative solutions did you explore? (Optional)

Pass role via navigation params instead of Onyx: The new screen could call navigation.navigate back to the parent with the selected role as a param. This avoids a new Onyx key but is fragile — React Navigation does not guarantee param delivery on goBack, and it would require the parent to watch route.params with a useEffect. Onyx is the established pattern for this case in the codebase (see the Group 2 migration approach in issue #53493) and is more resilient to navigation stack edge-cases.

Reuse an existing form draft key: If the spreadsheet import flow already has a form draft Onyx key, the role field could be added to it rather than introducing a new key. This depends on whether such a key exists and whether it has the right lifetime; a dedicated lightweight key is safer and easier to clean up.

[aswin-s]

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

Currently, the WorkspaceMemberDetailsRoleSelectionModal is implemented using react-native-modal, which causes animation inconsistencies on native platforms. Users expect role selection to use the native @react-navigation modal system for consistent, platform-native animations when importing workspace members and selecting their role.

What is the current gap in the implementation?

The role selection flow in ImportedMembersConfirmationPage (lines 40–231) uses local useState for role state and renders an inline react-native-modal-based modal component. The migration pattern (Group 2 of #53493, as shown in PR #88915) requires replacing this with a dedicated @react-navigation modal screen. The insertion point is the role menu item's onPress handler and the inline modal render block in ImportedMembersConfirmationPage, which currently manage role selection locally rather than delegating to a dedicated modal page.

Reference pattern from the working analog:

App/src/pages/workspace/members/WorkspaceMemberDetailsRolePage.tsx

Lines 1 to 50 in af304c0

	import React from 'react';
	import type {OnyxEntry} from 'react-native-onyx';
	import ScreenWrapper from '@components/ScreenWrapper';
	import WorkspaceMemberRoleList from '@components/WorkspaceMemberRoleList';
	import type {ListItemType} from '@components/WorkspaceMemberRoleList';
	import {updateWorkspaceMembersRole} from '@libs/actions/Policy/Member';
	import Navigation from '@libs/Navigation/Navigation';
	import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
	import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
	import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
	import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading';
	import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading';
	import CONST from '@src/CONST';
	import ROUTES from '@src/ROUTES';
	import type SCREENS from '@src/SCREENS';
	import type {PersonalDetailsList} from '@src/types/onyx';
	type WorkspaceMemberDetailsRolePageProps = Omit<WithPolicyAndFullscreenLoadingProps, 'route'> &
	PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.MEMBER_DETAILS_ROLE> & {
	/** Personal details of all users */
	personalDetails: OnyxEntry<PersonalDetailsList>;
	};
	function WorkspaceMemberDetailsRolePage({policy, personalDetails, route}: WorkspaceMemberDetailsRolePageProps) {
	const accountID = Number(route.params.accountID);
	const policyID = route.params.policyID;
	const memberLogin = personalDetails?.[accountID]?.login ?? '';
	const member = policy?.employeeList?.[memberLogin];
	const changeRole = ({value}: ListItemType) => {
	if (value === member?.role) {
	return;
	}
	updateWorkspaceMembersRole(policy, [memberLogin], [accountID], value);
	Navigation.goBack(ROUTES.WORKSPACE_MEMBER_DETAILS.getRoute(policyID, accountID));
	};
	return (
	<AccessOrNotFoundWrapper
	policyID={policyID}
	accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
	>
	<ScreenWrapper
	testID="WorkspaceMemberDetailsRolePage"
	enableEdgeToEdgeBottomSafeAreaPadding
	>
	<WorkspaceMemberRoleList
	role={member?.role}
	policy={policy}
	onSelectRole={changeRole}

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

1. File: src/SCREENS.ts — Add new screen identifier MEMBERS_IMPORTED_ROLE_SELECTION: 'Members_Imported_Role_Selection' to the WORKSPACE screen enum.

2. File: src/ROUTES.ts — Add new route definition WORKSPACE_MEMBERS_IMPORTED_ROLE_SELECTION with path workspace/:policyID/members/import/role and getRoute function accepting policyID.

3. File: src/libs/Navigation/types.ts — Add ParamListBase entry for SCREENS.WORKSPACE.MEMBERS_IMPORTED_ROLE_SELECTION with policyID: string parameter.

4. File: src/libs/Navigation/linkingConfig/config.ts — Register the new screen in deep-linking config, mapping SCREENS.WORKSPACE.MEMBERS_IMPORTED_ROLE_SELECTION to its route path.

5. File: src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx — Lazy-load the new page using require() for SCREENS.WORKSPACE.MEMBERS_IMPORTED_ROLE_SELECTION.

6. File: src/pages/workspace/members/ImportedMembersRoleSelectionPage.tsx (new file) — Create dedicated modal screen page that reads role from WORKSPACE_IMPORTED_MEMBERS_ROLE_FORM_DRAFT Onyx key and renders a SelectionList with admin/auditor/user role options. On selection, call setDraftValues() then navigate back. To guard against Onyx hydration races on cold start, read the draft value with a fallback default (CONST.POLICY.ROLE.USER) so the list always renders a valid initial selection even before Onyx has fully initialized. Because setDraftValues is synchronous from the caller's perspective and navigation back is triggered immediately after, concurrent tap events must be suppressed: disable the list or set a local isSubmitting ref after the first selection to prevent duplicate writes before the screen unmounts.

7. File: src/ONYXKEYS.ts — Add two new Onyx keys: WORKSPACE_IMPORTED_MEMBERS_ROLE_FORM and WORKSPACE_IMPORTED_MEMBERS_ROLE_FORM_DRAFT for persisting role selection state across the modal.

8. File: src/types/form/WorkspaceImportedMembersRoleForm.ts (new file) — Define WorkspaceImportedMembersRoleForm type with INPUT_IDS.ROLE field storing a ValueOf<typeof CONST.POLICY.ROLE>.

9. File: src/pages/workspace/members/ImportedMembersConfirmationPage.tsx — Apply the following changes:

   • Replace local useState for role and isRoleSelectionModalVisible (lines 44–45) with an Onyx read of WORKSPACE_IMPORTED_MEMBERS_ROLE_FORM_DRAFT, using CONST.POLICY.ROLE.USER as the fallback when the key is undefined or not yet hydrated.

   • Change the role menu item's onPress to guard against an undefined policyID before navigating:

     onPress: () => {
         if (!policyID) {
             return;
         }
         Navigation.navigate(ROUTES.WORKSPACE_MEMBERS_IMPORTED_ROLE_SELECTION.getRoute(policyID));
     },

   • Add a useEffect that clears the draft form on unmount using Onyx.set(ONYXKEYS.WORKSPACE_IMPORTED_MEMBERS_ROLE_FORM_DRAFT, null), so stale role selections do not persist across separate import sessions:

     useEffect(() => {
         return () => {
             Onyx.set(ONYXKEYS.WORKSPACE_IMPORTED_MEMBERS_ROLE_FORM_DRAFT, null);
         };
     }, []);

   • Remove the inline <WorkspaceMemberDetailsRoleSelectionModal /> JSX block (lines 223–228), its import statement, and unused state/type declarations.

10. File: src/pages/workspace/WorkspaceMemberRoleSelectionModal.tsx — Remove (file deletion); functionality replaced by new ImportedMembersRoleSelectionPage.

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).

[trasnake87]

Proposal

WorkspaceMemberDetailsRoleSelectionModal (rendered inside ImportedMembersConfirmationPage during the spreadsheet member-import flow) is built on react-native-modal, which produces animation inconsistencies on iOS/Android compared to other RHP screens. Migrate it to a @react-navigation modal screen following the dynamic-route pattern landed in PR #88915, and reuse the existing WorkspaceMemberRoleList component already used by DynamicWorkspaceInviteMessageRolePage.tsx.

Root cause

The role picker is implemented as a Modal of type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED} driven by local useState in the parent. The current code in src/pages/workspace/WorkspaceMemberRoleSelectionModal.tsx:35-69:

function WorkspaceMemberDetailsRoleSelectionModal({isVisible, items, onRoleChange, onClose}: WorkspaceMemberDetailsPageProps) {
    return (
        <Modal
            type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
            isVisible={isVisible}
            onClose={() => onClose?.()}
            onModalHide={onClose}
            ...

and the parent at src/pages/workspace/members/ImportedMembersConfirmationPage.tsx:44-45,111-114,223-228:

const [role, setRole] = useState<ValueOf<typeof CONST.POLICY.ROLE>>(CONST.POLICY.ROLE.USER);
const [isRoleSelectionModalVisible, setIsRoleSelectionModalVisible] = useState(false);
...
const onRoleChange = (item: ListItemType) => {
    setRole(item.value);
    setIsRoleSelectionModalVisible(false);
};
...
<WorkspaceMemberDetailsRoleSelectionModal
    isVisible={isRoleSelectionModalVisible}
    items={roleItems}
    onRoleChange={onRoleChange}
    onClose={() => setIsRoleSelectionModalVisible(false)}
/>

This is a Group 2 case from #53493: the selected role lives only in component state, so it cannot be lifted into a separate @react-navigation screen without persistence. Animation inconsistency is the user-facing symptom; the structural blocker is that role is local useState.

Proposed fix

This is a Group 2 migration — lift role to Onyx, then route the selector through the dynamic-route pattern. Six small edits plus one new screen file, mirroring PR #88915.

1 — Add an Onyx draft key for the imported-members role. IMPORTED_SPREADSHEET is a singleton (not policyID-scoped), so the role draft is also a singleton. In src/ONYXKEYS.ts, next to IMPORTED_SPREADSHEET_MEMBER_DATA at line 580:

// src/ONYXKEYS.ts
/** Stores the role selected for members being imported from a spreadsheet */
IMPORTED_SPREADSHEET_MEMBER_ROLE: 'importedSpreadsheetMemberRole',

And in the value map (~line 1523):

[ONYXKEYS.IMPORTED_SPREADSHEET_MEMBER_ROLE]: ValueOf<typeof CONST.POLICY.ROLE>;

2 — Add setter/clearer in src/libs/actions/Policy/Member.ts. Extend the existing clearImportedSpreadsheetMemberData so unmount cleanup keeps working, plus a setter the new screen will call:

// src/libs/actions/Policy/Member.ts
function setImportedSpreadsheetMemberRole(role: ValueOf<typeof CONST.POLICY.ROLE>) {
    Onyx.set(ONYXKEYS.IMPORTED_SPREADSHEET_MEMBER_ROLE, role);
}

function clearImportedSpreadsheetMemberData() {
    Onyx.set(ONYXKEYS.IMPORTED_SPREADSHEET_MEMBER_DATA, null);
    Onyx.set(ONYXKEYS.IMPORTED_SPREADSHEET_MEMBER_ROLE, null);
}

Export setImportedSpreadsheetMemberRole alongside the existing clearImportedSpreadsheetMemberData / importPolicyMembers exports.

3 — Register the SCREEN, ROUTE, navigation type, modal stack entry, and linking config. Mirroring PR #88915 exactly:

// src/SCREENS.ts (inside WORKSPACE block, ~line 725)
DYNAMIC_IMPORTED_MEMBERS_ROLE: 'Dynamic_Imported_Members_Role',

// src/ROUTES.ts (inside DYNAMIC_ROUTES, ~line 105)
IMPORTED_MEMBERS_ROLE: {
    path: 'imported-members-role',
    entryScreens: [SCREENS.WORKSPACE.MEMBERS_IMPORTED_CONFIRMATION],
},

// src/libs/Navigation/types.ts (inside SettingsNavigatorParamList)
[SCREENS.WORKSPACE.DYNAMIC_IMPORTED_MEMBERS_ROLE]: {
    policyID: string;
};

// src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
[SCREENS.WORKSPACE.DYNAMIC_IMPORTED_MEMBERS_ROLE]: () =>
    require<ReactComponentModule>('../../../../pages/workspace/ImportedMembersRoleSelectionPage').default,

// src/libs/Navigation/linkingConfig/config.ts (inside the workspace block)
[SCREENS.WORKSPACE.DYNAMIC_IMPORTED_MEMBERS_ROLE]: DYNAMIC_ROUTES.IMPORTED_MEMBERS_ROLE.path,

// src/libs/Navigation/linkingConfig/RELATIONS/WORKSPACE_TO_RHP.ts (under SCREENS.WORKSPACE.MEMBERS, after line 26)
SCREENS.WORKSPACE.DYNAMIC_IMPORTED_MEMBERS_ROLE,

4 — Create the new screen file. This reuses the existing WorkspaceMemberRoleList component (which DynamicWorkspaceInviteMessageRolePage.tsx:40-51 already uses), so we do not duplicate the radio list:

// src/pages/workspace/ImportedMembersRoleSelectionPage.tsx
import React from 'react';
import ScreenWrapper from '@components/ScreenWrapper';
import WorkspaceMemberRoleList from '@components/WorkspaceMemberRoleList';
import useDynamicBackPath from '@hooks/useDynamicBackPath';
import useOnyx from '@hooks/useOnyx';
import usePolicy from '@hooks/usePolicy';
import {setImportedSpreadsheetMemberRole} from '@libs/actions/Policy/Member';
import Navigation from '@libs/Navigation/Navigation';
import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import {DYNAMIC_ROUTES} from '@src/ROUTES';
import type SCREENS from '@src/SCREENS';

type Props = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.DYNAMIC_IMPORTED_MEMBERS_ROLE>;

function ImportedMembersRoleSelectionPage({route: {params: {policyID}}}: Props) {
    const policy = usePolicy(policyID);
    const [role = CONST.POLICY.ROLE.USER] = useOnyx(ONYXKEYS.IMPORTED_SPREADSHEET_MEMBER_ROLE);
    const backPath = useDynamicBackPath(DYNAMIC_ROUTES.IMPORTED_MEMBERS_ROLE.path);

    return (
        <AccessOrNotFoundWrapper policyID={policyID} accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN]}>
            <ScreenWrapper testID="ImportedMembersRoleSelectionPage" enableEdgeToEdgeBottomSafeAreaPadding shouldEnableMaxHeight>
                <WorkspaceMemberRoleList
                    role={role}
                    policy={policy}
                    onSelectRole={({value}) => {
                        setImportedSpreadsheetMemberRole(value);
                        Navigation.setNavigationActionToMicrotaskQueue(() => Navigation.goBack(backPath));
                    }}
                    navigateBackTo={backPath}
                />
            </ScreenWrapper>
        </AccessOrNotFoundWrapper>
    );
}

export default ImportedMembersRoleSelectionPage;

5 — Strip the modal from ImportedMembersConfirmationPage.tsx and read role reactively. Replace the local useState, the onRoleChange/setIsRoleSelectionModalVisible handlers, the modal-driven roleItems memo, and the <WorkspaceMemberDetailsRoleSelectionModal /> JSX at lines 44-45, 111-114, 116-145, 187-189, and 223-228 with:

// src/pages/workspace/members/ImportedMembersConfirmationPage.tsx
const [role = CONST.POLICY.ROLE.USER] = useOnyx(ONYXKEYS.IMPORTED_SPREADSHEET_MEMBER_ROLE);
// ...delete useState<role>, useState<isRoleSelectionModalVisible>, roleItems useMemo, onRoleChange
// ...inside MenuItemWithTopDescription:
onPress={() => Navigation.navigate(createDynamicRoute(DYNAMIC_ROUTES.IMPORTED_MEMBERS_ROLE.path))}
// ...delete the entire <WorkspaceMemberDetailsRoleSelectionModal .../> block

importMembers at line 99 already reads role in its dependency list, so once role comes from useOnyx it will re-derive correctly. The existing unmount cleanup at lines 57-61 (clearImportedSpreadsheetMemberData) now also clears the new role key via the change in step 2, so re-entering the import flow starts fresh.

6 — Delete src/pages/workspace/WorkspaceMemberRoleSelectionModal.tsx. It has exactly one consumer (ImportedMembersConfirmationPage), which has been migrated above. Remove the file and its imports.

Why this approach

This is a 1:1 application of the dynamic-route pattern from the reference PR #88915 (ExpenseLimitTypeSelectorModal → DynamicExpenseLimitTypeSelectorPage), and it reuses WorkspaceMemberRoleList exactly as DynamicWorkspaceInviteMessageRolePage.tsx:40-51 does for the workspace-invite flow — same useDynamicBackPath + Navigation.setNavigationActionToMicrotaskQueue ordering precedent. A dynamic route is correct here (rather than a static screen) because ImportedMembersConfirmationPage is the only entry point, the picker has no URL-meaningful params of its own, and dynamic routing keeps the original workspaces/:policyID/members/imported/confirmation URL on the back stack. We considered (a) lifting state into the existing WorkspaceCategoryFlagAmountsOverForm-style form draft — rejected because there is no existing form for this flow and adding one purely to hold a single enum is heavier than a flat Onyx key; and (b) reusing WORKSPACE_INVITE_ROLE_DRAFT — rejected because that key is collection-scoped per policyID and is owned by the invite-message flow, which would couple two independent flows and risk stale cross-contamination.

[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.