Skip to content

[IOS] scrollToEnd doesn't anchor new messages at top after scrolling up #1471

@olololoe110399

Description

@olololoe110399

Describe the bug
When the chat is already at the bottom, sending a message correctly uses the blank-space anchor logic and the new message appears at the top of the visible area as expected.
However, when the user scrolls up to older messages and then sends a new message, the list scrolls downward but the newly sent message is not anchored to the top. It lands at an offset position instead of aligning with the top as intended.

Code snippet
The behavior is driven by the send flow and the anchor logic in KeyboardChatLegendList.

schedule(() => {
  listRef.current?.scrollToEnd({ animated: true });
  schedule(() => simulateAIResponse(text, rawInput), 800);
}, 200);

and:

const calculateTopItemInset = useCallback(() => {
  if (anchorToTopIndex === undefined || anchorToTopIndex < 0) {
    blankSpace.value = 0;
    refLegendList.current?.reportContentInset(null);
    return;
  }

  const state = refLegendList.current?.getState();

  if (
    !state ||
    anchorToTopIndex >= state.data.length ||
    state.scrollLength <= 0
  ) {
    return;
  }

  let contentBelowTopItem = 0;

  for (let i = anchorToTopIndex; i < state.data.length; i++) {
    const size = state.sizeAtIndex(i);

    if (size !== null && size > 0) {
      contentBelowTopItem += size;
    }
  }

  const calculatedInset = Math.max(0, state.scrollLength - contentBelowTopItem);

  blankSpace.value = calculatedInset;
  refLegendList.current?.reportContentInset({ bottom: calculatedInset });
}, [anchorToTopIndex]);

Repo for reproducing
This repository: kirillzyusko/react-native-keyboard-controller
Repro screen: example/src/screens/Examples/AILegendListChat/index.tsx

To Reproduce
Steps to reproduce the behavior:

  1. Open the example app in this repository.
  2. Navigate to the AI chat screen.
  3. Scroll down to newer messages.
  4. Send a new message.
  5. Scroll up to older messages.
  6. Send a new message.
  7. See that the list does not reliably scroll to the end.

Expected behavior
When a message is sent, the list should scroll so the new message is anchored to the top of the visible area, consistent with the blank-space/anchor-to-top behavior used when the list is already at the bottom.

Screenshots

Image

Smartphone (please complete the following information):

  • Desktop OS: macOS 26.2 (Build 25C56)
  • Device: Iphone 14 pro
  • OS: iOS 26.2
  • RN version: 0.81.4
  • RN architecture: old / paper (newArchEnabled=false, RCT_NEW_ARCH_ENABLED=0)
  • JS engine: Hermes
  • Library version: 1.21.8

Additional context
This seems related to the interaction between scrollToEnd, delayed sending, and recalculating anchorToTopIndex / blankSpace after the list has been scrolled away from the bottom.

Metadata

Metadata

Assignees

Labels

KeyboardChatScrollView 💬Anything about chat functionalityrepro providedIssue contains reproduction repository/code🍎 iOSiOS specific🐛 bugSomething isn't working📝 paperChanges specific to old (paper/bridge) architecture

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions