feat: introduce KeyboardChatScrollView

FabricExample/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@gorhom/bottom-sheet": "5.2.6",
+    "@legendapp/list": "3.0.0-beta.32",
     "@lottiefiles/dotlottie-react": "^0.17.10",
     "@react-native-community/blur": "^4.4.1",
     "@react-native-masked-view/masked-view": "^0.3.2",
@@ -36,7 +37,8 @@
     "react-native-toast-message": "^2.3.0",
     "react-native-web": "^0.21.2",
     "react-native-webview": "^13.16.0",
-    "react-native-worklets": "^0.7.1"
+    "react-native-worklets": "^0.7.1",
+    "zustand": "^5.0.10"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
@@ -88,5 +90,10 @@
   },
   "engines": {
     "node": ">=20"
+  },
+  "reanimated": {
+    "staticFeatureFlags": {
+      "USE_COMMIT_HOOK_ONLY_FOR_REACT_COMMITS": true
+    }
   }
 }

FabricExample/src/constants/screenNames.ts

@@ -27,4 +27,5 @@ export enum ScreenNames {
   LIQUID_KEYBOARD = "LIQUID_KEYBOARD",
   KEYBOARD_SHARED_TRANSITIONS = "KEYBOARD_SHARED_TRANSITIONS",
   KEYBOARD_EXTENDER = "KEYBOARD_EXTENDER",
+  CHAT_KIT = "CHAT_KIT",
 }

FabricExample/src/navigation/ExamplesStack/index.tsx

@@ -13,6 +13,7 @@ import InteractiveKeyboard from "../../screens/Examples/InteractiveKeyboard";
 import InteractiveKeyboardIOS from "../../screens/Examples/InteractiveKeyboardIOS";
 import KeyboardAnimation from "../../screens/Examples/KeyboardAnimation";
 import KeyboardAvoidingViewExample from "../../screens/Examples/KeyboardAvoidingView";
+import KeyboardChatScrollViewPlayground from "../../screens/Examples/KeyboardChatScrollView";
 import KeyboardExtender from "../../screens/Examples/KeyboardExtender";
 import KeyboardSharedTransitionExample from "../../screens/Examples/KeyboardSharedTransitions";
 import UseKeyboardState from "../../screens/Examples/KeyboardStateHook";
@@ -54,6 +55,7 @@ export type ExamplesStackParamList = {
   [ScreenNames.LIQUID_KEYBOARD]: undefined;
   [ScreenNames.KEYBOARD_SHARED_TRANSITIONS]: undefined;
   [ScreenNames.KEYBOARD_EXTENDER]: undefined;
+  [ScreenNames.CHAT_KIT]: undefined;
 };
 
 const Stack = createStackNavigator<ExamplesStackParamList>();
@@ -138,6 +140,14 @@ const options = {
     title: "Keyboard Extender",
     headerShown: false,
   },
