fix: inverted + FlatList + whenAtEnd behavior

Author: kirillzyusko

src/components/KeyboardChatScrollView/useChatKeyboard/__tests__/helpers.spec.ts

@@ -27,6 +27,29 @@ describe("`isScrollAtEnd` specification", () => {
   it("should return true when at scroll position 0 with matching content", () => {
     expect(isScrollAtEnd(0, 800, 800)).toBe(true);
   });
+
+  describe("inverted", () => {
+    it("should return true when scroll offset is 0 (latest messages)", () => {
+      expect(isScrollAtEnd(0, 800, 2000, true)).toBe(true);
+    });
+
+    it("should return true when within threshold of 0", () => {
+      expect(isScrollAtEnd(15, 800, 2000, true)).toBe(true);
+    });
+
+    it("should return false when scrolled away from latest messages", () => {
+      expect(isScrollAtEnd(100, 800, 2000, true)).toBe(false);
+    });
+
+    it("should return true for negative offsets (keyboard inset)", () => {
+      expect(isScrollAtEnd(-300, 800, 2000, true)).toBe(true);
+    });
+
+    it("should return false at traditional scroll end (oldest messages)", () => {
+      // offset 1200 = contentHeight(2000) - layoutHeight(800) → oldest messages
+      expect(isScrollAtEnd(1200, 800, 2000, true)).toBe(false);
+    });
+  });
 });
 
 describe("`shouldShiftContent` specification", () => {

src/components/KeyboardChatScrollView/useChatKeyboard/__tests__/index.ios.spec.ts

@@ -211,6 +211,30 @@ describe("`useChatKeyboard` — iOS behaviors", () => {
     expect(result.current.contentOffsetY!.value).toBe(0);
   });
 
+  it("whenAtEnd + inverted: should shift when at latest messages (offset near 0)", () => {
+    mockOffset.value = 0;
+    const { result } = render({
+      inverted: true,
+      keyboardLiftBehavior: "whenAtEnd",
+    });
+
+    handlers.onStart({ height: KEYBOARD });
+
+    expect(result.current.contentOffsetY!.value).toBe(-KEYBOARD);
+  });
+
+  it("whenAtEnd + inverted: should NOT shift when scrolled to older messages", () => {
+    mockOffset.value = 500;
+    const { result } = render({
+      inverted: true,
+      keyboardLiftBehavior: "whenAtEnd",
+    });
+
+    handlers.onStart({ height: KEYBOARD });
+
+    expect(result.current.contentOffsetY!.value).toBe(0);
+  });
+
   it("onEnd: should finalize padding", () => {
     const { result } = render({
       inverted: false,

src/components/KeyboardChatScrollView/useChatKeyboard/__tests__/persistent.ios.spec.ts

@@ -137,30 +137,35 @@ describe("`useChatKeyboard` — iOS persistent inverted", () => {
   });
 
   it("should NOT adjust contentOffsetY on close when NOT at end", () => {
-    mockOffset.value = 0;
+    // scrolled to older messages (not at end for inverted)
+    mockOffset.value = 500;
     const { result } = render({
       inverted: true,
       keyboardLiftBehavior: "persistent",
     });
 
     handlers.onStart({ height: KEYBOARD });
-    mockOffset.value = -300;
+    const contentOffsetAfterOpen = result.current.contentOffsetY!.value;
+
+    // user stays at old messages while keyboard is open
+    mockOffset.value = 200;
     handlers.onStart({ height: 0 });
 
     expect(result.current.padding.value).toBe(0);
-    expect(result.current.contentOffsetY!.value).toBe(-KEYBOARD);
+    expect(result.current.contentOffsetY!.value).toBe(contentOffsetAfterOpen);
   });
 
   it("should snap to end on keyboard close when at end", () => {
-    // scroll to oldest messages (at end for inverted)
-    mockOffset.value = 1200;
+    // at newest messages (at end for inverted = offset near 0)
+    mockOffset.value = 0;
     const { result } = render({
       inverted: true,
       keyboardLiftBehavior: "persistent",
     });
 
     handlers.onStart({ height: KEYBOARD });
-    mockOffset.value = 1200;
+    // user stays at newest messages with keyboard inset
+    mockOffset.value = -300;
     handlers.onStart({ height: 0 });
 
     expect(result.current.padding.value).toBe(0);

src/components/KeyboardChatScrollView/useChatKeyboard/helpers.ts

@@ -5,22 +5,33 @@ const AT_END_THRESHOLD = 20;
 /**
  * Check whether the scroll view is at the end of its content.
  *
+ * For non-inverted lists the "end" is the bottom of the content.
+ * For inverted lists the "end" is the top (scroll offset near 0),
+ * because that is where the latest messages are displayed.
+ *
  * @param scrollOffset - Current vertical scroll offset.
  * @param layoutHeight - Visible height of the scroll view.
  * @param contentHeight - Total height of the scrollable content.
+ * @param inverted - Whether the list is inverted.
  * @returns `true` if the scroll position is within the threshold of the content end.
  * @example
  * ```ts
  * const atEnd = isScrollAtEnd(100, 800, 920); // true (100 + 800 >= 920 - 20)
+ * const atEndInverted = isScrollAtEnd(5, 800, 2000, true); // true (5 <= 20)
  * ```
  */
 export function isScrollAtEnd(
   scrollOffset: number,
   layoutHeight: number,
   contentHeight: number,
+  inverted: boolean = false,
 ): boolean {
   "worklet";
 
+  if (inverted) {
+    return scrollOffset <= AT_END_THRESHOLD;
+  }
+
   return scrollOffset + layoutHeight >= contentHeight - AT_END_THRESHOLD;
 }
 

src/components/KeyboardChatScrollView/useChatKeyboard/index.ts

@@ -98,6 +98,7 @@ function useChatKeyboard(
           scroll.value,
           layout.value.height,
           size.value.height,
+          inverted,
         );
 
         if (OS === "ios") {