stream-chat-react-native-core 9.4.0-beta.1 → 9.4.0-beta.11

package/src/components/ChannelList/hooks/useCreateChannelsContext.ts

@@ -23,6 +23,7 @@ export const useCreateChannelsContext = ({
   reloadList,
   setFlatListRef,
   mutedStatusPosition,
+  pinnedStatusPosition,
 }: ChannelsContextValue) => {
   const channelValueString = channels
     ?.map(
@@ -56,6 +57,7 @@ export const useCreateChannelsContext = ({
       reloadList,
       setFlatListRef,
       mutedStatusPosition,
+      pinnedStatusPosition,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
@@ -69,6 +71,7 @@ export const useCreateChannelsContext = ({
       swipeActionsEnabled,
       refreshing,
       mutedStatusPosition,
+      pinnedStatusPosition,
     ],
   );
 

package/src/components/ChannelPreview/ChannelMessagePreviewDeliveryStatus.tsx

@@ -107,7 +107,7 @@ const useStyles = () => {
     theme: {
       semantics,
       channelPreview: {
-        messageDeliveryStatus: { container, text },
+        messageDeliveryStatus: { container, text, username },
       },
     },
   } = useTheme();
@@ -132,7 +132,8 @@ const useStyles = () => {
         fontSize: primitives.typographyFontSizeSm,
         fontWeight: primitives.typographyFontWeightSemiBold,
         lineHeight: primitives.typographyLineHeightNormal,
+        ...username,
       },
     });
-  }, [semantics, text, container]);
+  }, [semantics, text, username, container]);
 };

package/src/components/ChannelPreview/ChannelPreview.tsx

@@ -30,19 +30,37 @@ export const ChannelPreview = (props: ChannelPreviewProps) => {
 
   const client = propClient || contextClient;
 
-  const { muted, unread, lastMessage } = useChannelPreviewData(channel, client, propForceUpdate);
+  const { muted, pinned, unread, lastMessage } = useChannelPreviewData(
+    channel,
+    client,
+    propForceUpdate,
+  );
 
   const translatedLastMessage = useTranslatedMessage(lastMessage);
 
   const message = translatedLastMessage ? translatedLastMessage : lastMessage;
 
   if (!swipeActionsEnabled) {
-    return <ChannelPreview channel={channel} muted={muted} unread={unread} lastMessage={message} />;
+    return (
+      <ChannelPreview
+        channel={channel}
+        muted={muted}
+        pinned={pinned}
+        unread={unread}
+        lastMessage={message}
+      />
+    );
   }
 
   return (
     <ChannelSwipableWrapper channel={channel} getChannelActionItems={getChannelActionItems}>
-      <ChannelPreview channel={channel} muted={muted} unread={unread} lastMessage={message} />
+      <ChannelPreview
+        channel={channel}
+        muted={muted}
+        pinned={pinned}
+        unread={unread}
+        lastMessage={message}
+      />
     </ChannelSwipableWrapper>
   );
 };

package/src/components/ChannelPreview/ChannelPreviewPinnedStatus.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { Pin } from '../../icons';
+import { CompositeAccessibilityProbe } from '../Accessibility/CompositeAccessibilityProbe';
+
+/**
+ * This UI component displays a pinned indicator for a particular channel.
+ */
+export const ChannelPreviewPinnedStatus = () => {
+  const {
+    theme: {
+      channelPreview: { pinnedStatus },
+      semantics,
+    },
+  } = useTheme();
+  const accessibilityLabel = useA11yLabel('a11y/Pinned');
+
+  return (
+    <CompositeAccessibilityProbe label={accessibilityLabel}>
+      <Pin height={20} stroke={semantics.textTertiary} width={20} {...pinnedStatus} />
+    </CompositeAccessibilityProbe>
+  );
+};

package/src/components/ChannelPreview/ChannelPreviewView.tsx

@@ -17,7 +17,10 @@ import { useStableCallback } from '../../hooks';
 import { primitives } from '../../theme';
 
 export type ChannelPreviewViewPropsWithContext = Pick<ChannelPreviewProps, 'channel'> &
