stream-chat-react-native-core 9.6.1-beta.5 → 9.6.1-beta.8

package/src/components/MessageInput/__tests__/__snapshots__/AttachButton.test.tsx.snap

@@ -38,9 +38,9 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
         <View
           handlerTags={
             [
+              37,
+              36,
               35,
-              34,
-              33,
             ]
           }
           onGestureHandlerEvent={[Function]}
@@ -212,9 +212,9 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
             <View
               handlerTags={
                 [
+                  40,
+                  39,
                   38,
-                  37,
-                  36,
                 ]
               }
               onGestureHandlerEvent={[Function]}
@@ -359,9 +359,9 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
             <View
               handlerTags={
                 [
+                  43,
+                  42,
                   41,
-                  40,
-                  39,
                 ]
               }
               onGestureHandlerEvent={[Function]}
@@ -535,9 +535,9 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
             <View
               handlerTags={
                 [
+                  46,
+                  45,
                   44,
-                  43,
-                  42,
                 ]
               }
               onGestureHandlerEvent={[Function]}
@@ -678,9 +678,9 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
             <View
               handlerTags={
                 [
+                  49,
+                  48,
                   47,
-                  46,
-                  45,
                 ]
               }
               onGestureHandlerEvent={[Function]}
@@ -844,17 +844,16 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
       }
     >
       <View
+        collapsable={false}
         style={
           {
             "height": 0,
-            "opacity": 0,
-            "width": 0,
           }
         }
-        testID="message-overlay-top"
+        testID="message-overlay-message"
       >
         <View
