stream-chat-react-native-core 7.0.0-rc.8 → 7.0.0

package/src/components/MessageList/MessageList.tsx

@@ -10,13 +10,9 @@ import {
   ViewToken,
 } from 'react-native';
 
-import type { FormatMessageResponse } from 'stream-chat';
+import type { Channel, Event, LocalMessage, MessageResponse } from 'stream-chat';
 
-import {
-  isMessageWithStylesReadByAndDateSeparator,
-  MessageType,
-  useMessageList,
-} from './hooks/useMessageList';
+import { useMessageList } from './hooks/useMessageList';
 import { useShouldScrollToRecentOnNewOwnMessage } from './hooks/useShouldScrollToRecentOnNewOwnMessage';
 
 import { InlineLoadingMoreIndicator } from './InlineLoadingMoreIndicator';
@@ -53,6 +49,7 @@ import {
 import { mergeThemes, ThemeProvider, useTheme } from '../../contexts/themeContext/ThemeContext';
 import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 
+import { useStableCallback } from '../../hooks';
 import { FileTypes } from '../../types/types';
 
 // This is just to make sure that the scrolling happens in a different task queue.
@@ -90,7 +87,7 @@ const styles = StyleSheet.create({
   },
 });
 
-const keyExtractor = (item: MessageType) => {
+const keyExtractor = (item: LocalMessage) => {
   if (item.id) {
     return item.id;
   }
@@ -104,6 +101,26 @@ const flatListViewabilityConfig: ViewabilityConfig = {
   viewAreaCoveragePercentThreshold: 1,
 };
 
+const hasReadLastMessage = (channel: Channel, userId: string) => {
+  const latestMessageIdInChannel = channel.state.latestMessages.slice(-1)[0]?.id;
+  const lastReadMessageIdServer = channel.state.read[userId]?.last_read_message_id;
+  return latestMessageIdInChannel === lastReadMessageIdServer;
+};
+
+const getPreviousLastMessage = (messages: LocalMessage[], newMessage?: MessageResponse) => {
+  if (!newMessage) return;
+  let previousLastMessage;
+  for (let i = messages.length - 1; i >= 0; i--) {
+    const msg = messages[i];
+    if (!msg?.id) break;
+    if (msg.id !== newMessage.id) {
+      previousLastMessage = msg;
+      break;
+    }
+  }
+  return previousLastMessage;
+};
+
 type MessageListPropsWithContext = Pick<
   AttachmentPickerContextValue,
   'closePicker' | 'selectedPicker' | 'setSelectedPicker'
@@ -123,6 +140,7 @@ type MessageListPropsWithContext = Pick<
     | 'NetworkDownIndicator'
     | 'reloadChannel'
     | 'scrollToFirstUnreadThreshold'
+    | 'setChannelUnreadState'
     | 'setTargetedMessage'
     | 'StickyHeader'
     | 'targetedMessage'
@@ -167,7 +185,7 @@ type MessageListPropsWithContext = Pick<
      *  additionalFlatListProps={{ bounces: true, keyboardDismissMode: true }} />
      * ```
      */
-    additionalFlatListProps?: Partial<FlatListProps<MessageType>>;
+    additionalFlatListProps?: Partial<FlatListProps<LocalMessage>>;
     /**
      * UI component for footer of message list. By default message list will use `InlineLoadingMoreIndicator`
      * as FooterComponent. If you want to implement your own inline loading indicator, you can access `loadingMore`
@@ -209,7 +227,7 @@ type MessageListPropsWithContext = Pick<
      *  }}
      * ```
      */
-    setFlatListRef?: (ref: FlatListType<MessageType> | null) => void;
+    setFlatListRef?: (ref: FlatListType<LocalMessage> | null) => void;
   };
 
 /**
@@ -264,6 +282,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     reloadChannel,
     ScrollToBottomButton,
     selectedPicker,
+    setChannelUnreadState,
     setFlatListRef,
     setMessages,
     setSelectedPicker,
@@ -299,10 +318,11 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
    * NOTE: rawMessageList changes only when messages array state changes
    * processedMessageList changes on any state change
    */
-  const { processedMessageList, rawMessageList } = useMessageList({
-    noGroupByUser,
-    threadList,
-  });
+  const { dateSeparatorsRef, messageGroupStylesRef, processedMessageList, rawMessageList } =
+    useMessageList({
+      noGroupByUser,
+      threadList,
+    });
   const messageListLengthBeforeUpdate = useRef(0);
   const messageListLengthAfterUpdate = processedMessageList.length;
 
@@ -310,9 +330,9 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
    * We need topMessage and channelLastRead values to set the initial scroll position.
    * So these values only get used if `initialScrollToFirstUnreadMessage` prop is true.
    */
-  const topMessageBeforeUpdate = useRef<FormatMessageResponse>(undefined);
-  const latestNonCurrentMessageBeforeUpdateRef = useRef<FormatMessageResponse>(undefined);
-  const topMessageAfterUpdate: FormatMessageResponse | undefined = rawMessageList[0];
+  const topMessageBeforeUpdate = useRef<LocalMessage>(undefined);
+  const latestNonCurrentMessageBeforeUpdateRef = useRef<LocalMessage>(undefined);
+  const topMessageAfterUpdate: LocalMessage | undefined = rawMessageList[0];
 
   const shouldScrollToRecentOnNewOwnMessageRef = useShouldScrollToRecentOnNewOwnMessage(
     rawMessageList,
@@ -321,6 +341,14 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
 
   const [autoscrollToRecent, setAutoscrollToRecent] = useState(false);
 
+  const maintainVisibleContentPosition = useMemo(
+    () => ({
+      autoscrollToTopThreshold: autoscrollToRecent ? 10 : undefined,
+      minIndexForVisible: 1,
+    }),
+    [autoscrollToRecent],
+  );
+
   /**
    * We want to call onEndReached and onStartReached only once, per content length.
    * We keep track of calls to these functions per content length, with following trackers.
@@ -331,7 +359,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
   const onStartReachedInPromise = useRef<Promise<void> | null>(null);
   const onEndReachedInPromise = useRef<Promise<void> | null>(null);
 
-  const flatListRef = useRef<FlatListType<MessageType> | null>(null);
+  const flatListRef = useRef<FlatListType<LocalMessage> | null>(null);
 
   const channelResyncScrollSet = useRef<boolean>(true);
 
@@ -351,8 +379,9 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
    */
   const messageIdLastScrolledToRef = useRef<string>(undefined);
   const [hasMoved, setHasMoved] = useState(false);
-  const [lastReceivedId, setLastReceivedId] = useState(
-    getLastReceivedMessage(processedMessageList)?.id,
+  const lastReceivedId = useMemo(
+    () => getLastReceivedMessage(processedMessageList)?.id,
+    [processedMessageList],
   );
   const [scrollToBottomButtonVisible, setScrollToBottomButtonVisible] = useState(false);
 
@@ -363,7 +392,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
   const channelRef = useRef(channel);
   channelRef.current = channel;
 
-  const updateStickyHeaderDateIfNeeded = (viewableItems: ViewToken[]) => {
+  const updateStickyHeaderDateIfNeeded = useStableCallback((viewableItems: ViewToken[]) => {
     if (!viewableItems.length) {
       return;
     }
@@ -390,12 +419,12 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
         setStickyHeaderDate(lastItem.item.created_at);
       }
     }
-  };
+  });
 
   /**
    * This function should show or hide the unread indicator depending on the
    */
-  const updateStickyUnreadIndicator = (viewableItems: ViewToken[]) => {
+  const updateStickyUnreadIndicator = useStableCallback((viewableItems: ViewToken[]) => {
     if (!viewableItems.length) {
       setIsUnreadNotificationOpen(false);
       return;
@@ -409,26 +438,39 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     const lastItem = viewableItems[viewableItems.length - 1];
 
     if (lastItem) {
-      const lastItemCreatedAt = lastItem.item.created_at;
+      const lastItemMessage = lastItem.item;
+      const lastItemCreatedAt = lastItemMessage.created_at;
 
       const unreadIndicatorDate = channelUnreadState?.last_read.getTime();
       const lastItemDate = lastItemCreatedAt.getTime();
 
       if (
         !channel.state.messagePagination.hasPrev &&
-        processedMessageList[processedMessageList.length - 1].id === lastItem.item.id
+        processedMessageList[processedMessageList.length - 1].id === lastItemMessage.id
+      ) {
+        setIsUnreadNotificationOpen(false);
+        return;
+      }
+      /**
+       * This is a special case where there is a single long message by the sender.
+       * When a message is sent, we mark it as read before it actually has a `created_at` timestamp.
+       * This is a workaround to prevent the unread indicator from showing when the message is sent.
+       */
+      if (
+        viewableItems.length === 1 &&
+        channel.countUnread() === 0 &&
+        lastItemMessage.user.id === client.userID
       ) {
         setIsUnreadNotificationOpen(false);
         return;
       }
-
       if (unreadIndicatorDate && lastItemDate > unreadIndicatorDate) {
         setIsUnreadNotificationOpen(true);
       } else {
         setIsUnreadNotificationOpen(false);
       }
     }
-  };
+  });
 
   /**
    * FlatList doesn't accept changeable function for onViewableItemsChanged prop.
@@ -451,7 +493,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
   const onViewableItemsChanged = useRef(unstableOnViewableItemsChanged);
   onViewableItemsChanged.current = unstableOnViewableItemsChanged;
 
-  const stableOnViwableItemsChanged = useCallback(
+  const stableOnViewableItemsChanged = useCallback(
     ({ viewableItems }: { viewableItems: ViewToken[] | undefined }) => {
       onViewableItemsChanged.current({ viewableItems });
     },
@@ -476,24 +518,53 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
    * Effect to mark the channel as read when the user scrolls to the bottom of the message list.
    */
   useEffect(() => {
-    const listener: ReturnType<typeof channel.on> = channel.on('message.new', (event) => {
-      const newMessageToCurrentChannel = event.cid === channel.cid;
-      const mainChannelUpdated = !event.message?.parent_id || event.message?.show_in_channel;
+    const shouldMarkRead = () => {
+      return (
+        !channelUnreadState?.first_unread_message_id &&
+        !scrollToBottomButtonVisible &&
+        client.user?.id &&
+        !hasReadLastMessage(channel, client.user?.id)
+      );
+    };
 
-      if (newMessageToCurrentChannel && mainChannelUpdated && !scrollToBottomButtonVisible) {
-        markRead();
+    const handleEvent = async (event: Event) => {
+      const mainChannelUpdated = !event.message?.parent_id || event.message?.show_in_channel;
+      // When the scrollToBottomButtonVisible is true, we need to manually update the channelUnreadState.
+      if (scrollToBottomButtonVisible || channelUnreadState?.first_unread_message_id) {
+        setChannelUnreadState((prev) => {
+          const previousUnreadCount = prev?.unread_messages ?? 0;
+          const previousLastMessage = getPreviousLastMessage(channel.state.messages, event.message);
+          return {
+            ...(prev || {}),
+            last_read:
+              prev?.last_read ??
+              (previousUnreadCount === 0 && previousLastMessage?.created_at
+                ? new Date(previousLastMessage.created_at)
+                : new Date(0)), // not having information about the last read message means the whole channel is unread,
+            unread_messages: previousUnreadCount + 1,
+          };
+        });
+      } else if (mainChannelUpdated && shouldMarkRead()) {
+        await markRead();
       }
-    });
+    };
+
+    const listener: ReturnType<typeof channel.on> = channel.on('message.new', handleEvent);
 
     return () => {
       listener?.unsubscribe();
     };
-  }, [channel, markRead, scrollToBottomButtonVisible]);
+  }, [
+    channel,
+    channelUnreadState?.first_unread_message_id,
+    client.user?.id,
+    markRead,
+    scrollToBottomButtonVisible,
+    setChannelUnreadState,
+    threadList,
+  ]);
 
   useEffect(() => {
-    const lastReceivedMessage = getLastReceivedMessage(processedMessageList);
-    setLastReceivedId(lastReceivedMessage?.id);
-
     /**
      * Scroll down when
      * created_at timestamp of top message before update is lesser than created_at timestamp of top message after update - channel has resynced
@@ -589,7 +660,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [channel, rawMessageList, threadList]);
 
-  const goToMessage = async (messageId: string) => {
+  const goToMessage = useStableCallback(async (messageId: string) => {
     const indexOfParentInMessageList = processedMessageList.findIndex(
       (message) => message?.id === messageId,
     );
@@ -617,7 +688,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     } catch (e) {
       console.warn('Error while scrolling to message', e);
     }
-  };
+  });
 
   /**
    * Check if a messageId needs to be scrolled to after list loads, and scroll to it
@@ -660,72 +731,101 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
   // TODO: do not apply on RN 0.73 and above
   const shouldApplyAndroidWorkaround = inverted && Platform.OS === 'android';
 
-  const renderItem = ({ index, item: message }: { index: number; item: MessageType }) => {
-    if (!channel || channel.disconnected || (!channel.initialized && !channel.offlineMode)) {
-      return null;
-    }
+  const renderItem = useCallback(
+    ({ index, item: message }: { index: number; item: LocalMessage }) => {
+      if (!channel || channel.disconnected || (!channel.initialized && !channel.offlineMode)) {
+        return null;
+      }
 
-    const createdAtTimestamp = message.created_at && new Date(message.created_at).getTime();
-    const lastReadTimestamp = channelUnreadState?.last_read.getTime();
-    const isNewestMessage = index === 0;
-    const isLastReadMessage =
-      channelUnreadState?.last_read_message_id === message.id ||
-      (!channelUnreadState?.unread_messages && createdAtTimestamp === lastReadTimestamp);
-
-    const showUnreadSeparator =
-      isLastReadMessage &&
-      !isNewestMessage &&
-      // The `channelUnreadState?.first_unread_message_id` is here for sent messages unread label
-      (!!channelUnreadState?.first_unread_message_id || !!channelUnreadState?.unread_messages);
-
-    const showUnreadUnderlay = !!shouldShowUnreadUnderlay && showUnreadSeparator;
-
-    const wrapMessageInTheme = client.userID === message.user?.id && !!myMessageTheme;
-    const renderDateSeperator = isMessageWithStylesReadByAndDateSeparator(message) &&
-      message.dateSeparator && <InlineDateSeparator date={message.dateSeparator} />;
-    const renderMessage = (
-      <Message
-        goToMessage={goToMessage}
-        groupStyles={isMessageWithStylesReadByAndDateSeparator(message) ? message.groupStyles : []}
-        isTargetedMessage={highlightedMessageId === message.id}
-        lastReceivedId={
-          lastReceivedId === message.id || message.quoted_message_id ? lastReceivedId : undefined
-        }
-        message={message}
-        onThreadSelect={onThreadSelect}
-        showUnreadUnderlay={showUnreadUnderlay}
-        style={[messageContainer]}
-        threadList={threadList}
-      />
-    );
+      const createdAtTimestamp = message.created_at && new Date(message.created_at).getTime();
+      const lastReadTimestamp = channelUnreadState?.last_read.getTime();
+      const isNewestMessage = index === 0;
+      const isLastReadMessage =
+        channelUnreadState?.last_read_message_id === message.id ||
+        (!channelUnreadState?.unread_messages && createdAtTimestamp === lastReadTimestamp);
 
-    return (
-      <View
-        style={[shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined]}
-        testID={`message-list-item-${index}`}
-      >
-        {message.type === 'system' ? (
-          <MessageSystem
-            message={message}
-            style={[{ paddingHorizontal: screenPadding }, messageContainer]}
-          />
-        ) : wrapMessageInTheme ? (
-          <ThemeProvider mergedStyle={modifiedTheme}>
+      const showUnreadSeparator =
+        isLastReadMessage &&
+        !isNewestMessage &&
+        // The `channelUnreadState?.first_unread_message_id` is here for sent messages unread label
+        (!!channelUnreadState?.first_unread_message_id || !!channelUnreadState?.unread_messages);
+
+      const showUnreadUnderlay = !!shouldShowUnreadUnderlay && showUnreadSeparator;
+
+      const wrapMessageInTheme = client.userID === message.user?.id && !!myMessageTheme;
+      const renderDateSeperator = dateSeparatorsRef.current[message.id] && (
+        <InlineDateSeparator date={dateSeparatorsRef.current[message.id]} />
+      );
+
+      const renderMessage = (
+        <Message
+          goToMessage={goToMessage}
+          groupStyles={messageGroupStylesRef.current[message.id] ?? []}
+          isTargetedMessage={highlightedMessageId === message.id}
+          lastReceivedId={
+            lastReceivedId === message.id || message.quoted_message_id ? lastReceivedId : undefined
+          }
+          message={message}
+          onThreadSelect={onThreadSelect}
+          showUnreadUnderlay={showUnreadUnderlay}
+          style={[messageContainer]}
+          threadList={threadList}
+        />
+      );
+
+      return (
+        <View
+          style={[shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined]}
+          testID={`message-list-item-${index}`}
+        >
+          {message.type === 'system' ? (
+            <MessageSystem
+              message={message}
+              style={[{ paddingHorizontal: screenPadding }, messageContainer]}
+            />
+          ) : wrapMessageInTheme ? (
+            <ThemeProvider mergedStyle={modifiedTheme}>
+              <View testID={`message-list-item-${index}`}>
+                {renderDateSeperator}
+                {renderMessage}
+              </View>
+            </ThemeProvider>
+          ) : (
             <View testID={`message-list-item-${index}`}>
               {renderDateSeperator}
               {renderMessage}
             </View>
-          </ThemeProvider>
-        ) : (
-          <View testID={`message-list-item-${index}`}>
-            {renderDateSeperator}
-            {renderMessage}
-          </View>
-        )}
-        {showUnreadUnderlay && <InlineUnreadIndicator />}
-      </View>
-    );
-  };
+          )}
+          {showUnreadUnderlay && <InlineUnreadIndicator />}
+        </View>
+      );
+    },
+    [
+      InlineDateSeparator,
+      InlineUnreadIndicator,
+      Message,
+      MessageSystem,
+      channel,
+      channelUnreadState?.first_unread_message_id,
+      channelUnreadState?.last_read,
+      channelUnreadState?.last_read_message_id,
+      channelUnreadState?.unread_messages,
+      client.userID,
+      dateSeparatorsRef,
+      goToMessage,
+      highlightedMessageId,
+      lastReceivedId,
+      messageContainer,
+      messageGroupStylesRef,
+      modifiedTheme,
+      myMessageTheme,
+      onThreadSelect,
+      screenPadding,
+      shouldApplyAndroidWorkaround,
+      shouldShowUnreadUnderlay,
+      threadList,
+    ],
+  );
 
   /**
    * We are keeping full control on message pagination, and not relying on react-native for it.
@@ -750,7 +850,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
    * 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 () => {
+  const maybeCallOnStartReached = useStableCallback(async () => {
     // If onStartReached has already been called for given data length, then ignore.
     if (
       processedMessageList?.length &&
@@ -787,14 +887,14 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     )
       .then(callback)
       .catch(onError);
-  };
+  });
 
   /**
    * 1. Makes a call to `loadMore` function, which queries more older messages.
    * 2. Ensures that we call `loadMore`, once per content length
    * 3. If the call to `loadMoreRecent` is in progress, we wait for it to finish to make sure scroll doesn't jump.
    */
-  const maybeCallOnEndReached = async () => {
+  const maybeCallOnEndReached = useStableCallback(async () => {
     // If onEndReached has already been called for given messageList length, then ignore.
     if (processedMessageList?.length && onEndReachedTracker.current[processedMessageList.length]) {
       return;
@@ -823,9 +923,9 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     onEndReachedInPromise.current = (threadList ? loadMoreThread() : loadMore())
       .then(callback)
       .catch(onError);
-  };
+  });
 
-  const onUserScrollEvent: NonNullable<ScrollViewProps['onScroll']> = (event) => {
+  const onUserScrollEvent: NonNullable<ScrollViewProps['onScroll']> = useStableCallback((event) => {
     const nativeEvent = event.nativeEvent;
     clearTimeout(onScrollEventTimeoutRef.current);
     const offset = nativeEvent.contentOffset.y;
@@ -846,9 +946,9 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     if (isScrollAtEnd) {
       maybeCallOnEndReached();
     }
-  };
+  });
 
-  const handleScroll: ScrollViewProps['onScroll'] = (event) => {
+  const handleScroll: ScrollViewProps['onScroll'] = useStableCallback((event) => {
     const messageListHasMessages = processedMessageList.length > 0;
     const offset = event.nativeEvent.contentOffset.y;
     // Show scrollToBottom button once scroll position goes beyond 150.
@@ -870,9 +970,9 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     if (onListScroll) {
       onListScroll(event);
     }
-  };
+  });
 
-  const goToNewMessages = async () => {
+  const goToNewMessages = useStableCallback(async () => {
     const isNotLatestSet = channel.state.messages !== channel.state.latestMessages;
 
     if (isNotLatestSet) {
@@ -886,11 +986,18 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     }
 
     setScrollToBottomButtonVisible(false);
-  };
+    /**
+     *  When we are not in the bottom of the list, and we receive new messages, we need to mark the channel as read.
+     We would still need to show the unread label, where the first unread message appeared so we don't update the channelUnreadState.
+     */
+    await markRead({
+      updateChannelUnreadState: false,
+    });
+  });
 
   const scrollToIndexFailedRetryCountRef = useRef<number>(0);
   const failScrollTimeoutId = useRef<ReturnType<typeof setTimeout>>(undefined);
-  const onScrollToIndexFailedRef = useRef<FlatListProps<MessageType>['onScrollToIndexFailed']>(
+  const onScrollToIndexFailedRef = useRef<FlatListProps<LocalMessage>['onScrollToIndexFailed']>(
     (info) => {
       // We got a failure as we tried to scroll to an item that was outside the render length
       if (!flatListRef.current) {
@@ -975,7 +1082,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
       isListActive &&
       ((threadList && thread) || (!threadList && !thread))
     ) {
-      setMessages(messagesWithImages as MessageType[]);
+      setMessages(messagesWithImages as LocalMessage[]);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
@@ -987,35 +1094,35 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     threadList,
   ]);
 
-  const dismissImagePicker = () => {
+  const dismissImagePicker = useStableCallback(() => {
     if (selectedPicker) {
       setSelectedPicker(undefined);
       closePicker();
     }
-  };
+  });
 
-  const onScrollBeginDrag: ScrollViewProps['onScrollBeginDrag'] = (event) => {
+  const onScrollBeginDrag: ScrollViewProps['onScrollBeginDrag'] = useStableCallback((event) => {
     !hasMoved && selectedPicker && setHasMoved(true);
     onUserScrollEvent(event);
-  };
+  });
 
-  const onScrollEndDrag: ScrollViewProps['onScrollEndDrag'] = (event) => {
+  const onScrollEndDrag: ScrollViewProps['onScrollEndDrag'] = useStableCallback((event) => {
     hasMoved && selectedPicker && setHasMoved(false);
     onUserScrollEvent(event);
-  };
+  });
 
-  const refCallback = (ref: FlatListType<MessageType>) => {
+  const refCallback = useStableCallback((ref: FlatListType<LocalMessage>) => {
     flatListRef.current = ref;
 
     if (setFlatListRef) {
       setFlatListRef(ref);
     }
-  };
+  });
 
-  const onUnreadNotificationClose = async () => {
+  const onUnreadNotificationClose = useStableCallback(async () => {
     await markRead();
     setIsUnreadNotificationOpen(false);
-  };
+  });
 
   const debugRef = useDebugContext();
 
@@ -1076,6 +1183,25 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     additionalFlatListPropsExcludingStyle = rest;
   }
 
+  const flatListStyle = useMemo(
+    () => [
+      styles.listContainer,
+      listContainer,
+      additionalFlatListProps?.style,
+      shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined,
+    ],
+    [additionalFlatListProps?.style, listContainer, shouldApplyAndroidWorkaround],
+  );
+
+  const flatListContentContainerStyle = useMemo(
+    () => [
+      styles.contentContainer,
+      additionalFlatListProps?.contentContainerStyle,
+      contentContainer,
+    ],
+    [additionalFlatListProps?.contentContainerStyle, contentContainer],
+  );
+
   if (!FlatList) {
     return null;
   }
@@ -1100,11 +1226,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
         </View>
       ) : (
         <FlatList
-          contentContainerStyle={[
-            styles.contentContainer,
-            additionalFlatListProps?.contentContainerStyle,
-            contentContainer,
-          ]}
+          contentContainerStyle={flatListContentContainerStyle}
           /** Disables the MessageList UI. Which means, message actions, reactions won't work. */
           data={processedMessageList}
           extraData={disabled}
@@ -1120,10 +1242,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
             minIndexForVisible = 1 means that beyond the item at index 1 we will not change the position on list updates,
             however it is not used when autoscrollToTopThreshold = 10.
           */
-          maintainVisibleContentPosition={{
-            autoscrollToTopThreshold: autoscrollToRecent ? 10 : undefined,
-            minIndexForVisible: 1,
-          }}
+          maintainVisibleContentPosition={maintainVisibleContentPosition}
           maxToRenderPerBatch={30}
           onMomentumScrollEnd={onUserScrollEvent}
           onScroll={handleScroll}
@@ -1131,17 +1250,12 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
           onScrollEndDrag={onScrollEndDrag}
           onScrollToIndexFailed={onScrollToIndexFailedRef.current}
           onTouchEnd={dismissImagePicker}
-          onViewableItemsChanged={stableOnViwableItemsChanged}
+          onViewableItemsChanged={stableOnViewableItemsChanged}
           ref={refCallback}
           renderItem={renderItem}
           scrollEnabled={overlay === 'none'}
           showsVerticalScrollIndicator={!shouldApplyAndroidWorkaround}
-          style={[
-            styles.listContainer,
-            listContainer,
-            additionalFlatListProps?.style,
-            shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined,
-          ]}
+          style={flatListStyle}
           testID='message-flat-list'
           viewabilityConfig={flatListViewabilityConfig}
           {...additionalFlatListPropsExcludingStyle}
@@ -1191,6 +1305,7 @@ export const MessageList = (props: MessageListProps) => {
     NetworkDownIndicator,
     reloadChannel,
     scrollToFirstUnreadThreshold,
+    setChannelUnreadState,
     setTargetedMessage,
     StickyHeader,
     targetedMessage,
@@ -1255,6 +1370,7 @@ export const MessageList = (props: MessageListProps) => {
         ScrollToBottomButton,
         scrollToFirstUnreadThreshold,
         selectedPicker,
+        setChannelUnreadState,
         setMessages,
         setSelectedPicker,
         setTargetedMessage,