stream-chat-react-native-core 5.2.0 → 5.3.0-beta.3

package/src/components/Message/Message.tsx

@@ -118,7 +118,6 @@ export type MessagePropsWithContext<
   ChannelContextValue<StreamChatGenerics>,
   'channel' | 'disabled' | 'enforceUniqueReaction' | 'members'
 > &
-  Pick<ChatContextValue<StreamChatGenerics>, 'client' | 'mutedUsers'> &
   Pick<KeyboardContextValue, 'dismissKeyboard'> &
   Partial<Omit<MessageContextValue<StreamChatGenerics>, 'groupStyles' | 'message'>> &
   Pick<MessageContextValue<StreamChatGenerics>, 'groupStyles' | 'message'> &
@@ -157,6 +156,7 @@ export type MessagePropsWithContext<
   Pick<OverlayContextValue, 'setOverlay'> &
   Pick<ThreadContextValue<StreamChatGenerics>, 'openThread'> &
   Pick<TranslationContextValue, 't'> & {
+    chatContext: ChatContextValue<StreamChatGenerics>;
     messagesContext: MessagesContextValue<StreamChatGenerics>;
     /**
      * Whether or not users are able to long press messages.
@@ -218,7 +218,6 @@ const MessageWithContext = <
 
   const {
     channel,
-    client,
     disabled,
     dismissKeyboard,
     dismissKeyboardOnMessageTouch,
@@ -238,6 +237,7 @@ const MessageWithContext = <
     handleReaction: handleReactionProp,
     handleRetry,
     handleThreadReply,
+    chatContext,
     lastReceivedId,
     members,
     message,
@@ -272,7 +272,7 @@ const MessageWithContext = <
     threadList = false,
     updateMessage,
   } = props;
-
+  const { client } = chatContext;
   const {
     theme: {
       colors: { bg_gradient_start, targetedMessageBackground },
@@ -547,6 +547,7 @@ const MessageWithContext = <
 
     setData({
       alignment,
+      chatContext,
       clientId: client.userID,
       files: attachments.files,
       groupStyles,
@@ -719,23 +720,23 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   nextProps: MessagePropsWithContext<StreamChatGenerics>,
 ) => {
   const {
+    chatContext: { mutedUsers: prevMutedUsers },
     goToMessage: prevGoToMessage,
     isAttachmentEqual,
     isTargetedMessage: prevIsTargetedMessage,
     lastReceivedId: prevLastReceivedId,
     members: prevMembers,
     message: prevMessage,
-    mutedUsers: prevMutedUsers,
     showUnreadUnderlay: prevShowUnreadUnderlay,
     t: prevT,
   } = prevProps;
   const {
+    chatContext: { mutedUsers: nextMutedUsers },
     goToMessage: nextGoToMessage,
     isTargetedMessage: nextIsTargetedMessage,
     lastReceivedId: nextLastReceivedId,
     members: nextMembers,
     message: nextMessage,
-    mutedUsers: nextMutedUsers,
     showUnreadUnderlay: nextShowUnreadUnderlay,
     t: nextT,
   } = nextProps;
@@ -857,7 +858,7 @@ export const Message = <
 ) => {
   const { channel, disabled, enforceUniqueReaction, members } =
     useChannelContext<StreamChatGenerics>();
-  const { client, mutedUsers } = useChatContext<StreamChatGenerics>();
+  const chatContext = useChatContext<StreamChatGenerics>();
   const { dismissKeyboard } = useKeyboardContext();
   const { setData } = useMessageOverlayContext<StreamChatGenerics>();
   const messagesContext = useMessagesContext<StreamChatGenerics>();
@@ -870,13 +871,12 @@ export const Message = <
       {...messagesContext}
       {...{
         channel,
-        client,
+        chatContext,
         disabled,
         dismissKeyboard,
         enforceUniqueReaction,
         members,
         messagesContext,
-        mutedUsers,
         openThread,
         setData,
         setOverlay,

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 
+import { ChatContextValue, useChatContext } from '../../../contexts/chatContext/ChatContext';
 import {
   MessageContextValue,
   useMessageContext,
@@ -16,6 +17,7 @@ export type MessageAvatarPropsWithContext<
   MessageContextValue<StreamChatGenerics>,
   'alignment' | 'lastGroupMessage' | 'message' | 'showAvatar'
 > &
+  Pick<ChatContextValue<StreamChatGenerics>, 'ImageComponent'> &
   Partial<Pick<AvatarProps, 'size'>>;
 
 const MessageAvatarWithContext = <
@@ -23,7 +25,7 @@ const MessageAvatarWithContext = <
 >(
   props: MessageAvatarPropsWithContext<StreamChatGenerics>,
 ) => {
-  const { alignment, lastGroupMessage, message, showAvatar, size } = props;
+  const { alignment, ImageComponent, lastGroupMessage, message, showAvatar, size } = props;
   const {
     theme: {
       avatar: { BASE_AVATAR_SIZE },
@@ -43,6 +45,7 @@ const MessageAvatarWithContext = <
       {visible ? (
         <Avatar
           image={message.user?.image}
+          ImageComponent={ImageComponent}
           name={message.user?.name || message.user?.id}
           size={size || BASE_AVATAR_SIZE}
         />
@@ -88,11 +91,12 @@ export const MessageAvatar = <
 ) => {
   const { alignment, lastGroupMessage, message, showAvatar } =
     useMessageContext<StreamChatGenerics>();
-
+  const { ImageComponent } = useChatContext<StreamChatGenerics>();
   return (
     <MemoizedMessageAvatar
       {...{
         alignment,
+        ImageComponent,
         lastGroupMessage,
         message,
         showAvatar,

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
+import { ChatContextValue, useChatContext } from '../../../contexts/chatContext/ChatContext';
 import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 
@@ -23,12 +24,12 @@ export type MessageRepliesAvatarsProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<MessageContextValue<StreamChatGenerics>, 'alignment' | 'message'>;
 
-export const MessageRepliesAvatars = <
+export const MessageRepliesAvatarsWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: MessageRepliesAvatarsProps<StreamChatGenerics>,
+  props: MessageRepliesAvatarsProps<StreamChatGenerics> & Pick<ChatContextValue, 'ImageComponent'>,
 ) => {
-  const { alignment, message } = props;
+  const { alignment, ImageComponent, message } = props;
 
   const {
     theme: {
@@ -77,6 +78,7 @@ export const MessageRepliesAvatars = <
               avatar,
             ]}
             image={user.image}
+            ImageComponent={ImageComponent}
             name={user.name}
             size={avatarSize ? avatarSize : i === 1 ? 18 : 16}
           />
@@ -85,3 +87,13 @@ export const MessageRepliesAvatars = <
     </View>
   );
 };
+
+export const MessageRepliesAvatars = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: MessageRepliesAvatarsProps<StreamChatGenerics>,
+) => {
+  const { ImageComponent } = useChatContext();
+
+  return <MessageRepliesAvatarsWithContext {...props} ImageComponent={ImageComponent} />;
+};

package/src/components/MessageOverlay/MessageOverlay.tsx

@@ -24,6 +24,7 @@ import { MessageActionList as DefaultMessageActionList } from './MessageActionLi
 import { OverlayReactionList as OverlayReactionListDefault } from './OverlayReactionList';
 import { OverlayReactionsAvatar as OverlayReactionsAvatarDefault } from './OverlayReactionsAvatar';
 
+import { ChatProvider } from '../../contexts/chatContext/ChatContext';
 import { MessageProvider } from '../../contexts/messageContext/MessageContext';
 import {
   MessageOverlayContextValue,
@@ -118,6 +119,7 @@ const MessageOverlayWithContext = <
     groupStyles,
     handleReaction,
     images,
+    chatContext,
     message,
     messageActions,
     MessageActionList = DefaultMessageActionList,
@@ -301,219 +303,222 @@ const MessageOverlayWithContext = <
   const { Attachment, FileAttachmentGroup, Gallery, MessageAvatar, Reply } = messagesContext || {};
 
   return (
-    <MessagesProvider value={messagesContext}>
-      <MessageProvider value={messageContext}>
-        <ThemeProvider mergedStyle={wrapMessageInTheme ? modifiedTheme : theme}>
-          <Animated.View
-            pointerEvents={'auto'}
-            style={[StyleSheet.absoluteFillObject, containerStyle]}
-          >
-            <PanGestureHandler
-              enabled={overlay === 'message'}
-              maxPointers={1}
-              minDist={10}
-              onGestureEvent={onPan}
+    <ChatProvider value={chatContext}>
+      <MessagesProvider value={messagesContext}>
+        <MessageProvider value={messageContext}>
+          <ThemeProvider mergedStyle={wrapMessageInTheme ? modifiedTheme : theme}>
+            <Animated.View
+              pointerEvents={'auto'}
+              style={[StyleSheet.absoluteFillObject, containerStyle]}
             >
-              <Animated.View style={[StyleSheet.absoluteFillObject]}>
-                <SafeAreaView style={styles.flex}>
-                  <TapGestureHandler
-                    maxDist={32}
-                    onHandlerStateChange={({ nativeEvent: { state } }) => {
-                      if (state === State.END) {
-                        setOverlay('none');
-                      }
-                    }}
-                  >
-                    <Animated.View style={[styles.flex, panStyle]}>
-                      {message && (
-                        <View
-                          style={[
-                            styles.center,
-                            styles.overlayPadding,
-                            { padding: overlayPadding },
-                            alignment === 'left' ? styles.alignStart : styles.alignEnd,
-                          ]}
-                        >
-                          {handleReaction && ownCapabilities?.sendReaction ? (
-                            <OverlayReactionList
-                              messageLayout={messageLayout}
-                              ownReactionTypes={
-                                message?.own_reactions?.map((reaction) => reaction.type) || []
-                              }
-                              showScreen={showScreen}
-                            />
-                          ) : null}
-                          <Animated.View
-                            onLayout={({
-                              nativeEvent: {
-                                layout: { height: layoutHeight, width: layoutWidth, x, y },
-                              },
-                            }) => {
-                              messageLayout.value = {
-                                x: alignment === 'left' ? x + layoutWidth : x,
-                                y,
-                              };
-                              messageWidth.value = layoutWidth;
-                              messageHeight.value = layoutHeight;
-                            }}
-                            style={[styles.alignEnd, styles.row, showScreenStyle]}
+              <PanGestureHandler
+                enabled={overlay === 'message'}
+                maxPointers={1}
+                minDist={10}
+                onGestureEvent={onPan}
+              >
+                <Animated.View style={[StyleSheet.absoluteFillObject]}>
+                  <SafeAreaView style={styles.flex}>
+                    <TapGestureHandler
+                      maxDist={32}
+                      onHandlerStateChange={({ nativeEvent: { state } }) => {
+                        if (state === State.END) {
+                          setOverlay('none');
+                        }
+                      }}
+                    >
+                      <Animated.View style={[styles.flex, panStyle]}>
+                        {message && (
+                          <View
+                            style={[
+                              styles.center,
+                              styles.overlayPadding,
+                              { padding: overlayPadding },
+                              alignment === 'left' ? styles.alignStart : styles.alignEnd,
+                            ]}
                           >
-                            {alignment === 'left' && MessageAvatar && (
-                              <MessageAvatar {...{ alignment, message, showAvatar: true }} />
-                            )}
-                            <View
-                              pointerEvents='none'
-                              style={[
-                                styles.containerInner,
-                                {
-                                  backgroundColor:
-                                    onlyEmojis && !message.quoted_message
-                                      ? transparent
-                                      : otherAttachments?.length
-                                      ? otherAttachments[0].type === 'giphy'
-                                        ? !message.quoted_message
-                                          ? transparent
-                                          : grey_gainsboro
-                                        : blue_alice
-                                      : alignment === 'left'
-                                      ? white_smoke
-                                      : grey_gainsboro,
-                                  borderBottomLeftRadius:
-                                    (groupStyle === 'left_bottom' ||
-                                      groupStyle === 'left_single') &&
-                                    (!hasThreadReplies || threadList)
-                                      ? borderRadiusS
-                                      : borderRadiusL,
-                                  borderBottomRightRadius:
-                                    (groupStyle === 'right_bottom' ||
-                                      groupStyle === 'right_single') &&
-                                    (!hasThreadReplies || threadList)
-                                      ? borderRadiusS
-                                      : borderRadiusL,
-                                  borderColor: grey_whisper,
+                            {handleReaction && ownCapabilities?.sendReaction ? (
+                              <OverlayReactionList
+                                messageLayout={messageLayout}
+                                ownReactionTypes={
+                                  message?.own_reactions?.map((reaction) => reaction.type) || []
+                                }
+                                showScreen={showScreen}
+                              />
+                            ) : null}
+                            <Animated.View
+                              onLayout={({
+                                nativeEvent: {
+                                  layout: { height: layoutHeight, width: layoutWidth, x, y },
                                 },
-                                (onlyEmojis && !message.quoted_message) || otherAttachments?.length
-                                  ? { borderWidth: 0 }
-                                  : {},
-                                containerInner,
-                              ]}
+                              }) => {
+                                messageLayout.value = {
+                                  x: alignment === 'left' ? x + layoutWidth : x,
+                                  y,
+                                };
+                                messageWidth.value = layoutWidth;
+                                messageHeight.value = layoutHeight;
+                              }}
+                              style={[styles.alignEnd, styles.row, showScreenStyle]}
                             >
-                              {messagesContext?.messageContentOrder?.map(
-                                (messageContentType, messageContentOrderIndex) => {
-                                  switch (messageContentType) {
-                                    case 'quoted_reply':
-                                      return (
-                                        message.quoted_message &&
-                                        Reply && (
-                                          <View
-                                            key={`quoted_reply_${messageContentOrderIndex}`}
-                                            style={[styles.replyContainer, replyContainer]}
-                                          >
-                                            <Reply
-                                              quotedMessage={
-                                                message.quoted_message as ReplyProps<StreamChatGenerics>['quotedMessage']
-                                              }
-                                              styles={{
-                                                messageContainer: {
-                                                  maxWidth: vw(60),
-                                                },
-                                              }}
+                              {alignment === 'left' && MessageAvatar && (
+                                <MessageAvatar {...{ alignment, message, showAvatar: true }} />
+                              )}
+                              <View
+                                pointerEvents='none'
+                                style={[
+                                  styles.containerInner,
+                                  {
+                                    backgroundColor:
+                                      onlyEmojis && !message.quoted_message
+                                        ? transparent
+                                        : otherAttachments?.length
+                                        ? otherAttachments[0].type === 'giphy'
+                                          ? !message.quoted_message
+                                            ? transparent
+                                            : grey_gainsboro
+                                          : blue_alice
+                                        : alignment === 'left'
+                                        ? white_smoke
+                                        : grey_gainsboro,
+                                    borderBottomLeftRadius:
+                                      (groupStyle === 'left_bottom' ||
+                                        groupStyle === 'left_single') &&
+                                      (!hasThreadReplies || threadList)
+                                        ? borderRadiusS
+                                        : borderRadiusL,
+                                    borderBottomRightRadius:
+                                      (groupStyle === 'right_bottom' ||
+                                        groupStyle === 'right_single') &&
+                                      (!hasThreadReplies || threadList)
+                                        ? borderRadiusS
+                                        : borderRadiusL,
+                                    borderColor: grey_whisper,
+                                  },
+                                  (onlyEmojis && !message.quoted_message) ||
+                                  otherAttachments?.length
+                                    ? { borderWidth: 0 }
+                                    : {},
+                                  containerInner,
+                                ]}
+                              >
+                                {messagesContext?.messageContentOrder?.map(
+                                  (messageContentType, messageContentOrderIndex) => {
+                                    switch (messageContentType) {
+                                      case 'quoted_reply':
+                                        return (
+                                          message.quoted_message &&
+                                          Reply && (
+                                            <View
+                                              key={`quoted_reply_${messageContentOrderIndex}`}
+                                              style={[styles.replyContainer, replyContainer]}
+                                            >
+                                              <Reply
+                                                quotedMessage={
+                                                  message.quoted_message as ReplyProps<StreamChatGenerics>['quotedMessage']
+                                                }
+                                                styles={{
+                                                  messageContainer: {
+                                                    maxWidth: vw(60),
+                                                  },
+                                                }}
+                                              />
+                                            </View>
+                                          )
+                                        );
+                                      case 'attachments':
+                                        return otherAttachments?.map(
+                                          (attachment, attachmentIndex) =>
+                                            Attachment && (
+                                              <Attachment
+                                                attachment={attachment}
+                                                key={`${message.id}-${attachmentIndex}`}
+                                              />
+                                            ),
+                                        );
+                                      case 'files':
+                                        return (
+                                          FileAttachmentGroup && (
+                                            <FileAttachmentGroup
+                                              files={files}
+                                              key={`file_attachment_group_${messageContentOrderIndex}`}
+                                              messageId={message.id}
                                             />
-                                          </View>
-                                        )
-                                      );
-                                    case 'attachments':
-                                      return otherAttachments?.map(
-                                        (attachment, attachmentIndex) =>
-                                          Attachment && (
-                                            <Attachment
-                                              attachment={attachment}
-                                              key={`${message.id}-${attachmentIndex}`}
+                                          )
+                                        );
+                                      case 'gallery':
+                                        return (
+                                          Gallery && (
+                                            <Gallery
+                                              alignment={alignment}
+                                              groupStyles={groupStyles}
+                                              hasThreadReplies={!!message?.reply_count}
+                                              images={images}
+                                              key={`gallery_${messageContentOrderIndex}`}
+                                              message={message}
+                                              threadList={threadList}
+                                              videos={videos}
                                             />
-                                          ),
-                                      );
-                                    case 'files':
-                                      return (
-                                        FileAttachmentGroup && (
-                                          <FileAttachmentGroup
-                                            files={files}
-                                            key={`file_attachment_group_${messageContentOrderIndex}`}
-                                            messageId={message.id}
-                                          />
-                                        )
-                                      );
-                                    case 'gallery':
-                                      return (
-                                        Gallery && (
-                                          <Gallery
-                                            alignment={alignment}
-                                            groupStyles={groupStyles}
-                                            hasThreadReplies={!!message?.reply_count}
-                                            images={images}
-                                            key={`gallery_${messageContentOrderIndex}`}
+                                          )
+                                        );
+                                      case 'text':
+                                      default:
+                                        return otherAttachments?.length &&
+                                          otherAttachments[0].actions ? null : (
+                                          <MessageTextContainer<StreamChatGenerics>
+                                            key={`message_text_container_${messageContentOrderIndex}`}
                                             message={message}
-                                            threadList={threadList}
-                                            videos={videos}
+                                            messageOverlay
+                                            messageTextNumberOfLines={messageTextNumberOfLines}
+                                            onlyEmojis={onlyEmojis}
                                           />
-                                        )
-                                      );
-                                    case 'text':
-                                    default:
-                                      return otherAttachments?.length &&
-                                        otherAttachments[0].actions ? null : (
-                                        <MessageTextContainer<StreamChatGenerics>
-                                          key={`message_text_container_${messageContentOrderIndex}`}
-                                          message={message}
-                                          messageOverlay
-                                          messageTextNumberOfLines={messageTextNumberOfLines}
-                                          onlyEmojis={onlyEmojis}
-                                        />
-                                      );
-                                  }
-                                },
-                              )}
-                            </View>
-                          </Animated.View>
-                          {messageActions && (
-                            <MessageActionList
-                              MessageActionListItem={MessageActionListItem}
-                              showScreen={showScreen}
-                              {...messageActionProps}
-                              message={message}
-                            />
-                          )}
-                          {!!messageReactionTitle &&
-                          message.latest_reactions &&
-                          message.latest_reactions.length > 0 ? (
-                            <OverlayReactions
-                              alignment={alignment}
-                              OverlayReactionsAvatar={OverlayReactionsAvatar}
-                              reactions={
-                                message.latest_reactions.map((reaction) => ({
-                                  alignment:
-                                    clientId && clientId === reaction.user?.id ? 'right' : 'left',
-                                  id: reaction?.user?.id || '',
-                                  image: reaction?.user?.image,
-                                  name: reaction?.user?.name || reaction.user_id || '',
-                                  type: reaction.type,
-                                })) as Reaction[]
-                              }
-                              showScreen={showScreen}
-                              supportedReactions={messagesContext?.supportedReactions}
-                              title={messageReactionTitle}
-                            />
-                          ) : null}
-                        </View>
-                      )}
-                    </Animated.View>
-                  </TapGestureHandler>
-                </SafeAreaView>
-              </Animated.View>
-            </PanGestureHandler>
-          </Animated.View>
-        </ThemeProvider>
-      </MessageProvider>
-    </MessagesProvider>
+                                        );
+                                    }
+                                  },
+                                )}
+                              </View>
+                            </Animated.View>
+                            {messageActions && (
+                              <MessageActionList
+                                MessageActionListItem={MessageActionListItem}
+                                showScreen={showScreen}
+                                {...messageActionProps}
+                                message={message}
+                              />
+                            )}
+                            {!!messageReactionTitle &&
+                            message.latest_reactions &&
+                            message.latest_reactions.length > 0 ? (
+                              <OverlayReactions
+                                alignment={alignment}
+                                OverlayReactionsAvatar={OverlayReactionsAvatar}
+                                reactions={
+                                  message.latest_reactions.map((reaction) => ({
+                                    alignment:
+                                      clientId && clientId === reaction.user?.id ? 'right' : 'left',
+                                    id: reaction?.user?.id || '',
+                                    image: reaction?.user?.image,
+                                    name: reaction?.user?.name || reaction.user_id || '',
+                                    type: reaction.type,
+                                  })) as Reaction[]
+                                }
+                                showScreen={showScreen}
+                                supportedReactions={messagesContext?.supportedReactions}
+                                title={messageReactionTitle}
+                              />
+                            ) : null}
+                          </View>
+                        )}
+                      </Animated.View>
+                    </TapGestureHandler>
+                  </SafeAreaView>
+                </Animated.View>
+              </PanGestureHandler>
+            </Animated.View>
+          </ThemeProvider>
+        </MessageProvider>
+      </MessagesProvider>
+    </ChatProvider>
   );
 };
 

package/src/contexts/channelsContext/ChannelsContext.tsx

@@ -48,7 +48,7 @@ export type ChannelsContextValue<
   /**
    * Channels can be either an array of channels or a promise which resolves to an array of channels
    */
-  channels: Channel<StreamChatGenerics>[];
+  channels: Channel<StreamChatGenerics>[] | null;
   /**
    * Custom indicator to use when channel list is empty
    *