stream-chat-react-native-core 3.10.2 → 4.0.0-beta.4

package/src/components/Message/MessageSimple/MessageSimple.tsx

@@ -43,7 +43,11 @@ export type MessageSimplePropsWithContext<
 > &
   Pick<
     MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>,
-    'enableMessageGroupingByUser' | 'MessageAvatar' | 'MessageContent' | 'ReactionList'
+    | 'enableMessageGroupingByUser'
+    | 'MessageAvatar'
+    | 'MessageContent'
+    | 'MessagePinnedHeader'
+    | 'ReactionList'
   >;
 
 const MessageSimpleWithContext = <
@@ -66,6 +70,7 @@ const MessageSimpleWithContext = <
     message,
     MessageAvatar,
     MessageContent,
+    MessagePinnedHeader,
     ReactionList,
   } = props;
 
@@ -85,26 +90,29 @@ const MessageSimpleWithContext = <
   const showReactions = hasReactions && ReactionList;
 
   return (
-    <View
-      style={[
-        styles.container,
-        {
-          justifyContent: alignment === 'left' ? 'flex-start' : 'flex-end',
-          marginBottom: hasMarginBottom
-            ? isVeryLastMessage && enableMessageGroupingByUser
-              ? 30
-              : 8
-            : 0,
-          marginTop: showReactions ? 2 : 0,
-        },
-        container,
-      ]}
-      testID='message-simple-wrapper'
-    >
-      {alignment === 'left' && <MessageAvatar />}
-      <MessageContent setMessageContentWidth={setMessageContentWidth} />
-      {showReactions && <ReactionList messageContentWidth={messageContentWidth} />}
-    </View>
+    <>
+      {message.pinned && <MessagePinnedHeader />}
+      <View
+        style={[
+          styles.container,
+          {
+            justifyContent: alignment === 'left' ? 'flex-start' : 'flex-end',
+            marginBottom: hasMarginBottom
+              ? isVeryLastMessage && enableMessageGroupingByUser
+                ? 30
+                : 8
+              : 0,
+            marginTop: showReactions ? 2 : 0,
+          },
+          container,
+        ]}
+        testID='message-simple-wrapper'
+      >
+        {alignment === 'left' && <MessageAvatar />}
+        <MessageContent setMessageContentWidth={setMessageContentWidth} />
+        {showReactions && <ReactionList messageContentWidth={messageContentWidth} />}
+      </View>
+    </>
   );
 };
 
@@ -142,16 +150,23 @@ const areEqual = <
   const groupStylesEqual = JSON.stringify(prevGroupStyles) === JSON.stringify(nextGroupStyles);
   if (!groupStylesEqual) return false;
 
+  const isPrevMessageTypeDeleted = prevMessage.type === 'deleted';
+  const isNextMessageTypeDeleted = nextMessage.type === 'deleted';
+
   const messageEqual =
-    prevMessage.deleted_at === nextMessage.deleted_at &&
+    isPrevMessageTypeDeleted === isNextMessageTypeDeleted &&
     prevMessage.status === nextMessage.status &&
     prevMessage.type === nextMessage.type &&
-    prevMessage.text === nextMessage.text;
+    prevMessage.text === nextMessage.text &&
+    prevMessage.pinned === nextMessage.pinned;
   if (!messageEqual) return false;
 
+  const isPrevQuotedMessageTypeDeleted = prevMessage.quoted_message?.type === 'deleted';
+  const isNextQuotedMessageTypeDeleted = nextMessage.quoted_message?.type === 'deleted';
+
   const quotedMessageEqual =
     prevMessage.quoted_message?.id === nextMessage.quoted_message?.id &&
-    prevMessage.quoted_message?.deleted_at === nextMessage.quoted_message?.deleted_at;
+    isPrevQuotedMessageTypeDeleted === isNextQuotedMessageTypeDeleted;
 
   if (!quotedMessageEqual) return false;
 
