stream-chat-react-native-core 9.3.1 → 9.4.0-beta.2

package/src/components/Message/MessageItemView/MessageItemView.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Dimensions, StyleSheet, View, ViewStyle } from 'react-native';
+import { Dimensions, StyleSheet, View } from 'react-native';
 
 import { SwipableMessageWrapper } from './MessageBubble';
 
@@ -22,25 +22,7 @@ import { FileTypes } from '../../../types/types';
 import { checkMessageEquality, checkQuotedMessageEquality } from '../../../utils/utils';
 import { useMessageData } from '../hooks/useMessageData';
 
-type GroupType = 'single' | 'top' | 'middle' | 'bottom' | undefined;
-
-const useStyles = ({
-  alignment,
-  isVeryLastMessage,
-  messageGroupedSingle,
-  messageGroupedBottom,
-  messageGroupedTop,
-  messageGroupedMiddle,
-  enableMessageGroupingByUser,
-}: {
-  alignment: Alignment;
-  isVeryLastMessage: boolean;
-  messageGroupedSingle: boolean;
-  messageGroupedBottom: boolean;
-  messageGroupedTop: boolean;
-  messageGroupedMiddle: boolean;
-  enableMessageGroupingByUser: boolean;
-}) => {
+const useStyles = ({ alignment }: { alignment: Alignment }) => {
   const {
     theme: {
       messageItemView: {
@@ -53,24 +35,11 @@ const useStyles = ({
         repliesContainer,
         leftAlignItems,
         rightAlignItems,
-        messageGroupedSingleStyles,
-        messageGroupedBottomStyles,
-        messageGroupedTopStyles,
-        messageGroupedMiddleStyles,
-        lastMessageContainer,
       },
     },
   } = useTheme();
 
-  const groupType: GroupType = useMemo(() => {
-    if (messageGroupedSingle) return 'single';
-    if (messageGroupedTop) return 'top';
-    if (messageGroupedMiddle) return 'middle';
-    if (messageGroupedBottom) return 'bottom';
-    return undefined;
-  }, [messageGroupedSingle, messageGroupedTop, messageGroupedMiddle, messageGroupedBottom]);
-
-  const styles = useMemo(
+  return useMemo(
     () =>
       StyleSheet.create({
         baseContainer: {
@@ -129,73 +98,6 @@ const useStyles = ({
       rightAlignItems,
     ],
   );
-
-  const groupStylesMap = useMemo(() => {
-    return {
-      single: {
-        paddingVertical: primitives.spacingXs,
-        ...messageGroupedSingleStyles,
-      },
-      top: {
-        paddingTop: primitives.spacingXs,
-        paddingBottom: primitives.spacingXxs,
-        ...messageGroupedTopStyles,
-      },
-      middle: {
-        paddingBottom: primitives.spacingXxs,
-        ...messageGroupedMiddleStyles,
-      },
-      bottom: {
-        paddingBottom: primitives.spacingXs,
-        ...messageGroupedBottomStyles,
-      },
-    };
-  }, [
-    messageGroupedBottomStyles,
-    messageGroupedMiddleStyles,
-    messageGroupedSingleStyles,
-    messageGroupedTopStyles,
-  ]);
-
-  const containerStyle = useMemo(() => {
-    let results: ViewStyle = styles.baseContainer;
-
-    if (groupType) {
-      results = {
-        ...results,
-        ...groupStylesMap[groupType],
-      };
-    }
-
-    if (isVeryLastMessage && enableMessageGroupingByUser) {
-      results = {
-        ...results,
-        marginBottom: primitives.spacingSm,
-        ...lastMessageContainer,
-      };
-    }
-
-    return results;
-  }, [
-    styles.baseContainer,
-    groupStylesMap,
-    groupType,
-    isVeryLastMessage,
-    enableMessageGroupingByUser,
-    lastMessageContainer,
-  ]);
-
-  return {
-    container: containerStyle,
-    bubbleContentContainer: styles.bubbleContentContainer,
-    bubbleErrorContainer: styles.bubbleErrorContainer,
-    bubbleReactionListTopContainer: styles.bubbleReactionListTopContainer,
-    bubbleWrapper: styles.bubbleWrapper,
-    contentContainer: styles.contentContainer,
-    repliesContainer: styles.repliesContainer,
-    leftAlignItems: styles.leftAlignItems,
-    rightAlignItems: styles.rightAlignItems,
-  };
 };
 
 export type MessageItemViewPropsWithContext = Pick<
@@ -232,7 +134,6 @@ const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
     channel,
     contextMenuAnchorRef,
     customMessageSwipeAction,
-    enableMessageGroupingByUser,
     enableSwipeToReply,
     groupStyles,
     hasAttachmentActions,
@@ -273,22 +174,10 @@ const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
     isMessageReceivedOrErrorType,
     isMessageTypeDeleted,
     isVeryLastMessage,
-    messageGroupedSingle,
-    messageGroupedBottom,
-    messageGroupedTop,
     messageGroupedSingleOrBottom,
-    messageGroupedMiddle,
   } = useMessageData({});
 
-  const styles = useStyles({
-    alignment,
-    isVeryLastMessage,
-    messageGroupedSingle,
-    messageGroupedBottom,
-    messageGroupedTop,
-    messageGroupedMiddle,
-    enableMessageGroupingByUser,
-  });
+  const styles = useStyles({ alignment });
 
   const groupStyle = `${alignment}_${groupStyles?.[0]?.toLowerCase?.()}`;
   const hasVisibleQuotedReply = !!message.quoted_message && !hasAttachmentActions;
@@ -324,7 +213,7 @@ const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
   });
 
   const itemViewContent = (
-    <View pointerEvents='box-none' style={styles.container} testID='message-item-view-wrapper'>
+    <View pointerEvents='box-none' style={styles.baseContainer} testID='message-item-view-wrapper'>
       {alignment === 'left' ? <MessageAuthor /> : null}
       {isMessageTypeDeleted ? (
         <MessageDeleted date={message.created_at} groupStyle={groupStyle} />

package/src/components/Message/MessageItemView/__tests__/MessageItemView.test.tsx

@@ -223,38 +223,47 @@ describe('MessageItemView', () => {
     });
   });
 
-  it('applies correct styles for when group styles are not single or bottom', async () => {
+  it('keeps message-item-view-wrapper free of group-positional padding', async () => {
     const user = generateUser();
     const message = generateMessage({ user });
 
     renderMessage({ groupStyles: ['top'], message });
 
     await waitFor(() => {
-      expect(screen.getByTestId('message-item-view-wrapper').props.style).toMatchObject({
+      const innerStyle = screen.getByTestId('message-item-view-wrapper').props.style;
+      expect(innerStyle).toMatchObject({
         alignItems: 'flex-end',
         gap: 8,
         flexDirection: 'row',
-        paddingTop: 8,
-        paddingBottom: 4,
       });
+      expect(innerStyle.paddingTop).toBeUndefined();
+      expect(innerStyle.paddingBottom).toBeUndefined();
     });
   });
 
-  it('applies correct styles for when group styles are single/bottom and not last message', async () => {
+  it('hoists the per-group padding delta onto message-wrapper for top messages', async () => {
     const user = generateUser();
     const message = generateMessage({ user });
 
-    renderMessage({ message });
+    renderMessage({ groupStyles: ['top'], message });
 
     await waitFor(() => {
-      const data = screen.getByTestId('message-item-view-wrapper').props.style;
+      expect(screen.getByTestId('message-wrapper').props.style).toEqual(
+        expect.arrayContaining([expect.objectContaining({ paddingTop: 8 })]),
+      );
+    });
+  });
 
-      expect(data).toMatchObject({
-        alignItems: 'flex-end',
-        gap: 8,
-        flexDirection: 'row',
-        paddingBottom: 8,
-      });
+  it('hoists the per-group padding delta onto message-wrapper for bottom messages', async () => {
+    const user = generateUser();
+    const message = generateMessage({ user });
+
+    renderMessage({ message });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('message-wrapper').props.style).toEqual(
+        expect.arrayContaining([expect.objectContaining({ paddingBottom: 8 })]),
+      );
     });
   });
 

package/src/components/Message/hooks/useUserMuteActive.ts

@@ -1,12 +1,11 @@
 import { UserResponse } from 'stream-chat';
 
-import { useChannelContext, useChatContext } from '../../../contexts';
+import { useChatContext } from '../../../contexts';
 import { useMutedUsers } from '../../ChannelList/hooks/useMutedUsers';
 
 export const useUserMuteActive = (user: UserResponse | null | undefined) => {
   const { client } = useChatContext();
-  const { channel } = useChannelContext();
-  const mutedUsers = useMutedUsers(channel);
+  const mutedUsers = useMutedUsers();
 
   if (!user) {
     return false;

package/src/components/MessageMenu/MessageActionList.tsx

@@ -78,7 +78,7 @@ const useStyles = () => {
       StyleSheet.create({
         container: {
           borderRadius: primitives.radiusLg,
-          marginTop: 6,
+          marginTop: 8,
           backgroundColor: semantics.backgroundCoreElevation2,
           borderWidth: 1,
           borderColor: semantics.borderCoreDefault,

package/src/components/Notifications/notificationTarget.ts

@@ -1,6 +1,12 @@
 import type { Notification } from 'stream-chat';
 
-const NOTIFICATION_TARGET_PANELS = ['channel', 'thread', 'channel-list', 'thread-list'] as const;
+const NOTIFICATION_TARGET_PANELS = [
+  'channel',
+  'thread',
+  'channel-list',
+  'thread-list',
+  'channel-details',
+] as const;
 const NOTIFICATION_TARGET_TAG_PREFIX = 'target:' as const;
 
 /** Built-in SDK surfaces that can host snackbar notifications. */

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

@@ -337,6 +337,7 @@ exports[`Thread should match thread snapshot 1`] = `
                     ],
                     {
                       "paddingHorizontal": 16,
+                      "paddingVertical": 8,
                     },
                   ]
                 }
@@ -370,7 +371,6 @@ exports[`Thread should match thread snapshot 1`] = `
                             "alignItems": "flex-end",
                             "flexDirection": "row",
                             "gap": 8,
-                            "paddingVertical": 8,
                             "width": "100%",
                           }
                         }
@@ -671,6 +671,7 @@ exports[`Thread should match thread snapshot 1`] = `
                     ],
                     {
                       "paddingHorizontal": 16,
+                      "paddingVertical": 8,
                     },
                   ]
                 }
@@ -704,7 +705,6 @@ exports[`Thread should match thread snapshot 1`] = `
                             "alignItems": "flex-end",
                             "flexDirection": "row",
                             "gap": 8,
-                            "paddingVertical": 8,
                             "width": "100%",
                           }
                         }
@@ -1039,6 +1039,7 @@ exports[`Thread should match thread snapshot 1`] = `
                     ],
                     {
                       "paddingHorizontal": 16,
+                      "paddingVertical": 8,
                     },
                   ]
                 }
@@ -1072,7 +1073,6 @@ exports[`Thread should match thread snapshot 1`] = `
                             "alignItems": "flex-end",
                             "flexDirection": "row",
                             "gap": 8,
-                            "paddingVertical": 8,
                             "width": "100%",
                           }
                         }
@@ -1365,7 +1365,9 @@ exports[`Thread should match thread snapshot 1`] = `
                   [
                     undefined,
                     {
+                      "marginBottom": 12,
                       "paddingHorizontal": 16,
+                      "paddingVertical": 8,
                     },
                   ]
                 }
@@ -1399,8 +1401,6 @@ exports[`Thread should match thread snapshot 1`] = `
                             "alignItems": "flex-end",
                             "flexDirection": "row",
                             "gap": 8,
-                            "marginBottom": 12,
-                            "paddingVertical": 8,
                             "width": "100%",
                           }
                         }

package/src/components/UIComponents/BottomSheetModal.tsx

@@ -48,7 +48,7 @@ import { useAccessibilityAnnouncer } from '../Accessibility/useAccessibilityAnno
 
 export type BottomSheetModalProps = {
   /**
-   * Function to call when the modal is closed.
+   * Function to call when the modal is closed or dismissed.
    * @returns void
    */
   onClose: () => void;
@@ -129,6 +129,14 @@ const BottomSheetModalInner = (props: PropsWithChildren<BottomSheetModalProps>)
   const wasVisibleRef = useRef(false);
 
   const [renderContent, setRenderContent] = useState(!lazy);
+  // We keep the underlying RN `<Modal>` mounted while it dismisses so we can
+  // listen for its `onDismiss` (iOS) and only then run the consumer's
+  // close-finished callback. Without this, callbacks that present another
+  // native modal (e.g. `UIImagePickerController` for camera capture) can race
+  // the still-dismissing view controller and crash with "Application tried to
+  // present modal view controller on top of itself" on iOS.
+  const [isDismissing, setIsDismissing] = useState(false);
+  const pendingCloseCallbackRef = useRef<(() => void) | undefined>(undefined);
 
   const showContent = useStableCallback(() => {
     if (lazy) {
@@ -166,15 +174,37 @@ const BottomSheetModalInner = (props: PropsWithChildren<BottomSheetModalProps>)
     );
   });
 
-  const finishClose = useStableCallback((closeAnimationFinishedCallback?: () => void) => {
+  const handleNativeModalDismiss = useStableCallback(() => {
+    const callback = pendingCloseCallbackRef.current;
+    pendingCloseCallbackRef.current = undefined;
     onClose();
-    if (closeAnimationFinishedCallback) {
-      Platform.OS === 'ios'
-        ? closeAnimationFinishedCallback()
-        : setTimeout(() => closeAnimationFinishedCallback(), 100);
-    }
+    callback?.();
   });
 
+  const finishClose = useStableCallback(
+    ({
+      closeAnimationFinishedCallback,
+      shouldDismiss,
+    }: {
+      closeAnimationFinishedCallback?: () => void;
+      shouldDismiss?: boolean;
+    }) => {
+      pendingCloseCallbackRef.current = closeAnimationFinishedCallback;
+      if (Platform.OS !== 'ios') {
+        // RN's `Modal.onDismiss` is iOS-only, so synthesize the same signal on
+        // other platforms after a short delay that gives the Dialog time to
+        // detach. Matches the previous Android behavior.
+        setTimeout(handleNativeModalDismiss, 100);
+      } else {
+        if (shouldDismiss) {
+          setIsDismissing(true);
+          return;
+        }
+        handleNativeModalDismiss();
+      }
+    },
+  );
+
   const closeFromGesture = useStableCallback(() => {
     requestAnimationFrame(() => {
       isOpen.value = false;
@@ -192,23 +222,39 @@ const BottomSheetModalInner = (props: PropsWithChildren<BottomSheetModalProps>)
     });
   });
 
-  const close = useStableCallback((closeAnimationFinishedCallback?: () => void) => {
-    if (!visible || !isOpen.value) {
-      return;
-    }
+  const closeInternal = useStableCallback(
+    ({
+      closeAnimationFinishedCallback,
+      shouldDismiss,
+    }: {
+      closeAnimationFinishedCallback?: () => void;
+      shouldDismiss?: boolean;
+    }) => {
+      if (!visible || !isOpen.value) {
+        return;
+      }
 
-    isOpen.value = false;
-    isOpening.value = false;
+      isOpen.value = false;
+      isOpening.value = false;
 
-    sheetTranslateY.value = withTiming(
-      maxHeight,
-      { duration: 250, easing: Easing.out(Easing.cubic) },
-      (finished) => {
-        if (finished) {
-          runOnJS(finishClose)(closeAnimationFinishedCallback);
-        }
-      },
-    );
+      sheetTranslateY.value = withTiming(
+        maxHeight,
+        { duration: 250, easing: Easing.out(Easing.cubic) },
+        (finished) => {
+          if (finished) {
+            runOnJS(finishClose)({ closeAnimationFinishedCallback, shouldDismiss });
+          }
+        },
+      );
+    },
+  );
+
+  const close = useStableCallback((closeAnimationFinishedCallback?: () => void) => {
+    closeInternal({ closeAnimationFinishedCallback });
+  });
+
+  const dismiss = useStableCallback((dismissFinishedCallback?: () => void) => {
+    closeInternal({ closeAnimationFinishedCallback: dismissFinishedCallback, shouldDismiss: true });
   });
 
   // modal opening layout effect - we make sure to only show the content
@@ -531,15 +577,21 @@ const BottomSheetModalInner = (props: PropsWithChildren<BottomSheetModalProps>)
 
   const bottomSheetModalContextValue = useMemo(
     () => ({
+      dismiss,
       close,
       currentSnapIndex,
       topSnapIndex,
     }),
-    [close, currentSnapIndex, topSnapIndex],
+    [dismiss, close, currentSnapIndex, topSnapIndex],
   );
 
   return (
-    <Modal onRequestClose={onClose} transparent visible={visible}>
+    <Modal
+      onDismiss={handleNativeModalDismiss}
+      onRequestClose={onClose}
+      transparent
+      visible={visible && !isDismissing}
+    >
       <GestureHandlerRootView style={styles.sheetContentContainer}>
         <View style={[styles.overlay, overlayTheme]}>
           <Animated.View

package/src/components/UIComponents/EmptySearchResult.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { I18nManager, StyleSheet, Text, View } from 'react-native';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { Search } from '../../icons/search';
+import { primitives } from '../../theme';
+
+export type EmptySearchResultProps = {
+  label: string;
+};
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const EmptySearchResult = ({ label }: EmptySearchResultProps) => {
+  const {
+    theme: {
+      emptySearchResult: { container, text },
+      semantics,
+    },
+  } = useTheme();
+
+  return (
+    <View style={[styles.container, container]} testID='empty-search-result'>
+      <Search height={24} stroke={semantics.textTertiary} width={24} />
+      <Text style={[styles.text, { color: semantics.textSecondary }, text]}>{label}</Text>
+    </View>
+  );
+};
+
+EmptySearchResult.displayName = 'EmptySearchResult{emptySearchResult}';
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    gap: primitives.spacingSm,
+    height: '100%',
+    justifyContent: 'center',
+    paddingVertical: primitives.spacingXl,
+    width: '100%',
+  },
+  text: {
+    fontSize: primitives.typographyFontSizeMd,
+    fontWeight: primitives.typographyFontWeightRegular,
+    lineHeight: primitives.typographyLineHeightNormal,
+    textAlign: 'center',
+    writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+  },
+});

package/src/components/UIComponents/GenericListLoadingSkeleton.tsx

@@ -0,0 +1,121 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { NativeShimmerView } from './NativeShimmerView';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { Theme } from '../../contexts/themeContext/utils/theme';
+import { primitives } from '../../theme';
+
+const ROW_COUNT = 4;
+
+// `memberListSkeleton` and `userListSkeleton` share an identical shape.
+export type ListLoadingSkeletonTheme = Theme['memberListSkeleton'];
+
+export type GenericListLoadingSkeletonProps = {
+  skeleton: ListLoadingSkeletonTheme;
+  testID: string;
+};
+
+const SkeletonBlock = ({
+  animationTime,
+  style,
+}: {
+  animationTime: number;
+  style: React.ComponentProps<typeof View>['style'];
+}) => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+
+  return (
+    <View style={style}>
+      <NativeShimmerView
+        baseColor={semantics.backgroundCoreSurfaceDefault}
+        duration={animationTime}
+        gradientColor={semantics.skeletonLoadingHighlight}
+        style={StyleSheet.absoluteFill}
+      />
+    </View>
+  );
+};
+
+const SkeletonRow = ({ skeleton }: { skeleton: ListLoadingSkeletonTheme }) => {
+  const styles = useStyles(skeleton);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.content}>
+        <SkeletonBlock animationTime={skeleton.animationTime} style={styles.avatar} />
+        <View style={styles.textContainer}>
+          <SkeletonBlock animationTime={skeleton.animationTime} style={styles.title} />
+          <SkeletonBlock animationTime={skeleton.animationTime} style={styles.subtitle} />
+        </View>
+      </View>
+    </View>
+  );
+};
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const GenericListLoadingSkeleton = ({
+  skeleton,
+  testID,
+}: GenericListLoadingSkeletonProps) => (
+  <View testID={testID}>
+    {Array.from({ length: ROW_COUNT }).map((_, index) => (
+      <SkeletonRow key={index} skeleton={skeleton} />
+    ))}
+  </View>
+);
+
+GenericListLoadingSkeleton.displayName = 'GenericListLoadingSkeleton';
+
+const useStyles = (skeleton: ListLoadingSkeletonTheme) =>
+  useMemo(
+    () =>
+      StyleSheet.create({
+        avatar: {
+          borderRadius: primitives.radiusMax,
+          height: 40,
+          overflow: 'hidden',
+          width: 40,
+          ...skeleton.avatar,
+        },
+        container: {
+          minHeight: 48,
+          paddingHorizontal: primitives.spacingXxs,
+          ...skeleton.container,
+        },
+        content: {
+          alignItems: 'center',
+          flexDirection: 'row',
+          flex: 1,
+          gap: primitives.spacingSm,
+          paddingHorizontal: primitives.spacingSm,
+          paddingVertical: primitives.spacingMd,
+          ...skeleton.content,
+        },
+        subtitle: {
+          borderRadius: primitives.radiusMax,
+          height: 12,
+          overflow: 'hidden',
+          width: 80,
+          ...skeleton.subtitle,
+        },
+        textContainer: {
+          flex: 1,
+          gap: primitives.spacingXs,
+          ...skeleton.textContainer,
+        },
+        title: {
+          borderRadius: primitives.radiusMax,
+          height: 16,
+          overflow: 'hidden',
+          width: 200,
+          ...skeleton.title,
+        },
+      }),
+    [skeleton],
+  );