[HOLD for #56156] [$250] 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): ntt.london@gmail.com
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

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021889215713383713754
• Upwork Job ID: 1889215713383713754
• Last Price Increase: 2025-03-04

Issue Owner

Current Issue Owner: @dominictb

[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.

[NJ-2020]

@huult your proposal doesn't fix this issue as you can see in the video demo below, the keyboard is still overlapping, and also the keyboard in almost all places login/validation almost all pages

WhatsApp.Video.2025-02-08.at.11.20.53.mp4

[melvin-bot]

@stephanieelliott Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[stephanieelliott]

Just tested and this is still occuring, applying the External label

[melvin-bot]

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