Fix extraContentPadding not adjusting scroll when it changes by large amount (#1371)

## 📜 Description

If your chat composer changes height by a small amount, such as adding
an additional line, `extraContentPadding` works fine. However, if you
paste a large blob of text in, the scroll position adjustment doesn't
happen and your content gets occluded by the chat composer.

## 💡 Motivation and Context

It makes `extraContentPadding` work the way that it should.

## 📢 Changelog

KeyboardChatScrollView: Fix `extraContentPadding` not adjusting scroll
consistently.

### JS

- 
-

### iOS

- Use contentOffset in implementation of extraContentPadding to
synchronously adjust scroll position
-

### Android

- Use requestAnimationFrame to delay scrollTo until next frame after
extraContentPadding change gets committed

## 🤔 How Has This Been Tested?

Manually tested on an iPhone (iPhone 16 Pro) and Android device (Pixel
7)

## 📸 Screenshots (if appropriate):

### Before

iOS:


https://github.com/user-attachments/assets/0404e3c5-9dc3-4d55-b3b7-9483b1db2677


Android:


https://github.com/user-attachments/assets/b31a2966-033f-4f04-9196-31ecf44d0e17

### After

iOS:


https://github.com/user-attachments/assets/188ced9f-08f5-4952-a525-b996ed3673ac


Android:


https://github.com/user-attachments/assets/e9438991-0414-4743-948d-6e81a6ce044b

## 📝 Checklist

- [ ] CI successfully passed
- [x] I added new mocks and corresponding unit-tests if library API was
changed

---------

Co-authored-by: kirillzyusko <zyusko.kirik@gmail.com>

Author: trcoffman

FabricExample/src/screens/Examples/KeyboardChatScrollView/index.tsx

@@ -47,8 +47,7 @@ function KeyboardChatScrollViewPlayground() {
   const flashRef = useRef<FlashListRef<MessageProps>>(null);
   const flatRef = useRef<FlatList<MessageProps>>(null);
   const scrollRef = useRef<VirtualizedListScrollViewRef>(null);
-  const textInputRef = useRef<TextInput>(null);
-  const textRef = useRef("");
+  const [text, setText] = useState("");
   const [inputHeight, setInputHeight] = useState(TEXT_INPUT_HEIGHT);
   const extraContentPadding = useSharedValue(0);
   const { inverted, messages, reversedMessages, addMessage, mode } =
@@ -70,20 +69,19 @@ function KeyboardChatScrollViewPlayground() {
     },
     [extraContentPadding],
   );
-  const onInput = useCallback((text: string) => {
-    textRef.current = text;
+  const onInput = useCallback((value: string) => {
+    setText(value);
   }, []);
   const onSend = useCallback(() => {
-    const message = textRef.current.trim();
+    const message = text.trim();
 
     if (message === "") {
       return;
     }
 
     addMessage({ text: message, sender: true });
-    textInputRef.current?.clear();
-    textRef.current = "";
-  }, [addMessage]);
+    setText("");
+  }, [addMessage, text]);
 
   useEffect(() => {
     legendRef.current?.scrollToOffset({
@@ -177,11 +175,11 @@ function KeyboardChatScrollViewPlayground() {
             />
           </View>
           <TextInput
-            ref={textInputRef}
             multiline
             nativeID="chat-input"
             style={styles.input}
             testID="chat.input"
+            value={text}
             onChangeText={onInput}
             onLayout={onInputLayoutChanged}
           />

src/architecture.ts

@@ -0,0 +1 @@
+export const IS_FABRIC = "nativeFabricUIManager" in global;

src/components/KeyboardChatScrollView/index.tsx

@@ -69,6 +69,7 @@ const KeyboardChatScrollView = forwardRef<
       scroll,
       layout,
       size,
+      contentOffsetY,
       inverted,
       keyboardLiftBehavior,
       freeze,

src/components/KeyboardChatScrollView/useExtraContentPadding/__fixtures__/setup.ts

@@ -1,15 +1,25 @@
 import { renderHook } from "@testing-library/react-native";
 import { useAnimatedRef } from "react-native-reanimated";
 
+import { useExtraContentPadding } from "..";
 import { sv } from "../../../../__fixtures__/sv";
 
-import type { useExtraContentPadding } from "..";
 import type { SharedValue } from "react-native-reanimated";
 import type Reanimated from "react-native-reanimated";
 
 export const mockScrollTo = jest.fn();
 export let reactionEffect: (current: number, previous: number | null) => void;
 
+export const flushRAF = () => new Promise((resolve) => setTimeout(resolve, 0));
+
+let mockForceLegacy = false;
+
+jest.mock("../../../../architecture", () => ({
+  get IS_FABRIC() {
+    return !mockForceLegacy;
+  },
+}));
+
 jest.mock("react-native-reanimated", () => ({
   ...require("react-native-reanimated/mock"),
   scrollTo: (...args: unknown[]) => mockScrollTo(...args),
@@ -31,15 +41,10 @@ type RenderOptions = Omit<
 
 export const createRender = () => {
   return function render(options: RenderOptions) {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const mod = require("..") as {
-      useExtraContentPadding: typeof useExtraContentPadding;
-    };
-
     return renderHook(() => {
       const ref = useAnimatedRef<Reanimated.ScrollView>();
 
-      mod.useExtraContentPadding({
+      useExtraContentPadding({
         scrollViewRef: ref,
         blankSpace: options.blankSpace ?? sv(0),
         ...options,
@@ -49,6 +54,11 @@ export const createRender = () => {
 };
 
 beforeEach(() => {
-  jest.resetModules();
+  mockForceLegacy = false;
   mockScrollTo.mockClear();
 });
+
+export const withLegacyArch = (fn: () => void) => {
+  mockForceLegacy = true;
+  fn();
+};

src/components/KeyboardChatScrollView/useExtraContentPadding/__tests__/always.spec.ts

@@ -1,12 +1,13 @@
 import { sv } from "../../../../__fixtures__/sv";
 import {
   createRender,
+  flushRAF,
   mockScrollTo,
   reactionEffect,
 } from "../__fixtures__/setup";
 
 describe("useExtraContentPadding — always behavior", () => {
-  it("should scrollTo on grow when at end (non-inverted)", () => {
+  it("should scrollTo on grow when at end (non-inverted)", async () => {
     const render = createRender();
 
     render({
@@ -21,6 +22,7 @@ describe("useExtraContentPadding — always behavior", () => {
     });
 
     reactionEffect(20, 0);
+    await flushRAF();
 
     expect(mockScrollTo).toHaveBeenCalledWith(
       expect.anything(),
@@ -30,7 +32,7 @@ describe("useExtraContentPadding — always behavior", () => {
     );
   });
 
-  it("should scrollTo on grow when NOT at end (non-inverted)", () => {
+  it("should scrollTo on grow when NOT at end (non-inverted)", async () => {
     const render = createRender();
 
     render({
@@ -45,11 +47,12 @@ describe("useExtraContentPadding — always behavior", () => {
     });
 
     reactionEffect(20, 0);
+    await flushRAF();
 
     expect(mockScrollTo).toHaveBeenCalledWith(expect.anything(), 0, 120, false);
   });
 
-  it("should scrollTo on shrink (non-inverted)", () => {
+  it("should scrollTo on shrink (non-inverted)", async () => {
     const render = createRender();
 
     render({
@@ -64,6 +67,7 @@ describe("useExtraContentPadding — always behavior", () => {
     });
 
     reactionEffect(0, 20);
+    await flushRAF();
 
     expect(mockScrollTo).toHaveBeenCalledWith(
       expect.anything(),
@@ -73,7 +77,7 @@ describe("useExtraContentPadding — always behavior", () => {
     );
   });
 
-  it("should scrollTo on grow (inverted)", () => {
+  it("should scrollTo on grow (inverted)", async () => {
     const render = createRender();
 
     render({
@@ -88,6 +92,7 @@ describe("useExtraContentPadding — always behavior", () => {
     });
 
     reactionEffect(20, 0);
+    await flushRAF();
 
     expect(mockScrollTo).toHaveBeenCalledWith(expect.anything(), 0, -15, false);
   });

src/components/KeyboardChatScrollView/useExtraContentPadding/__tests__/blankSpace.spec.ts

@@ -1,6 +1,7 @@
 import { sv } from "../../../../__fixtures__/sv";
 import {
   createRender,
+  flushRAF,
   mockScrollTo,
   reactionEffect,
 } from "../__fixtures__/setup";
@@ -29,7 +30,7 @@ describe("useExtraContentPadding — blankSpace floor", () => {
     expect(mockScrollTo).not.toHaveBeenCalled();
   });
 
-  it("should scroll by effective delta when blankSpace partially absorbs", () => {
+  it("should scroll by effective delta when blankSpace partially absorbs", async () => {
     const render = createRender();
 
     render({
@@ -50,11 +51,12 @@ describe("useExtraContentPadding — blankSpace floor", () => {
     // maxScroll = max(2000 - 800 + 500, 0) = 1700
     // target = min(100 + 100, 1700) = 200
     reactionEffect(300, 0);
+    await flushRAF();
 
     expect(mockScrollTo).toHaveBeenCalledWith(expect.anything(), 0, 200, false);
   });
 
-  it("blankSpace=0 produces identical behavior to default", () => {
+  it("blankSpace=0 produces identical behavior to default", async () => {
     const render = createRender();
 
     render({
@@ -75,6 +77,7 @@ describe("useExtraContentPadding — blankSpace floor", () => {
     // maxScroll = max(2000 - 800 + 320, 0) = 1520
     // target = min(1200 + 20, 1520) = 1220
     reactionEffect(20, 0);
+    await flushRAF();
 
     expect(mockScrollTo).toHaveBeenCalledWith(
       expect.anything(),
@@ -107,7 +110,7 @@ describe("useExtraContentPadding — blankSpace floor", () => {
     expect(mockScrollTo).not.toHaveBeenCalled();
   });
 
-  it("should scroll when change exceeds blankSpace floor (inverted)", () => {
+  it("should scroll when change exceeds blankSpace floor (inverted)", async () => {
     const render = createRender();
 
     render({
@@ -127,6 +130,7 @@ describe("useExtraContentPadding — blankSpace floor", () => {
     // effectiveDelta = 100
     // target = max(5 - 100, -500) = max(-95, -500) = -95
     reactionEffect(200, 0);
+    await flushRAF();
 
     expect(mockScrollTo).toHaveBeenCalledWith(expect.anything(), 0, -95, false);
   });