+  [ScreenNames.CHAT_KIT]: {
+    title: "Chat Kit",
+    headerTintColor: "#fff",
+    headerStyle: {
+      backgroundColor: "#3A3A3C",
+    },
+    headerBackTitle: "Back",
+  },
 };
 
 const ExamplesStack = () => (
@@ -267,6 +277,11 @@ const ExamplesStack = () => (
       name={ScreenNames.KEYBOARD_EXTENDER}
       options={options[ScreenNames.KEYBOARD_EXTENDER]}
     />
+    <Stack.Screen
+      component={KeyboardChatScrollViewPlayground}
+      name={ScreenNames.CHAT_KIT}
+      options={options[ScreenNames.CHAT_KIT]}
+    />
   </Stack.Navigator>
 );
 

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

@@ -0,0 +1,83 @@
+import React, { forwardRef, useCallback, useMemo, useState } from "react";
+import {
+  type LayoutChangeEvent,
+  type ScrollViewProps,
+  StyleSheet,
+  Text,
+} from "react-native";
+import { KeyboardChatScrollView } from "react-native-keyboard-controller";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+import { useChatConfigStore } from "./store";
+import { MARGIN, TEXT_INPUT_HEIGHT } from "./styles";
+
+export type VirtualizedListScrollViewRef = React.ElementRef<
+  typeof KeyboardChatScrollView
+>;
+
+const VirtualizedListScrollView = forwardRef<
+  VirtualizedListScrollViewRef,
+  ScrollViewProps
+>(({ onLayout: onLayoutProp, ...props }, ref) => {
+  const [layoutPass, setLayoutPass] = useState(0);
+  const { bottom } = useSafeAreaInsets();
+  const chatKitOffset = bottom - MARGIN;
+
+  const { inverted, freeze, mode, keyboardLiftBehavior } = useChatConfigStore();
+
+  const contentContainerStyle = useMemo(
+    () => ({ paddingBottom: TEXT_INPUT_HEIGHT + MARGIN }),
+    [],
+  );
+  const invertedContentContainerStyle = useMemo(
+    () => ({ paddingTop: TEXT_INPUT_HEIGHT + MARGIN }),
+    [],
+  );
+  // on new arch only FlatList supports `inverted` prop
+  const isInvertedSupported = inverted && mode === "flat" ? inverted : false;
+  const onLayout = useCallback(
+    (e: LayoutChangeEvent) => {
+      setLayoutPass((l) => l + 1);
+      onLayoutProp?.(e);
+    },
+    [onLayoutProp],
+  );
+
+  return (
+    <>
+      <KeyboardChatScrollView
+        ref={ref}
+        automaticallyAdjustContentInsets={false}
+        contentContainerStyle={
+          isInvertedSupported
+            ? invertedContentContainerStyle
+            : contentContainerStyle
+        }
+        contentInsetAdjustmentBehavior="never"
+        freeze={freeze}
+        inverted={isInvertedSupported}
+        keyboardDismissMode="interactive"
+        keyboardLiftBehavior={keyboardLiftBehavior}
+        offset={chatKitOffset}
+        testID="chat.scroll"
+        onLayout={onLayout}
+        {...props}
+      />
+      <Text style={styles.counter} testID="layout_passes">
+        Layout pass: {layoutPass}
+      </Text>
+    </>
+  );
+});
+
+const styles = StyleSheet.create({
+  counter: {
+    position: "absolute",
+    color: "white",
+    top: 0,
+    padding: 12,
+    backgroundColor: "#3c3c3c",
+  },
+});
+
+export default VirtualizedListScrollView;

FabricExample/src/screens/Examples/KeyboardChatScrollView/components/Message.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+
+import type { MessageProps } from "../../../../components/Message/types";
+
+/**
+ * Fork of original Message component. Created in order not to break existing e2e tests (requires assets re-generation).
+ */
+export default function Message({ text, sender }: MessageProps) {
+  return (
+    <View style={sender ? styles.senderContainer : styles.recipientContainer}>
+      <Text style={styles.message}>{text}</Text>
+    </View>
+  );
+}
+
+const container = {
+  borderRadius: 10,
+  padding: 10,
+  margin: 10,
+  marginVertical: 5,
+  maxWidth: "80%" as const,
+};
+
+const styles = StyleSheet.create({
+  senderContainer: {
+    alignSelf: "flex-end",
+    backgroundColor: "#F8F8FC",
+    ...container,
+  },
+  recipientContainer: {
+    alignSelf: "flex-start",
+    backgroundColor: "#64D2FF",
+    ...container,
+  },
+  message: {
+    color: "#000000",
+  },
+});

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

@@ -0,0 +1,166 @@
+import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet";
+import { useNavigation } from "@react-navigation/native";
+import React, { useCallback, useEffect, useRef } from "react";
+import { Button, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { KeyboardController } from "react-native-keyboard-controller";
+
+import Switch from "../../../components/Switch";
+
+import { useChatConfigStore } from "./store";
+
+function ConfigSheet() {
+  const navigation = useNavigation();
+  const bottomSheetModalRef = useRef<BottomSheet>(null);
+  const inverted = useChatConfigStore((state) => state.inverted);
+  const setInverted = useChatConfigStore((state) => state.setInverted);
+  const beginning = useChatConfigStore((state) => state.beginning);
+  const setBeginning = useChatConfigStore((state) => state.setBeginning);
+  const setFreeze = useChatConfigStore((state) => state.setFreeze);
+  const mode = useChatConfigStore((state) => state.mode);
+  const setMode = useChatConfigStore((state) => state.setMode);
+  const keyboardLiftBehavior = useChatConfigStore(
+    (state) => state.keyboardLiftBehavior,
+  );
+  const nextLiftBehavior = useChatConfigStore(
+    (state) => state.nextLiftBehavior,
+  );
+
+  const handlePresentModalPress = useCallback(async () => {
+    setFreeze(true);
+    requestAnimationFrame(async () => {
+      await KeyboardController.dismiss({ keepFocus: true });
+      bottomSheetModalRef.current?.expand();
+    });
+  }, [setFreeze]);
+
+  const handleSheetChange = useCallback(
+    (index: number) => {
+      if (index < 0) {
+        setFreeze(false);
+        KeyboardController.setFocusTo("current");
+      }
+    },
+    [setFreeze],
+  );
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerRight: () => (
+        <Text
+          style={styles.header}
+          testID="open_bottom_sheet_modal"
+          onPress={handlePresentModalPress}
+        >
+          Open config
+        </Text>
+      ),
+    });
+  }, [navigation]);
+
+  return (
+    <BottomSheet
+      ref={bottomSheetModalRef}
+      index={-1}
+      snapPoints={["50%"]}
+      onChange={handleSheetChange}
+    >
+      <BottomSheetView style={styles.bottomSheetContent}>
+        <Button
+          testID="bottom_sheet_close_modal"
+          title="Close modal"
+          onPress={() => bottomSheetModalRef.current?.close()}
+        />
+        <View style={styles.switchContainer}>
+          <Text style={styles.text}>Toggle inverted</Text>
+          <Switch
+            testID="bottom_sheet_toggle_inverted_state"
+            value={inverted}
+            onChange={() => {
+              setInverted(!inverted);
+            }}
+          />
+        </View>
+        <View style={styles.switchContainer}>
+          <Text style={styles.text}>Toggle beginning</Text>
+          <Switch
+            testID="bottom_sheet_toggle_beginning_state"
+            value={beginning}
+            onChange={() => {
+              setBeginning(!beginning);
+            }}
+          />
+        </View>
+        <View style={styles.switchContainer}>
+          <Text style={styles.text}>Use Scroll View</Text>
+          <Switch
+            testID="bottom_sheet_toggle_scroll_view_list_state"
+            value={mode === "scroll"}
+            onChange={() => {
+              setMode("scroll");
+            }}
+          />
+        </View>
+        <View style={styles.switchContainer}>
+          <Text style={styles.text}>Use Flat List</Text>
+          <Switch
+            testID="bottom_sheet_toggle_flat_list_state"
+            value={mode === "flat"}
+            onChange={() => {
+              setMode("flat");
+            }}
+          />
+        </View>
+        <View style={styles.switchContainer}>
+          <Text style={styles.text}>Use Flash List</Text>
+          <Switch
+            testID="bottom_sheet_toggle_flash_list_state"
+            value={mode === "flash"}
+            onChange={() => {
+              setMode("flash");
+            }}
+          />
+        </View>
+        <View style={styles.switchContainer}>
+          <Text style={styles.text}>Use Legend List</Text>
+          <Switch
+            testID="bottom_sheet_toggle_legend_list_state"
+            value={mode === "legend"}
+            onChange={() => {
+              setMode("legend");
+            }}
+          />
+        </View>
+        <View style={styles.switchContainer}>
+          <Text style={styles.text}>Lifting mode</Text>
+          <TouchableOpacity
+            testID="bottom_sheet_next_keyboard_lift_behavior"
+            onPress={nextLiftBehavior}
+          >
+            <Text style={styles.text}>{keyboardLiftBehavior}</Text>
+          </TouchableOpacity>
+        </View>
+      </BottomSheetView>
+    </BottomSheet>
+  );
+}
+
+const styles = StyleSheet.create({
+  header: {
+    color: "white",
+    paddingRight: 12,
+  },
+  bottomSheetContent: {
+    flex: 1,
+  },
+  switchContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    margin: 16,
+  },
+  text: {
+    color: "black",
+  },
+});
+
+export default ConfigSheet;

FabricExample/src/screens/Examples/KeyboardChatScrollView/data.ts

@@ -0,0 +1,25 @@
+import { history } from "../../../components/Message/data";
+
+export const messages = [
+  ...history,
+  // continue dialog further
+  { text: "Do you any other questions?", sender: true },
+  { text: "Yes, I have a question about teleport library" },
+  { text: "Do you know anything about it?", sender: true },
+  {
+    text: "I have seen some techno demos, but haven't tried it uet",
+    sender: true,
+  },
+  { text: "Yes, I already tried it in my project" },
+  {
+    text: "It's pretty cool. We were able to built gallery with share element transitions without any flickering or any other issues",
+    sender: true,
+  },
+  { text: "So far it looks cool!", sender: true },
+  { text: "And seems to be pretty stable", sender: true },
+  {
+    text: "This is a literally missing 'move' operation in react/react-native. Before we could only create/delete elements, but now you get power of zero-overhead 'move' operation and it can bring your app performance on the next level and also significantly boost your app UI cause it unlocks the power that we didn't have before",
+  },
+  { text: "Wow! That's awesome!" },
+  { text: "Yes! Totally agree!", sender: true },
+];