Dev: In some modals that use the new useConfirmModal hook, the closing animation is missing after pressing submit button For example Dismiss receipt error modal

[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:
Reproducible in staging?: Needs Reproduction (Unable to reproduce)
Reproducible in production?: Needs Reproduction
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @ZhenjaHorbach
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Open any report (chat or expense report)
2. Look for a report action (message/comment) that has a red error indicator
3. The error should be related to receipt processing
4. Click on the error indicator or the dismiss/error option

Expected Result:

Closing animation for the confirm modal

Actual Result:

No closing animation

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

Screenshots/Videos

532420327-eebea4ba-29d6-4f26-91db-acc67a55a2ae.mov

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @bfitzexpensify (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.

[MobileMage]

Proposal

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

Modals using the useConfirmModal hook are missing their closing animation when the submit/confirm button is pressed. The modal disappears instantly rather than animating out.

What is the root cause of that problem?

The issue is in ReanimatedModal/index.tsx. When the modal's isVisible prop changes to false, the component immediately sets isVisibleState = false at the start of the closing transition:

App/src/components/Modal/ReanimatedModal/index.tsx

Lines 121 to 129 in 631dd51

	} else if (!isVisible && isContainerOpen && !isTransitioning) {
	// eslint-disable-next-line @typescript-eslint/no-deprecated
	handleRef.current = InteractionManager.createInteractionHandle();
	onModalWillHide();
	blurActiveElement();
	setIsVisibleState(false);
	setIsTransitioning(true);
	}

However, the Container component (which handles the exit animation via Reanimated's exiting prop) is conditionally rendered based on isVisibleState:

App/src/components/Modal/ReanimatedModal/index.tsx

Lines 233 to 240 in 631dd51

	{avoidKeyboard ? (
	<KeyboardAvoidingView
	behavior="padding"
	pointerEvents="box-none"
	style={[style, {margin: 0}]}
	>
	{isVisibleState && containerView}
	</KeyboardAvoidingView>

App/src/components/Modal/ReanimatedModal/index.tsx

Lines 242 to 250 in 631dd51

	<FocusTrapForModal
	active={modalVisibility}
	initialFocus={initialFocus}
	shouldReturnFocus={!shouldEnableNewFocusManagement}
	shouldPreventScroll={shouldPreventScrollOnFocus}
	>
	{isVisibleState && containerView}
	</FocusTrapForModal>
	)}

Since isVisibleState is set to false immediately when the close transition begins, the Container component unmounts instantly before its exiting animation can play. The isTransitioning flag is set to true at the same time, but it's not used in the render condition, so the Container is removed regardless.

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

Keep the Container mounted while the transition is in progress by including isTransitioning in the render condition:

- {isVisibleState && containerView}
+ {(isVisibleState || isTransitioning) && containerView}

This change should be made at both line 239 (inside KeyboardAvoidingView) and line 248 (inside FocusTrapForModal).

With this fix, when closing:

1. isVisible prop becomes false
2. isVisibleState = false and isTransitioning = true are set
3. Container stays mounted because isTransitioning is true
4. Reanimated's exiting animation plays on the Container
5. onCloseCallBack is called when animation completes, setting isTransitioning = false
6. Container finally unmounts

What alternative solutions did you explore? (Optional)

Could delay setting isVisibleState = false until after animation completes, but this would require restructuring the state management and could introduce timing issues. The proposed fix is simpler since it uses the existing isTransitioning state that was designed for this purpose.

[ZhenjaHorbach]

This issue is not open for proposals
Sorry

[waterim]

Will raise a PR soon