stream-chat-react-native-core 9.0.0-beta.17 → 9.0.0-beta.19

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

@@ -789,16 +789,13 @@ exports[`SendButton should render a SendButton 1`] = `
         style={
           [
             {
-              "height": 0,
+              "opacity": 0,
             },
             {
               "transform": [
                 {
                   "scale": 0,
                 },
-                {
-                  "translateY": 0,
-                },
               ],
             },
           ]
@@ -821,18 +818,9 @@ exports[`SendButton should render a SendButton 1`] = `
       <View
         pointerEvents="box-none"
         style={
-          [
-            {
-              "height": 0,
-            },
-            {
-              "transform": [
-                {
-                  "translateY": 0,
-                },
-              ],
-            },
-          ]
+          {
+            "height": 0,
+          }
         }
         testID="message-overlay-message"
       >
@@ -853,16 +841,13 @@ exports[`SendButton should render a SendButton 1`] = `
         style={
           [
             {
-              "height": 0,
+              "opacity": 0,
             },
             {
               "transform": [
                 {
                   "scale": 0,
                 },
-                {
-                  "translateY": 0,
-                },
               ],
             },
           ]
@@ -1676,16 +1661,13 @@ exports[`SendButton should render a disabled SendButton 1`] = `
         style={
           [
             {
-              "height": 0,
+              "opacity": 0,
             },
             {
               "transform": [
                 {
                   "scale": 0,
                 },
-                {
-                  "translateY": 0,
-                },
               ],
             },
           ]
@@ -1708,18 +1690,9 @@ exports[`SendButton should render a disabled SendButton 1`] = `
       <View
         pointerEvents="box-none"
         style={
-          [
-            {
-              "height": 0,
-            },
-            {
-              "transform": [
-                {
-                  "translateY": 0,
-                },
-              ],
-            },
-          ]
+          {
+            "height": 0,
+          }
         }
         testID="message-overlay-message"
       >
@@ -1740,16 +1713,13 @@ exports[`SendButton should render a disabled SendButton 1`] = `
         style={
           [
             {
-              "height": 0,
+              "opacity": 0,
             },
             {
               "transform": [
                 {
                   "scale": 0,
                 },
-                {
-                  "translateY": 0,
-                },
               ],
             },
           ]

package/src/components/UIComponents/BottomSheetModal.tsx

@@ -1,4 +1,11 @@
-import React, { PropsWithChildren, useEffect, useLayoutEffect, useMemo, useState } from 'react';
+import React, {
+  PropsWithChildren,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
   EventSubscription,
   Keyboard,
@@ -13,7 +20,6 @@ import {
 import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
 import type { KeyboardEventData } from 'react-native-keyboard-controller';
 import Animated, {
-  cancelAnimation,
   Easing,
   FadeIn,
   runOnJS,
@@ -70,15 +76,21 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
 
   const baseHeight = Math.min(height, maxHeight);
   const snapPoints = useMemo(() => [baseHeight, maxHeight], [baseHeight, maxHeight]);
+  const snapPointsTranslateY = useMemo(
+    () => snapPoints.map((point) => maxHeight - point),
+    [maxHeight, snapPoints],
+  );
 
-  const translateY = useSharedValue(maxHeight);
+  const sheetTranslateY = useSharedValue(maxHeight);
   const keyboardOffset = useSharedValue(0);
   const currentSnapIndex = useSharedValue(0);
 
   const isOpen = useSharedValue(false);
   const isOpening = useSharedValue(false);
 
-  const panStartY = useSharedValue(0);
+  const panStartTranslateY = useSharedValue(0);
+  const hasCommittedVisibilityRef = useRef(false);
+  const wasVisibleRef = useRef(false);
 
   const [renderContent, setRenderContent] = useState(!lazy);
 
@@ -88,35 +100,47 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
     }
   });
 
-  const hideContent = useStableCallback(() => {
-    if (lazy) {
-      setRenderContent(false);
+  const finishClose = useStableCallback((closeAnimationFinishedCallback?: () => void) => {
+    onClose();
+    if (closeAnimationFinishedCallback) {
+      Platform.OS === 'ios'
+        ? closeAnimationFinishedCallback()
+        : setTimeout(() => closeAnimationFinishedCallback(), 100);
     }
   });
 
+  const closeFromGesture = useStableCallback(() => {
+    requestAnimationFrame(() => {
+      isOpen.value = false;
+      isOpening.value = false;
+
+      sheetTranslateY.value = withTiming(
+        maxHeight,
+        { duration: 250, easing: Easing.out(Easing.cubic) },
+        (finished) => {
+          if (finished) {
+            runOnJS(onClose)();
+          }
+        },
+      );
+    });
+  });
+
   const close = useStableCallback((closeAnimationFinishedCallback?: () => void) => {
-    // hide content immediately
-    hideContent();
+    if (!visible || !isOpen.value) {
+      return;
+    }
 
     isOpen.value = false;
     isOpening.value = false;
 
-    cancelAnimation(translateY);
-
-    const closeCallback = () => {
-      onClose();
-      if (closeAnimationFinishedCallback) {
-        Platform.OS === 'ios'
-          ? closeAnimationFinishedCallback()
-          : setTimeout(() => closeAnimationFinishedCallback(), 100);
-      }
-    };
-
-    translateY.value = withTiming(
+    sheetTranslateY.value = withTiming(
       maxHeight,
       { duration: 250, easing: Easing.out(Easing.cubic) },
       (finished) => {
-        if (finished) runOnJS(closeCallback)();
+        if (finished) {
+          runOnJS(finishClose)(closeAnimationFinishedCallback);
+        }
       },
     );
   });
@@ -124,57 +148,38 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
   // modal opening layout effect - we make sure to only show the content
   // after the animation has finished if `lazy` has been set to true
   useLayoutEffect(() => {
-    if (!visible) return;
+    const wasVisible = hasCommittedVisibilityRef.current ? wasVisibleRef.current : false;
+    hasCommittedVisibilityRef.current = true;
+    wasVisibleRef.current = visible;
+
+    if (!visible || wasVisible) {
+      return;
+    }
 
     isOpen.value = true;
     isOpening.value = true;
     currentSnapIndex.value = 0;
+    sheetTranslateY.value = maxHeight;
 
-    cancelAnimation(translateY);
-
-    // start from closed
-    translateY.value = maxHeight;
-
-    // Snapshot current keyboard offset as the open target.
-    // If keyboard changes during opening, we’ll adjust after.
-    const initialTarget = keyboardOffset.value + (maxHeight - snapPoints[currentSnapIndex.value]);
-
-    translateY.value = withTiming(
-      initialTarget,
+    sheetTranslateY.value = withTiming(
+      snapPointsTranslateY[0],
       { duration: 250, easing: Easing.out(Easing.cubic) },
       (finished) => {
         if (!finished) return;
 
-        // opening the modal has now truly finished
         isOpening.value = false;
-
-        // reveal the content if we want to load it lazily
         runOnJS(showContent)();
-
-        // if keyboard offset changed while we were opening, we do a
-        // follow-up adjustment (we do not gate the content however)
-        const latestTarget =
-          keyboardOffset.value + (maxHeight - snapPoints[currentSnapIndex.value]);
-        if (latestTarget !== initialTarget && isOpen.value) {
-          cancelAnimation(translateY);
-          translateY.value = withTiming(latestTarget, {
-            duration: 250,
-            easing: Easing.inOut(Easing.ease),
-          });
-        }
       },
     );
   }, [
     visible,
-    hideContent,
     isOpen,
     isOpening,
-    keyboardOffset,
     maxHeight,
-    snapPoints,
     showContent,
-    translateY,
+    sheetTranslateY,
     currentSnapIndex,
+    snapPointsTranslateY,
   ]);
 
   // if `visible` gets hard changed, we force a cleanup
@@ -185,39 +190,46 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
     isOpening.value = false;
     keyboardOffset.value = 0;
     currentSnapIndex.value = 0;
+    sheetTranslateY.value = maxHeight;
+    setRenderContent(!lazy);
+  }, [
+    visible,
+    lazy,
+    isOpen,
+    isOpening,
+    keyboardOffset,
+    maxHeight,
+    sheetTranslateY,
+    currentSnapIndex,
+  ]);
 
-    cancelAnimation(translateY);
-    translateY.value = maxHeight;
-  }, [visible, maxHeight, isOpen, isOpening, keyboardOffset, translateY, currentSnapIndex]);
-
-  const keyboardDidShowRN = useStableCallback((event: KeyboardEvent) => {
-    const offset = -event.endCoordinates.height;
-    keyboardOffset.value = offset;
-
-    // We just record the offset, but we avoid cancelling the animation
-    // if it's in the process of opening. The same logic applies to all
-    // other keyboard related callbacks in this specific conditional.
-    if (!isOpen.value || isOpening.value) return;
+  // Keep the sheet aligned with the active snap if dimensions change while visible.
+  useEffect(() => {
+    if (!visible || !isOpen.value || isOpening.value) {
+      return;
+    }
 
-    cancelAnimation(translateY);
-    translateY.value = withTiming(offset + (maxHeight - snapPoints[currentSnapIndex.value]), {
+    sheetTranslateY.value = withTiming(snapPointsTranslateY[currentSnapIndex.value], {
       duration: 250,
       easing: Easing.inOut(Easing.ease),
     });
-  });
-
-  const keyboardDidHide = useStableCallback(() => {
-    keyboardOffset.value = 0;
-
-    if (!isOpen.value || isOpening.value) return;
+  }, [visible, isOpen, isOpening, sheetTranslateY, currentSnapIndex, snapPointsTranslateY]);
 
-    cancelAnimation(translateY);
-    translateY.value = withTiming(maxHeight - snapPoints[currentSnapIndex.value], {
+  const animateKeyboardOffset = useStableCallback((offset: number) => {
+    keyboardOffset.value = withTiming(offset, {
       duration: 250,
       easing: Easing.inOut(Easing.ease),
     });
   });
 
+  const keyboardDidShowRN = useStableCallback((event: KeyboardEvent) => {
+    animateKeyboardOffset(event.endCoordinates.height);
+  });
+
+  const keyboardDidHide = useStableCallback(() => {
+    animateKeyboardOffset(0);
+  });
+
   useEffect(() => {
     if (!visible) return;
 
@@ -225,114 +237,67 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
 
     if (KeyboardControllerPackage?.KeyboardEvents) {
       const keyboardDidShowKC = (event: KeyboardEventData) => {
-        const offset = -event.height;
-        keyboardOffset.value = offset;
-
-        if (!isOpen.value || isOpening.value) return;
-
-        cancelAnimation(translateY);
-        translateY.value = withTiming(offset + (maxHeight - snapPoints[currentSnapIndex.value]), {
-          duration: 250,
-          easing: Easing.inOut(Easing.ease),
-        });
+        animateKeyboardOffset(event.height);
       };
 
       listeners.push(
         KeyboardControllerPackage.KeyboardEvents.addListener('keyboardDidShow', keyboardDidShowKC),
         KeyboardControllerPackage.KeyboardEvents.addListener('keyboardDidHide', keyboardDidHide),
       );
-    } else {
-      if (Platform.OS === 'ios') {
-        listeners.push(Keyboard.addListener('keyboardWillShow', keyboardDidShowRN));
-        listeners.push(Keyboard.addListener('keyboardWillHide', keyboardDidHide));
-      }
+    } else if (Platform.OS === 'ios') {
+      listeners.push(Keyboard.addListener('keyboardWillShow', keyboardDidShowRN));
+      listeners.push(Keyboard.addListener('keyboardWillHide', keyboardDidHide));
     }
 
     return () => listeners.forEach((l) => l.remove());
-  }, [
-    visible,
-    keyboardDidHide,
-    keyboardDidShowRN,
-    keyboardOffset,
-    isOpen,
-    isOpening,
-    translateY,
-    maxHeight,
-    snapPoints,
-    currentSnapIndex,
-  ]);
+  }, [visible, animateKeyboardOffset, keyboardDidHide, keyboardDidShowRN]);
 
-  const sheetAnimatedStyle = useAnimatedStyle(() => ({
-    transform: [{ translateY: translateY.value }],
-    paddingBottom: translateY.value,
+  const sheetViewportAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: sheetTranslateY.value - keyboardOffset.value }],
   }));
 
-  const backdropThreshold = baseHeight;
-
   const overlayAnimatedStyle = useAnimatedStyle(() => {
-    const visibleHeight = Math.max(0, maxHeight - (translateY.value - keyboardOffset.value));
-    const threshold = Math.max(1, Math.min(backdropThreshold, maxHeight));
+    const visibleHeight = Math.max(0, maxHeight - sheetTranslateY.value);
+    const threshold = Math.max(1, Math.min(baseHeight, maxHeight));
     const progress = Math.min(1, visibleHeight / threshold);
     return { opacity: progress };
   });
 
-  const snapPointsTranslateY = useMemo(
-    () => snapPoints.map((point) => maxHeight - point),
-    [maxHeight, snapPoints],
-  );
-
   const panGesture = useMemo(
     () =>
       Gesture.Pan()
-        // disable pan until content is rendered (prevents canceling the opening timing).
         .enabled(renderContent)
         .onBegin(() => {
-          cancelAnimation(translateY);
-          panStartY.value = translateY.value;
+          panStartTranslateY.value = sheetTranslateY.value;
         })
         .onUpdate((event) => {
-          const minY = keyboardOffset.value + (maxHeight - snapPoints[snapPoints.length - 1]);
-          const next = panStartY.value + event.translationY;
-          translateY.value = Math.max(next, minY);
+          const nextTranslateY = panStartTranslateY.value + event.translationY;
+          sheetTranslateY.value = Math.min(Math.max(nextTranslateY, 0), maxHeight);
         })
         .onEnd((event) => {
-          const openY = keyboardOffset.value + (maxHeight - snapPoints[currentSnapIndex.value]);
-          const draggedDown = Math.max(translateY.value - openY, 0);
+          const openTranslateY = snapPointsTranslateY[currentSnapIndex.value];
+          const draggedDown = Math.max(sheetTranslateY.value - openTranslateY, 0);
           const topSnapIndex = snapPoints.length - 1;
           const isAtTopSnap = currentSnapIndex.value === topSnapIndex;
-          const snap0Y = keyboardOffset.value + (maxHeight - snapPoints[0]);
-          const projectedY = translateY.value + event.velocityY * 0.2;
+          const snap0TranslateY = snapPointsTranslateY[0];
+          const projectedTranslateY = sheetTranslateY.value + event.velocityY * 0.2;
 
-          // From lower snaps, keep the previous close behavior.
           const shouldCloseFromLowerSnap = event.velocityY > 500 || draggedDown > maxHeight / 2;
-          // From top snap, close only for clearly hard downward intent.
           const shouldCloseFromTopSnap =
-            event.velocityY > 2200 || projectedY > snap0Y + (maxHeight - snap0Y) * 0.96;
+            event.velocityY > 2200 ||
+            projectedTranslateY > snap0TranslateY + (maxHeight - snap0TranslateY) * 0.96;
 
           const shouldClose = isAtTopSnap ? shouldCloseFromTopSnap : shouldCloseFromLowerSnap;
 
-          cancelAnimation(translateY);
-
           if (shouldClose) {
-            isOpen.value = false;
-            isOpening.value = false;
-
-            translateY.value = withTiming(
-              maxHeight,
-              { duration: 250, easing: Easing.out(Easing.cubic) },
-              (finished) => {
-                if (finished) runOnJS(onClose)();
-              },
-            );
+            runOnJS(closeFromGesture)();
           } else {
             isOpen.value = true;
-            // snap to the nearest point
             let nearestIndex = 0;
             let minDistance = Number.POSITIVE_INFINITY;
-            const baseOffset = keyboardOffset.value;
             for (let i = 0; i < snapPointsTranslateY.length; i += 1) {
-              const candidate = baseOffset + snapPointsTranslateY[i];
-              const distance = Math.abs(translateY.value - candidate);
+              const candidate = snapPointsTranslateY[i];
+              const distance = Math.abs(sheetTranslateY.value - candidate);
               if (distance < minDistance) {
                 minDistance = distance;
                 nearestIndex = i;
@@ -347,8 +312,9 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
             if (isAtTopSnap && event.velocityY > 120) {
               nearestIndex = 0;
             }
+
             currentSnapIndex.value = nearestIndex;
-            translateY.value = withTiming(baseOffset + snapPointsTranslateY[nearestIndex], {
+            sheetTranslateY.value = withTiming(snapPointsTranslateY[nearestIndex], {
               duration: 250,
               easing: Easing.inOut(Easing.ease),
             });
@@ -357,15 +323,13 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
     [
       currentSnapIndex,
       isOpen,
-      isOpening,
-      keyboardOffset,
       maxHeight,
-      onClose,
-      panStartY,
+      closeFromGesture,
+      panStartTranslateY,
       renderContent,
       snapPoints,
       snapPointsTranslateY,
-      translateY,
+      sheetTranslateY,
     ],
   );
 
@@ -382,30 +346,33 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
   return (
     <Modal onRequestClose={onClose} transparent visible={visible}>
       <GestureHandlerRootView style={styles.sheetContentContainer}>
-        <GestureDetector gesture={panGesture}>
-          <View style={[styles.overlay, overlayTheme]}>
-            <Animated.View pointerEvents='none' style={[styles.backdrop, overlayAnimatedStyle]} />
-            <Pressable onPress={onBackdropPress} style={StyleSheet.absoluteFillObject} />
-
-            <Animated.View
-              style={[styles.container, { height: maxHeight }, sheetAnimatedStyle, container]}
-            >
-              <View style={[styles.handle, handle]} />
-              <View style={[styles.contentContainer, contentContainer]}>
-                {renderContent ? (
-                  <BottomSheetProvider value={bottomSheetModalContextValue}>
-                    <Animated.View
-                      entering={FadeIn.duration(250)}
-                      style={styles.sheetContentContainer}
-                    >
-                      {children}
-                    </Animated.View>
-                  </BottomSheetProvider>
-                ) : null}
-              </View>
-            </Animated.View>
-          </View>
-        </GestureDetector>
+        <View style={[styles.overlay, overlayTheme]}>
+          <Animated.View pointerEvents='none' style={[styles.backdrop, overlayAnimatedStyle]} />
+          <Pressable onPress={onBackdropPress} style={StyleSheet.absoluteFillObject} />
+
+          <Animated.View
+            pointerEvents='box-none'
+            style={[{ height: maxHeight }, sheetViewportAnimatedStyle]}
+          >
+            <GestureDetector gesture={panGesture}>
+              <Animated.View style={[styles.container, { height: maxHeight }, container]}>
+                <View style={[styles.handle, handle]} />
+                <View style={[styles.contentContainer, contentContainer]}>
+                  {renderContent ? (
+                    <BottomSheetProvider value={bottomSheetModalContextValue}>
+                      <Animated.View
+                        entering={FadeIn.duration(250)}
+                        style={styles.sheetContentContainer}
+                      >
+                        {children}
+                      </Animated.View>
+                    </BottomSheetProvider>
+                  ) : null}
+                </View>
+              </Animated.View>
+            </GestureDetector>
+          </Animated.View>
+        </View>
       </GestureHandlerRootView>
     </Modal>
   );

package/src/components/UIComponents/PortalWhileClosingView.tsx

@@ -12,6 +12,7 @@ import {
   setClosingPortalLayout,
   useShouldTeleportToClosingPortal,
   useHasActiveId,
+  useIsOverlayClosing,
 } from '../../state-store';
 
 type PortalWhileClosingViewProps = {
@@ -116,9 +117,10 @@ const useSyncingApi = (portalHostName: string, registrationId: string) => {
   const placeholderLayout = useSharedValue({ h: 0, w: 0 });
   const insets = useSafeAreaInsets();
   const hasActiveId = useHasActiveId();
+  const isClosing = useIsOverlayClosing();
 
   const syncPortalLayout = useStableCallback(() => {
-    if (!hasActiveId) {
+    if (!hasActiveId && !isClosing) {
       return;
     }
 
@@ -143,10 +145,10 @@ const useSyncingApi = (portalHostName: string, registrationId: string) => {
   });
 
   useEffect(() => {
-    if (hasActiveId) {
+    if (hasActiveId || isClosing) {
       syncPortalLayout();
     }
-  }, [insets.bottom, hasActiveId, syncPortalLayout]);
+  }, [insets.bottom, isClosing, hasActiveId, syncPortalLayout]);
 
   return useMemo(
     () => ({ syncPortalLayout, containerRef, placeholderLayout }),