fix: adopt hook for new inverted Android behavior

Author: kirillzyusko

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

@@ -4,7 +4,7 @@ import { useAnimatedRef } from "react-native-reanimated";
 import type { useChatKeyboard } from "..";
 import type Reanimated from "react-native-reanimated";
 
-export type KeyboardEvent = { height: number };
+export type KeyboardEvent = { height: number; duration?: number };
 export type Handlers = {
   onStart: (e: KeyboardEvent) => void;
   onMove: (e: KeyboardEvent) => void;

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

@@ -0,0 +1,150 @@
+import { Platform } from "react-native";
+
+import {
+  type Handlers,
+  KEYBOARD,
+  mockLayout,
+  mockOffset,
+  mockScrollTo,
+  mockSize,
+  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: mockLayout,
+    size: mockSize,
+  })),
+}));
+
+beforeEach(() => {
+  setupBeforeEach();
+  Object.defineProperty(Platform, "OS", { value: "android" });
+});
+
+afterAll(() => {
+  Object.defineProperty(Platform, "OS", { value: "ios" });
+});
+
+describe("`useChatKeyboard` — Android behaviors", () => {
+  it("persistent inverted: should NOT reset padding on close", () => {
+    const { result } = render({
+      inverted: true,
+      keyboardLiftBehavior: "persistent",
+    });
+
+    handlers.onStart({ height: KEYBOARD });
+    handlers.onMove({ height: KEYBOARD });
+    handlers.onEnd({ height: 0 });
+
+    expect(result.current.padding.value).toBe(KEYBOARD);
+  });
+
+  it("persistent inverted: should not decrease shift", () => {
+    render({
+      inverted: true,
+      keyboardLiftBehavior: "persistent",
+    });
+
+    handlers.onStart({ height: KEYBOARD });
+    handlers.onMove({ height: KEYBOARD });
+    expect(mockScrollTo).toHaveBeenCalled();
+    mockScrollTo.mockClear();
+
+    // currentShift = offsetBeforeScroll(0) + padding(300) - scroll(0) = 300
+    // effective = 200 < 300 → return
+    handlers.onMove({ height: 200 });
+    expect(mockScrollTo).not.toHaveBeenCalled();
+  });
+
+  it("never non-inverted: should not scroll", () => {
+    mockOffset.value = 100;
+    render({ inverted: false, keyboardLiftBehavior: "never" });
+
+    handlers.onStart({ height: KEYBOARD });
+    handlers.onMove({ height: 200 });
+
+    expect(mockScrollTo).not.toHaveBeenCalled();
+  });
+
+  it("never inverted: should not scroll", () => {
+    render({ inverted: true, keyboardLiftBehavior: "never" });
+
+    handlers.onStart({ height: KEYBOARD });
+    handlers.onMove({ height: 200 });
+
+    expect(mockScrollTo).not.toHaveBeenCalled();
+  });
+
+  it("whenAtEnd non-inverted: should scroll when at end", () => {
+    mockOffset.value = 1180;
+    render({ inverted: false, keyboardLiftBehavior: "whenAtEnd" });
+
+    handlers.onStart({ height: KEYBOARD });
+    handlers.onMove({ height: 200 });
+
+    expect(mockScrollTo).toHaveBeenCalled();
+  });
+
+  it("whenAtEnd non-inverted: should NOT scroll when NOT at end", () => {
+    mockOffset.value = 100;
+    render({ inverted: false, keyboardLiftBehavior: "whenAtEnd" });
+
+    handlers.onStart({ height: KEYBOARD });
+    handlers.onMove({ height: 200 });
+
+    expect(mockScrollTo).not.toHaveBeenCalled();
+  });
+
+  it("whenAtEnd inverted: should scroll when at end (offset near 0)", () => {
+    mockOffset.value = 0;
+    render({ inverted: true, keyboardLiftBehavior: "whenAtEnd" });
+
+    handlers.onStart({ height: KEYBOARD });
+    handlers.onMove({ height: 200 });
+
+    expect(mockScrollTo).toHaveBeenCalled();
+  });
+
+  it("whenAtEnd inverted: should NOT scroll when scrolled away", () => {
+    mockOffset.value = 500;
+    render({ inverted: true, keyboardLiftBehavior: "whenAtEnd" });
+
+    handlers.onStart({ height: KEYBOARD });
+    handlers.onMove({ height: 200 });
+
+    expect(mockScrollTo).not.toHaveBeenCalled();
+  });
+
+  it("persistent non-inverted: should not scroll back on shrink", () => {
+    mockOffset.value = 100;
+    render({ inverted: false, keyboardLiftBehavior: "persistent" });
+
+    handlers.onStart({ height: KEYBOARD });
+    handlers.onMove({ height: 200 });
+    expect(mockScrollTo).toHaveBeenCalled();
+    mockScrollTo.mockClear();
+
+    mockOffset.value = 300;
+    handlers.onMove({ height: 100 });
+
+    expect(mockScrollTo).not.toHaveBeenCalled();
+  });
+});

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

