chore: bump legend-list

FabricExample/package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@gorhom/bottom-sheet": "5.2.6",
-    "@legendapp/list": "3.0.0-beta.32",
+    "@legendapp/list": "3.3.3",
     "@lottiefiles/dotlottie-react": "^0.17.10",
     "@react-native-community/blur": "^4.4.1",
     "@react-native-masked-view/masked-view": "^0.3.2",

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

@@ -1,23 +1,20 @@
 import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from "react";
+  KeyboardAwareLegendList,
+  useKeyboardChatComposerInset,
+  useKeyboardScrollToEnd,
+} from "@legendapp/list/keyboard";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Button, Platform, Text, TextInput, View } from "react-native";
 import {
-  KeyboardController,
   KeyboardGestureArea,
   KeyboardStickyView,
 } from "react-native-keyboard-controller";
-import Animated, { FadeIn, useSharedValue } from "react-native-reanimated";
+import Animated, { FadeIn } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
-import { KeyboardChatLegendList } from "./KeyboardChatLegendList.tsx";
 import styles from "./styles";
 
-import type { LegendListRef } from "@legendapp/list";
+import type { LegendListRef } from "@legendapp/list/react-native";
 
 type Message = {
   id: string;
@@ -155,26 +152,15 @@ const AIChat = () => {
   const composerRef = useRef<View>(null);
   const activeTimers = useRef<ReturnType<typeof setTimeout>[]>([]);
   const insets = useSafeAreaInsets();
-  // have to set an initial value higher than it will actually end up,
-  // because reportContentInset doesn't work on android to ensure
-  // initialScrollAtEnd works with extraContentPadding
-  const composerHeight = useSharedValue(100);
-
-  useLayoutEffect(() => {
-    composerRef.current?.measure((_x, _y, _width, height) => {
-      composerHeight.value = height;
-      listRef.current?.reportContentInset({ bottom: height });
-    });
-  }, []);
-
-  const onComposerLayout = useCallback(
-    (event: { nativeEvent: { layout: { height: number } } }) => {
-      const { height } = event.nativeEvent.layout;
-
-      composerHeight.value = height;
-      listRef.current?.reportContentInset({ bottom: height });
-    },
-    [],
+  const { contentInsetEndAdjustment, onComposerLayout } =
+    useKeyboardChatComposerInset(listRef, composerRef, 100);
+  const { freeze, scrollMessageToEnd } = useKeyboardScrollToEnd({ listRef });
+  const anchoredEndSpace = useMemo(
+    () =>
+      anchorToTopIndex === undefined
+        ? undefined
+        : { anchorIndex: anchorToTopIndex },
+    [anchorToTopIndex],
   );
 
   const schedule = useCallback((fn: () => void, ms: number) => {
@@ -205,13 +191,14 @@ const AIChat = () => {
       },
     ]);
 
-    schedule(() => {
-      listRef.current?.scrollToEnd({ animated: true });
-      schedule(() => simulateAIResponse(text, rawInput), 800);
-    }, 200);
+    requestAnimationFrame(() => {
+      void scrollMessageToEnd({ animated: true, closeKeyboard: true }).then(
+        () => schedule(() => simulateAIResponse(text, rawInput), 800),
+      );
+    });
   };
 
-  const sendMessage = async () => {
+  const sendMessage = () => {
     const text = inputText.trim();
 
     if (!text) {
@@ -221,8 +208,6 @@ const AIChat = () => {
     const rawInput = inputText;
 
     setInputText("");
-
-    await KeyboardController.dismiss();
     doSendMessage(text, rawInput);
   };
 
@@ -289,18 +274,21 @@ const AIChat = () => {
         offset={60}
         style={styles.container}
       >
-        <KeyboardChatLegendList
+        <KeyboardAwareLegendList
           ref={listRef}
+          applyWorkaroundForContentInsetHitTestBug
           initialScrollAtEnd
           maintainVisibleContentPosition
-          anchorToTopIndex={anchorToTopIndex}
+          anchoredEndSpace={anchoredEndSpace}
           contentContainerStyle={styles.contentContainer}
+          contentInsetEndAdjustment={contentInsetEndAdjustment}
           data={messages}
-          extraContentPadding={composerHeight}
+          freeze={freeze}
           keyboardLiftBehavior={liftBehavior}
+          keyboardOffset={insets.bottom}
           keyExtractor={(_item, index) => `item-${index}`}
           maintainScrollAtEnd={Platform.OS === "web"}
-          offset={insets.bottom}
+          recycleItems={false}
           renderItem={({ item }) => (
             <View>
               {item.sender === "user" ? (

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

@@ -1,4 +1,4 @@
-import { LegendList } from "@legendapp/list";
+import { LegendList } from "@legendapp/list/react-native";
 import { FlashList } from "@shopify/flash-list";
 import React, {
   useCallback,

FabricExample/yarn.lock

@@ -1462,10 +1462,10 @@
     "@jsonjoy.com/buffers" "^1.0.0"
     "@jsonjoy.com/codegen" "^1.0.0"
 
-"@legendapp/list@3.0.0-beta.32":
-  version "3.0.0-beta.32"
-  resolved "https://registry.yarnpkg.com/@legendapp/list/-/list-3.0.0-beta.32.tgz#33a08df134d103e7ae1920ca8385cb59323cd42b"
-  integrity sha512-lWIdQ1Z3IrR5Iv7I3qOLDYk9Uh/gc03wITNEObTpR2tIYNvgDibOL/3yAznyvkQMuwl3TLquan46Zo0t/XdmIA==
+"@legendapp/list@3.3.3":
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/@legendapp/list/-/list-3.3.3.tgz#219531d71d0020a8e521827f072002224df8cfaa"
+  integrity sha512-p3g4xG6f//s4XQKhuus2189GCQgOHEIbJXHePqeDxj+6UQQQyij4YBjyArNSCgqoP0c03sxDPSOuCFB128Ql6g==
   dependencies:
     use-sync-external-store "^1.5.0"
 

example/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@gorhom/bottom-sheet": "5.2.6",
-    "@legendapp/list": "3.0.0-beta.32",
+    "@legendapp/list": "3.3.3",
     "@react-native-community/blur": "^4.4.1",
     "@react-native-masked-view/masked-view": "^0.3.2",
     "@react-navigation/bottom-tabs": "^7.9.0",