stream-chat-react-native-core 9.0.0-beta.27 → 9.0.0-beta.29

package/src/components/UIComponents/BottomSheetModal.tsx

@@ -10,6 +10,7 @@ import {
   EventSubscription,
   Keyboard,
   KeyboardEvent,
+  LayoutChangeEvent,
   Modal,
   Platform,
   Pressable,
@@ -23,12 +24,20 @@ import Animated, {
   Easing,
   FadeIn,
   runOnJS,
+  useAnimatedReaction,
   useAnimatedStyle,
+  useDerivedValue,
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import {
+  getBottomSheetBaseHeight,
+  getBottomSheetSnapPointTranslateY,
+  getBottomSheetTopSnapIndex,
+} from './BottomSheetModal.utils';
+
 import { BottomSheetProvider } from '../../contexts/bottomSheetContext/BottomSheetContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../hooks';
@@ -49,6 +58,10 @@ export type BottomSheetModalProps = {
    * The height of the modal.
    */
   height?: number;
+  /**
+   * Whether the sheet should wrap its content up to the provided `height`.
+   */
+  enableDynamicSizing?: boolean;
   /**
    * Whether the sheet content should be lazy loaded or not. Particularly
    * useful when the content is something heavy and we don't want to disrupt
@@ -57,10 +70,17 @@ export type BottomSheetModalProps = {
   lazy?: boolean;
 };
 
-export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>) => {
+const BottomSheetModalInner = (props: PropsWithChildren<BottomSheetModalProps>) => {
   const { height: windowHeight } = useWindowDimensions();
   const { top: topInset, bottom: bottomInset } = useSafeAreaInsets();
-  const { children, height = windowHeight / 2, onClose, visible, lazy = false } = props;
+  const {
+    children,
+    enableDynamicSizing = false,
+    height = windowHeight / 2,
+    onClose,
+    visible,
+    lazy = false,
+  } = props;
 
   const {
     theme: {
@@ -73,12 +93,26 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
     0,
     windowHeight - topInset - (Platform.OS === 'android' ? bottomInset + 16 : 0),
   );
+  const fixedBaseHeight = Math.min(height, maxHeight);
 
-  const baseHeight = Math.min(height, maxHeight);
-  const snapPoints = useMemo(() => [baseHeight, maxHeight], [baseHeight, maxHeight]);
-  const snapPointsTranslateY = useMemo(
-    () => snapPoints.map((point) => maxHeight - point),
-    [maxHeight, snapPoints],
+  const contentHeight = useSharedValue<number | undefined>(undefined);
+  const baseHeight = useDerivedValue(
+    () =>
+      getBottomSheetBaseHeight({
+        contentHeight: contentHeight.value,
+        enableDynamicSizing,
+        height,
+        maxHeight,
+      }),
+    [contentHeight, enableDynamicSizing, height, maxHeight],
+  );
+  const topSnapIndex = useDerivedValue<number>(
+    () =>
+      getBottomSheetTopSnapIndex({
+        baseHeight: baseHeight.value,
+        maxHeight,
+      }),
+    [baseHeight, maxHeight],
   );
 
   const sheetTranslateY = useSharedValue(maxHeight);
@@ -100,6 +134,36 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
     }
   });
 
+  const handleDynamicContentLayout = useStableCallback((event: LayoutChangeEvent) => {
+    if (!enableDynamicSizing) {
+      return;
+    }
+
+    const nextContentHeight = Math.ceil(event.nativeEvent.layout.height);
+
+    if (contentHeight.value === nextContentHeight) {
+      return;
+    }
+
+    contentHeight.value = nextContentHeight;
+  });
+
+  const open = useStableCallback((shouldShowContentAfterOpen = true) => {
+    sheetTranslateY.value = withTiming(
+      maxHeight - fixedBaseHeight,
+      { duration: 250, easing: Easing.out(Easing.cubic) },
+      (finished) => {
+        if (!finished) return;
+
+        isOpening.value = false;
+
+        if (shouldShowContentAfterOpen) {
+          runOnJS(showContent)();
+        }
+      },
+    );
+  });
+
   const finishClose = useStableCallback((closeAnimationFinishedCallback?: () => void) => {
     onClose();
     if (closeAnimationFinishedCallback) {
@@ -161,27 +225,66 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
     currentSnapIndex.value = 0;
     sheetTranslateY.value = maxHeight;
 
-    sheetTranslateY.value = withTiming(
-      snapPointsTranslateY[0],
-      { duration: 250, easing: Easing.out(Easing.cubic) },
-      (finished) => {
-        if (!finished) return;
+    if (enableDynamicSizing) {
+      setRenderContent(true);
+      return;
+    }
 
-        isOpening.value = false;
-        runOnJS(showContent)();
-      },
-    );
+    open();
   }, [
+    enableDynamicSizing,
     visible,
     isOpen,
     isOpening,
     maxHeight,
-    showContent,
+    open,
     sheetTranslateY,
     currentSnapIndex,
-    snapPointsTranslateY,
   ]);
 
+  useAnimatedReaction(
+    () => {
+      if (
+        !visible ||
+        !enableDynamicSizing ||
+        !isOpening.value ||
+        contentHeight.value === undefined
+      ) {
+        return undefined;
+      }
+
+      return getBottomSheetSnapPointTranslateY({
+        baseHeight: baseHeight.value,
+        maxHeight,
+        snapIndex: 0,
+      });
+    },
+    (nextTranslateY, prevTranslateY) => {
+      if (nextTranslateY === undefined || nextTranslateY === prevTranslateY) {
+        return;
+      }
+
+      sheetTranslateY.value = withTiming(
+        nextTranslateY,
+        { duration: 250, easing: Easing.out(Easing.cubic) },
+        (finished) => {
+          if (finished) {
+            isOpening.value = false;
+          }
+        },
+      );
+    },
+    [
+      baseHeight,
+      contentHeight,
+      enableDynamicSizing,
+      isOpening,
+      maxHeight,
+      sheetTranslateY,
+      visible,
+    ],
+  );
+
   // if `visible` gets hard changed, we force a cleanup
   useEffect(() => {
     if (visible) return;
@@ -191,8 +294,10 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
     keyboardOffset.value = 0;
     currentSnapIndex.value = 0;
     sheetTranslateY.value = maxHeight;
+    contentHeight.value = undefined;
     setRenderContent(!lazy);
   }, [
+    contentHeight,
     visible,
     lazy,
     isOpen,
@@ -204,16 +309,52 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
   ]);
 
   // Keep the sheet aligned with the active snap if dimensions change while visible.
-  useEffect(() => {
-    if (!visible || !isOpen.value || isOpening.value) {
-      return;
-    }
-
-    sheetTranslateY.value = withTiming(snapPointsTranslateY[currentSnapIndex.value], {
-      duration: 250,
-      easing: Easing.inOut(Easing.ease),
-    });
-  }, [visible, isOpen, isOpening, sheetTranslateY, currentSnapIndex, snapPointsTranslateY]);
+  useAnimatedReaction(
+    () => {
+      if (!visible || !isOpen.value || isOpening.value) {
+        return undefined;
+      }
+
+      const clampedSnapIndex = Math.min(currentSnapIndex.value, topSnapIndex.value);
+
+      return {
+        snapIndex: clampedSnapIndex,
+        translateY: getBottomSheetSnapPointTranslateY({
+          baseHeight: baseHeight.value,
+          maxHeight,
+          snapIndex: clampedSnapIndex,
+        }),
+      };
+    },
+    (nextTarget) => {
+      if (!nextTarget) {
+        return;
+      }
+
+      if (currentSnapIndex.value !== nextTarget.snapIndex) {
+        currentSnapIndex.value = nextTarget.snapIndex;
+      }
+
+      if (Math.abs(sheetTranslateY.value - nextTarget.translateY) < 1) {
+        return;
+      }
+
+      sheetTranslateY.value = withTiming(nextTarget.translateY, {
+        duration: 250,
+        easing: Easing.inOut(Easing.ease),
+      });
+    },
+    [
+      baseHeight,
+      currentSnapIndex,
+      isOpen,
+      isOpening,
+      maxHeight,
+      sheetTranslateY,
+      topSnapIndex,
+      visible,
+    ],
+  );
 
   const animateKeyboardOffset = useStableCallback((offset: number) => {
     keyboardOffset.value = withTiming(offset, {
@@ -258,10 +399,10 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
 
   const overlayAnimatedStyle = useAnimatedStyle(() => {
     const visibleHeight = Math.max(0, maxHeight - sheetTranslateY.value);
-    const threshold = Math.max(1, Math.min(baseHeight, maxHeight));
+    const threshold = Math.max(1, Math.min(baseHeight.value, maxHeight));
     const progress = Math.min(1, visibleHeight / threshold);
     return { opacity: progress };
-  });
+  }, [baseHeight, maxHeight]);
 
   const panGesture = useMemo(
     () =>
@@ -275,11 +416,24 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
           sheetTranslateY.value = Math.min(Math.max(nextTranslateY, 0), maxHeight);
         })
         .onEnd((event) => {
-          const openTranslateY = snapPointsTranslateY[currentSnapIndex.value];
+          const openTranslateY = getBottomSheetSnapPointTranslateY({
+            baseHeight: baseHeight.value,
+            maxHeight,
+            snapIndex: currentSnapIndex.value,
+          });
           const draggedDown = Math.max(sheetTranslateY.value - openTranslateY, 0);
-          const topSnapIndex = snapPoints.length - 1;
-          const isAtTopSnap = currentSnapIndex.value === topSnapIndex;
-          const snap0TranslateY = snapPointsTranslateY[0];
+          const hasMultipleSnapPoints = topSnapIndex.value > 0;
+          const isAtTopSnap = currentSnapIndex.value === topSnapIndex.value;
+          const snap0TranslateY = getBottomSheetSnapPointTranslateY({
+            baseHeight: baseHeight.value,
+            maxHeight,
+            snapIndex: 0,
+          });
+          const topSnapTranslateY = getBottomSheetSnapPointTranslateY({
+            baseHeight: baseHeight.value,
+            maxHeight,
+            snapIndex: topSnapIndex.value,
+          });
           const projectedTranslateY = sheetTranslateY.value + event.velocityY * 0.2;
 
           const shouldCloseFromLowerSnap = event.velocityY > 500 || draggedDown > maxHeight / 2;
@@ -287,49 +441,61 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
             event.velocityY > 2200 ||
             projectedTranslateY > snap0TranslateY + (maxHeight - snap0TranslateY) * 0.96;
 
-          const shouldClose = isAtTopSnap ? shouldCloseFromTopSnap : shouldCloseFromLowerSnap;
+          const shouldClose = !hasMultipleSnapPoints
+            ? shouldCloseFromLowerSnap
+            : isAtTopSnap
+              ? shouldCloseFromTopSnap
+              : shouldCloseFromLowerSnap;
 
           if (shouldClose) {
             runOnJS(closeFromGesture)();
           } else {
             isOpen.value = true;
             let nearestIndex = 0;
-            let minDistance = Number.POSITIVE_INFINITY;
-            for (let i = 0; i < snapPointsTranslateY.length; i += 1) {
-              const candidate = snapPointsTranslateY[i];
-              const distance = Math.abs(sheetTranslateY.value - candidate);
-              if (distance < minDistance) {
-                minDistance = distance;
-                nearestIndex = i;
+            let minDistance = Math.abs(sheetTranslateY.value - snap0TranslateY);
+
+            if (hasMultipleSnapPoints) {
+              const topDistance = Math.abs(sheetTranslateY.value - topSnapTranslateY);
+              if (topDistance < minDistance) {
+                minDistance = topDistance;
+                nearestIndex = topSnapIndex.value;
               }
             }
+
             // velocity-based snapping, fast upward swipe goes to top snap point
-            if (event.velocityY < -800) {
-              nearestIndex = snapPointsTranslateY.length - 1;
+            if (hasMultipleSnapPoints && event.velocityY < -800) {
+              nearestIndex = topSnapIndex.value;
             }
             // From top snap, a gentle downward flick should settle to snap 0
             // without requiring a large drag distance.
-            if (isAtTopSnap && event.velocityY > 120) {
+            if (hasMultipleSnapPoints && isAtTopSnap && event.velocityY > 120) {
               nearestIndex = 0;
             }
 
             currentSnapIndex.value = nearestIndex;
-            sheetTranslateY.value = withTiming(snapPointsTranslateY[nearestIndex], {
-              duration: 250,
-              easing: Easing.inOut(Easing.ease),
-            });
+            sheetTranslateY.value = withTiming(
+              getBottomSheetSnapPointTranslateY({
+                baseHeight: baseHeight.value,
+                maxHeight,
+                snapIndex: nearestIndex,
+              }),
+              {
+                duration: 250,
+                easing: Easing.inOut(Easing.ease),
+              },
+            );
           }
         }),
     [
+      baseHeight,
       currentSnapIndex,
       isOpen,
       maxHeight,
       closeFromGesture,
       panStartTranslateY,
       renderContent,
-      snapPoints,
-      snapPointsTranslateY,
       sheetTranslateY,
+      topSnapIndex,
     ],
   );
 
@@ -339,16 +505,20 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
     () => ({
       close,
       currentSnapIndex,
+      topSnapIndex,
     }),
-    [close, currentSnapIndex],
+    [close, currentSnapIndex, topSnapIndex],
   );
 
   return (
     <Modal onRequestClose={onClose} transparent visible={visible}>
       <GestureHandlerRootView style={styles.sheetContentContainer}>
         <View style={[styles.overlay, overlayTheme]}>
-          <Animated.View pointerEvents='none' style={[styles.backdrop, overlayAnimatedStyle]} />
-          <Pressable onPress={onBackdropPress} style={StyleSheet.absoluteFillObject} />
+          <Animated.View
+            pointerEvents='none'
+            style={[StyleSheet.absoluteFill, styles.backdrop, overlayAnimatedStyle]}
+          />
+          <Pressable onPress={onBackdropPress} style={StyleSheet.absoluteFill} />
 
           <Animated.View
             pointerEvents='box-none'
@@ -364,7 +534,16 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
                         entering={FadeIn.duration(250)}
                         style={styles.sheetContentContainer}
                       >
-                        {children}
+                        {enableDynamicSizing ? (
+                          <View
+                            onLayout={handleDynamicContentLayout}
+                            style={{ paddingBottom: bottomInset }}
+                          >
+                            {children}
+                          </View>
+                        ) : (
+                          children
+                        )}
                       </Animated.View>
                     </BottomSheetProvider>
                   ) : null}
@@ -378,6 +557,14 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
   );
 };
 
+export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>) => {
+  if (!props.visible) {
+    return null;
+  }
+
+  return <BottomSheetModalInner {...props} />;
+};
+
 const useStyles = () => {
   const {
     theme: { semantics },
@@ -406,7 +593,6 @@ const useStyles = () => {
           justifyContent: 'flex-end',
         },
         backdrop: {
-          ...StyleSheet.absoluteFillObject,
           backgroundColor: semantics.backgroundCoreScrim,
         },
         sheetContentContainer: {

package/src/components/UIComponents/BottomSheetModal.utils.ts

@@ -0,0 +1,82 @@
+export const BOTTOM_SHEET_HANDLE_HEIGHT = 4;
+export const BOTTOM_SHEET_HANDLE_MARGIN_VERTICAL = 8;
+export const BOTTOM_SHEET_HANDLE_TOTAL_HEIGHT =
+  BOTTOM_SHEET_HANDLE_HEIGHT + BOTTOM_SHEET_HANDLE_MARGIN_VERTICAL * 2;
+
+type GetBottomSheetBaseHeightParams = {
+  contentHeight: number | undefined;
+  enableDynamicSizing: boolean;
+  height: number;
+  maxHeight: number;
+};
+
+export const getBottomSheetBaseHeight = ({
+  contentHeight,
+  enableDynamicSizing,
+  height,
+  maxHeight,
+}: GetBottomSheetBaseHeightParams) => {
+  'worklet';
+
+  const cappedHeight = Math.min(height, maxHeight);
+
+  if (!enableDynamicSizing || contentHeight === undefined) {
+    return cappedHeight;
+  }
+
+  const measuredHeight = Math.max(0, contentHeight) + BOTTOM_SHEET_HANDLE_TOTAL_HEIGHT;
+
+  return Math.min(measuredHeight, cappedHeight);
+};
+
+type GetBottomSheetSnapPointsParams = {
+  baseHeight: number;
+  maxHeight: number;
+};
+
+export const getBottomSheetSnapPoints = ({
+  baseHeight,
+  maxHeight,
+}: GetBottomSheetSnapPointsParams) => {
+  'worklet';
+
+  if (baseHeight === maxHeight) {
+    return [baseHeight];
+  }
+
+  return [baseHeight, maxHeight];
+};
+
+type GetBottomSheetTopSnapIndexParams = {
+  baseHeight: number;
+  maxHeight: number;
+};
+
+export const getBottomSheetTopSnapIndex = ({
+  baseHeight,
+  maxHeight,
+}: GetBottomSheetTopSnapIndexParams) => {
+  'worklet';
+
+  return baseHeight === maxHeight ? 0 : 1;
+};
+
+type GetBottomSheetSnapPointTranslateYParams = {
+  baseHeight: number;
+  maxHeight: number;
+  snapIndex: number;
+};
+
+export const getBottomSheetSnapPointTranslateY = ({
+  baseHeight,
+  maxHeight,
+  snapIndex,
+}: GetBottomSheetSnapPointTranslateYParams) => {
+  'worklet';
+
+  if (getBottomSheetTopSnapIndex({ baseHeight, maxHeight }) === 0) {
+    return 0;
+  }
+
+  return snapIndex <= 0 ? maxHeight - baseHeight : 0;
+};

package/src/components/UIComponents/StreamBottomSheetModalFlatList.tsx

@@ -12,7 +12,7 @@ export const StreamBottomSheetModalFlatList = <ItemT,>({
   scrollEnabled: scrollEnabledProp,
   ...props
 }: StreamBottomSheetModalFlatListProps<ItemT>) => {
-  const { currentSnapIndex } = useBottomSheetContext();
+  const { currentSnapIndex, topSnapIndex } = useBottomSheetContext();
   const listRef = useRef<FlatList<ItemT>>(null);
 
   const setNativeScrollEnabled = useStableCallback((value: boolean) =>
@@ -20,14 +20,23 @@ export const StreamBottomSheetModalFlatList = <ItemT,>({
   );
 
   useAnimatedReaction(
-    () => currentSnapIndex.value,
+    () => ({
+      currentSnapIndex: currentSnapIndex.value,
+      topSnapIndex: topSnapIndex.value,
+    }),
     (value, prev) => {
-      if (value === prev || scrollEnabledProp !== undefined) {
+      if (
+        scrollEnabledProp !== undefined ||
+        (prev &&
+          value.currentSnapIndex === prev.currentSnapIndex &&
+          value.topSnapIndex === prev.topSnapIndex)
+      ) {
         return;
       }
-      runOnJS(setNativeScrollEnabled)(value === 1);
+
+      runOnJS(setNativeScrollEnabled)(value.currentSnapIndex === value.topSnapIndex);
     },
-    [currentSnapIndex],
+    [currentSnapIndex, topSnapIndex],
   );
 
   return <FlatList ref={listRef} {...props} scrollEnabled={false} />;

package/src/components/UIComponents/__tests__/BottomSheetModal.utils.test.ts

@@ -0,0 +1,111 @@
+import {
+  BOTTOM_SHEET_HANDLE_TOTAL_HEIGHT,
+  getBottomSheetBaseHeight,
+  getBottomSheetSnapPointTranslateY,
+  getBottomSheetSnapPoints,
+  getBottomSheetTopSnapIndex,
+} from '../BottomSheetModal.utils';
+
+describe('BottomSheetModal.utils', () => {
+  it('caps fixed bottom sheet height by maxHeight', () => {
+    expect(
+      getBottomSheetBaseHeight({
+        contentHeight: undefined,
+        enableDynamicSizing: false,
+        height: 500,
+        maxHeight: 420,
+      }),
+    ).toBe(420);
+  });
+
+  it('uses measured content height plus handle and safe area when dynamic sizing is enabled', () => {
+    expect(
+      getBottomSheetBaseHeight({
+        contentHeight: 120,
+        enableDynamicSizing: true,
+        height: 400,
+        maxHeight: 500,
+      }),
+    ).toBe(120 + BOTTOM_SHEET_HANDLE_TOTAL_HEIGHT);
+  });
+
+  it('caps dynamic content height by the provided height', () => {
+    expect(
+      getBottomSheetBaseHeight({
+        contentHeight: 500,
+        enableDynamicSizing: true,
+        height: 300,
+        maxHeight: 600,
+      }),
+    ).toBe(300);
+  });
+
+  it('keeps the expanded snap point when the sheet is shorter than maxHeight', () => {
+    expect(
+      getBottomSheetSnapPoints({
+        baseHeight: 280,
+        maxHeight: 640,
+      }),
+    ).toEqual([280, 640]);
+  });
+
+  it('returns two snap points for fixed sizing when maxHeight exceeds baseHeight', () => {
+    expect(
+      getBottomSheetSnapPoints({
+        baseHeight: 280,
+        maxHeight: 640,
+      }),
+    ).toEqual([280, 640]);
+  });
+
+  it('returns a single snap point when the sheet is already at maxHeight', () => {
+    expect(
+      getBottomSheetSnapPoints({
+        baseHeight: 640,
+        maxHeight: 640,
+      }),
+    ).toEqual([640]);
+  });
+
+  it('returns the correct top snap index', () => {
+    expect(
+      getBottomSheetTopSnapIndex({
+        baseHeight: 280,
+        maxHeight: 640,
+      }),
+    ).toBe(1);
+
+    expect(
+      getBottomSheetTopSnapIndex({
+        baseHeight: 640,
+        maxHeight: 640,
+      }),
+    ).toBe(0);
+  });
+
+  it('returns the correct translateY for each snap point', () => {
+    expect(
+      getBottomSheetSnapPointTranslateY({
+        baseHeight: 280,
+        maxHeight: 640,
+        snapIndex: 0,
+      }),
+    ).toBe(360);
+
+    expect(
+      getBottomSheetSnapPointTranslateY({
+        baseHeight: 280,
+        maxHeight: 640,
+        snapIndex: 1,
+      }),
+    ).toBe(0);
+
+    expect(
+      getBottomSheetSnapPointTranslateY({
+        baseHeight: 640,
+        maxHeight: 640,
+        snapIndex: 0,
+      }),
+    ).toBe(0);
+  });
+});

package/src/components/ui/Avatar/ChannelAvatar.tsx

@@ -58,7 +58,11 @@ export const ChannelAvatar = (props: ChannelAvatarProps) => {
 
   if (usersWithoutSelf.length > 1) {
     return (
-      <UserAvatarGroup size='xl' users={usersForGroup} showOnlineIndicator={showOnlineIndicator} />
+      <UserAvatarGroup
+        size={size}
+        users={usersForGroup}
+        showOnlineIndicator={showOnlineIndicator}
+      />
     );
   } else {
     return (