@@ -58,7 +58,7 @@ describe("`useChatKeyboard` — Android freeze", () => {
     expect(mockScrollTo).not.toHaveBeenCalled();
   });
 
-  it("should not change containerTranslateY on keyboard open", () => {
+  it("should not change padding on inverted keyboard open", () => {
     const { result } = render({
       inverted: true,
       keyboardLiftBehavior: "always",
@@ -68,7 +68,7 @@ describe("`useChatKeyboard` — Android freeze", () => {
     handlers.onStart({ height: KEYBOARD });
     handlers.onMove({ height: 200 });
 
-    expect(result.current.containerTranslateY.value).toBe(0);
+    expect(result.current.padding.value).toBe(0);
   });
 
   it("should not change padding in onEnd", () => {

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

@@ -162,130 +162,114 @@ describe("`useChatKeyboard` — Android non-inverted + always", () => {
 });
 
 describe("`useChatKeyboard` — Android inverted + always", () => {
-  it("should set containerTranslateY in onMove", () => {
+  it("should set padding in onStart and call scrollTo in onMove", () => {
     const { result } = render({
       inverted: true,
       keyboardLiftBehavior: "always",
     });
 
     handlers.onStart({ height: KEYBOARD });
-    handlers.onMove({ height: 200 });
+    expect(result.current.padding.value).toBe(KEYBOARD);
 
-    expect(result.current.containerTranslateY.value).toBe(-200);
+    handlers.onMove({ height: 200 });
+    // target = offsetBeforeScroll(0) + padding(300) - effective(200) = 100
+    expect(mockScrollTo).toHaveBeenCalledWith(expect.anything(), 0, 100, false);
   });
 
-  it("should update containerTranslateY per-frame", () => {
-    const { result } = render({
-      inverted: true,
-      keyboardLiftBehavior: "always",
-    });
+  it("should call scrollTo per-frame with correct targets", () => {
+    render({ inverted: true, keyboardLiftBehavior: "always" });
 
     handlers.onStart({ height: KEYBOARD });
 
     handlers.onMove({ height: 100 });
-    expect(result.current.containerTranslateY.value).toBe(-100);
+    // target = 0 + 300 - 100 = 200
+    expect(mockScrollTo).toHaveBeenLastCalledWith(
+      expect.anything(),
+      0,
+      200,
+      false,
+    );
 
     handlers.onMove({ height: 250 });
-    expect(result.current.containerTranslateY.value).toBe(-250);
-  });
-
-  it("should NOT call scrollTo for inverted lists", () => {
-    render({ inverted: true, keyboardLiftBehavior: "always" });
-
-    handlers.onStart({ height: KEYBOARD });
-    handlers.onMove({ height: 200 });
-
-    expect(mockScrollTo).not.toHaveBeenCalled();
+    // target = 0 + 300 - 250 = 50
+    expect(mockScrollTo).toHaveBeenLastCalledWith(
+      expect.anything(),
+      0,
+      50,
+      false,
+    );
   });
 
-  it("should reset containerTranslateY on keyboard close", () => {
+  it("should return undefined for contentOffsetY", () => {
     const { result } = render({
       inverted: true,
       keyboardLiftBehavior: "always",
     });
 
-    handlers.onStart({ height: KEYBOARD });
-    handlers.onMove({ height: KEYBOARD });
-    handlers.onEnd({ height: 0 });
-
-    expect(result.current.containerTranslateY.value).toBe(0);
-    expect(result.current.padding.value).toBe(0);
-  });
-});
-
-describe("`useChatKeyboard` — Android behaviors", () => {
-  it("persistent inverted: should NOT reset translateY on close", () => {
-    const { result } = render({
-      inverted: true,
-      keyboardLiftBehavior: "persistent",
-    });
-
-    handlers.onStart({ height: KEYBOARD });
-    handlers.onMove({ height: KEYBOARD });
-    handlers.onEnd({ height: 0 });
-
-    expect(result.current.containerTranslateY.value).toBe(-KEYBOARD);
+    expect(result.current.contentOffsetY).toBeUndefined();
   });
 
-  it("persistent inverted: should not shrink translateY", () => {
-    const { result } = render({
-      inverted: true,
-      keyboardLiftBehavior: "persistent",
-    });
+  it("should scroll back on keyboard close", () => {
+    render({ inverted: true, keyboardLiftBehavior: "always" });
 
     handlers.onStart({ height: KEYBOARD });
     handlers.onMove({ height: KEYBOARD });
-    handlers.onMove({ height: 200 });
-
-    expect(result.current.containerTranslateY.value).toBe(-KEYBOARD);
-  });
+    mockScrollTo.mockClear();
 
-  it("never: should not scroll or translate", () => {
-    mockOffset.value = 100;
-    const { result } = render({
-      inverted: false,
-      keyboardLiftBehavior: "never",
-    });
+    // keyboard closes: offsetBeforeScroll = scroll.value = 0
+    handlers.onStart({ height: 0 });
 
-    handlers.onStart({ height: KEYBOARD });
-    handlers.onMove({ height: 200 });
+    handlers.onMove({ height: 150 });
+    // target = 0 + 300 - 150 = 150
+    expect(mockScrollTo).toHaveBeenLastCalledWith(
+      expect.anything(),
+      0,
+      150,
+      false,
+    );
 
-    expect(mockScrollTo).not.toHaveBeenCalled();
-    expect(result.current.containerTranslateY.value).toBe(0);
+    handlers.onMove({ height: 0 });
+    // target = 0 + 300 - 0 = 300
+    expect(mockScrollTo).toHaveBeenLastCalledWith(
+      expect.anything(),
+      0,
+      300,
+      false,
+    );
   });
 
-  it("whenAtEnd: should scroll when at end", () => {
-    mockOffset.value = 1180;
-    render({ inverted: false, keyboardLiftBehavior: "whenAtEnd" });
+  it("should preserve user scroll position on close", () => {
+    render({ inverted: true, keyboardLiftBehavior: "always" });
 
     handlers.onStart({ height: KEYBOARD });
-    handlers.onMove({ height: 200 });
-
-    expect(mockScrollTo).toHaveBeenCalled();
-  });
-
-  it("whenAtEnd: should NOT scroll when NOT at end", () => {
-    mockOffset.value = 100;
-    render({ inverted: false, keyboardLiftBehavior: "whenAtEnd" });
+    handlers.onMove({ height: KEYBOARD });
+    mockScrollTo.mockClear();
 
-    handlers.onStart({ height: KEYBOARD });
-    handlers.onMove({ height: 200 });
+    // user scrolled to 50 while keyboard open
+    mockOffset.value = 50;
+    handlers.onStart({ height: 0 });
 
-    expect(mockScrollTo).not.toHaveBeenCalled();
+    handlers.onMove({ height: 150 });
+    // target = 50 + 300 - 150 = 200
+    expect(mockScrollTo).toHaveBeenLastCalledWith(
+      expect.anything(),
+      0,
+      200,
+      false,
+    );
   });
 
-  it("persistent non-inverted: should not scroll back on shrink", () => {
-    mockOffset.value = 100;
-    render({ inverted: false, keyboardLiftBehavior: "persistent" });
+  it("should finalize padding in onEnd", () => {
+    const { result } = render({
+      inverted: true,
+      keyboardLiftBehavior: "always",
+    });
 
     handlers.onStart({ height: KEYBOARD });
-    handlers.onMove({ height: 200 });
-    expect(mockScrollTo).toHaveBeenCalled();
-    mockScrollTo.mockClear();
-
-    mockOffset.value = 300;
-    handlers.onMove({ height: 100 });
+    handlers.onEnd({ height: KEYBOARD });
+    expect(result.current.padding.value).toBe(KEYBOARD);
 
-    expect(mockScrollTo).not.toHaveBeenCalled();
+    handlers.onEnd({ height: 0 });
+    expect(result.current.padding.value).toBe(0);
   });
 });