stream-chat-react-native-core 5.1.1-beta.1 → 5.3.0-beta.1

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/components/MessageOverlay/OverlayReactions.tsx

@@ -96,6 +96,7 @@ const reactionData: ReactionData[] = [
 
 export type Reaction = {
   alignment: Alignment;
+  id: string;
   name: string;
   type: string;
   image?: string;

package/src/contexts/chatContext/ChatContext.tsx

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren, useContext } from 'react';
+import type { ImageProps } from 'react-native';
 
 import type { AppSettingsAPIResponse, Channel, EventHandler, Mute, StreamChat } from 'stream-chat';
 
@@ -34,6 +35,7 @@ export type ChatContextValue<
   client: StreamChat<StreamChatGenerics>;
   connectionRecovering: boolean;
   enableOfflineSupport: boolean;
+  ImageComponent: React.ComponentType<ImageProps>;
   isOnline: boolean;
   mutedUsers: Mute<StreamChatGenerics>[];
   /**
@@ -71,7 +73,7 @@ export const ChatProvider = <
   children,
   value,
 }: PropsWithChildren<{
-  value: ChatContextValue<StreamChatGenerics>;
+  value?: ChatContextValue<StreamChatGenerics>;
 }>) => (
   <ChatContext.Provider value={value as unknown as ChatContextValue}>
     {children}

package/src/contexts/debugContext/DebugContext.tsx

@@ -0,0 +1,77 @@
+import React, { PropsWithChildren, useContext, useRef } from 'react';
+
+import type { Channel, ChannelState, StreamChat } from 'stream-chat';
+
+import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+
+export type DebugDataType<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> =
+  | StreamChat<StreamChatGenerics>['user']
+  | {
+      data: Channel<StreamChatGenerics>['data'];
+      members: ChannelState<StreamChatGenerics>['members'];
+    }[]
+  | MessageType<StreamChatGenerics>[];
+
+export type DebugContextValue<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
+  eventType?: string;
+  sendEventParams?: {
+    action: string;
+    data: DebugDataType<StreamChatGenerics>;
+  };
+  setEventType?: (data: string) => void;
+  setSendEventParams?: (data: { action: string; data: DebugDataType<StreamChatGenerics> }) => void;
+};
+
+export const DebugContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as React.MutableRefObject<DebugContextValue>,
+);
+
+export const DebugContextProvider = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  children,
+  useFlipper,
+}: PropsWithChildren<{
+  useFlipper: () => {
+    updateData: (ref: React.RefObject<DebugContextValue<StreamChatGenerics>>) => void;
+  };
+}>) => {
+  const debugRef = useRef<DebugContextValue<StreamChatGenerics>>({
+    eventType: undefined,
+    sendEventParams: undefined,
+  });
+
+  const { updateData } = useFlipper();
+
+  const ref = useRef<DebugContextValue<StreamChatGenerics>>({
+    setEventType: (data: string) => {
+      debugRef.current.eventType = data;
+      updateData(debugRef);
+    },
+    setSendEventParams: (data: { action: string; data: DebugDataType<StreamChatGenerics> }) => {
+      debugRef.current.sendEventParams = data;
+      updateData(debugRef);
+    },
+  });
+
+  return (
+    <DebugContext.Provider value={ref as unknown as React.MutableRefObject<DebugContextValue>}>
+      {children}
+    </DebugContext.Provider>
+  );
+};
+
+export const useDebugContext = () => {
+  const contextValue = useContext(
+    DebugContext,
+  ) as unknown as React.MutableRefObject<DebugContextValue>;
+
+  return contextValue;
+};

package/src/contexts/index.ts

@@ -2,6 +2,7 @@ export * from './attachmentPickerContext/AttachmentPickerContext';
 export * from './channelContext/ChannelContext';
 export * from './channelsContext/ChannelsContext';
 export * from './chatContext/ChatContext';
+export * from './debugContext/DebugContext';
 export * from './imageGalleryContext/ImageGalleryContext';
 export * from './keyboardContext/KeyboardContext';
 export * from './messageContext/MessageContext';

package/src/contexts/messageOverlayContext/MessageOverlayContext.tsx

@@ -1,5 +1,7 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
+import type { ImageProps } from 'react-native';
+
 import type { Attachment, TranslationLanguages } from 'stream-chat';
 
 import { useResettableState } from './hooks/useResettableState';
@@ -15,6 +17,7 @@ import type { OverlayReactionsProps } from '../../components/MessageOverlay/Over
 import type { OverlayReactionsAvatarProps } from '../../components/MessageOverlay/OverlayReactionsAvatar';
 import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
 import type { ReactionData } from '../../utils/utils';
+import type { ChatContextValue } from '../chatContext/ChatContext';
 import type { Alignment, MessageContextValue } from '../messageContext/MessageContext';
 import type { MessagesContextValue } from '../messagesContext/MessagesContext';
 import type { OwnCapabilitiesContextValue } from '../ownCapabilitiesContext/OwnCapabilitiesContext';
@@ -27,10 +30,12 @@ export type MessageOverlayData<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   alignment?: Alignment;
+  chatContext?: ChatContextValue<StreamChatGenerics>;
   clientId?: string;
   files?: Attachment<StreamChatGenerics>[];
   groupStyles?: GroupType[];
   handleReaction?: (reactionType: string) => Promise<void>;
+  ImageComponent?: React.ComponentType<ImageProps>;
   images?: Attachment<StreamChatGenerics>[];
   message?: MessageType<StreamChatGenerics>;
   messageActions?: MessageActionType[];
@@ -89,7 +94,9 @@ export const MessageOverlayProvider = <
 }>) => {
   const messageOverlayContext = useResettableState(value);
   return (
-    <MessageOverlayContext.Provider value={messageOverlayContext as MessageOverlayContextValue}>
+    <MessageOverlayContext.Provider
+      value={messageOverlayContext as unknown as MessageOverlayContextValue}
+    >
       {children}
     </MessageOverlayContext.Provider>
   );

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "5.1.1-beta.1"
+  "version": "5.3.0-beta.1"
 }