Keyboard and composer overlap

[kirillzyusko]

Version Number:
Reproducible in staging?: yes
Reproducible in production?: yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: HybridApp
If this was caught during regression testing, add the test name, ID and link from TestRail: -
Email or phone of affected tester (no customers): [email protected]
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL: -
Issue reported by: @kirillzyusko
Slack conversation (hyperlinked to channel name): https://margelo.slack.com/archives/C01GTK53T8Q/p1737645123280699

Action Performed:

• open app
• open any chat
• tap the composer

Expected Result:

There shouldn't be an overlap

Actual Result:

Keyboard overlap the composer.

Workaround:

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

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Samsung A135F, Android version: 12, One UI core version: 4.1

Screenshots/Videos

Add any screenshot/video evidence

WhatsApp.Video.2025-01-23.at.19.17.54.mp4

View all open jobs on GitHub

[melvin-bot]

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

[huult]

Proposal

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

Keyboard overlaps the composer when starting a new thread with keyboard open

What is the root cause of that problem?

This issue occurs because shouldEnableKeyboardAvoidingView is disabled.

App/src/pages/home/ReportScreen.tsx

Line 750 in ee611e6

shouldEnableKeyboardAvoidingView={(isTopMostReportId || isInNarrowPaneModal) && (!isComposerFocus || showSoftInputOnFocus)}

shouldEnableKeyboardAvoidingView is disabled when isTopMostReportId is false or showSoftInputOnFocus is false.

Here is the log:

• 
• 

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

To fix this issue in all cases, I think shouldEnableKeyboardAvoidingView should always be enabled when the keyboard is open. To implement this, something like:

import keyboardHeight

  const {keyboardHeight} = useKeyboardState();

App/src/pages/home/ReportScreen.tsx

Line 750 in ee611e6

shouldEnableKeyboardAvoidingView={(isTopMostReportId || isInNarrowPaneModal) && (!isComposerFocus || showSoftInputOnFocus)}

Update condition to enable shouldEnableKeyboardAvoidingView to:

  shouldEnableKeyboardAvoidingView={((isTopMostReportId || isInNarrowPaneModal) && (!isComposerFocus || showSoftInputOnFocus)) || !!keyboardHeight}

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

This is a UI bug; no UI test is needed.

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.