[Due for payment 2025-09-02] [HOLD https://github.com/Expensify/App/issues/69171] [$250] Delegate Confirmation Modal Lacks Exit Animation

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.1.77-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @Eskalifer1
Slack conversation (hyperlinked to channel name): #Open source

Action Performed:

1. Navigate to the Security page
2. Click on "Add Copilot"
3. Proceed through the flow until you receive the magic code
4. Attempt to close the modal window by clicking outside the modal

Expected Result:

The modal should close smoothly, consistent with the standard animation used across the platform.

Actual Result:

The modal window has no animation and disappears only after another page is rendered

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

2025-07-07.09.42.11.mov

Recording.1385.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021942705427324771030
• Upwork Job ID: 1942705427324771030
• Last Price Increase: 2025-08-12

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

Triggered auto assignment to @mallenexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[Eskalifer1]

Proposal

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

The Delegate confirm modal window does not have a disappearing animation

What is the root cause of that problem?

The problem is in the use of this hook:

App/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx

Line 37 in f660f73

const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useCustomHistoryParam();

Before leaving the page, we change the display state of the modal window to false:

App/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx

Line 45 in f660f73

useBeforeRemove(() => setIsValidateCodeActionModalVisible(false));

But the useCustomHistoryParam hook

App/src/libs/Navigation/AppNavigator/customHistory/useCustomHistoryParam.ts

Lines 16 to 40 in f660f73

	function useCustomHistoryParam() {
	const navigation = useNavigation();
	const route = useRoute();
	const historyParamName = SCREEN_TO_HISTORY_PARAM[route.name as Screen];
	if (!historyParamName || typeof historyParamName !== 'string') {
	throw new Error(`Screen ${route.name} does not have a history param. You can use this hook only on the screens that have one defined in SCREEN_TO_HISTORY_PARAM.`);
	}
	const historyParam = route.params && (route.params as Record<string, unknown>)[historyParamName] ? ((route.params as Record<string, unknown>)[historyParamName] as boolean) : false;
	if (typeof historyParam !== 'boolean') {
	throw new Error(`The history param ${historyParamName} is not a boolean. Make sure that you used getHistoryParamParse for this screen in linkingConfig/config.ts`);
	}
	return [
	historyParam,
	(value: boolean) => {
	navigation.dispatch({
	type: CONST.NAVIGATION.ACTION_TYPE.SET_HISTORY_PARAM,
	payload: {key: historyParamName, value},
	});
	},
	] as const;
	}

is not reactive, so navigation.dispatch will not trigger the update of the component, which is why the state will not be updated, which is why the modal window will not close

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

We need to make this hook reactive, for this it must have a state, I propose to add a state and its recovery to the hook

This is how it will look like:

function useCustomHistoryParam() {
  const navigation = useNavigation();
  const route = useRoute();
  const historyParamName = SCREEN_TO_HISTORY_PARAM[route.name as Screen];

  const getParamValue = useCallback(() => {
    const paramValue =
      route.params && historyParamName && (route.params as Record<string, unknown>)[historyParamName]
        ? ((route.params as Record<string, unknown>)[historyParamName] as boolean)
        : false;

    if (typeof paramValue !== 'boolean') {
      throw new Error(`The history param ${historyParamName} is not a boolean. Make sure that you used getHistoryParamParse for this screen in linkingConfig/config.ts`);
    }

    return paramValue;
  }, [route.params, historyParamName]);

  const [historyParam, setHistoryParamState] = useState(getParamValue);

  if (!historyParamName || typeof historyParamName !== 'string') {
    throw new Error(`Screen ${route.name} does not have a history param. You can use this hook only on the screens that have one defined in SCREEN_TO_HISTORY_PARAM.`);
  }

  useEffect(() => {
    setHistoryParamState(getParamValue());
  }, [route.params, historyParamName]);

  const setHistoryParam = (value: boolean) => {
    navigation.dispatch({
      type: CONST.NAVIGATION.ACTION_TYPE.SET_HISTORY_PARAM,
      payload: {key: historyParamName, value},
    });
    setHistoryParamState(value);
  };

  return [historyParam, setHistoryParam] as const;
}

PS: Minor changes and other things can be discussed during the PR stage

I also propose to create a hook that we will use for modal windows, it will be a wrapper on top of the usual useState, but it will also have onBeforeRemove(() => setIsModalVisible(false))

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

Add a local state for the page

App/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx

Line 28 in f660f73

function ConfirmDelegatePage({route}: ConfirmDelegatePageProps) {

Which would be responsible for displaying the modal window, but would also leave the useCustomHistoryParam hook for the logic
Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

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

[melvin-bot]

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

[mallenexpensify]

@fedirjh 👀 on @Eskalifer1 's proposal above plz. Please review the Slack thread too please, inc.

lets make sure to ask to fix All the modals and see who to ensure no single modal like this is omitted in future

[truph01]

Proposal

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

• The modal window currently has no exit animation and only disappears after the next page finishes rendering.

What is the root cause of that problem?

• When clicking outside the modal, it triggers the following logic:
  

  App/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx

  Line 45 in d40d0af

  useBeforeRemove(() => setIsValidateCodeActionModalVisible(false));

This attempts to set the modal's visibility to false. However, unlike other pages where the visibility state is updated immediately (via a simple useState setter), in this case, setting the modal visibility triggers a navigation action:

App/src/libs/Navigation/AppNavigator/customHistory/useCustomHistoryParam.ts

Lines 33 to 38 in d40d0af

	(value: boolean) => {
	navigation.dispatch({
	type: CONST.NAVIGATION.ACTION_TYPE.SET_HISTORY_PARAM,
	payload: {key: historyParamName, value},
	});
	},

This navigation introduces a delay before the modal’s state reflects the updated value. Specifically, the isValidateCodeActionModalVisible value here:

App/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx

Line 37 in d40d0af

const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useCustomHistoryParam();

requires time to update.

• As a result, when the right-hand panel (RHP) is closed, the modal remains visible until the navigation completes. It then disappears abruptly without an exit animation.

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

We can modify the component as follows to immediately hide the modal when the beforeRemove event is triggered.

At:

App/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx

Line 45 in d40d0af

useBeforeRemove(() => setIsValidateCodeActionModalVisible(false));

Update to:

const [isRemoving, setIsRemoving] = useState(false);
useBeforeRemove(() => {
    setIsRemoving(true);
    setIsValidateCodeActionModalVisible(false);
});

Then, at:

App/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx

Line 99 in d40d0af

isValidateCodeActionModalVisible={isValidateCodeActionModalVisible}

Update the modal’s visibility check:

isValidateCodeActionModalVisible={isValidateCodeActionModalVisible && !isRemoving}

This approach ensures the modal is hidden immediately during the beforeRemove phase, allowing a smoother exit experience without abrupt disappearance.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

• None.

What alternative solutions did you explore? (Optional)

[melvin-bot]

@fedirjh Eep! 4 days overdue now. Issues have feelings too...