Next Release

README.md

@@ -10,7 +10,7 @@
 [![NPM](https://img.shields.io/npm/v/stream-chat-react-native.svg)](https://www.npmjs.com/package/stream-chat-react-native)
 [![Build Status](https://github.com/GetStream/stream-chat-react-native/actions/workflows/release.yml/badge.svg)](https://github.com/GetStream/stream-chat-react-native/actions)
 [![Component Reference](https://img.shields.io/badge/docs-component%20reference-blue.svg)](https://getstream.io/chat/docs/sdk/reactnative)
-![JS Bundle Size](https://img.shields.io/badge/js_bundle_size-466%20KB-blue)
+![JS Bundle Size](https://img.shields.io/badge/js_bundle_size-467%20KB-blue)
 
 <img align="right" src="https://getstream.imgix.net/images/ios-chat-tutorial/iphone_chat_art@3x.png?auto=format,enhance" width="50%" />
 
@@ -48,9 +48,9 @@ For complete pricing details visit our [Chat Pricing Page](https://getstream.io/
 
 This repo includes 3 example apps. One made with Expo, two in TypeScript. One TypeScript app is a simple implementation for reference, the other is a more full featured app example.
 
-- [Expo example](./examples/ExpoMessaging)
-- [Typescript example](./examples/TypeScriptMessaging)
-- [Fully featured messaging application](./examples/SampleApp)
+- [Expo example](https://github.com/GetStream/stream-chat-react-native/tree/develop/examples/ExpoMessaging)
+- [Typescript example](https://github.com/GetStream/stream-chat-react-native/tree/develop/examples/TypeScriptMessaging)
+- [Fully featured messaging application](https://github.com/GetStream/stream-chat-react-native/tree/develop/examples/SampleApp)
 
 Besides, our team maintains a dedicated repository for fully-fledged sample applications and demos at [GetStream/react-native-samples](https://github.com/GetStream/react-native-samples). Please consider checking following sample applications:
 

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
+import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
 import {
   MessageContextValue,
   useMessageContext,
@@ -23,6 +24,7 @@ const MessageStatusWithContext = <
 >(
   props: MessageStatusPropsWithContext<StreamChatGenerics>,
 ) => {
+  const { channel } = useChannelContext<StreamChatGenerics>();
   const { message, threadList } = props;
 
   const {
@@ -47,18 +49,29 @@ const MessageStatusWithContext = <
   }
 
   if (isMessageWithStylesReadByAndDateSeparator(message)) {
+    const members = channel?.state.members;
+    const otherMembers = Object.values(members).filter(
+      (member) => member.user_id !== message.user?.id,
+    );
+    const hasOtherMembersGreaterThanOne = otherMembers.length > 1;
+    const hasReadByGreaterThanOne = typeof message.readBy === 'number' && message.readBy > 1;
+    const shouldDisplayReadByCount = hasOtherMembersGreaterThanOne && hasReadByGreaterThanOne;
+    const countOfReadBy =
+      typeof message.readBy === 'number' && hasOtherMembersGreaterThanOne ? message.readBy - 1 : 0;
+    const showDoubleCheck = hasReadByGreaterThanOne || message.readBy === true;
+
     return (
       <View style={[styles.statusContainer, statusContainer]}>
-        {typeof message.readBy === 'number' ? (
+        {shouldDisplayReadByCount ? (
           <Text
             style={[styles.readByCount, { color: accent_blue }, readByCount]}
             testID='read-by-container'
           >
-            {message.readBy}
+            {countOfReadBy}
           </Text>
         ) : null}
         {message.type !== 'error' ? (
-          typeof message.readBy === 'number' || message.readBy === true ? (
+          showDoubleCheck ? (
             <CheckAll pathFill={accent_blue} {...checkAllIcon} />
           ) : (
             <Check pathFill={grey_dark} {...checkIcon} />

package/src/components/Message/MessageSimple/__tests__/MessageStatus.test.js

@@ -2,6 +2,12 @@ import React from 'react';
 
 import { cleanup, render, waitFor } from '@testing-library/react-native';
 
+import { Channel } from '../../..';
+import { ChannelsStateProvider } from '../../../../contexts/channelsStateContext/ChannelsStateContext';
+import { getOrCreateChannelApi } from '../../../../mock-builders/api/getOrCreateChannel';
+import { useMockedApis } from '../../../../mock-builders/api/useMockedApis';
+import { generateChannelResponse } from '../../../../mock-builders/generator/channel';
+import { generateMember } from '../../../../mock-builders/generator/member';
 import { generateMessage } from '../../../../mock-builders/generator/message';
 import { generateStaticUser, generateUser } from '../../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../../mock-builders/mock';
@@ -10,26 +16,54 @@ import { Chat } from '../../../Chat/Chat';
 import { MessageStatus } from '../MessageStatus';
 
 let chatClient;
-let id;
 let i18nInstance;
-
+let channel;
 describe('MessageStatus', () => {
-  beforeAll(async () => {
+  const user1 = generateUser({ id: 'id1', name: 'name1' });
+  const user2 = generateUser({ id: 'id2', name: 'name2' });
+  const user3 = generateUser({ id: 'id3', name: 'name3' });
+  const messages = [generateMessage({ user: user1 })];
+  const members = [
+    generateMember({ user: user1 }),
+    generateMember({ user: user2 }),
+    generateMember({ user: user3 }),
+  ];
+  beforeAll(() => {
     id = 'testID';
-    chatClient = await getTestClientWithUser({ id });
     i18nInstance = new Streami18n();
   });
+  beforeEach(async () => {
+    jest.clearAllMocks();
+    const mockedChannel = generateChannelResponse({
+      members,
+      messages,
+    });
+
+    chatClient = await getTestClientWithUser(user1);
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    channel = chatClient.channel('messaging', mockedChannel.id);
+  });
   afterEach(cleanup);
 
+  renderMessageStatus = (options, channelProps) =>
+    render(
+      <ChannelsStateProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel} {...channelProps}>
+            <MessageStatus {...options} />
+          </Channel>
+        </Chat>
+      </ChannelsStateProvider>,
+    );
+
   it('should render message status with delivered container', async () => {
     const user = generateUser();
     const message = generateMessage({ user });
 
-    const { getByTestId } = render(
-      <Chat client={chatClient} i18nInstance={i18nInstance}>
-        <MessageStatus lastReceivedId={message.id} message={{ ...message, status: 'received' }} />
-      </Chat>,
-    );
+    const { getByTestId } = renderMessageStatus({
+      lastReceivedId: message.id,
+      message: { ...message, status: 'received' },
+    });
 
     await waitFor(() => {
       expect(getByTestId('delivered-container')).toBeTruthy();
@@ -40,42 +74,43 @@ describe('MessageStatus', () => {
     const user = generateUser();
     const message = generateMessage({ readBy: 2, user });
 
-    const { getByTestId, getByText, rerender, toJSON } = render(
-      <Chat client={chatClient} i18nInstance={i18nInstance}>
-        <MessageStatus lastReceivedId={message.id} message={message} />
-      </Chat>,
-    );
+    const { getByTestId, getByText, rerender, toJSON } = renderMessageStatus({
+      lastReceivedId: message.id,
+      message,
+    });
 
     await waitFor(() => {
       expect(getByTestId('read-by-container')).toBeTruthy();
-      expect(getByText(message.readBy.toString())).toBeTruthy();
+      expect(getByText((message.readBy - 1).toString())).toBeTruthy();
     });
 
     const staticUser = generateStaticUser(0);
     const staticMessage = generateMessage({ readBy: 2, staticUser });
 
     rerender(
-      <Chat client={chatClient} i18nInstance={i18nInstance}>
-        <MessageStatus lastReceivedId={staticMessage.id} message={staticMessage} />
-      </Chat>,
+      <ChannelsStateProvider>
+        <Chat client={chatClient} i18nInstance={i18nInstance}>
+          <Channel channel={channel}>
+            <MessageStatus lastReceivedId={staticMessage.id} message={staticMessage} />
+          </Channel>
+        </Chat>
+      </ChannelsStateProvider>,
     );
 
     await waitFor(() => {
       expect(toJSON()).toMatchSnapshot();
       expect(getByTestId('read-by-container')).toBeTruthy();
-      expect(getByText(staticMessage.readBy.toString())).toBeTruthy();
+      expect(getByText((staticMessage.readBy - 1).toString())).toBeTruthy();
     });
   });
 
   it('should render message status with sending container', async () => {
     const user = generateUser();
     const message = generateMessage({ user });
 
-    const { getByTestId } = render(
-      <Chat client={chatClient} i18nInstance={i18nInstance}>
-        <MessageStatus message={{ ...message, status: 'sending' }} />
-      </Chat>,
-    );
+    const { getByTestId } = renderMessageStatus({
+      message: { ...message, status: 'sending' },
+    });
 
     await waitFor(() => {
       expect(getByTestId('sending-container')).toBeTruthy();