feat: show delivery status and read status on the message and channel preview

examples/SampleApp/App.tsx

@@ -163,7 +163,9 @@ const App = () => {
         messageListImplementationStoredValue?.id as MessageListImplementationConfigItem['id'],
       );
       setMessageListMode(messageListModeStoredValue?.mode as MessageListModeConfigItem['mode']);
-      setMessageListPruning(messageListPruningStoredValue?.value as MessageListPruningConfigItem['value']);
+      setMessageListPruning(
+        messageListPruningStoredValue?.value as MessageListPruningConfigItem['value'],
+      );
     };
     getMessageListConfig();
     return () => {

examples/SampleApp/index.js

@@ -1,3 +1,4 @@
+import './src/utils/bootstrapBackgroundMessageHandler';
 import 'react-native-gesture-handler';
 import { AppRegistry } from 'react-native';
 import { enableScreens } from 'react-native-screens';

examples/SampleApp/ios/Podfile.lock

@@ -3458,7 +3458,7 @@ SPEC CHECKSUMS:
   op-sqlite: a7e46cfdaebeef219fd0e939332967af9fe6d406
   PromisesObjC: f5707f49cb48b9636751c5b2e7d227e43fba9f47
   PromisesSwift: 9d77319bbe72ebf6d872900551f7eeba9bce2851
-  RCT-Folly: 59ec0ac1f2f39672a0c6e6cecdd39383b764646f
+  RCT-Folly: 846fda9475e61ec7bcbf8a3fe81edfcaeb090669
   RCTDeprecation: 300c5eb91114d4339b0bb39505d0f4824d7299b7
   RCTRequired: e0446b01093475b7082fbeee5d1ef4ad1fe20ac4
   RCTTypeSafety: cb974efcdc6695deedf7bf1eb942f2a0603a063f

examples/SampleApp/src/hooks/useChatClient.ts

@@ -1,6 +1,10 @@
 import { useEffect, useRef, useState } from 'react';
 import { StreamChat, PushProvider } from 'stream-chat';
-import { getMessaging, AuthorizationStatus } from '@react-native-firebase/messaging';
+import {
+  getMessaging,
+  AuthorizationStatus,
+  FirebaseMessagingTypes,
+} from '@react-native-firebase/messaging';
 import notifee from '@notifee/react-native';
 import { SqliteClient } from 'stream-chat-react-native';
 import { USER_TOKENS, USERS } from '../ChatUsers';
@@ -11,6 +15,30 @@ import { PermissionsAndroid, Platform } from 'react-native';
 
 const messaging = getMessaging();
 
+const displayNotification = async (
+  remoteMessage: FirebaseMessagingTypes.RemoteMessage,
+  channelId: string,
+) => {
+  const { stream, ...rest } = remoteMessage.data ?? {};
+  const data = {
+    ...rest,
+    ...((stream as unknown as Record<string, string> | undefined) ?? {}), // extract and merge stream object if present
+  };
+  if (data.body && data.title) {
+    await notifee.displayNotification({
+      android: {
+        channelId,
+        pressAction: {
+          id: 'default',
+        },
+      },
+      body: data.body as string,
+      title: data.title as string,
+      data,
+    });
+  }
+};
+
 // Request Push Notification permission from device.
 const requestNotificationPermission = async () => {
   const authStatus = await messaging.requestPermission();
@@ -94,34 +122,12 @@ export const useChatClient = () => {
       });
       // show notifications when on foreground
       const unsubscribeForegroundMessageReceive = messaging.onMessage(async (remoteMessage) => {
-        const { stream, ...rest } = remoteMessage.data ?? {};
-        const data = {
-          ...rest,
-          ...((stream as unknown as Record<string, string> | undefined) ?? {}), // extract and merge stream object if present
-        };
         const channelId = await notifee.createChannel({
           id: 'foreground',
           name: 'Foreground Messages',
         });
-        // create the android channel to send the notification to
-        // display the notification on foreground
-        const notification = remoteMessage.notification ?? {};
-        const body = (data.body ?? notification.body) as string;
-        const title = (data.title ?? notification.title) as string;
-
-        if (body && title) {
-          await notifee.displayNotification({
-            android: {
-              channelId,
-              pressAction: {
-                id: 'default',
-              },
-            },
-            body,
-            title,
-            data,
-          });
-        }
+
+        await displayNotification(remoteMessage, channelId);
       });
 
       unsubscribePushListenersRef.current = () => {

examples/SampleApp/src/utils/bootstrapBackgroundMessageHandler.ts

@@ -0,0 +1,71 @@
+import { LoginConfig } from '../types';
+import AsyncStore from './AsyncStore';
+import {
+  FirebaseMessagingTypes,
+  setBackgroundMessageHandler,
+} from '@react-native-firebase/messaging';
+import { DeliveredMessageConfirmation, StreamChat } from 'stream-chat';
+import notifee from '@notifee/react-native';
+import { getMessaging } from '@react-native-firebase/messaging';
+
+const messaging = getMessaging();
+
+const displayNotification = async (
+  remoteMessage: FirebaseMessagingTypes.RemoteMessage,
+  channelId: string,
+) => {
+  const { stream, ...rest } = remoteMessage.data ?? {};
+  const data = {
+    ...rest,
+    ...((stream as unknown as Record<string, string> | undefined) ?? {}), // extract and merge stream object if present
+  };
+  if (data.body && data.title) {
+    await notifee.displayNotification({
+      android: {
+        channelId,
+        pressAction: {
+          id: 'default',
+        },
+      },
+      body: data.body as string,
+      title: data.title as string,
+      data,
+    });
+  }
+};
+
+setBackgroundMessageHandler(messaging, async (remoteMessage) => {
+  try {
+    const loginConfig = await AsyncStore.getItem<LoginConfig>(
+      '@stream-rn-sampleapp-login-config',
+      null,
+    );
+    if (!loginConfig) {
+      return;
+    }
+    const chatClient = StreamChat.getInstance(loginConfig.apiKey);
+    await chatClient._setToken({ id: loginConfig.userId }, loginConfig.userToken);
+
+    const notification = remoteMessage.data;
+
+    const deliverMessageConfirmation = [
+      {
+        cid: notification?.cid,
+        id: notification?.id,
+      },
+    ];
+
+    await chatClient?.markChannelsDelivered({
+      latest_delivered_messages: deliverMessageConfirmation as DeliveredMessageConfirmation[],
+    });
+    // create the android channel to send the notification to
+    const channelId = await notifee.createChannel({
+      id: 'chat-messages',
+      name: 'Chat Messages',
+    });
+    // display the notification
+    await displayNotification(remoteMessage, channelId);
+  } catch (error) {
+    console.error(error);
+  }
+});

package/src/components/ChannelPreview/ChannelPreviewStatus.tsx

@@ -3,7 +3,8 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import { ChannelPreviewProps } from './ChannelPreview';
 import type { ChannelPreviewMessengerPropsWithContext } from './ChannelPreviewMessenger';
-import { MessageReadStatus } from './hooks/useLatestMessagePreview';
+
+import { MessageDeliveryStatus } from './hooks/useMessageDeliveryStatus';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
@@ -38,7 +39,7 @@ export const ChannelPreviewStatus = (props: ChannelPreviewStatusProps) => {
     },
   } = useTheme();
 
-  const created_at = latestMessagePreview.messageObject?.created_at;
+  const created_at = latestMessagePreview?.created_at;
   const latestMessageDate = created_at ? new Date(created_at) : new Date();
 
   const formattedDate = useMemo(
@@ -55,9 +56,11 @@ export const ChannelPreviewStatus = (props: ChannelPreviewStatusProps) => {
 
   return (
     <View style={styles.flexRow}>
-      {status === MessageReadStatus.READ ? (
+      {status === MessageDeliveryStatus.READ ? (
         <CheckAll pathFill={accent_blue} {...checkAllIcon} />
-      ) : status === MessageReadStatus.UNREAD ? (
+      ) : status === MessageDeliveryStatus.DELIVERED ? (
+        <CheckAll pathFill={grey} {...checkAllIcon} />
+      ) : status === MessageDeliveryStatus.SENT ? (
         <Check pathFill={grey} {...checkIcon} />
       ) : null}
       <Text style={[styles.date, { color: grey }, date]}>

package/src/components/ChannelPreview/hooks/useChannelPreviewData.ts

@@ -1,7 +1,7 @@
 import { type SetStateAction, useEffect, useMemo, useState } from 'react';
 
 import throttle from 'lodash/throttle';
-import type { Channel, ChannelState, Event, MessageResponse, StreamChat } from 'stream-chat';
+import type { Channel, Event, LocalMessage, MessageResponse, StreamChat } from 'stream-chat';
 
 import { useIsChannelMuted } from './useIsChannelMuted';
 
@@ -16,7 +16,7 @@ const setLastMessageThrottleOptions = { leading: true, trailing: true };
 const refreshUnreadCountThrottleTimeout = 400;
 const refreshUnreadCountThrottleOptions = setLastMessageThrottleOptions;
 
-type LastMessageType = ReturnType<ChannelState['formatMessage']> | MessageResponse;
+type LastMessageType = LocalMessage | MessageResponse;
 
 export const useChannelPreviewData = (
   channel: Channel,
@@ -172,7 +172,11 @@ export const useChannelPreviewData = (
     return () => listeners.forEach((l) => l.unsubscribe());
   }, [channel, refreshUnreadCount, forceUpdate, channelListForceUpdate, setLastMessage]);
 
-  const latestMessagePreview = useLatestMessagePreview(channel, forceUpdate, lastMessage);
+  const latestMessagePreview = useLatestMessagePreview(
+    channel,
+    forceUpdate,
+    lastMessage as LocalMessage,
+  );
 
   return { latestMessagePreview, muted, unread };
 };