[🐛] 🔥 Can't stop `notification.mark_read` from triggering.

[davidgtu]

Issue

I am using Stream Chat in my React Native to show unread message counts and I connect the user to stream chat when the app initializes. I'm able to get updated counts when sending messages to my user.

However when a user navigates to the chat screen, I correctly receive the notification.mark_read event and reset the unread count to 0. However, after navigating away from the chat screen, I am encountering an issue:

Whenever a new message arrives while the user is not on the chat screen, the unread count briefly updates but is immediately reset to 0. This happens because of the notification.mark_read event keeps firing even when the user is not on the chat screen. I want the notification.mark_read event to stop firing when the user navigates away from the chat screen, so the unread count only resets when the user actively views the chat. Here is the code I am currently using:

useInitChat.ts

export const useInitChat = ({
  user,
  chatClient,
}: {
  user?: Member;
  chatClient: StreamChat;
}) => {
  const createSupportChat = useCreateSupportChatSubscriptionMutation();

  const [unreadCount, setUnreadCount] = useState<number>();
  const [channel, setChannel] = useState<Channel>();

  useEffect(() => {
    (async () => {
      if (user && !chatClient.user) {
        console.log("connecting user");
        const { createSupportChatSubscription } =
          await createSupportChat.mutateAsync({ input: {} });

        await chatClient.connectUser(
          {
            id: user.id,
            name: user.name as string,
          },
          createSupportChatSubscription?.subscription?.token.token,
        );

        const filter = {
          type: createSupportChatSubscription?.subscription?.channelType,
          id: createSupportChatSubscription?.subscription?.channelId,
        };

        const queriedChannel = await chatClient.queryChannels(filter);

        const currentChannel = queriedChannel.find(
          (channel) =>
            channel.id ===
            createSupportChatSubscription?.subscription?.channelId,
        );

        const unreadCount = await chatClient.getUnreadCount(user.id);
        setUnreadCount(unreadCount.total_unread_count);
        setChannel(currentChannel);
      }
    })();
  }, [user, chatClient.user]);

  useEffect(() => {
    chatClient.on((event) => {
      console.log(event.type);
      if (
        event.type === "message.new" ||
        event.type === "notification.message_new"
      ) {
        setUnreadCount(event.total_unread_count);
      }

      if (
        event.type === "notification.mark_read" ||
        event.type === "message.read"
      ) {
        setUnreadCount(0);
      }
    });
  }, [chatClient]);

  return {
    unreadCount,
    channel,
  };
};

I've also tried `chatClient.off('notification.mark_read') but that doesn't seem to work. Any ideas? Thank you.

Steps to reproduce

1. Start the App. the count initializes and gets the count correctly.
2. Navigate to the chat screen. the count is reset.
3. Navigate away
4. Send a message to my user. the count will update but notification.mark_read will trigger, resetting the count.

Expected behavior

notification.mark_read should not trigger when the screen is not on the chat screen. If anything, it should reset to it's pristine state before navigating to the chat screen.

Project Related Information

Customization

Click To Expand

# N/A

Offline support

• [ ] I have enabled offline support.
• [ ] The feature I'm having does not occur when offline support is disabled. (stripe out if not applicable)

Environment

Click To Expand

package.json:

# N/A

react-native info output:

 OUTPUT GOES HERE

• Platform that you're experiencing the issue on:
  • [x] iOS
  • [x] Android
  • [ ] iOS but have not tested behavior on Android
  • [ ] Android but have not tested behavior on iOS
  • [x] Both
• stream-chat-react-native version you're using that has this issue:
  • "stream-chat-expo": "^5.35.0"
• Device/Emulator info:
  • [ ] I am using a physical device
  • OS version: iOS 16.4
  • Device/Emulator: iPhone 14

Additional context

Screenshots

Click To Expand

---