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:
- Open the example app in this repository.
- Navigate to the AI chat screen.
- Scroll down to newer messages.
- Send a new message.
- Scroll up to older messages.
- Send a new message.
- 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
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.
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.and:
Repo for reproducing
This repository:
kirillzyusko/react-native-keyboard-controllerRepro screen:
example/src/screens/Examples/AILegendListChat/index.tsxTo Reproduce
Steps to reproduce the behavior:
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
Smartphone (please complete the following information):
Additional context
This seems related to the interaction between
scrollToEnd, delayed sending, and recalculatinganchorToTopIndex/blankSpaceafter the list has been scrolled away from the bottom.