stream-chat-react-native-core 9.0.0-beta.26 → 9.0.0-beta.28

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

@@ -1800,7 +1800,7 @@ exports[`AttachButton should render an disabled AttachButton 1`] = `
             },
             {
               "backgroundColor": undefined,
-              "borderColor": "#d5dbe1",
+              "borderColor": "#ebeef1",
               "borderWidth": 1,
               "height": 48,
               "width": 48,

package/src/components/MessageMenu/MessageUserReactions.tsx

@@ -280,11 +280,7 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
           <EmojiPickerList onSelectReaction={handleSelectReaction} renderFullInitially={false} />
         </Animated.View>
       ) : (
-        <Animated.View
-          key={'reaction-details'}
-          entering={FadeIn.duration(200)}
-          exiting={FadeOut.duration(200)}
-        >
+        <Animated.View key={'reaction-details'} exiting={FadeOut.duration(200)}>
           <Text style={[styles.reactionsText, reactionsText]}>
             {t('{{count}} Reactions', { count: totalReactionCount })}
           </Text>

package/src/components/Poll/components/MultipleVotesSettings.tsx

@@ -169,6 +169,7 @@ export const MultipleVotesSettings = () => {
             LeadingIcon={Minus}
             onPress={decrementMaxVotes}
             disabled={decrementDisabled}
+            style={decrementDisabled ? styles.buttonDisabled : styles.buttonEnabled}
             testID='max-votes-decrement'
           />
           <MaxVotesTextInput />
@@ -180,6 +181,7 @@ export const MultipleVotesSettings = () => {
             LeadingIcon={Plus}
             onPress={incrementMaxVotes}
             disabled={incrementDisabled}
+            style={incrementDisabled ? styles.buttonDisabled : styles.buttonEnabled}
             testID='max-votes-increment'
           />
         </Animated.View>
@@ -235,6 +237,12 @@ const useStyles = () => {
         paddingVertical: primitives.spacingMd,
         textAlign: I18nManager.isRTL ? 'right' : 'left',
       },
+      buttonEnabled: {
+        borderColor: semantics.borderCoreOnSurface,
+      },
+      buttonDisabled: {
+        borderColor: semantics.borderUtilityDisabledOnSurface,
+      },
     });
   }, [semantics]);
 };

package/src/components/Poll/components/PollInputDialog.tsx

@@ -81,7 +81,7 @@ export const PollInputDialog = ({
                 style={styles.button}
               />
               <Button
-                variant={'secondary'}
+                variant={'primary'}
                 type={'solid'}
                 label={t('Send')}
                 size='md'

package/src/components/Poll/components/PollOption.tsx

@@ -124,14 +124,18 @@ export const PollOption = ({ option, showProgressBar = true, forceIncoming }: Po
       <VoteButton option={option} />
       <View style={[styles.info, info]}>
         <View style={[styles.header, header]}>
-          <Text style={[styles.text, text]}>{option.text}</Text>
+          <Text ellipsizeMode='tail' numberOfLines={2} style={[styles.text, text]}>
+            {option.text}
+          </Text>
           <View style={[styles.votesContainer, votesContainer]}>
-            <UserAvatarStack
-              users={relevantVotes.map((vote: PollVote) => vote.user as UserResponse)}
-              overlap={0.2}
-              maxVisible={3}
-              avatarSize='xs'
-            />
+            {relevantVotes.length > 0 ? (
+              <UserAvatarStack
+                users={relevantVotes.map((vote: PollVote) => vote.user as UserResponse)}
+                overlap={0.2}
+                maxVisible={3}
+                avatarSize='xs'
+              />
+            ) : null}
 
             <Text style={[styles.votesText, votesText]}>{voteCountsByOption[option.id] || 0}</Text>
           </View>
@@ -223,10 +227,14 @@ const useStyles = () => {
       },
       header: {
         flexDirection: 'row',
-        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+        gap: primitives.spacingXs,
+        minWidth: 0,
       },
       text: {
         color: semantics.chatTextIncoming,
+        flexGrow: 1,
+        flexShrink: 1,
         fontSize: primitives.typographyFontSizeSm,
         fontWeight: primitives.typographyFontWeightRegular,
         lineHeight: primitives.typographyLineHeightTight,
@@ -234,9 +242,17 @@ const useStyles = () => {
       },
       info: {
         flexGrow: 1,
+        flexShrink: 1,
+        gap: primitives.spacingXs,
+        minWidth: 0,
+      },
+      votesContainer: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        flexShrink: 0,
         gap: primitives.spacingXs,
+        minHeight: 20,
       },
-      votesContainer: { flexDirection: 'row', gap: primitives.spacingXs, alignItems: 'center' },
       votesText: {
         color: semantics.chatTextIncoming,
         fontSize: primitives.typographyFontSizeXs,

package/src/components/ThreadList/ThreadList.tsx

@@ -45,7 +45,7 @@ export const DefaultThreadListLoadingIndicator = () => (
     ))}
   </View>
 );
-export const DefaultThreadListLoadingNextIndicator = () => <LoadingIndicator />;
+export const DefaultThreadListLoadingNextIndicator = () => <LoadingIndicator listType='threads' />;
 
 const renderItem = (props: { item: Thread }) => <ThreadListItem thread={props.item} />;
 

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,8 +505,9 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
     () => ({
       close,
       currentSnapIndex,
+      topSnapIndex,
     }),
-    [close, currentSnapIndex],
+    [close, currentSnapIndex, topSnapIndex],
   );
 
   return (
@@ -364,7 +531,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 +554,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 },

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} />;