[Due for payment 2025-09-02] [$250] The backdrop for "Take us for a test drive" modal doesn't cover all the screen when resizing viewport

[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.92-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: @dukenv0307
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Login with the new account
2. Complete onboarding flow
3. When the test-drive modal is opened, resize the window
4. Obverse the modal back drop

Expected Result:

The backdrop for the "Take us for a test drive" modal should cover the entire viewport, regardless of screen size or window resize.

Actual Result:

When resizing the viewport, the backdrop does not extend to cover the full screen, leaving uncovered areas visible behind the modal.

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

bug.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021956437479147350982
• Upwork Job ID: 1956437479147350982
• Last Price Increase: 2025-08-15

Issue Owner

Current Issue Owner: @OfstadC

[melvin-bot]

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

[m-natarajan]

Proposal by @dukenv0307

Proposal

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

the backdrop doesn't cover all the screen when resizing viewport

What is the root cause of that problem?

We are using ReanimatedModal

App/src/components/FeatureTrainingModal.tsx

Line 407 in 54e5acb

shouldUseReanimatedModal

And in ReanimatedModal set the backdrop with and height here

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

Lines 121 to 125 in 54e5acb

	const backdropStyle: ViewStyle = useMemo(() => {
	const {width, height} = Dimensions.get('screen');
	return {width, height, backgroundColor: backdropColor};
	}, [backdropColor]);

The problem is that the backdrop is using Dimensions.get('screen') which gets the physical screen dimensions, but when the website is scaled, the actual viewport size is different.

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

We should use the useWindowDimensions hook that provides the current window dimensions

    const {windowWidth, windowHeight} = useWindowDimensions();
    ...
    const backdropStyle: ViewStyle = useMemo(() => {
        return {width: windowWidth, height: windowHeight, backgroundColor: backdropColor};
    }, [windowWidth, windowHeight, backdropColor]);

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]

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

[melvin-bot]

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

[s77rt]

@dukenv0307 Thanks for the proposal. RCA and solution look good to me. Please comment so you can be assigned.

🎀 👀 🎀 C+ reviewed
Link to proposal