-  Pick<ChannelsContextValue, 'maxUnreadCount' | 'onSelect' | 'mutedStatusPosition'> & {
+  Pick<
+    ChannelsContextValue,
+    'maxUnreadCount' | 'onSelect' | 'mutedStatusPosition' | 'pinnedStatusPosition'
+  > & {
     /**
      * Formatter function for date of latest message.
      * @param date Message date
@@ -30,6 +33,8 @@ export type ChannelPreviewViewPropsWithContext = Pick<ChannelPreviewProps, 'chan
     formatLatestMessageDate?: (date: Date) => string;
     /** If the channel is muted. */
     muted?: boolean;
+    /** If the channel is pinned for the current user. */
+    pinned?: boolean;
     /** Number of unread messages on the channel */
     unread?: number;
     lastMessage?: LastMessageType;
@@ -42,14 +47,17 @@ const ChannelPreviewViewWithContext = (props: ChannelPreviewViewPropsWithContext
     maxUnreadCount,
     muted,
     onSelect,
+    pinned,
     unread,
     mutedStatusPosition,
+    pinnedStatusPosition,
     lastMessage,
   } = props;
   const {
     ChannelPreviewAvatar,
     ChannelPreviewMessage,
     ChannelPreviewMutedStatus,
+    ChannelPreviewPinnedStatus,
     ChannelPreviewStatus,
     ChannelPreviewTitle,
     ChannelPreviewUnreadCount,
@@ -111,6 +119,9 @@ const ChannelPreviewViewWithContext = (props: ChannelPreviewViewPropsWithContext
               {muted && mutedStatusPosition === 'inlineTitle' ? (
                 <ChannelPreviewMutedStatus />
               ) : null}
+              {pinned && pinnedStatusPosition === 'inlineTitle' ? (
+                <ChannelPreviewPinnedStatus />
+              ) : null}
             </View>
 
             <View style={[styles.statusContainer, statusContainer]}>
@@ -132,6 +143,9 @@ const ChannelPreviewViewWithContext = (props: ChannelPreviewViewPropsWithContext
             {muted && mutedStatusPosition === 'trailingBottom' ? (
               <ChannelPreviewMutedStatus />
             ) : null}
+            {pinned && pinnedStatusPosition === 'trailingBottom' ? (
+              <ChannelPreviewPinnedStatus />
+            ) : null}
           </View>
         </View>
       </Pressable>
@@ -151,7 +165,8 @@ const MemoizedChannelPreviewViewWithContext = React.memo(
  * from the ChannelPreview component.
  */
 export const ChannelPreviewView = (props: ChannelPreviewViewProps) => {
-  const { forceUpdate, maxUnreadCount, onSelect, mutedStatusPosition } = useChannelsContext();
+  const { forceUpdate, maxUnreadCount, onSelect, mutedStatusPosition, pinnedStatusPosition } =
+    useChannelsContext();
   return (
     <MemoizedChannelPreviewViewWithContext
       {...{
@@ -159,6 +174,7 @@ export const ChannelPreviewView = (props: ChannelPreviewViewProps) => {
         maxUnreadCount,
         onSelect,
         mutedStatusPosition,
+        pinnedStatusPosition,
       }}
       {...props}
     />

package/src/components/ChannelPreview/ChannelSwipableWrapper.tsx

@@ -41,7 +41,11 @@ export const ChannelSwipableWrapper = ({
 }>) => {
   const { ChannelDetailsBottomSheet: ChannelDetailsBottomSheetComponent } = useComponentsContext();
   const [channelDetailSheetOpen, setChannelDetailSheetOpen] = useState(false);
-  const channelActionItems = useChannelActionItems({ channel, getChannelActionItems });
+  const channelActionItems = useChannelActionItems({
+    channel,
+    getChannelActionItems,
+    surface: 'list',
+  });
   const sheetItems = useMemo(
     () => channelActionItems.filter((item) => item.placement !== 'swipe'),
     [channelActionItems],

package/src/components/ChannelPreview/hooks/__tests__/useIsChannelPinned.test.tsx

@@ -0,0 +1,35 @@
+import { renderHook } from '@testing-library/react-native';
+import { Channel } from 'stream-chat';
+
+import { useIsChannelPinned } from '../useIsChannelPinned';
+
+describe('useIsChannelPinned', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const buildMockChannel = (membership: Record<string, unknown> = {}) =>
+    ({
+      initialized: true,
+      on: jest.fn().mockReturnValue({ unsubscribe: jest.fn() }),
+      state: { membership },
+    }) as unknown as Channel;
+
+  it('returns false when membership has no pinned_at', () => {
+    const channel = buildMockChannel({ pinned_at: null });
+    const { result } = renderHook(() => useIsChannelPinned(channel));
+    expect(result.current).toBe(false);
+  });
+
+  it('returns true when membership has a pinned_at timestamp', () => {
+    const channel = buildMockChannel({ pinned_at: '2026-06-15T08:00:00.000Z' });
+    const { result } = renderHook(() => useIsChannelPinned(channel));
+    expect(result.current).toBe(true);
+  });
+
+  it('subscribes to member.updated events', () => {
+    const channel = buildMockChannel({ pinned_at: null });
+    renderHook(() => useIsChannelPinned(channel));
+    expect(channel.on).toHaveBeenCalledWith('member.updated', expect.any(Function));
+  });
+});

package/src/components/ChannelPreview/hooks/index.ts

@@ -4,4 +4,5 @@ export * from './useChannelPreviewPollLabel';
 export * from './useChannelPreviewDisplayName';
 export * from './useChannelPreviewDisplayPresence';
 export * from './useIsChannelMuted';
+export * from './useIsChannelPinned';
 export * from './useChannelTypingState';

package/src/components/ChannelPreview/hooks/useChannelPreviewData.ts

@@ -4,6 +4,7 @@ import throttle from 'lodash/throttle';
 import type { Channel, Event, LocalMessage, MessageResponse, StreamChat } from 'stream-chat';
 
 import { useIsChannelMuted } from './useIsChannelMuted';
+import { useIsChannelPinned } from './useIsChannelPinned';
 
 import { useChannelsContext } from '../../../contexts';
 import { useStableCallback } from '../../../hooks';
@@ -39,6 +40,7 @@ export const useChannelPreviewData = (
   );
   const [unread, setUnread] = useState(channel.countUnread());
   const { muted } = useIsChannelMuted(channel);
+  const pinned = useIsChannelPinned(channel);
   const { forceUpdate: contextForceUpdate } = useChannelsContext();
   const channelListForceUpdate = forceUpdateOverride ?? contextForceUpdate;
 
@@ -170,5 +172,5 @@ export const useChannelPreviewData = (
     return () => listeners.forEach((l) => l.unsubscribe());
   }, [channel, refreshUnreadCount, forceUpdate, channelListForceUpdate, setLastMessage]);
 
-  return { lastMessage, muted, unread };
+  return { lastMessage, muted, pinned, unread };
 };

package/src/components/ChannelPreview/hooks/useIsChannelPinned.ts

@@ -0,0 +1,8 @@
+import type { Channel } from 'stream-chat';
+
+import { useChannelMembershipState } from '../../../hooks/useChannelMembershipState';
+
+export const useIsChannelPinned = (channel: Channel) => {
+  const membership = useChannelMembershipState(channel);
+  return Boolean(membership?.pinned_at);
+};

package/src/components/Message/Message.tsx

@@ -11,7 +11,7 @@ import {
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Portal } from 'react-native-teleport';
 
-import type { Attachment, LocalMessage, UserResponse } from 'stream-chat';
+import type { Attachment, LocalMessage, MentionEntity, UserResponse } from 'stream-chat';
 
 import { useCreateMessageContext } from './hooks/useCreateMessageContext';
 import { useMessageActionHandlers } from './hooks/useMessageActionHandlers';
@@ -67,6 +67,7 @@ import {
   setOverlayTopH,
   useIsOverlayActive,
 } from '../../state-store';
+import { primitives } from '../../theme';
 import { FileTypes } from '../../types/types';
 import {
   checkMessageEquality,
@@ -93,7 +94,19 @@ export type TouchableEmitter =
   | 'messageReplies'
   | 'reactionList';
 
-export type TextMentionTouchableHandlerAdditionalInfo = { user?: UserResponse };
+export type TextMentionTouchableHandlerAdditionalInfo = {
+  /**
+   * The typed mention entity for the pressed mention (user / channel / here /
+   * role / user_group). Always populated by the default renderText pipeline;
+   * undefined only when a custom renderer doesn't resolve a match.
+   */
+  mentionedEntity?: MentionEntity;
+  /**
+   * Back-compat: still populated when the mention is a user, so existing
+   * integrators reading `additionalInfo.user` keep working.
+   */
+  user?: UserResponse;
+};
 
 export type TextMentionTouchableHandlerPayload = {
   emitter: 'textMention';
@@ -830,8 +843,20 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     }
   }, [overlayActive, message]);
 
+  const groupKey: 'single' | 'top' | 'middle' | 'bottom' | undefined =
+    groupStyles?.[0] === 'single' ||
+    groupStyles?.[0] === 'top' ||
+    groupStyles?.[0] === 'middle' ||
+    groupStyles?.[0] === 'bottom'
+      ? groupStyles[0]
+      : undefined;
+  const isVeryLastBubble =
+    messagesContext.enableMessageGroupingByUser &&
+    channel?.state.messages[channel.state.messages.length - 1]?.id === message.id;
   const styles = useStyles({
+    groupKey,
     highlightedMessage: (isTargetedMessage || message.pinned) && !isMessageTypeDeleted,
+    isVeryLastBubble,
   });
   const rect = rectRef.current;
   const overlayItemsAnchorRect = bubbleRect.current ?? rect;
@@ -1147,34 +1172,67 @@ export const Message = (props: MessageProps) => {
   );
 };
 
-const useStyles = ({ highlightedMessage }: { highlightedMessage?: boolean }) => {
+const useStyles = ({
+  groupKey,
+  highlightedMessage,
+  isVeryLastBubble,
+}: {
+  groupKey: 'single' | 'top' | 'middle' | 'bottom' | undefined;
+  highlightedMessage?: boolean;
+  isVeryLastBubble: boolean;
+}) => {
   const {
-    theme: {
-      messageItemView: { wrapper, targetedMessageContainer, blockedMessageContainer },
-      screenPadding,
-      semantics,
-    },
+    theme: { messageItemView, screenPadding, semantics },
   } = useTheme();
+
   return useMemo(() => {
-    return StyleSheet.create({
-      wrapper: {
-        paddingHorizontal: screenPadding,
-        ...(highlightedMessage
-          ? { backgroundColor: semantics.backgroundCoreHighlight, ...targetedMessageContainer }
-          : {}),
-        ...wrapper,
+    const groupStylesMap: Record<'single' | 'top' | 'middle' | 'bottom', ViewStyle> = {
+      single: {
+        paddingVertical: primitives.spacingXs,
+        ...messageItemView.messageGroupedSingleStyles,
+      },
+      top: {
+        paddingTop: primitives.spacingXs,
+        paddingBottom: primitives.spacingXxs,
+        ...messageItemView.messageGroupedTopStyles,
       },
+      middle: {
+        paddingBottom: primitives.spacingXxs,
+        ...messageItemView.messageGroupedMiddleStyles,
+      },
+      bottom: {
+        paddingBottom: primitives.spacingXs,
+        ...messageItemView.messageGroupedBottomStyles,
+      },
+    };
+
+    let wrapper: ViewStyle = {
+      paddingHorizontal: screenPadding,
+      ...(highlightedMessage
+        ? {
+            backgroundColor: semantics.backgroundCoreHighlight,
+            ...messageItemView.targetedMessageContainer,
+          }
+        : {}),
+      ...messageItemView.wrapper,
+    };
+    if (groupKey) {
+      wrapper = { ...wrapper, ...groupStylesMap[groupKey] };
+    }
+    if (isVeryLastBubble) {
+      wrapper = {
+        ...wrapper,
+        marginBottom: primitives.spacingSm,
+        ...messageItemView.lastMessageContainer,
+      };
+    }
+
+    return StyleSheet.create({
+      wrapper,
       blockedMessageContainer: {
         alignItems: 'center',
-        ...blockedMessageContainer,
+        ...messageItemView.blockedMessageContainer,
       },
     });
-  }, [
-    wrapper,
-    screenPadding,
-    highlightedMessage,
-    semantics,
-    targetedMessageContainer,
-    blockedMessageContainer,
-  ]);
+  }, [messageItemView, screenPadding, semantics, highlightedMessage, groupKey, isVeryLastBubble]);
 };

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/MessageTextContainer.tsx

@@ -166,6 +166,31 @@ const areEqual = (
     return false;
   }
 
+  // Enhanced mention sources (channel/here/roles/groups) — without these the
+  // renderText cache would refresh on a new entity but this comparator would
+  // short-circuit it away and the highlight would not appear until something
+  // else re-rendered the row.
+  const mentionedBroadcastEqual =
+    prevMessage.mentioned_channel === nextMessage.mentioned_channel &&
+    prevMessage.mentioned_here === nextMessage.mentioned_here;
+  if (!mentionedBroadcastEqual) {
+    return false;
+  }
+
+  const joinIds = (values?: string[]) => (values ?? []).join('|');
+  const mentionedRolesEqual =
+    joinIds(prevMessage.mentioned_roles) === joinIds(nextMessage.mentioned_roles);
+  if (!mentionedRolesEqual) {
+    return false;
+  }
+
+  const groupIds = (m: typeof prevMessage) =>
+    joinIds(m.mentioned_groups?.map((g) => g.id) ?? m.mentioned_group_ids);
+  const mentionedGroupsEqual = groupIds(prevMessage) === groupIds(nextMessage);
+  if (!mentionedGroupsEqual) {
+    return false;
+  }
+
   // stringify could be an expensive operation, so lets rule out the obvious
   // possibilities first such as different object reference or empty objects etc.
   // Also keeping markdown equality check at the last to make sure other less