Skip to content

LegendList + inverted chat: single message can scroll under keyboard; FlashList does not (KeyboardChatScrollView example) #1427

@jesussfl

Description

@jesussfl
Screen.Recording.2026-04-07.at.3.58.22.PM.mov

Description

In the Keyboard Chat Scroll View example, with Legend List and inverted enabled, when there is only one message and the keyboard is open, the list can be scrolled so content moves behind the keyboard. The same scenario with Flash List does not allow that extra scroll.

Expected: Behavior should match other list modes (e.g. FlashList): with little or no overflow content, scrolling should not move messages under the keyboard.

Actual: With Legend List, messages can end up hidden behind the keyboard after scrolling.

I upgraded @legendapp/list to 3.0.0-beta.44 (as in the example app’s package.json) and the issue still reproduces.

Reproduction

Repository: Same app as the official example in react-native-keyboard-controller (this monorepo’s example project).

Steps

  1. Open the Keyboard Chat Scroll View screen in the example app.
  2. Open the config sheet (Open config in the header).
  3. Enable Use Legend List.
  4. Enable Toggle inverted.
  5. Reduce the message list to one message (e.g. adjust example/src/screens/Examples/KeyboardChatScrollView/data.ts so only one entry remains).
  6. Focus the text field so the keyboard is open.
  7. Scroll the list (gesture that would move content toward the keyboard area).

Observe: Content can scroll so it sits behind the keyboard.

  1. Repeat with Use Flash List (keep inverted on, single message, keyboard open) and perform a similar scroll.

Observe: The list does not allow the same overscroll; content stays out from under the keyboard in comparison.

Environment

  • react-native-keyboard-controller: (version / commit)
  • React Native: (version)
  • Platform: (iOS / Android / both)
  • @legendapp/list: 3.0.0-beta.44 (issue reproduced on this version)
  • @shopify/flash-list: (version from example/package.json)

Notes

  • Legend List is used with alignItemsAtEnd and initialScrollAtEnd when inverted is on (as in the example).
  • Flash List uses the inverted prop and the inverted contentContainerStyle from the example.

Metadata

Metadata

Assignees

Labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions