Merge pull request #529 from streamplace/natb/scroll-down-kb-dismiss

chat: scroll up to dismiss keyboard

js/app/components/mobile/chat.tsx

···
 } from "@streamplace/components";
 import { useKeyboard } from "hooks/useKeyboard";
 import { useEffect } from "react";
-import { Keyboard, Pressable, TouchableWithoutFeedback } from "react-native";
+import { Pressable } from "react-native";
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
···
         { width: "100%", maxWidth: "100%" },
       ]}
     >
-      <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
-        <View style={[flex.values[1]]}>
-          <Chat canModerate={canModerate} />
-        </View>
-      </TouchableWithoutFeedback>
+      <View style={[flex.values[1]]}>
+        <Chat canModerate={canModerate} />
+      </View>
       <View style={[layout.flex.column, gap.all[2], px[4]]}>
         {handle ? (
           <ChatBox

js/components/src/components/chat/chat.tsx

···
 import { Ellipsis, Reply } from "lucide-react-native";
 import { ComponentProps, memo, useEffect, useRef, useState } from "react";
-import { Platform, Pressable } from "react-native";
+import { Keyboard, Platform, Pressable } from "react-native";
 import { FlatList } from "react-native-gesture-handler";
 import Swipeable, {
   SwipeableMethods,
···
   canModerate?: boolean;
 }) {
   const chat = useChat();
+  const [isScrolledUp, setIsScrolledUp] = useState(false);
+
+  const handleScroll = (event: any) => {
+    const { contentOffset } = event.nativeEvent;
+
+    const scrolledUp = contentOffset.y > 20; // threshold
+
+    if (scrolledUp !== isScrolledUp) {
+      setIsScrolledUp(scrolledUp);
+
+      // Dismiss keyboard when scrolled up
+      if (scrolledUp && Platform.OS !== "web") {
+        Keyboard.dismiss();
+      }
+    }
+  };
 
   if (!chat)
     return (
···
         maxToRenderPerBatch={10}
         initialNumToRender={10}
         updateCellsBatchingPeriod={50}
+        onScroll={handleScroll}
+        scrollEventThrottle={16}
       />
       <ModView />
     </View>