fix: inverted + FlatList + Android + interactive dismissal

Author: kirillzyusko

src/components/KeyboardChatScrollView/useChatKeyboard/__fixtures__/testUtils.ts

@@ -8,6 +8,7 @@ export type KeyboardEvent = { height: number };
 export type Handlers = {
   onStart: (e: KeyboardEvent) => void;
   onMove: (e: KeyboardEvent) => void;
+  onInteractive: (e: KeyboardEvent) => void;
   onEnd: (e: KeyboardEvent) => void;
 };
 

src/components/KeyboardChatScrollView/useChatKeyboard/__tests__/freeze.android.spec.ts

@@ -14,6 +14,7 @@ import {
 let handlers: Handlers = {
   onStart: jest.fn(),
   onMove: jest.fn(),
+  onInteractive: jest.fn(),
   onEnd: jest.fn(),
 };
 

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

@@ -14,6 +14,7 @@ import {
 let handlers: Handlers = {
   onStart: jest.fn(),
   onMove: jest.fn(),
+  onInteractive: jest.fn(),
   onEnd: jest.fn(),
 };
 

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

@@ -12,6 +12,7 @@ import {
 let handlers: Handlers = {
   onStart: jest.fn(),
   onMove: jest.fn(),
+  onInteractive: jest.fn(),
   onEnd: jest.fn(),
 };
 

src/components/KeyboardChatScrollView/useChatKeyboard/__tests__/interactive.android.spec.ts

@@ -0,0 +1,205 @@
+import { Platform } from "react-native";
+
+import {
+  type Handlers,
+  KEYBOARD,
+  mockOffset,
+  mockScrollTo,
+  render,
+  setupBeforeEach,
+} from "../__fixtures__/testUtils";
+
+let handlers: Handlers = {
+  onStart: jest.fn(),
+  onMove: jest.fn(),
+  onInteractive: jest.fn(),
+  onEnd: jest.fn(),
+};
+
+jest.mock("../../../../hooks", () => ({
+  useKeyboardHandler: jest.fn((h: Handlers) => {
+    handlers = h;
+  }),
+  useResizeMode: jest.fn(),
+}));
+
+jest.mock("../../../hooks/useScrollState", () => ({
+  __esModule: true,
+  default: jest.fn(() => ({
+    offset: mockOffset,
+    layout: { value: { width: 390, height: 800 } },
+    size: { value: { width: 390, height: 2000 } },
+  })),
+}));
+
+beforeEach(() => {
+  setupBeforeEach();
+  Object.defineProperty(Platform, "OS", { value: "android" });
+});
+
+afterAll(() => {
+  Object.defineProperty(Platform, "OS", { value: "ios" });
+});
+
+describe("`useChatKeyboard` — Android interactive dismissal (inverted)", () => {
+  it("should lock scroll and update containerTranslateY on first interactive", () => {
+    mockOffset.value = 50;
+    const { result } = render({
+      inverted: true,
+      keyboardLiftBehavior: "always",
+    });
+
+    // keyboard opens
+    handlers.onStart({ height: KEYBOARD });
+    handlers.onMove({ height: KEYBOARD });
+    mockScrollTo.mockClear();
+
+    // interactive dismiss begins
+    handlers.onStart({ height: 0 });
+    handlers.onInteractive({ height: 200 });
+
+    expect(mockScrollTo).toHaveBeenCalledWith(expect.anything(), 0, 50, false);
+    expect(result.current.containerTranslateY.value).toBe(-200);
+  });
+
+  it("should maintain scroll lock across multiple interactive frames", () => {
+    mockOffset.value = 50;
+    render({ inverted: true, keyboardLiftBehavior: "always" });
+
+    handlers.onStart({ height: KEYBOARD });
+    handlers.onMove({ height: KEYBOARD });
+    mockScrollTo.mockClear();
+
+    handlers.onStart({ height: 0 });
+    handlers.onInteractive({ height: 250 });
+
+    // simulate scroll view drifting due to touch
+    mockOffset.value = 80;
+    handlers.onInteractive({ height: 200 });
+
+    // should still lock at original position (50), not the drifted one
+    expect(mockScrollTo).toHaveBeenLastCalledWith(
+      expect.anything(),
+      0,
+      50,
+      false,
+    );
+  });
+
+  it("should unlock scroll when keyboard stays at full height", () => {
+    mockOffset.value = 50;
+    render({ inverted: true, keyboardLiftBehavior: "always" });
+
+    handlers.onStart({ height: KEYBOARD });
+    handlers.onMove({ height: KEYBOARD });
+    mockScrollTo.mockClear();
+
+    // interactive dismiss begins and then reverses back to full height
+    handlers.onStart({ height: 0 });
+    handlers.onInteractive({ height: 250 });
+    handlers.onInteractive({ height: KEYBOARD });
+    mockScrollTo.mockClear();
+
+    // keyboard stays at full height for consecutive frames → unlock
+    handlers.onInteractive({ height: KEYBOARD });
+    expect(mockScrollTo).not.toHaveBeenCalled();
+  });
+
+  it("should re-lock when keyboard starts closing from full height", () => {
+    mockOffset.value = 50;
+    render({ inverted: true, keyboardLiftBehavior: "always" });
+
+    handlers.onStart({ height: KEYBOARD });
+    handlers.onMove({ height: KEYBOARD });
+
+    // interactive: dismiss → return to full → unlock → dismiss again
+    handlers.onStart({ height: 0 });
+    handlers.onInteractive({ height: 250 });
+    handlers.onInteractive({ height: KEYBOARD });
+    handlers.onInteractive({ height: KEYBOARD }); // unlock
+
+    // user scrolled while unlocked
+    mockOffset.value = 120;
+    mockScrollTo.mockClear();
+
+    // keyboard starts closing again → re-lock at current position (120)
+    handlers.onInteractive({ height: 280 });
+    expect(mockScrollTo).toHaveBeenCalledWith(expect.anything(), 0, 120, false);
+  });
+
+  it("should unlock scroll when keyboard stays at zero", () => {
+    mockOffset.value = 50;
+    render({ inverted: true, keyboardLiftBehavior: "always" });
+
+    handlers.onStart({ height: KEYBOARD });
+    handlers.onMove({ height: KEYBOARD });
+    mockScrollTo.mockClear();
+
+    // interactive dismiss to zero
+    handlers.onStart({ height: 0 });
+    handlers.onInteractive({ height: 100 });
+    handlers.onInteractive({ height: 0 });
+    mockScrollTo.mockClear();
+
+    // keyboard stays at zero → unlock
+    handlers.onInteractive({ height: 0 });
+    expect(mockScrollTo).not.toHaveBeenCalled();
+  });
+
+  it("should re-lock when keyboard starts revealing from zero", () => {
+    mockOffset.value = 50;
+    render({ inverted: true, keyboardLiftBehavior: "always" });
+
+    handlers.onStart({ height: KEYBOARD });
+    handlers.onMove({ height: KEYBOARD });
+
+    // interactive dismiss to zero, unlock, then reveal
+    handlers.onStart({ height: 0 });
+    handlers.onInteractive({ height: 100 });
+    handlers.onInteractive({ height: 0 });
+    handlers.onInteractive({ height: 0 }); // unlock
+
+    mockOffset.value = 90;
+    mockScrollTo.mockClear();
+
+    // keyboard starts revealing → re-lock at current position (90)
+    handlers.onInteractive({ height: 20 });
+    expect(mockScrollTo).toHaveBeenCalledWith(expect.anything(), 0, 90, false);
+  });
+
+  it("should reset lock state in onEnd", () => {
+    mockOffset.value = 50;
+    render({ inverted: true, keyboardLiftBehavior: "always" });
+
+    handlers.onStart({ height: KEYBOARD });
+    handlers.onMove({ height: KEYBOARD });
+
+    // interactive session
+    handlers.onStart({ height: 0 });
+    handlers.onInteractive({ height: 200 });
+    handlers.onEnd({ height: 0 });
+
+    // new interactive session should re-save at new position
+    mockOffset.value = 200;
+    mockScrollTo.mockClear();
+
+    handlers.onStart({ height: KEYBOARD });
+    handlers.onStart({ height: 0 });
+    handlers.onInteractive({ height: 250 });
+
+    expect(mockScrollTo).toHaveBeenCalledWith(expect.anything(), 0, 200, false);
+  });
+
+  it("freeze: should not respond to interactive events", () => {
+    const { result } = render({
+      inverted: true,
+      keyboardLiftBehavior: "always",
+      freeze: true,
+    });
+
+    handlers.onInteractive({ height: 200 });
+
+    expect(mockScrollTo).not.toHaveBeenCalled();
+    expect(result.current.containerTranslateY.value).toBe(0);
+  });
+});

src/components/KeyboardChatScrollView/useChatKeyboard/__tests__/offset.android.spec.ts

@@ -14,6 +14,7 @@ import {
 let handlers: Handlers = {
   onStart: jest.fn(),
   onMove: jest.fn(),
+  onInteractive: jest.fn(),
   onEnd: jest.fn(),
 };
 

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

@@ -12,6 +12,7 @@ import {
 let handlers: Handlers = {
   onStart: jest.fn(),
   onMove: jest.fn(),
+  onInteractive: jest.fn(),
   onEnd: jest.fn(),
 };
 

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

@@ -10,6 +10,7 @@ import {
 let handlers: Handlers = {
   onStart: jest.fn(),
   onMove: jest.fn(),
+  onInteractive: jest.fn(),
   onEnd: jest.fn(),
 };
 

src/components/KeyboardChatScrollView/useChatKeyboard/index.ts

@@ -61,6 +61,8 @@ function useChatKeyboard(
   const containerTranslateY = useSharedValue(0);
   const offsetBeforeScroll = useSharedValue(0);
   const targetKeyboardHeight = useSharedValue(0);
+  const lockedScrollPosition = useSharedValue(-1);
+  const prevInteractiveHeight = useSharedValue(-1);
 
   const { layout, size, offset: scroll } = useScrollState(scrollViewRef);
 
@@ -209,6 +211,47 @@ function useChatKeyboard(
           scrollTo(scrollViewRef, 0, target, false);
         }
       },
+      onInteractive: (e) => {
+        "worklet";
+
+        if (freeze || OS === "ios") {
+          return;
+        }
+
+        const effective = getEffectiveHeight(e.height);
+
+        if (inverted) {
+          const maxEffective = getEffectiveHeight(targetKeyboardHeight.value);
+          const prevEffective = prevInteractiveHeight.value;
+          const isFirstInteractive = prevEffective === -1;
+
+          prevInteractiveHeight.value = effective;
+
+          if (isFirstInteractive) {
+            // first interactive event of a gesture session — lock scroll
+            lockedScrollPosition.value = scroll.value;
+          } else if (
+            (prevEffective === maxEffective && effective === maxEffective) ||
+            (prevEffective === 0 && effective === 0)
+          ) {
+            // keyboard stayed at rest position for consecutive frames — unlock
+            // so the user can scroll freely while keyboard is fully visible/hidden
+            lockedScrollPosition.value = -1;
+          } else if (
+            (prevEffective === 0 && effective > 0) ||
+            (prevEffective === maxEffective && effective < maxEffective)
+          ) {
+            // keyboard left a rest position — re-lock at current scroll
+            lockedScrollPosition.value = scroll.value;
+          }
+
+          if (lockedScrollPosition.value !== -1) {
+            scrollTo(scrollViewRef, 0, lockedScrollPosition.value, false);
+          }
+
+          containerTranslateY.value = -effective;
+        }
+      },
       onEnd: (e) => {
         "worklet";
 
@@ -219,6 +262,8 @@ function useChatKeyboard(
         const effective = getEffectiveHeight(e.height);
 
         padding.value = effective;
+        lockedScrollPosition.value = -1;
+        prevInteractiveHeight.value = -1;
 
         if (
           OS !== "ios" &&