[$250] Settings - Blank white space is shown below the composer when sharing logs

[lanitochka17]

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.2.47-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://test-management.browserstack.com/projects/2219752/test-runs/TR-1875/folder/13176687/41236685/1001231639
Email or phone of affected tester (no customers): Slottwo1@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Launch app
2. Tap settings - Troubleshoot
3. Toggle on Record troubleshoot data
4. Tap view debug console
5. Tap share log
6. Select a recipient

Expected Result:

Blank white space must not be shown below the composer when sharing logs

Actual Result:

Blank white space is shown below the composer when sharing logs
Redminote 10s/Android 13
SG A50/Android 11

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

Bug6999113_1762744664864.Screenrecorder-2025-11-10-08-35-36-403.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021990922967155377750
• Upwork Job ID: 1990922967155377750
• Last Price Increase: 2025-11-25

Issue Owner

Current Issue Owner: @youssef-lr

[melvin-bot]

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

[abbasifaizan70]

Proposal

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

When sharing logs on Android devices, blank white space appears below the composer after selecting a recipient. This occurs on Android 11 and Android 13 devices (specifically tested on Redmi Note 10s and Samsung Galaxy A50).

What is the root cause of that problem?

The ReportScreen component uses ScreenWrapper without explicitly setting the includeSafeAreaPaddingBottom prop. By default, ScreenWrapper sets includeSafeAreaPaddingBottom={true}, which applies safe area padding at the bottom of the screen.

On Android devices, this safe area padding creates extra space below the composer (which is rendered in the ReportFooter component). Since the composer is already positioned at the bottom of the screen and doesn't need additional safe area padding, this default behavior causes the unwanted blank space to appear below it.

The issue is specific to Android because the safe area padding behavior differs between platforms, and Android devices with navigation gestures or system UI elements can have significant bottom safe area insets that create noticeable blank space.

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

Set includeSafeAreaPaddingBottom={false} on the ScreenWrapper component in ReportScreen.tsx. This will prevent the safe area padding from being applied at the bottom of the screen, eliminating the blank white space below the composer.

The composer in ReportFooter already handles its own positioning and doesn't require the additional safe area padding from the ScreenWrapper. By disabling this padding, the composer will sit flush at the bottom of the screen without any unwanted blank space below it.

Code Change:

In src/pages/home/ReportScreen.tsx, add the includeSafeAreaPaddingBottom={false} prop to the ScreenWrapper component:

<ScreenWrapper
    navigation={navigation}
    style={screenWrapperStyle}
    shouldEnableKeyboardAvoidingView={isTopMostReportId || isInNarrowPaneModal}
    includeSafeAreaPaddingBottom={false}
    testID={`report-screen-${reportID}`}
>

This single prop addition disables the bottom safe area padding that was causing the blank space below the composer on Android devices.

What alternative solutions did you explore? (Optional)

1. Modify ReportFooter styling: Instead of disabling safe area padding at the screen level, we could add negative margins or adjust the composer's positioning within ReportFooter. However, this would be a workaround rather than addressing the root cause, and could have unintended side effects on other parts of the UI.

2. Conditional padding based on platform: We could conditionally disable the padding only on Android, but since the composer doesn't need this padding on any platform, it's cleaner to disable it universally.

3. Adjust safe area padding calculation: We could modify how the safe area padding is calculated, but this would be a more invasive change that could affect other screens and components throughout the app.

[daledah]

🚨 Edited by proposal-police: This proposal was edited at 2025-11-28 09:32:39 UTC.

Proposal

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

Blank white space is shown below the composer when sharing logs
Redminote 10s/Android 13
SG A50/Android 11

What is the root cause of that problem?

When we tap the “Share log” button, two actions happen in parallel: navigating to the next screen and dismissing the keyboard. On some Android devices, it seems navigation is prioritized, causing the keyboard to not fully dismiss in time — which results in the blank white space being shown.

App/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx

Lines 77 to 84 in fe671d3

	const attachLogToReport = (option: Report) => {
	if (!option.reportID) {
	return;
	}
	const filename = appendTimeToFileName('logs.txt');
	onAttachLogToReport(option.reportID, filename);
	};

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

Update this function to

    const attachLogToReport = (option: Report) => {
        if (!option.reportID) {
            return;
        }
        const filename = appendTimeToFileName('logs.txt');

        KeyboardUtils.dismissKeyboardAndExecute(() => { // or we can use `KeyboardUtils.dismiss().then()` function here
            onAttachLogToReport(option.reportID, filename);
        });
    };

We also rely on waiting for the keyboard to fully dismiss before navigating in many other parts of the app

What alternative solutions did you explore? (Optional)

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/~021990922967155377750

[JmillsExpensify]

Yeah, let's fix this.

[melvin-bot]

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