@@ -216,8 +231,13 @@ export const MessageSimple = <
 ) => {
   const { alignment, channel, groupStyles, hasReactions, message } =
     useMessageContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { enableMessageGroupingByUser, MessageAvatar, MessageContent, ReactionList } =
-    useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const {
+    enableMessageGroupingByUser,
+    MessageAvatar,
+    MessageContent,
+    MessagePinnedHeader,
+    ReactionList,
+  } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
 
   return (
     <MemoizedMessageSimple<At, Ch, Co, Ev, Me, Re, Us>
@@ -230,6 +250,7 @@ export const MessageSimple = <
         message,
         MessageAvatar,
         MessageContent,
+        MessagePinnedHeader,
         ReactionList,
       }}
       {...props}

package/src/components/Message/MessageSimple/MessageStatus.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { isMessageWithStylesReadByAndDateSeparator } from '../../MessageList/hooks/useMessageList';
-
 import {
   MessageContextValue,
   useMessageContext,
@@ -11,7 +9,6 @@ import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { Check } from '../../../icons/Check';
 import { CheckAll } from '../../../icons/CheckAll';
 import { Time } from '../../../icons/Time';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -22,6 +19,9 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
+import { MessageStatusTypes } from '../../../utils/utils';
+
+import { isMessageWithStylesReadByAndDateSeparator } from '../../MessageList/hooks/useMessageList';
 
 const styles = StyleSheet.create({
   readByCount: {
@@ -45,10 +45,7 @@ export type MessageStatusPropsWithContext<
   Me extends UnknownType = DefaultMessageType,
   Re extends UnknownType = DefaultReactionType,
   Us extends DefaultUserType = DefaultUserType,
-> = Pick<
-  MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>,
-  'message' | 'readEventsEnabled' | 'threadList'
->;
+> = Pick<MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'message' | 'threadList'>;
 
 const MessageStatusWithContext = <
   At extends UnknownType = DefaultAttachmentType,
@@ -61,18 +58,18 @@ const MessageStatusWithContext = <
 >(
   props: MessageStatusPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
 ) => {
-  const { message, readEventsEnabled, threadList } = props;
+  const { message, threadList } = props;
 
   const {
     theme: {
-      colors: { accent_blue },
+      colors: { accent_blue, grey_dark },
       messageSimple: {
         status: { checkAllIcon, checkIcon, readByCount, statusContainer, timeIcon },
       },
     },
   } = useTheme();
 
-  if (message.status === 'sending') {
+  if (message.status === MessageStatusTypes.SENDING) {
     return (
       <View style={[styles.statusContainer, statusContainer]} testID='sending-container'>
         <Time {...timeIcon} />
@@ -80,11 +77,7 @@ const MessageStatusWithContext = <
     );
   }
 
-  if (
-    isMessageWithStylesReadByAndDateSeparator(message) &&
-    !threadList &&
-    readEventsEnabled !== false
-  ) {
+  if (isMessageWithStylesReadByAndDateSeparator(message) && !threadList) {
     return (
       <View style={[styles.statusContainer, statusContainer]}>
         {typeof message.readBy === 'number' ? (
@@ -98,16 +91,20 @@ const MessageStatusWithContext = <
         {typeof message.readBy === 'number' || message.readBy === true ? (
           <CheckAll pathFill={accent_blue} {...checkAllIcon} />
         ) : (
-          <Check {...checkIcon} />
+          <Check pathFill={grey_dark} {...checkIcon} />
         )}
       </View>
     );
   }
 
-  if (message.status === 'received' && message.type !== 'ephemeral' && !threadList) {
+  if (
+    message.status === MessageStatusTypes.RECEIVED &&
+    message.type !== 'ephemeral' &&
+    !threadList
+  ) {
     return (
       <View style={[styles.statusContainer, statusContainer]} testID='delivered-container'>
-        <Check {...checkIcon} />
+        <Check pathFill={grey_dark} {...checkIcon} />
       </View>
     );
   }
@@ -127,23 +124,12 @@ const areEqual = <
   prevProps: MessageStatusPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
   nextProps: MessageStatusPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
 ) => {
-  const {
-    message: prevMessage,
-    readEventsEnabled: prevReadEventsEnabled,
-    threadList: prevThreadList,
-  } = prevProps;
-  const {
-    message: nextMessage,
-    readEventsEnabled: nextReadEventsEnabled,
-    threadList: nextThreadList,
-  } = nextProps;
+  const { message: prevMessage, threadList: prevThreadList } = prevProps;
+  const { message: nextMessage, threadList: nextThreadList } = nextProps;
 
   const threadListEqual = prevThreadList === nextThreadList;
   if (!threadListEqual) return false;
 
-  const readEventsEnabledEqual = prevReadEventsEnabled === nextReadEventsEnabled;
-  if (!readEventsEnabledEqual) return false;
-
   const messageEqual =
     prevMessage.status === nextMessage.status &&
     prevMessage.type === nextMessage.type &&
@@ -180,10 +166,9 @@ export const MessageStatus = <
 >(
   props: MessageStatusProps<At, Ch, Co, Ev, Me, Re, Us>,
 ) => {
-  const { message, readEventsEnabled, threadList } =
-    useMessageContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { message, threadList } = useMessageContext<At, Ch, Co, Ev, Me, Re, Us>();
 
-  return <MemoizedMessageStatus {...{ message, readEventsEnabled, threadList }} {...props} />;
+  return <MemoizedMessageStatus {...{ message, threadList }} {...props} />;
 };
 
 MessageStatus.displayName = 'MessageStatus{messageSimple{status}}';

package/src/components/Message/MessageSimple/MessageTextContainer.tsx

@@ -57,6 +57,7 @@ export type MessageTextContainerPropsWithContext<
   Pick<MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'markdownRules' | 'MessageText'> & {
     markdownStyles?: MarkdownStyle;
     messageOverlay?: boolean;
+    messageTextNumberOfLines?: number;
     styles?: Partial<{
       textContainer: StyleProp<ViewStyle>;
     }>;
@@ -81,6 +82,7 @@ const MessageTextContainerWithContext = <
     message,
     messageOverlay,
     MessageText,
+    messageTextNumberOfLines,
     onLongPress,
     onlyEmojis,
     onPress,
@@ -121,6 +123,7 @@ const MessageTextContainerWithContext = <
           },
           message,
           messageOverlay,
+          messageTextNumberOfLines,
           onLongPress,
           onlyEmojis,
           onPress,
@@ -192,6 +195,7 @@ export const MessageTextContainer = <
   const { message, onLongPress, onlyEmojis, onPress, preventPress } =
     useMessageContext<At, Ch, Co, Ev, Me, Re, Us>();
   const { markdownRules, MessageText } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { messageTextNumberOfLines } = props;
 
   return (
     <MemoizedMessageTextContainer
@@ -199,6 +203,7 @@ export const MessageTextContainer = <
         markdownRules,
         message,
         MessageText,
+        messageTextNumberOfLines,
         onLongPress,
         onlyEmojis,
         onPress,

package/src/components/Message/MessageSimple/ReactionList.tsx

@@ -1,12 +1,6 @@
-import React, { useEffect } from 'react';
-import { StyleSheet, TouchableOpacity, useWindowDimensions, View, ViewStyle } from 'react-native';
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withDelay,
-  withSequence,
-  withTiming,
-} from 'react-native-reanimated';
+import React from 'react';
+import { StyleSheet, TouchableOpacity, useWindowDimensions, View } from 'react-native';
+
 import Svg, { Circle } from 'react-native-svg';
 
 import {
@@ -14,7 +8,10 @@ import {
   Reactions,
   useMessageContext,
 } from '../../../contexts/messageContext/MessageContext';
-import { useMessagesContext } from '../../../contexts/messagesContext/MessagesContext';
+import {
+  MessagesContextValue,
+  useMessagesContext,
+} from '../../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 
 import { Unknown } from '../../../icons/Unknown';
@@ -64,36 +61,10 @@ const Icon: React.FC<
   const ReactionIcon =
     supportedReactions.find((reaction) => reaction.type === type)?.Icon || Unknown;
 
-  const scale = useSharedValue(0);
-
-  const showReaction = () => {
-    'worklet';
-    scale.value = withSequence(
-      withDelay(250, withTiming(0.5, { duration: 100 })),
-      withTiming(1.5, { duration: 400 }),
-      withTiming(1, { duration: 500 }),
-    );
-  };
-
-  useEffect(() => {
-    showReaction();
-  }, []);
-
-  const animatedStyle = useAnimatedStyle<ViewStyle>(
-    () => ({
-      transform: [
-        {
-          scale: scale.value,
-        },
-      ],
-    }),
-    [],
-  );
-
   return (
-    <Animated.View style={animatedStyle}>
+    <View>
       <ReactionIcon height={size} pathFill={pathFill} style={style} width={size} />
-    </Animated.View>
+    </View>
   );
 };
 
@@ -108,21 +79,23 @@ export type ReactionListPropsWithContext<
 > = Pick<
   MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>,
   | 'alignment'
+  | 'message'
   | 'onLongPress'
   | 'onPress'
   | 'onPressIn'
   | 'preventPress'
   | 'reactions'
   | 'showMessageOverlay'
-> & {
-  messageContentWidth: number;
-  supportedReactions: ReactionData[];
-  fill?: string;
-  radius?: number; // not recommended to change this
-  reactionSize?: number;
-  stroke?: string;
-  strokeSize?: number; // not recommended to change this
-};
+> &
+  Pick<MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'targetedMessage'> & {
+    messageContentWidth: number;
+    supportedReactions: ReactionData[];
+    fill?: string;
+    radius?: number; // not recommended to change this
+    reactionSize?: number;
+    stroke?: string;
+    strokeSize?: number; // not recommended to change this
+  };
 
 const ReactionListWithContext = <
   At extends UnknownType = DefaultAttachmentType,
@@ -138,6 +111,7 @@ const ReactionListWithContext = <
   const {
     alignment,
     fill: propFill,
+    message,
     messageContentWidth,
     onLongPress,
     onPress,
@@ -150,11 +124,20 @@ const ReactionListWithContext = <
     stroke: propStroke,
     strokeSize: propStrokeSize,
     supportedReactions,
+    targetedMessage,
   } = props;
 
   const {
     theme: {
-      colors: { accent_blue, grey, grey_gainsboro, grey_whisper, white },
+      colors: {
+        accent_blue,
+        grey,
+        grey_gainsboro,
+        grey_whisper,
+        targetedMessageBackground,
+        white,
+        white_snow,
+      },
       messageSimple: {
         avatarWrapper: { leftAlign, spacer },
         reactionList: {
@@ -171,8 +154,6 @@ const ReactionListWithContext = <
     },
   } = useTheme();
 
-  const opacity = useSharedValue(0);
-
   const width = useWindowDimensions().width;
 
   const supportedReactionTypes = supportedReactions.map(
@@ -182,22 +163,6 @@ const ReactionListWithContext = <
     supportedReactionTypes.includes(reaction.type),
   );
 
-  const showReactions = (show: boolean) => {
-    'worklet';
-    opacity.value = show ? withDelay(250, withTiming(1, { duration: 500 })) : 0;
-  };
-
-  useEffect(() => {
-    showReactions(hasSupportedReactions && messageContentWidth !== 0);
-  }, [hasSupportedReactions, messageContentWidth]);
-
-  const animatedStyle = useAnimatedStyle<ViewStyle>(
-    () => ({
-      opacity: opacity.value,
-    }),
-    [],
-  );
-
   if (!hasSupportedReactions || messageContentWidth === 0) {
     return null;
   }
@@ -206,7 +171,8 @@ const ReactionListWithContext = <
   const fill = propFill || alignmentLeft ? grey_gainsboro : grey_whisper;
   const radius = propRadius || themeRadius;
   const reactionSize = propReactionSize || themeReactionSize;
-  const stroke = propStroke || white;
+  const highlighted = message.pinned || targetedMessage === message.id;
+  const stroke = propStroke || (highlighted ? targetedMessageBackground : white_snow);
   const strokeSize = propStrokeSize || themeStrokeSize;
 
   const x1 = alignmentLeft
@@ -271,20 +237,20 @@ const ReactionListWithContext = <
       testID='reaction-list'
     >
       {reactions.length ? (
-        <Animated.View style={[StyleSheet.absoluteFill, animatedStyle]}>
+        <View style={[StyleSheet.absoluteFill]}>
           <Svg>
             <Circle cx={x1} cy={y1} fill={stroke} r={radius + strokeSize * 3} />
             <Circle cx={x2} cy={y2} fill={stroke} r={radius * 2 + strokeSize * 3} />
             <Circle cx={x1} cy={y1} fill={fill} r={radius + strokeSize} />
             <Circle cx={x2} cy={y2} fill={fill} r={radius * 2 + strokeSize} />
-            <Circle cx={x1} cy={y1} fill={alignmentLeft ? fill : stroke} r={radius} />
-            <Circle cx={x2} cy={y2} fill={alignmentLeft ? fill : stroke} r={radius * 2} />
+            <Circle cx={x1} cy={y1} fill={alignmentLeft ? fill : white} r={radius} />
+            <Circle cx={x2} cy={y2} fill={alignmentLeft ? fill : white} r={radius * 2} />
           </Svg>
           <View
             style={[
               styles.reactionBubbleBackground,
               {
-                backgroundColor: alignmentLeft ? fill : stroke,
+                backgroundColor: alignmentLeft ? fill : white,
                 borderColor: fill,
                 borderRadius: reactionSize,
                 borderWidth: strokeSize,
@@ -297,14 +263,14 @@ const ReactionListWithContext = <
           />
           <View style={[StyleSheet.absoluteFill]}>
             <Svg>
-              <Circle cx={x2} cy={y2} fill={alignmentLeft ? fill : stroke} r={radius * 2} />
+              <Circle cx={x2} cy={y2} fill={alignmentLeft ? fill : white} r={radius * 2} />
             </Svg>
           </View>
           <View
             style={[
               styles.reactionBubble,
               {
-                backgroundColor: alignmentLeft ? fill : stroke,
+                backgroundColor: alignmentLeft ? fill : white,
                 borderRadius: reactionSize - strokeSize * 2,
                 height: reactionSize - strokeSize * 2,
                 left: left + strokeSize,
@@ -325,7 +291,7 @@ const ReactionListWithContext = <
               />
             ))}
           </View>
-        </Animated.View>
+        </View>
       ) : null}
     </TouchableOpacity>
   );
@@ -343,12 +309,30 @@ const areEqual = <
   prevProps: ReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
   nextProps: ReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
 ) => {
-  const { messageContentWidth: prevMessageContentWidth, reactions: prevReactions } = prevProps;
-  const { messageContentWidth: nextMessageContentWidth, reactions: nextReactions } = nextProps;
+  const {
+    message: prevMessage,
+    messageContentWidth: prevMessageContentWidth,
+    reactions: prevReactions,
+    targetedMessage: prevTargetedMessage,
+  } = prevProps;
+  const {
+    message: nextMessage,
+    messageContentWidth: nextMessageContentWidth,
+    reactions: nextReactions,
+    targetedMessage: nextTargetedMessage,
+  } = nextProps;
 
   const messageContentWidthEqual = prevMessageContentWidth === nextMessageContentWidth;
   if (!messageContentWidthEqual) return false;
 
+  const messagePinnedEqual = prevMessage.pinned === nextMessage.pinned;
+
+  if (!messagePinnedEqual) return false;
+
+  const targetedMessageEqual = prevTargetedMessage === nextTargetedMessage;
+
+  if (!targetedMessageEqual) return false;
+
   const reactionsEqual =
     prevReactions.length === nextReactions.length &&
     prevReactions.every(
@@ -393,6 +377,7 @@ export const ReactionList = <
 ) => {
   const {
     alignment,
+    message,
     onLongPress,
     onPress,
     onPressIn,
@@ -400,12 +385,13 @@ export const ReactionList = <
     reactions,
     showMessageOverlay,
   } = useMessageContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { supportedReactions } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { supportedReactions, targetedMessage } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
 
   return (
     <MemoizedReactionList
       {...{
         alignment,
+        message,
         onLongPress,
         onPress,
         onPressIn,
@@ -413,6 +399,7 @@ export const ReactionList = <
         reactions,
         showMessageOverlay,
         supportedReactions,
+        targetedMessage,
       }}
       {...props}
     />

package/src/components/Message/MessageSimple/__tests__/Message.test.js

@@ -1,20 +1,20 @@
 import React from 'react';
-import { cleanup, fireEvent, render, waitFor } from '@testing-library/react-native';
-
-import { Message } from '../../Message';
 
-import { Chat } from '../../../Chat/Chat';
-import { Channel } from '../../../Channel/Channel';
-import { MessageInput } from '../../../MessageInput/MessageInput';
+import { cleanup, fireEvent, render, waitFor } from '@testing-library/react-native';
 
+import { OverlayProvider } from '../../../../contexts/overlayContext/OverlayProvider';
 import { getOrCreateChannelApi } from '../../../../mock-builders/api/getOrCreateChannel';
+
 import { useMockedApis } from '../../../../mock-builders/api/useMockedApis';
-import { generateChannel } from '../../../../mock-builders/generator/channel';
+import { generateChannelResponse } from '../../../../mock-builders/generator/channel';
 import { generateMember } from '../../../../mock-builders/generator/member';
 import { generateMessage } from '../../../../mock-builders/generator/message';
 import { generateUser } from '../../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../../mock-builders/mock';
-import { OverlayProvider } from '../../../../contexts/overlayContext/OverlayProvider';
+import { Channel } from '../../../Channel/Channel';
+import { Chat } from '../../../Chat/Chat';
+import { MessageInput } from '../../../MessageInput/MessageInput';
+import { Message } from '../../Message';
 
 describe('Message', () => {
   let channel;
@@ -26,7 +26,7 @@ describe('Message', () => {
 
   beforeEach(async () => {
     const members = [generateMember({ user })];
-    const mockedChannel = generateChannel({
+    const mockedChannel = generateChannelResponse({
       members,
       messages,
     });
@@ -70,7 +70,6 @@ describe('Message', () => {
     const onLongPressMessage = jest.fn();
 
     const { getByTestId } = renderMessage({
-      animatedLongPress: false,
       message,
       onLongPressMessage,
     });

package/src/components/Message/MessageSimple/__tests__/MessageAvatar.test.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import { cleanup, render, waitFor } from '@testing-library/react-native';
 
-import { MessageAvatar } from '../MessageAvatar';
+import { cleanup, render, waitFor } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
@@ -10,6 +9,7 @@ import {
   generateStaticMessage,
 } from '../../../../mock-builders/generator/message';
 import { generateStaticUser } from '../../../../mock-builders/generator/user';
+import { MessageAvatar } from '../MessageAvatar';
 
 afterEach(cleanup);