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

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/useChannelPreviewDisplayName.ts

@@ -4,6 +4,8 @@ import type { Channel, ChannelMemberResponse } from 'stream-chat';
 
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { useChannelName } from '../../../hooks/useChannelName';
+import { useChannelMembersState } from '../../ChannelList/hooks/useChannelMembersState';
 
 const getMemberName = (member: ChannelMemberResponse) =>
   member.user?.name || member.user?.id || 'Unknown User';
@@ -12,8 +14,8 @@ export const useChannelPreviewDisplayName = (channel?: Channel) => {
   const { client } = useChatContext();
   const { t } = useTranslationContext();
   const currentUserId = client?.userID;
-  const members = channel?.state?.members;
-  const channelName = channel?.data?.name;
+  const members = useChannelMembersState(channel);
+  const channelName = useChannelName(channel);
 
   const displayName = useMemo(() => {
     if (channelName) {

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

@@ -67,6 +67,7 @@ import {
   setOverlayTopH,
   useIsOverlayActive,
 } from '../../state-store';
+import { primitives } from '../../theme';
 import { FileTypes } from '../../types/types';
 import {
   checkMessageEquality,
@@ -830,8 +831,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 +1160,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/__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/MessageInput/MessageComposer.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useMemo } from 'react';
-import { Modal, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import Animated, {
   Extrapolation,
   interpolate,
@@ -52,9 +51,9 @@ import { MessageInputHeightState } from '../../state-store/message-input-height-
 import { primitives } from '../../theme';
 import { transitions } from '../../utils/animations/transitions';
 import { type TextInputOverrideComponent } from '../AutoCompleteInput/AutoCompleteInput';
+import { PollModal } from '../Poll/components/PollModal';
 import { CreatePoll } from '../Poll/CreatePollContent';
 import { PortalWhileClosingView } from '../UIComponents/PortalWhileClosingView';
-import { SafeAreaViewWrapper } from '../UIComponents/SafeAreaViewWrapper';
 
 const useStyles = () => {
   const {
@@ -67,16 +66,6 @@ const useStyles = () => {
         flexShrink: 1,
         minWidth: 0,
       },
-      pollModalWrapper: {
-        alignItems: 'center',
-        flex: 1,
-        justifyContent: 'center',
-        backgroundColor: semantics.backgroundCoreElevation1,
-      },
-      pollSafeArea: {
-        flex: 1,
-        backgroundColor: semantics.backgroundCoreElevation1,
-      },
       container: {
         alignItems: 'center',
         flexDirection: 'row',
@@ -457,23 +446,13 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
       </Animated.View>
 
       {showPollCreationDialog ? (
-        <View style={styles.pollModalWrapper}>
-          <Modal
-            animationType='slide'
-            onRequestClose={closePollCreationDialog}
-            visible={showPollCreationDialog}
-          >
-            <GestureHandlerRootView style={styles.pollSafeArea}>
-              <SafeAreaViewWrapper style={styles.pollSafeArea}>
-                <CreatePoll
-                  closePollCreationDialog={closePollCreationDialog}
-                  createPollOptionGap={createPollOptionGap}
-                  sendMessage={sendMessage}
-                />
-              </SafeAreaViewWrapper>
-            </GestureHandlerRootView>
-          </Modal>
-        </View>
+        <PollModal onRequestClose={closePollCreationDialog} visible={showPollCreationDialog}>
+          <CreatePoll
+            closePollCreationDialog={closePollCreationDialog}
+            createPollOptionGap={createPollOptionGap}
+            sendMessage={sendMessage}
+          />
+        </PollModal>
       ) : null}
     </MicPositionProvider>
   );

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/Poll/components/CreatePollHeader.tsx

@@ -4,7 +4,7 @@ import { StyleSheet, Text, View } from 'react-native';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { Check, IconProps } from '../../../icons';
-import { ArrowLeft } from '../../../icons/arrow-left';
+import { Cross } from '../../../icons/xmark-1';
 import { primitives } from '../../../theme';
 import { Button } from '../../ui';
 import { useCanCreatePoll } from '../hooks/useCanCreatePoll';
@@ -43,9 +43,16 @@ export const CreatePollHeader = ({
 
   const renderSendPollIcon = useCallback(
     (props: IconProps) => {
-      return <Check {...props} height={18} stroke={semantics.textOnAccent} width={18} />;
+      return (
+        <Check
+          {...props}
+          height={18}
+          stroke={canCreatePoll ? semantics.textOnAccent : semantics.textDisabled}
+          width={18}
+        />
+      );
     },
-    [semantics.textOnAccent],
+    [canCreatePoll, semantics.textOnAccent, semantics.textDisabled],
   );
 
   return (
@@ -54,9 +61,9 @@ export const CreatePollHeader = ({
         accessibilityLabelKey='a11y/Close poll creation'
         variant='secondary'
         onPress={onBackPressHandler}
-        type='ghost'
+        type='outline'
         size='md'
-        LeadingIcon={ArrowLeft}
+        LeadingIcon={Cross}
         iconOnly
       />