stream-chat-react-native-core 9.0.0-beta.2 → 9.0.0-beta.21

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,
@@ -26,6 +32,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { BottomSheetProvider } from '../../contexts/bottomSheetContext/BottomSheetContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../hooks';
+import { primitives } from '../../theme';
 import { KeyboardControllerPackage } from '../KeyboardCompatibleView/KeyboardControllerAvoidingView';
 
 export type BottomSheetModalProps = {
@@ -69,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);
 
@@ -87,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);
+        }
       },
     );
   });
@@ -123,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
@@ -184,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;
 
@@ -224,112 +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 {
-      listeners.push(Keyboard.addListener('keyboardDidShow', keyboardDidShowRN));
-      listeners.push(Keyboard.addListener('keyboardDidHide', 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;
@@ -344,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),
             });
@@ -354,15 +323,13 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
     [
       currentSnapIndex,
       isOpen,
-      isOpening,
-      keyboardOffset,
       maxHeight,
-      onClose,
-      panStartY,
+      closeFromGesture,
+      panStartTranslateY,
       renderContent,
       snapPoints,
       snapPointsTranslateY,
-      translateY,
+      sheetTranslateY,
     ],
   );
 
@@ -379,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>
   );
@@ -416,13 +386,12 @@ const useStyles = () => {
     () =>
       StyleSheet.create({
         container: {
-          borderTopLeftRadius: 16,
-          borderTopRightRadius: 16,
+          borderTopLeftRadius: primitives.radius4xl,
+          borderTopRightRadius: primitives.radius4xl,
           backgroundColor: semantics.backgroundCoreElevation1,
         },
         contentContainer: {
           flex: 1,
-          marginTop: 8,
         },
         handle: {
           alignSelf: 'center',

package/src/components/UIComponents/PortalWhileClosingView.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect, useRef } from 'react';
+import React, { ReactNode, useEffect, useMemo, useRef } from 'react';
 import { Platform, View } from 'react-native';
 
 import Animated, { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
@@ -11,6 +11,8 @@ import {
   createClosingPortalLayoutRegistrationId,
   setClosingPortalLayout,
   useShouldTeleportToClosingPortal,
+  useHasActiveId,
+  useIsOverlayClosing,
 } from '../../state-store';
 
 type PortalWhileClosingViewProps = {
@@ -67,38 +69,19 @@ export const PortalWhileClosingView = ({
   portalHostName,
   portalName,
 }: PortalWhileClosingViewProps) => {
-  const containerRef = useRef<View | null>(null);
   const registrationIdRef = useRef<string | null>(null);
-  const placeholderLayout = useSharedValue({ h: 0, w: 0 });
-  const insets = useSafeAreaInsets();
 
   if (!registrationIdRef.current) {
     registrationIdRef.current = createClosingPortalLayoutRegistrationId();
   }
 
   const registrationId = registrationIdRef.current;
-  const shouldTeleport = useShouldTeleportToClosingPortal(portalHostName, registrationId);
-
-  const syncPortalLayout = useStableCallback(() => {
-    containerRef.current?.measureInWindow((x, y, width, height) => {
-      const absolute = {
-        x,
-        y: y + (Platform.OS === 'android' ? insets.top : 0),
-      };
-
-      if (!width || !height) {
-        return;
-      }
 
-      placeholderLayout.value = { h: height, w: width };
-
-      setClosingPortalLayout(portalHostName, registrationId, {
-        ...absolute,
-        h: height,
-        w: width,
-      });
-    });
-  });
+  const { syncPortalLayout, containerRef, placeholderLayout } = useSyncingApi(
+    portalHostName,
+    registrationId,
+  );
+  const shouldTeleport = useShouldTeleportToClosingPortal(portalHostName, registrationId);
 
   useEffect(() => {
     return () => {
@@ -106,15 +89,6 @@ export const PortalWhileClosingView = ({
     };
   }, [portalHostName, registrationId]);
 
-  useEffect(() => {
-    // Measure once after mount and layout settle.
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        syncPortalLayout();
-      });
-    });
-  }, [insets.top, portalHostName, syncPortalLayout]);
-
   const placeholderStyle = useAnimatedStyle(() => ({
     height: placeholderLayout.value.h,
     width: placeholderLayout.value.w > 0 ? placeholderLayout.value.w : '100%',
@@ -137,3 +111,47 @@ export const PortalWhileClosingView = ({
     </>
   );
 };
+
+const useSyncingApi = (portalHostName: string, registrationId: string) => {
+  const containerRef = useRef<View | null>(null);
+  const placeholderLayout = useSharedValue({ h: 0, w: 0 });
+  const insets = useSafeAreaInsets();
+  const hasActiveId = useHasActiveId();
+  const isClosing = useIsOverlayClosing();
+
+  const syncPortalLayout = useStableCallback(() => {
+    if (!hasActiveId && !isClosing) {
+      return;
+    }
+
+    containerRef.current?.measureInWindow((x, y, width, height) => {
+      const absolute = {
+        x,
+        y: y + (Platform.OS === 'android' ? insets.top : 0),
+      };
+
+      if (!width || !height) {
+        return;
+      }
+
+      placeholderLayout.value = { h: height, w: width };
+
+      setClosingPortalLayout(portalHostName, registrationId, {
+        ...absolute,
+        h: height,
+        w: width,
+      });
+    });
+  });
+
+  useEffect(() => {
+    if (hasActiveId || isClosing) {
+      syncPortalLayout();
+    }
+  }, [insets.bottom, isClosing, hasActiveId, syncPortalLayout]);
+
+  return useMemo(
+    () => ({ syncPortalLayout, containerRef, placeholderLayout }),
+    [placeholderLayout, syncPortalLayout],
+  );
+};

package/src/components/UIComponents/Spinner.tsx

@@ -9,7 +9,7 @@ import Animated, {
 } from 'react-native-reanimated';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Loading } from '../../icons/Loading';
+import { Loading } from '../../icons/loading';
 
 export type SpinnerProps = {
   height?: number;
@@ -46,7 +46,12 @@ export const Spinner = (props: SpinnerProps) => {
 
   return (
     <Animated.View style={[style, styles.spinner, animatedStyle, spinner, { height, width }]}>
-      <Loading height={height} stopColor={semantics.accentPrimary} width={width} />
+      <Loading
+        height={height}
+        startColor={semantics.accentPrimary}
+        stopColor={semantics.accentPrimary}
+        width={width}
+      />
     </Animated.View>
   );
 };