stream-chat-react-native-core 5.8.1-beta.3 → 5.9.0-beta.1

package/src/components/ChannelList/__tests__/ChannelList.test.js

@@ -297,6 +297,24 @@ describe('ChannelList', () => {
           expect(within(items[2]).getByText(newMessage.text)).toBeTruthy();
         });
       });
+      it('should call the `onNewMessage` function prop, if provided', async () => {
+        const onNewMessage = jest.fn();
+        const { getByTestId } = render(
+          <Chat client={chatClient}>
+            <ChannelList {...props} onNewMessage={onNewMessage} />
+          </Chat>,
+        );
+
+        await waitFor(() => {
+          expect(getByTestId('channel-list')).toBeTruthy();
+        });
+
+        act(() => dispatchMessageNewEvent(chatClient, testChannel2.channel));
+
+        await waitFor(() => {
+          expect(onNewMessage).toHaveBeenCalledTimes(1);
+        });
+      });
     });
 
     describe('notification.message_new', () => {
@@ -346,6 +364,25 @@ describe('ChannelList', () => {
           expect(onMessageNew).toHaveBeenCalledTimes(1);
         });
       });
+
+      it('should call the `onNewMessageNotification` function prop, if provided', async () => {
+        const onNewMessageNotification = jest.fn();
+        const { getByTestId } = render(
+          <Chat client={chatClient}>
+            <ChannelList {...props} onNewMessageNotification={onNewMessageNotification} />
+          </Chat>,
+        );
+
+        await waitFor(() => {
+          expect(getByTestId('channel-list')).toBeTruthy();
+        });
+
+        act(() => dispatchNotificationMessageNewEvent(chatClient, testChannel2.channel));
+
+        await waitFor(() => {
+          expect(onNewMessageNotification).toHaveBeenCalledTimes(1);
+        });
+      });
     });
 
     describe('notification.added_to_channel', () => {

package/src/components/ChannelList/hooks/listeners/useNewMessage.ts

@@ -11,43 +11,53 @@ type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultSt
   {
     lockChannelOrder: boolean;
     setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>;
+    onNewMessage?: (
+      lockChannelOrder: boolean,
+      setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
+      event: Event<StreamChatGenerics>,
+    ) => void;
   };
 
 export const useNewMessage = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   lockChannelOrder,
+  onNewMessage,
   setChannels,
 }: Parameters<StreamChatGenerics>) => {
   const { client } = useChatContext<StreamChatGenerics>();
 
   useEffect(() => {
     const handleEvent = (event: Event<StreamChatGenerics>) => {
-      setChannels((channels) => {
-        if (!channels) return channels;
+      if (typeof onNewMessage === 'function') {
+        onNewMessage(lockChannelOrder, setChannels, event);
+      } else {
+        setChannels((channels) => {
+          if (!channels) return channels;
 
-        if (!lockChannelOrder && event.cid && event.channel_type && event.channel_id) {
-          const targetChannelIndex = channels.findIndex((c) => c.cid === event.cid);
+          if (!lockChannelOrder && event.cid && event.channel_type && event.channel_id) {
+            const targetChannelIndex = channels.findIndex((c) => c.cid === event.cid);
 
-          if (targetChannelIndex >= 0) {
-            return moveChannelUp<StreamChatGenerics>({
-              channels,
-              cid: event.cid,
-            });
-          }
+            if (targetChannelIndex >= 0) {
+              return moveChannelUp<StreamChatGenerics>({
+                channels,
+                cid: event.cid,
+              });
+            }
 
-          // If channel doesn't exist in existing list, check in activeChannels as well.
-          // It may happen that channel was hidden using channel.hide(). In that case
-          // We remove it from `channels` state, but its still being watched and exists in client.activeChannels.
-          const channel = client.channel(event.channel_type, event.channel_id);
+            // If channel doesn't exist in existing list, check in activeChannels as well.
+            // It may happen that channel was hidden using channel.hide(). In that case
+            // We remove it from `channels` state, but its still being watched and exists in client.activeChannels.
+            const channel = client.channel(event.channel_type, event.channel_id);
 
-          if (channel.initialized) {
-            return [channel, ...channels];
+            if (channel.initialized) {
+              return [channel, ...channels];
+            }
           }
-        }
 
-        return [...channels];
-      });
+          return [...channels];
+        });
+      }
     };
 
     const listener = client?.on('message.new', handleEvent);

package/src/components/ChannelList/hooks/listeners/useNewMessageNotification.ts

@@ -16,12 +16,17 @@ type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultSt
       setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
       event: Event<StreamChatGenerics>,
     ) => void;
+    onNewMessageNotification?: (
+      setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
+      event: Event<StreamChatGenerics>,
+    ) => void;
   };
 
 export const useNewMessageNotification = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   onMessageNew,
+  onNewMessageNotification,
   setChannels,
 }: Parameters<StreamChatGenerics>) => {
   const { client } = useChatContext<StreamChatGenerics>();
@@ -30,6 +35,11 @@ export const useNewMessageNotification = <
     const handleEvent = async (event: Event<StreamChatGenerics>) => {
       if (typeof onMessageNew === 'function') {
         onMessageNew(setChannels, event);
+        console.warn(
+          'onMessageNew is deprecated and will be removed in future release. Please use onNewMessageNotification to establish the same behaviour',
+        );
+      } else if (typeof onNewMessageNotification === 'function') {
+        onNewMessageNotification(setChannels, event);
       } else {
         if (event.channel?.id && event.channel?.type) {
           const channel = await getChannel({

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -69,6 +69,7 @@ const styles = StyleSheet.create({
     borderRadius: 12,
     marginLeft: 8,
     marginRight: 8,
+    marginTop: 2,
   },
   unsupportedFile: {
     flexDirection: 'row',

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, useContext, useEffect, useRef, useState } from 'react';
 
-import { Alert, Keyboard } from 'react-native';
+import { Alert, Keyboard, Platform } from 'react-native';
 
 import type { TextInput, TextInputProps } from 'react-native';
 
@@ -327,12 +327,7 @@ export type InputMessageInputContextValue<
    * @overrideType Function
    */
   doDocUploadRequest?: (
-    file: {
-      name: string;
-      size?: string | number;
-      type?: string;
-      uri?: string;
-    },
+    file: File,
     channel: ChannelContextValue<StreamChatGenerics>['channel'],
   ) => Promise<SendFileAPIResponse>;
   /**
@@ -972,7 +967,9 @@ export const MessageInputProvider = <
       if (value.doDocUploadRequest) {
         response = await value.doDocUploadRequest(file, channel);
       } else if (channel && file.uri) {
-        response = await channel.sendFile(file.uri, file.name, file.type);
+        // For the case of expo messaging app where you need to fetch the file uri from file id. Here it is only done for iOS since for android the file.uri is fine.
+        const localAssetURI = Platform.OS === 'ios' && file.id && (await getLocalAssetUri(file.id));
+        response = await channel.sendFile(localAssetURI || file.uri, file.name, file.type);
       }
       const extraData: Partial<FileUpload> = { thumb_url: response.thumb_url, url: response.file };
       setFileUploads(getUploadSetStateAction(id, FileState.UPLOADED, extraData));
@@ -991,23 +988,9 @@ export const MessageInputProvider = <
     let response = {} as SendFileAPIResponse;
 
     try {
-      /**
-       * Expo now uses the assets-library which is also how remote
-       * native files are presented. We now return a file id from Expo
-       * only, if that file id exits we call getLocalAssetUri to download
-       * the asset for expo before uploading it. We do the same for native
-       * if the uri includes assets-library, this uses the CameraRoll.save
-       * function to also create a local uri.
-       */
-      const getLocalUri = async () => {
-        if (file.id) {
-          return await getLocalAssetUri(file.id);
-        } else if (file.uri?.match(/assets-library/)) {
-          return await getLocalAssetUri(file.uri);
-        }
-        return file.uri;
-      };
-      const uri = file.name || (await getLocalUri()) || '';
+      // For the case of expo messaging app where you need to fetch the file uri from file id. Here it is only done for iOS since for android the file.uri is fine.
+      const localAssetURI = Platform.OS === 'ios' && file.id && (await getLocalAssetUri(file.id));
+      const uri = localAssetURI || file.uri || '';
       /**
        * We skip compression if:
        * - the file is from the camera as that should already be compressed
@@ -1068,12 +1051,7 @@ export const MessageInputProvider = <
     }
   };
 
-  const uploadNewFile = async (file: {
-    name: string;
-    size?: number | string;
-    type?: string;
-    uri?: string;
-  }) => {
+  const uploadNewFile = async (file: File) => {
     const id: string = generateRandomId();
     const mimeType: string | boolean = lookup(file.name);
 
@@ -1092,7 +1070,7 @@ export const MessageInputProvider = <
     const newFile: FileUpload = {
       duration: 0,
       file: { ...file, type: mimeType || file?.type },
-      id,
+      id: file.id || id,
       paused: true,
       progress: 0,
       state: fileState,

package/src/types/types.ts

@@ -17,6 +17,7 @@ export type Asset = {
 export type File = {
   name: string;
   duration?: string | null;
+  id?: string;
   size?: number | string;
   type?: string;
   uri?: string;

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "5.8.1-beta.3"
+  "version": "5.9.0-beta.1"
 }