[Due for payment 2025-07-04] [$75] Android mWeb - Gap is shown under the camera view on the Scan page

[VickyStash]

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: v9.1.64-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: No
Email or phone of affected tester (no customers): viktoryia.kliushun@callstack.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @VickyStash
Slack conversation (hyperlinked to channel name): https://expensify/archives/C01GTK53T8Q/p1749711953735449

Action Performed:

Issue is reproduced in the browser on Pixel 8 Pro

1. Open the app
2. Start the create expense flow
3. Go to Scan tab and provide the camera permission

Expected Result:

There is no gap below the camera view

Actual Result:

There is a gap below the camera view

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

N/A

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021935143496098108319
• Upwork Job ID: 1935143496098108319
• Last Price Increase: 2025-06-18
• Automatic offers:
• dominictb | Reviewer | 107727745

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.

[nabi-ebrahimi]

Proposal

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

Android mWeb - Gap is shown under the camera view on the Scan page

What is the root cause of that problem?

The root cause is that the parent <View> component containing the Webcam does not have a style that allows it to expand and fill the available vertical space. Specifically, the absence of the flex: 1 style (i.e., styles.flex1) prevents the component from stretching properly within its container, leading to the gap.

App/src/pages/iou/request/step/IOURequestStepScan/NavigationAwareCamera/WebCamera.tsx

Lines 22 to 29 in 5c2c2c7

	<View style={isInitialized ? styles.dFlex : styles.dNone}>
	<Webcam
	// eslint-disable-next-line react/jsx-props-no-spreading
	{...props}
	onResize={() => setIsInitialized(true)}
	ref={ref as unknown as ForwardedRef<Webcam>}
	/>
	</View>

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

We should ensure that the <View> wrapping the Webcam has styles.flex1 applied when the component is initialized. This will allow it to occupy the available space correctly and eliminate the gap.

The updated code:

<View style={isInitialized ? [styles.dFlex, styles.flex1] : styles.dNone}>
    <Webcam
        {...props}
        onResize={() => setIsInitialized(true)}
        ref={ref as unknown as ForwardedRef<Webcam>}
    />
</View>

This change ensures that the layout behaves as expected once the webcam is initialized.

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)

[nabi-ebrahimi]

before

after

[dubielzyk-expensify]

cc @Expensify/design for visibility

[melvin-bot]

@mallenexpensify Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

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

[melvin-bot]

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