[chrispader]

Chat messages and the composer currently use separate keyboard-handling paths, which makes interactive dismissal difficult to coordinate. I switched chat reports to KeyboardAwareLegendList so RNKC controls their movement together.

Explanation of Change

This builds on the refreshed #37 with LegendList 3.7.2 and RNKC 1.23.0. The custom scroll-view patch follows the seven patches from the migration, and the iOS gesture-state patch is separate from the Android landscape patch. Scroll tracking and linked-message positioning include the keyboard inset. Tracking also refreshes when that inset settles, so the Latest messages pill and unread state reflect the list's current position.

The action-sheet-aware scroll view stays in the keyboard list. RNKC's iOS helper uses a package-specific Objective-C name to avoid a HybridApp class collision. Expense and invoice reports, expanded composers, and Android versions below 11 retain their existing keyboard handling.

Fixed Issues

$ Expensify#54270

Initial proposal: Expensify#71440

Tests

iOS and Android 11 or later, chat keyboard

1. Open a chat with several pages of messages.
2. Focus the composer. The latest message should remain visible above the keyboard.
3. Enter a multiline draft. The composer should grow without covering the latest message.
4. Drag the chat slightly downward and back before lifting your finger. The keyboard should stay open without leaving a gap.
5. Drag downward until the keyboard dismisses. The composer and messages should settle without a gap. If the list is at its end, the Latest messages pill should disappear.
6. Focus the composer again. The draft should remain intact.
7. Scroll upward through older messages. Your reading position should remain stable as history loads.
8. Choose Latest messages. The list should reach the newest message.
9. Open a message's action menu. The selected message should remain visible.
10. Dismiss the menu. The chat should return to its previous position.

All platforms, expanded composer

1. Open a chat.
2. Focus the composer.
3. Enter a multiline draft.
4. Expand the composer. The editor should fill the available space above the keyboard.
5. Collapse the composer. The draft and chat position should remain intact.
6. Send the message. It should appear at the end of the chat.

All platforms, expense and invoice reports

Use a report where you can post comments.

1. Open an expense or invoice report.
2. Focus its composer. It should remain above the keyboard without moving the transaction table out of place.
3. Send a comment. It should appear in the report.
4. Dismiss the keyboard. The report should return to its previous layout.

Supported Android versions below 11

1. Open a chat.
2. Focus its composer. The existing keyboard avoidance should keep it visible.
3. Swipe downward over the composer. The keyboard should dismiss as before.

• Verify that no errors appear in the JS console

Offline tests

1. Open a chat while online.
2. Disconnect the internet. The offline banner should remain visible.
3. Focus the composer. The banner and composer should remain above the keyboard.
4. Send a message. It should appear locally.
5. Dismiss the keyboard. The banner should remain visible without a gap below the composer.
6. Reconnect the internet. The banner should disappear and the message should send.

QA Steps

Same as Tests and Offline tests.

• Verify that no errors appear in the JS console

PR Author Checklist

• I linked the correct issue in the ### Fixed Issues section above
• I wrote clear testing steps that cover the changes made in this PR
  • I added steps for local testing in the Tests section
  • I added steps for the expected offline behavior in the Offline steps section
  • I added steps for Staging and/or Production testing in the QA steps section
  • I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
  • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
  • I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
• I included screenshots or videos for tests on all platforms
• I ran the tests on all platforms & verified they passed on:
  • Android: Native
  • Android: mWeb Chrome
  • iOS: Native
  • iOS: mWeb Safari
  • MacOS: Chrome / Safari
• I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
• I verified any copy / text that was added to the app is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
• If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
• I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
• If new assets were added or existing ones were modified, I verified that:
  • The assets are optimized and compressed (for SVG files, run npm run compress-svg)
  • The assets load correctly across all supported platforms.
• If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
• If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
• If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
• If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
• If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
  • I verified that all the inputs inside a form are aligned with each other.
  • I added Design label and/or tagged @Expensify/design so the design team can review the changes.
• If the PR adds or modifies the UI:
  • I asked an AI agent to review the changes for accessibility issues and addressed its findings.
  • I tested with a screen reader (VoiceOver on macOS) and verified all new/changed elements are reachable with a logical focus order.
  • I verified all new/changed elements have meaningful accessible names and roles.
  • I verified state changes are announced (e.g. checked/unchecked, expanded/collapsed, selected).
• I added unit tests for any new feature or bug fix in this PR to help automatically prevent regressions in this user flow.
• If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.

Screenshots/Videos

These existing migration recordings are reused from #37.

Android: Native

ColdOpenLoading.mp4

iOS: Native

LegendListLoadingSkeletonVsFlashList.mp4

🤖 Generated with Codex