stream-chat-react-native-core 5.44.2-beta.1 → 6.0.0-beta.1

package/src/components/MessageInput/components/NativeAttachmentPicker.tsx

@@ -42,6 +42,7 @@ export const NativeAttachmentPicker = ({
     },
   } = useTheme();
   const {
+    hasCameraPicker,
     hasFilePicker,
     hasImagePicker,
     openPollCreationDialog,
@@ -142,7 +143,13 @@ export const NativeAttachmentPicker = ({
   if (hasFilePicker) {
     buttons.push({ icon: <FileSelectorIcon />, id: 'File', onPressHandler: pickFile });
   }
-  buttons.push({ icon: <CameraSelectorIcon />, id: 'Camera', onPressHandler: takeAndUploadImage });
+  if (hasCameraPicker) {
+    buttons.push({
+      icon: <CameraSelectorIcon />,
+      id: 'Camera',
+      onPressHandler: takeAndUploadImage,
+    });
+  }
 
   return (
     <>

package/src/components/MessageInput/hooks/useAudioController.tsx

@@ -84,18 +84,17 @@ export const useAudioController = () => {
   };
 
   const onVoicePlayerPlayPause = async () => {
-    if (!Audio) return;
     if (paused) {
       if (progress === 0) await startVoicePlayer();
       else {
         // For Native CLI
-        if (Audio.resumePlayer) await Audio.resumePlayer();
+        if (Audio?.resumePlayer) await Audio.resumePlayer();
         // For Expo CLI
         if (soundRef.current?.playAsync) await soundRef.current.playAsync();
       }
     } else {
       // For Native CLI
-      if (Audio.pausePlayer) await Audio.pausePlayer();
+      if (Audio?.pausePlayer) await Audio.pausePlayer();
       // For Expo CLI
       if (soundRef.current?.pauseAsync) await soundRef.current.pauseAsync();
     }
@@ -106,10 +105,9 @@ export const useAudioController = () => {
    * Function to start playing voice recording to preview it after recording.
    */
   const startVoicePlayer = async () => {
-    if (!Audio) return;
     if (!recording) return;
     // For Native CLI
-    if (Audio.startPlayer)
+    if (Audio?.startPlayer)
       await Audio.startPlayer(recording, {}, onVoicePlayerPlaybackStatusUpdate);
     // For Expo CLI
     if (recording && typeof recording !== 'string') {
@@ -134,9 +132,8 @@ export const useAudioController = () => {
    * Function to stop playing voice recording.
    */
   const stopVoicePlayer = async () => {
-    if (!Audio) return;
     // For Native CLI
-    if (Audio.stopPlayer) {
+    if (Audio?.stopPlayer) {
       await Audio.stopPlayer();
     }
     // For Expo CLI

package/src/components/MessageList/MessageList.tsx

@@ -126,10 +126,7 @@ type MessageListPropsWithContext<
   > &
   Pick<ChatContextValue<StreamChatGenerics>, 'client'> &
   Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setMessages'> &
-  Pick<
-    PaginatedMessageListContextValue<StreamChatGenerics>,
-    'hasNoMoreRecentMessagesToLoad' | 'loadMore' | 'loadMoreRecent'
-  > &
+  Pick<PaginatedMessageListContextValue<StreamChatGenerics>, 'loadMore' | 'loadMoreRecent'> &
   Pick<OverlayContextValue, 'overlay'> &
   Pick<
     MessagesContextValue<StreamChatGenerics>,
@@ -239,7 +236,6 @@ const MessageListWithContext = <
     EmptyStateIndicator,
     FlatList,
     FooterComponent = InlineLoadingMoreIndicator,
-    hasNoMoreRecentMessagesToLoad,
     HeaderComponent = LoadingMoreRecentIndicator,
     hideStickyDateHeader,
     initialScrollToFirstUnreadMessage,
@@ -440,6 +436,9 @@ const MessageListWithContext = <
     }
   }, [disabled]);
 
+  /**
+   * Effect to mark the channel as read when the user scrolls to the bottom of the message list.
+   */
   useEffect(() => {
     const getShouldMarkReadAutomatically = (): boolean => {
       if (loading || !channel) {
@@ -519,34 +518,16 @@ const MessageListWithContext = <
       }
     };
 
-    if (threadList || hasNoMoreRecentMessagesToLoad) {
+    if (threadList) {
       scrollToBottomIfNeeded();
     } else {
       setScrollToBottomButtonVisible(false);
     }
 
-    if (
-      !hasNoMoreRecentMessagesToLoad &&
-      flatListRef.current &&
-      messageListLengthBeforeUpdate.current === 0 &&
-      messageListLengthAfterUpdate < 10
-    ) {
-      /**
-       * Trigger onStartReached on first load, if messages are not enough to fill the screen.
-       * This is important especially for android, where you can't overscroll.
-       */
-      maybeCallOnStartReached(10);
-    }
-
     messageListLengthBeforeUpdate.current = messageListLengthAfterUpdate;
     topMessageBeforeUpdate.current = topMessageAfterUpdate;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    threadList,
-    hasNoMoreRecentMessagesToLoad,
-    messageListLengthAfterUpdate,
-    topMessageAfterUpdate?.id,
-  ]);
+  }, [threadList, messageListLengthAfterUpdate, topMessageAfterUpdate?.id]);
 
   useEffect(() => {
     if (!rawMessageList.length) return;
@@ -666,13 +647,23 @@ const MessageListWithContext = <
         message={message}
         onThreadSelect={onThreadSelect}
         showUnreadUnderlay={showUnreadUnderlay}
-        style={[{ paddingHorizontal: screenPadding }, messageContainer]}
+        style={[messageContainer]}
         threadList={threadList}
       />
     );
-    return wrapMessageInTheme ? (
+    return (
       <>
-        <ThemeProvider mergedStyle={modifiedTheme}>
+        {wrapMessageInTheme ? (
+          <ThemeProvider mergedStyle={modifiedTheme}>
+            <View
+              style={[shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined]}
+              testID={`message-list-item-${index}`}
+            >
+              {shouldApplyAndroidWorkaround && renderDateSeperator}
+              {renderMessage}
+            </View>
+          </ThemeProvider>
+        ) : (
           <View
             style={[shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined]}
             testID={`message-list-item-${index}`}
@@ -680,23 +671,12 @@ const MessageListWithContext = <
             {shouldApplyAndroidWorkaround && renderDateSeperator}
             {renderMessage}
           </View>
-        </ThemeProvider>
+        )}
         {!shouldApplyAndroidWorkaround && renderDateSeperator}
         {/* Adding indicator below the messages, since the list is inverted */}
-        {insertInlineUnreadIndicator && <InlineUnreadIndicator />}
-      </>
-    ) : (
-      <>
-        <View
-          style={[shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined]}
-          testID={`message-list-item-${index}`}
-        >
-          {shouldApplyAndroidWorkaround && renderDateSeperator}
-          {renderMessage}
+        <View style={[shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined]}>
+          {insertInlineUnreadIndicator && <InlineUnreadIndicator />}
         </View>
-        {!shouldApplyAndroidWorkaround && renderDateSeperator}
-        {/* Adding indicator below the messages, since the list is inverted */}
-        {insertInlineUnreadIndicator && <InlineUnreadIndicator />}
       </>
     );
   };
@@ -724,7 +704,7 @@ const MessageListWithContext = <
    * 2. Ensures that we call `loadMoreRecent`, once per content length
    * 3. If the call to `loadMore` is in progress, we wait for it to finish to make sure scroll doesn't jump.
    */
-  const maybeCallOnStartReached = async (limit?: number) => {
+  const maybeCallOnStartReached = async () => {
     // If onStartReached has already been called for given data length, then ignore.
     if (
       processedMessageList?.length &&
@@ -756,8 +736,8 @@ const MessageListWithContext = <
     }
     onStartReachedInPromise.current = (
       threadList && !!threadInstance && loadMoreRecentThread
-        ? loadMoreRecentThread({ limit })
-        : loadMoreRecent(limit)
+        ? loadMoreRecentThread({})
+        : loadMoreRecent()
     )
       .then(callback)
       .catch(onError);
@@ -831,8 +811,7 @@ const MessageListWithContext = <
     const notLatestSet = channel.state.messages !== channel.state.latestMessages;
 
     const showScrollToBottomButton =
-      messageListHasMessages &&
-      ((!threadList && notLatestSet) || !isScrollAtBottom || !hasNoMoreRecentMessagesToLoad);
+      messageListHasMessages && ((!threadList && notLatestSet) || !isScrollAtBottom);
 
     /**
      * 1. If I scroll up -> show scrollToBottom button.
@@ -842,12 +821,7 @@ const MessageListWithContext = <
      */
     setScrollToBottomButtonVisible(showScrollToBottomButton);
 
-    const shouldMarkRead =
-      !threadList &&
-      !notLatestSet &&
-      offset <= 0 &&
-      hasNoMoreRecentMessagesToLoad &&
-      channel.countUnread() > 0;
+    const shouldMarkRead = !threadList && !notLatestSet && offset <= 0 && channel.countUnread() > 0;
 
     if (shouldMarkRead) {
       markRead();
@@ -862,6 +836,7 @@ const MessageListWithContext = <
 
   const goToNewMessages = async () => {
     const isNotLatestSet = channel.state.messages !== channel.state.latestMessages;
+
     if (isNotLatestSet) {
       resetPaginationTrackersRef.current();
       await reloadChannel();
@@ -925,7 +900,7 @@ const MessageListWithContext = <
     // this onScrollToIndexFailed will be called again
   });
 
-  const goToMessage = (messageId: string) => {
+  const goToMessage = async (messageId: string) => {
     const indexOfParentInMessageList = processedMessageList.findIndex(
       (message) => message?.id === messageId,
     );
@@ -944,7 +919,7 @@ const MessageListWithContext = <
       return;
     }
     // the message we want was not loaded yet, so lets load it
-    loadChannelAroundMessage({ messageId });
+    await loadChannelAroundMessage({ messageId });
   };
 
   /**
@@ -985,6 +960,7 @@ const MessageListWithContext = <
           viewPosition: 0.5, // try to place message in the center of the screen
         });
       }
+
       // the message we want to scroll to has not been loaded in the state yet
       if (indexOfParentInMessageList === -1) {
         loadChannelAroundMessage({ messageId: messageIdToScroll });
@@ -1047,11 +1023,12 @@ const MessageListWithContext = <
   ]);
 
   const dismissImagePicker = () => {
-    if (!hasMoved && selectedPicker) {
+    if (selectedPicker) {
       setSelectedPicker(undefined);
       closePicker();
     }
   };
+
   const onScrollBeginDrag: ScrollViewProps['onScrollBeginDrag'] = (event) => {
     !hasMoved && selectedPicker && setHasMoved(true);
     onUserScrollEvent(event);
@@ -1155,17 +1132,17 @@ const MessageListWithContext = <
           ]}
           /** Disables the MessageList UI. Which means, message actions, reactions won't work. */
           data={processedMessageList}
-          extraData={disabled || !hasNoMoreRecentMessagesToLoad}
+          extraData={disabled}
           inverted={shouldApplyAndroidWorkaround ? false : inverted}
           ItemSeparatorComponent={WrappedItemSeparatorComponent}
           keyboardShouldPersistTaps='handled'
           keyExtractor={keyExtractor}
           ListFooterComponent={ListFooterComponent}
           /**
-          if autoscrollToTopThreshold is 10, we scroll to recent if before new list update it was already at the bottom (10 offset or below)
-          minIndexForVisible = 1 means that beyond item at index 1 will not change position on list updates
-          minIndexForVisible is not used when autoscrollToTopThreshold = 10
-        */
+            if autoscrollToTopThreshold is 10, we scroll to recent if before new list update it was already at the bottom (10 offset or below)
+            minIndexForVisible = 1 means that beyond item at index 1 will not change position on list updates
+            minIndexForVisible is not used when autoscrollToTopThreshold = 10
+          */
           ListHeaderComponent={ListHeaderComponent}
           maintainVisibleContentPosition={{
             autoscrollToTopThreshold: autoscrollToRecent ? 10 : undefined,
@@ -1194,26 +1171,21 @@ const MessageListWithContext = <
           {...additionalFlatListPropsExcludingStyle}
         />
       )}
-
-      {!loading && (
-        <>
-          <View style={styles.stickyHeader}>
-            {messageListLengthAfterUpdate && StickyHeader ? (
-              <StickyHeader date={stickyHeaderDate} DateHeader={DateHeader} />
-            ) : null}
-          </View>
-          {!disableTypingIndicator && TypingIndicator && (
-            <TypingIndicatorContainer>
-              <TypingIndicator />
-            </TypingIndicatorContainer>
-          )}
-          <ScrollToBottomButton
-            onPress={goToNewMessages}
-            showNotification={scrollToBottomButtonVisible}
-            unreadCount={threadList ? 0 : channel?.countUnread()}
-          />
-        </>
+      <View style={styles.stickyHeader}>
+        {messageListLengthAfterUpdate && StickyHeader ? (
+          <StickyHeader date={stickyHeaderDate} DateHeader={DateHeader} />
+        ) : null}
+      </View>
+      {!disableTypingIndicator && TypingIndicator && (
+        <TypingIndicatorContainer>
+          <TypingIndicator />
+        </TypingIndicatorContainer>
       )}
+      <ScrollToBottomButton
+        onPress={goToNewMessages}
+        showNotification={scrollToBottomButtonVisible}
+        unreadCount={threadList ? 0 : channel?.countUnread()}
+      />
       <NetworkDownIndicator />
     </View>
   );
@@ -1267,8 +1239,7 @@ export const MessageList = <
     TypingIndicator,
     TypingIndicatorContainer,
   } = useMessagesContext<StreamChatGenerics>();
-  const { hasNoMoreRecentMessagesToLoad, loadMore, loadMoreRecent } =
-    usePaginatedMessageListContext<StreamChatGenerics>();
+  const { loadMore, loadMoreRecent } = usePaginatedMessageListContext<StreamChatGenerics>();
   const { overlay } = useOverlayContext();
   const { loadMoreRecentThread, loadMoreThread, thread, threadInstance } =
     useThreadContext<StreamChatGenerics>();
@@ -1286,7 +1257,6 @@ export const MessageList = <
         enableMessageGroupingByUser,
         error,
         FlatList,
-        hasNoMoreRecentMessagesToLoad,
         hideStickyDateHeader,
         initialScrollToFirstUnreadMessage,
         InlineDateSeparator,

package/src/components/MessageList/ScrollToBottomButton.tsx

@@ -80,7 +80,7 @@ export const ScrollToBottomButton = (props: ScrollToBottomButtonProps) => {
     <TouchableOpacity
       onPress={onPress}
       style={[styles.touchable, touchable]}
-      testID='message-notification'
+      testID='scroll-to-bottom-button'
     >
       <View style={[styles.wrapper, wrapper]}>
         <View style={[styles.container, { backgroundColor: white, shadowColor: black }, container]}>

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { act, cleanup, render, screen, waitFor } from '@testing-library/react-native';
+import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react-native';
 
 import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
@@ -13,8 +13,9 @@ import { generateMember } from '../../../mock-builders/generator/member';
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
-import { registerNativeHandlers } from '../../../native';
 import { Channel } from '../../Channel/Channel';
+import { channelInitialState } from '../../Channel/hooks/useChannelDataState';
+import * as MessageListPaginationHook from '../../Channel/hooks/useMessageListPagination';
 import { Chat } from '../../Chat/Chat';
 import { MessageList } from '../MessageList';
 
@@ -48,7 +49,7 @@ describe('MessageList', () => {
     act(() => dispatchMessageNewEvent(chatClient, newMessage, mockedChannel.channel));
 
     await waitFor(() => {
-      expect(queryAllByTestId('message-notification')).toHaveLength(0);
+      expect(queryAllByTestId('scroll-to-bottom-button')).toHaveLength(0);
       expect(getByText(newMessage.text)).toBeTruthy();
     });
   }, 10000);
@@ -314,16 +315,6 @@ describe('MessageList', () => {
   });
 
   it('should render the is offline error', async () => {
-    registerNativeHandlers({
-      NetInfo: {
-        addEventListener: () => () => null,
-        fetch: () =>
-          new Promise((resolve) => {
-            resolve(false);
-          }),
-      },
-    });
-
     const user1 = generateUser();
     const mockedChannel = generateChannelResponse({
       members: [generateMember({ user: user1 })],
@@ -351,16 +342,6 @@ describe('MessageList', () => {
       expect(getByTestId('error-notification')).toBeTruthy();
       expect(getByText('Reconnecting...')).toBeTruthy();
     });
-
-    registerNativeHandlers({
-      NetInfo: {
-        addEventListener: () => () => null,
-        fetch: () =>
-          new Promise((resolve) => {
-            resolve(true);
-          }),
-      },
-    });
   });
 
   it('should scroll to a message even if out of the loaded window', async () => {
@@ -402,3 +383,173 @@ describe('MessageList', () => {
     });
   });
 });
+
+describe('MessageList pagination', () => {
+  afterEach(() => {
+    cleanup();
+    jest.clearAllMocks();
+  });
+
+  const mockedHook = (values) => {
+    const messages = Array.from({ length: 100 }, (_, i) =>
+      generateMessage({ text: `message-${i}` }),
+    );
+    return jest
+      .spyOn(MessageListPaginationHook, 'useMessageListPagination')
+      .mockImplementation(() => ({
+        copyMessagesStateFromChannel: jest.fn(),
+        loadChannelAroundMessage: jest.fn(),
+        loadChannelAtFirstUnreadMessage: jest.fn(),
+        loadInitialMessagesStateFromChannel: jest.fn(),
+        loadLatestMessages: jest.fn(),
+        loadMore: jest.fn(),
+        loadMoreRecent: jest.fn(),
+        state: { ...channelInitialState, messages },
+        ...values,
+      }));
+  };
+
+  it('should load more recent messages when the user scrolls to the start of the list', async () => {
+    const user1 = generateUser();
+    const mockedChannel = generateChannelResponse({
+      members: [generateMember({ user: user1 })],
+      messages: Array.from({ length: 100 }, (_, i) => generateMessage({ text: `message-${i}` })),
+    });
+
+    const chatClient = await getTestClientWithUser({ id: 'testID' });
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.watch();
+
+    const loadMoreRecent = jest.fn(() => Promise.resolve());
+    mockedHook({ loadMoreRecent });
+
+    const { getByTestId } = render(
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
+    );
+
+    act(() => {
+      // scroll to the top of the list
+      const flatList = getByTestId('message-flat-list');
+      fireEvent(flatList, 'momentumScrollEnd', {
+        nativeEvent: {
+          contentOffset: { y: 0 }, // Scroll position at the top
+          contentSize: { height: 2000, width: 200 }, // Total content size
+          layoutMeasurement: { height: 400, width: 200 }, // Visible area size
+        },
+      });
+    });
+
+    await waitFor(() => {
+      expect(loadMoreRecent).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('should load more messages when the user scrolls to the end of the list', async () => {
+    const user1 = generateUser();
+    const mockedChannel = generateChannelResponse({
+      members: [generateMember({ user: user1 })],
+      messages: Array.from({ length: 100 }, (_, i) => generateMessage({ text: `message-${i}` })),
+    });
+
+    const chatClient = await getTestClientWithUser({ id: 'testID' });
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.watch();
+
+    const loadMore = jest.fn(() => Promise.resolve());
+    mockedHook({ loadMore });
+
+    const { getByTestId } = render(
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
+    );
+
+    act(() => {
+      // scroll to the top of the list
+      const flatList = getByTestId('message-flat-list');
+      fireEvent(flatList, 'momentumScrollEnd', {
+        nativeEvent: {
+          contentOffset: { y: 1900 }, // Scroll position at the top
+          contentSize: { height: 2000, width: 200 }, // Total content size
+          layoutMeasurement: { height: 400, width: 200 }, // Visible area size
+        },
+      });
+    });
+
+    await waitFor(() => {
+      expect(loadMore).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('should call load latest messages when the scroll to bottom button is pressed', async () => {
+    const user1 = generateUser();
+    const messages = Array.from({ length: 10 }, (_, i) =>
+      generateMessage({ text: `message-${i}` }),
+    );
+    const mockedChannel = generateChannelResponse({
+      members: [generateMember({ user: user1 })],
+      messages,
+    });
+
+    const chatClient = await getTestClientWithUser({ id: 'testID' });
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.watch();
+
+    channel.state = {
+      ...channelInitialState,
+      latestMessages: [],
+      members: Object.fromEntries(
+        Array.from({ length: 10 }, (_, i) => [i, generateMember({ id: i })]),
+      ),
+      messages: Array.from({ length: 10 }, (_, i) => generateMessage({ id: i })),
+      messageSets: [{ isCurrent: true, isLatest: true }],
+    };
+
+    const loadLatestMessages = jest.fn(() => Promise.resolve());
+    mockedHook({ loadLatestMessages });
+
+    const { getByTestId } = render(
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
+    );
+
+    act(() => {
+      // scroll to the top of the list
+      const flatList = getByTestId('message-flat-list');
+      fireEvent(flatList, 'scroll', {
+        nativeEvent: {
+          contentOffset: { y: 1900 }, // Scroll position at the top
+          contentSize: { height: 2000, width: 200 }, // Total content size
+          layoutMeasurement: { height: 400, width: 200 }, // Visible area size
+        },
+      });
+    });
+
+    await waitFor(() => {
+      const scrollToBottomButton = getByTestId('scroll-to-bottom-button');
+      expect(scrollToBottomButton).toBeTruthy();
+
+      fireEvent.press(scrollToBottomButton);
+
+      expect(loadLatestMessages).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/src/components/MessageList/__tests__/ScrollToBottomButton.test.js

@@ -22,7 +22,7 @@ describe('ScrollToBottomButton', () => {
     );
 
     await waitFor(() => {
-      expect(queryByTestId('message-notification')).toBeFalsy();
+      expect(queryByTestId('scroll-to-bottom-button')).toBeFalsy();
     });
   });
 
@@ -38,7 +38,7 @@ describe('ScrollToBottomButton', () => {
     );
 
     await waitFor(() => {
-      expect(queryByTestId('message-notification')).toBeTruthy();
+      expect(queryByTestId('scroll-to-bottom-button')).toBeTruthy();
     });
   });
 
@@ -53,7 +53,7 @@ describe('ScrollToBottomButton', () => {
         </TranslationProvider>
       </ThemeProvider>,
     );
-    fireEvent.press(getByTestId('message-notification'));
+    fireEvent.press(getByTestId('scroll-to-bottom-button'));
     expect(onPress).toHaveBeenCalledTimes(1);
   });
 

package/src/components/MessageList/__tests__/__snapshots__/ScrollToBottomButton.test.js.snap

@@ -37,7 +37,7 @@ exports[`ScrollToBottomButton should render the message notification and match s
       "right": 20,
     }
   }
-  testID="message-notification"
+  testID="scroll-to-bottom-button"
 >
   <View
     style={

package/src/components/MessageList/hooks/useMessageList.ts

@@ -1,9 +1,6 @@
 import type { ChannelState, MessageResponse } from 'stream-chat';
 
-import {
-  ChannelContextValue,
-  useChannelContext,
-} from '../../../contexts/channelContext/ChannelContext';
+import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import {
   DeletedMessagesVisibilityType,
@@ -61,7 +58,7 @@ export const useMessageList = <
   const { threadMessages } = useThreadContext<StreamChatGenerics>();
 
   const messageList = threadList ? threadMessages : messages;
-  const readList: ChannelContextValue<StreamChatGenerics>['read'] | undefined = threadList
+  const readList: ChannelState<StreamChatGenerics>['read'] | undefined = threadList
     ? undefined
     : read;
 

package/src/components/MessageList/utils/getReadStates.ts

@@ -1,4 +1,5 @@
-import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
+import { ChannelState } from 'stream-chat';
+
 import type { PaginatedMessageListContextValue } from '../../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
 import type { ThreadContextValue } from '../../../contexts/threadContext/ThreadContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
@@ -10,7 +11,7 @@ export const getReadStates = <
   messages:
     | PaginatedMessageListContextValue<StreamChatGenerics>['messages']
     | ThreadContextValue<StreamChatGenerics>['threadMessages'],
-  read?: ChannelContextValue<StreamChatGenerics>['read'],
+  read?: ChannelState<StreamChatGenerics>['read'],
 ) => {
   const readData: Record<string, number> = {};