-          name="top-item"
+          name="message-overlay"
           style={
             {
               "bottom": 0,
@@ -867,16 +866,17 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
         />
       </View>
       <View
-        pointerEvents="box-none"
         style={
           {
             "height": 0,
+            "opacity": 0,
+            "width": 0,
           }
         }
-        testID="message-overlay-message"
+        testID="message-overlay-top"
       >
         <View
-          name="message-overlay"
+          name="top-item"
           style={
             {
               "bottom": 0,
@@ -954,9 +954,9 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
         <View
           handlerTags={
             [
+              20,
               19,
               18,
-              17,
             ]
           }
           onGestureHandlerEvent={[Function]}
@@ -1128,9 +1128,9 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
             <View
               handlerTags={
                 [
+                  23,
                   22,
                   21,
-                  20,
                 ]
               }
               onGestureHandlerEvent={[Function]}
@@ -1275,9 +1275,9 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
             <View
               handlerTags={
                 [
+                  26,
                   25,
                   24,
-                  23,
                 ]
               }
               onGestureHandlerEvent={[Function]}
@@ -1451,9 +1451,9 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
             <View
               handlerTags={
                 [
+                  29,
                   28,
                   27,
-                  26,
                 ]
               }
               onGestureHandlerEvent={[Function]}
@@ -1594,9 +1594,9 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
             <View
               handlerTags={
                 [
+                  32,
                   31,
                   30,
-                  29,
                 ]
               }
               onGestureHandlerEvent={[Function]}
@@ -1760,17 +1760,16 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
       }
     >
       <View
+        collapsable={false}
         style={
           {
             "height": 0,
-            "opacity": 0,
-            "width": 0,
           }
         }
-        testID="message-overlay-top"
+        testID="message-overlay-message"
       >
         <View
-          name="top-item"
+          name="message-overlay"
           style={
             {
               "bottom": 0,
@@ -1783,16 +1782,17 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
         />
       </View>
       <View
-        pointerEvents="box-none"
         style={
           {
             "height": 0,
+            "opacity": 0,
+            "width": 0,
           }
         }
-        testID="message-overlay-message"
+        testID="message-overlay-top"
       >
         <View
-          name="message-overlay"
+          name="top-item"
           style={
             {
               "bottom": 0,
@@ -2676,17 +2676,16 @@ exports[`AttachButton should render an disabled AttachButton 1`] = `
       }
     >
       <View
+        collapsable={false}
         style={
           {
             "height": 0,
-            "opacity": 0,
-            "width": 0,
           }
         }
-        testID="message-overlay-top"
+        testID="message-overlay-message"
       >
         <View
-          name="top-item"
+          name="message-overlay"
           style={
             {
               "bottom": 0,
@@ -2699,16 +2698,17 @@ exports[`AttachButton should render an disabled AttachButton 1`] = `
         />
       </View>
       <View
-        pointerEvents="box-none"
         style={
           {
             "height": 0,
+            "opacity": 0,
+            "width": 0,
           }
         }
-        testID="message-overlay-message"
+        testID="message-overlay-top"
       >
         <View
-          name="message-overlay"
+          name="top-item"
           style={
             {
               "bottom": 0,

package/src/components/MessageInput/__tests__/__snapshots__/SendButton.test.tsx.snap

@@ -842,17 +842,16 @@ exports[`SendButton should render a SendButton 1`] = `
       }
     >
       <View
+        collapsable={false}
         style={
           {
             "height": 0,
-            "opacity": 0,
-            "width": 0,
           }
         }
-        testID="message-overlay-top"
+        testID="message-overlay-message"
       >
         <View
-          name="top-item"
+          name="message-overlay"
           style={
             {
               "bottom": 0,
@@ -865,16 +864,17 @@ exports[`SendButton should render a SendButton 1`] = `
         />
       </View>
       <View
-        pointerEvents="box-none"
         style={
           {
             "height": 0,
+            "opacity": 0,
+            "width": 0,
           }
         }
-        testID="message-overlay-message"
+        testID="message-overlay-top"
       >
         <View
-          name="message-overlay"
+          name="top-item"
           style={
             {
               "bottom": 0,
@@ -952,9 +952,9 @@ exports[`SendButton should render a disabled SendButton 1`] = `
         <View
           handlerTags={
             [
+              20,
               19,
               18,
-              17,
             ]
           }
           onGestureHandlerEvent={[Function]}
@@ -1124,9 +1124,9 @@ exports[`SendButton should render a disabled SendButton 1`] = `
             <View
               handlerTags={
                 [
+                  23,
                   22,
                   21,
-                  20,
                 ]
               }
               onGestureHandlerEvent={[Function]}
@@ -1271,9 +1271,9 @@ exports[`SendButton should render a disabled SendButton 1`] = `
             <View
               handlerTags={
                 [
+                  26,
                   25,
                   24,
-                  23,
                 ]
               }
               onGestureHandlerEvent={[Function]}
@@ -1447,9 +1447,9 @@ exports[`SendButton should render a disabled SendButton 1`] = `
             <View
               handlerTags={
                 [
+                  29,
                   28,
                   27,
-                  26,
                 ]
               }
               onGestureHandlerEvent={[Function]}
@@ -1590,9 +1590,9 @@ exports[`SendButton should render a disabled SendButton 1`] = `
             <View
               handlerTags={
                 [
+                  32,
                   31,
                   30,
-                  29,
                 ]
               }
               onGestureHandlerEvent={[Function]}
@@ -1756,17 +1756,16 @@ exports[`SendButton should render a disabled SendButton 1`] = `
       }
     >
       <View
+        collapsable={false}
         style={
           {
             "height": 0,
-            "opacity": 0,
-            "width": 0,
           }
         }
-        testID="message-overlay-top"
+        testID="message-overlay-message"
       >
         <View
-          name="top-item"
+          name="message-overlay"
           style={
             {
               "bottom": 0,
@@ -1779,16 +1778,17 @@ exports[`SendButton should render a disabled SendButton 1`] = `
         />
       </View>
       <View
-        pointerEvents="box-none"
         style={
           {
             "height": 0,
+            "opacity": 0,
+            "width": 0,
           }
         }
-        testID="message-overlay-message"
+        testID="message-overlay-top"
       >
         <View
-          name="message-overlay"
+          name="top-item"
           style={
             {
               "bottom": 0,

package/src/components/Thread/__tests__/__snapshots__/Thread.test.tsx.snap

@@ -1833,9 +1833,9 @@ exports[`Thread should match thread snapshot 1`] = `
                       <View
                         handlerTags={
                           [
+                            27,
                             26,
                             25,
-                            24,
                           ]
                         }
                         onGestureHandlerEvent={[Function]}
@@ -2211,9 +2211,9 @@ exports[`Thread should match thread snapshot 1`] = `
                           <View
                             handlerTags={
                               [
+                                30,
                                 29,
                                 28,
-                                27,
                               ]
                             }
                             onGestureHandlerEvent={[Function]}
@@ -2393,9 +2393,9 @@ exports[`Thread should match thread snapshot 1`] = `
           <View
             handlerTags={
               [
+                33,
                 32,
                 31,
-                30,
               ]
             }
             onGestureHandlerEvent={[Function]}
@@ -2540,9 +2540,9 @@ exports[`Thread should match thread snapshot 1`] = `
           <View
             handlerTags={
               [
+                36,
                 35,
                 34,
-                33,
               ]
             }
             onGestureHandlerEvent={[Function]}
@@ -2716,9 +2716,9 @@ exports[`Thread should match thread snapshot 1`] = `
           <View
             handlerTags={
               [
+                39,
                 38,
                 37,
-                36,
               ]
             }
             onGestureHandlerEvent={[Function]}
@@ -2859,9 +2859,9 @@ exports[`Thread should match thread snapshot 1`] = `
           <View
             handlerTags={
               [
+                42,
                 41,
                 40,
-                39,
               ]
             }
             onGestureHandlerEvent={[Function]}

package/src/contexts/overlayContext/MessageOverlayHostLayer.tsx

@@ -12,11 +12,13 @@ import {
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
   type AnimatedStyle,
+  cancelAnimation,
   clamp,
   runOnJS,
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
+  withDecay,
   withSpring,
 } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -118,6 +120,41 @@ export const MessageOverlayHostLayer = () => {
   const minY = topInset + padding;
   const maxY = screenH - bottomInset - padding;
 
+  // When top + message + bottom don't fit the usable area, a Pan gesture drives `scrollY` and
+  // the message is translated by it (see hostStyle). No ScrollView, all on the UI thread.
+  const scrollY = useSharedValue(0);
+  const scrollStartY = useSharedValue(0);
+
+  const scrollGeom = useDerivedValue(() => {
+    if (!messageH.value || !topH.value || !bottomH.value) {
+      return { needsScroll: false };
+    }
+    const available = maxY - minY;
+    const contentH = topH.value.h + messageH.value.h + bottomH.value.h;
+    return { needsScroll: contentH > available };
+  });
+
+  // How far the message can scroll: the amount its content overflows the usable area. At max
+  // scroll the message tail lands just above the sticky footer.
+  const maxScroll = useDerivedValue(() => {
+    if (!scrollGeom.value.needsScroll || !messageH.value || !topH.value || !bottomH.value) {
+      return 0;
+    }
+    const available = maxY - minY;
+    const contentH = topH.value.h + messageH.value.h + bottomH.value.h;
+    return Math.max(0, contentH - available);
+  });
+
+  // On close, freeze any inflight fling (the message closes from where it was scrolled - see
+  // `hostStyle`) and only reset the offset once fully closed, ready for the next open.
+  useEffect(() => {
+    if (closing) {
+      cancelAnimation(scrollY);
+    } else if (!isActive) {
+      scrollY.value = 0;
+    }
+  }, [closing, isActive, scrollY]);
+
   const backdrop = useSharedValue(0);
   const closeCoverOpacity = useSharedValue(0);
 
@@ -171,6 +208,12 @@ export const MessageOverlayHostLayer = () => {
     const anchorY = messageH.value.y;
     const msgH = messageH.value.h;
     const minTop = minY + topH.value.h;
+
+    // When scrolling, pin the message directly under the (pinned) top item; scrollY does the rest.
+    if (scrollGeom.value.needsScroll) {
+      return minTop - anchorY;
+    }
+
     const maxTopWithBottom = maxY - (msgH + bottomH.value.h);
     const canFitBottomWithoutOverlap = minTop <= maxTopWithBottom;
     const solvedTop = canFitBottomWithoutOverlap
@@ -186,6 +229,12 @@ export const MessageOverlayHostLayer = () => {
     const anchorMessageTop = messageH.value.y;
     const msgH = messageH.value.h;
     const minMessageTop = minY + topH.value.h;
+
+    // When scrolling, pin the bottom item as a sticky footer at the bottom of the usable area.
+    if (scrollGeom.value.needsScroll) {
+      return maxY - bottomH.value.h - bottomH.value.y;
+    }
+
     const maxMessageTopWithBottom = maxY - (msgH + bottomH.value.h);
     const canFitBottomWithoutOverlap = minMessageTop <= maxMessageTopWithBottom;
     const solvedMessageTop = canFitBottomWithoutOverlap
@@ -234,19 +283,47 @@ export const MessageOverlayHostLayer = () => {
     };
   });
 
+  // Two composed `translateY`: first is the springed open/close position, second is the raw
+  // scroll offset. On close we fold the scroll into the first (springed) target so the message
+  // animates back from where it was scrolled, while the latter stays put.
   const hostStyle = useAnimatedStyle(() => {
     if (!messageH.value) return { height: 0 };
-    const translateY = isActive ? (closing ? closeCorrectionY.value : messageShiftY.value) : 0;
+    const scroll = scrollGeom.value.needsScroll ? scrollY.value : 0;
+    const translateY = isActive
+      ? closing
+        ? closeCorrectionY.value + scroll
+        : messageShiftY.value
+      : 0;
     return {
       height: messageH.value.h,
       left: messageH.value.x,
       position: 'absolute',
       top: messageH.value.y,
-      transform: [{ translateY: withSpring(translateY, { duration: DURATION }) }],
+      transform: [
+        { translateY: withSpring(translateY, { duration: DURATION }) },
+        { translateY: scroll === 0 ? 0 : -scroll },
+      ],
       width: messageH.value.w,
     };
   });
 
+  // Drag scrolls the message (clamped to `[0, maxScroll]`); release flings with decay. When the
+  // content fits, `maxScroll` is 0 so this is a noop.
+  const pan = useMemo(
+    () =>
+      Gesture.Pan()
+        .onBegin(() => {
+          scrollStartY.value = scrollY.value;
+        })
+        .onUpdate((e) => {
+          scrollY.value = clamp(scrollStartY.value - e.translationY, 0, maxScroll.value);
+        })
+        .onEnd((e) => {
+          scrollY.value = withDecay({ clamp: [0, maxScroll.value], velocity: -e.velocityY });
+        }),
+    [maxScroll, scrollStartY, scrollY],
+  );
+
   const tap = useMemo(
     () =>
       Gesture.Tap()
@@ -279,8 +356,9 @@ export const MessageOverlayHostLayer = () => {
         })
         .onEnd(() => {
           runOnJS(closeOverlay)();
-        }),
-    [bottomH, bottomShiftY, messageShiftY, topH],
+        })
+        .requireExternalGestureToFail(pan),
+    [bottomH, bottomShiftY, messageShiftY, pan, topH],
   );
 
   return (
@@ -314,18 +392,20 @@ export const MessageOverlayHostLayer = () => {
             />
           ) : (
             <>
+              {/*
+                Message renders first (lowest z) so it sits behind the opaque top/bottom items;
+                a scrolled/overflowing message passes behind them instead of being clipped.
+              */}
+              <GestureDetector gesture={pan}>
+                <Animated.View style={hostStyle} testID='message-overlay-message'>
+                  <PortalHost name='message-overlay' style={styles.absoluteFill} />
+                </Animated.View>
+              </GestureDetector>
+
               <Animated.View style={topItemStyle} testID='message-overlay-top'>
                 <PortalHost name='top-item' style={styles.absoluteFill} />
               </Animated.View>
 
-              <Animated.View
-                pointerEvents='box-none'
-                style={hostStyle}
-                testID='message-overlay-message'
-              >
-                <PortalHost name='message-overlay' style={styles.absoluteFill} />
-              </Animated.View>
-
               <Animated.View style={bottomItemStyle} testID='message-overlay-bottom'>
                 <PortalHost name='bottom-item' style={styles.absoluteFill} />
               </Animated.View>