stream-chat-react-native-core 9.12.1 → 10.0.0-beta.2

package/src/components/MessageList/MessageList.tsx

@@ -14,18 +14,25 @@ import Animated from 'react-native-reanimated';
 
 import debounce from 'lodash/debounce';
 
-import type { Channel, Event, LocalMessage, MessageResponse } from 'stream-chat';
+import type { LocalMessage, Thread } from 'stream-chat';
 
+import { useMarkRead } from './hooks/useMarkRead';
 import { useMessageList } from './hooks/useMessageList';
+import { useMessageListFocus } from './hooks/useMessageListFocus';
+import { useMessageListLiveState } from './hooks/useMessageListLiveState';
+import { useMessageListPagination } from './hooks/useMessageListPagination';
+import { useOwnUnreadCount } from './hooks/useOwnUnreadCount';
 import { useScrollToBottomAccessibilityAction } from './hooks/useScrollToBottomAccessibilityAction';
 import { useShouldScrollToRecentOnNewOwnMessage } from './hooks/useShouldScrollToRecentOnNewOwnMessage';
+import { useStickyHeaderDate } from './hooks/useStickyHeaderDate';
+import { useUnreadNotificationVisibility } from './hooks/useUnreadNotificationVisibility';
 
 import { InlineLoadingMoreIndicator } from './InlineLoadingMoreIndicator';
 import { InlineLoadingMoreRecentIndicator } from './InlineLoadingMoreRecentIndicator';
-import { InlineLoadingMoreRecentThreadIndicator } from './InlineLoadingMoreRecentThreadIndicator';
 
 import {
   buildMessageListWithNeighbours,
+  getMessageListItemCacheKey,
   MessageListItemWithNeighbours,
 } from './utils/buildMessageListWithNeighbours';
 
@@ -40,8 +47,8 @@ import {
 
 import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
 import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
-import { useDebugContext } from '../../contexts/debugContext/DebugContext';
 
+import { usePendingUploadsEnabled } from '../../contexts/messageInputContext/hooks/usePendingUploadsEnabled';
 import {
   MessageInputContextValue,
   useMessageInputContext,
@@ -58,10 +65,6 @@ import {
   OwnCapabilitiesContextValue,
   useOwnCapabilitiesContext,
 } from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
-import {
-  PaginatedMessageListContextValue,
-  usePaginatedMessageListContext,
-} from '../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
 import { mergeThemes, useTheme } from '../../contexts/themeContext/ThemeContext';
 import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 
@@ -73,11 +76,13 @@ import { primitives } from '../../theme';
 import type { ViewabilityConfig, ViewToken } from '../../types/react-native-compat';
 import { transitions } from '../../utils/animations/transitions';
 import { useIncomingMessageAnnouncements } from '../Accessibility/hooks/useIncomingMessageAnnouncements';
+import { MarkReadFunctionOptions } from '../Channel/Channel';
 import { MessageWrapper } from '../Message/MessageItemView/MessageWrapper';
 import { excludeCanceledUploadNotifications } from '../Notifications/notificationFilters';
+import { ThreadFooterComponent } from '../Thread/components/ThreadFooterComponent';
 import { PortalWhileClosingView } from '../UIComponents';
 
-// This is just to make sure that the scrolling happens in a different task queue.
+// Zero-delay timeout that moves scrolling to a later task.
 // TODO: Think if we really need this and strive to remove it if we can.
 const WAIT_FOR_SCROLL_TIMEOUT = 0;
 const MAX_RETRIES_AFTER_SCROLL_FAILURE = 10;
@@ -118,12 +123,7 @@ const useStyles = () => {
           ...container,
         },
         contentContainer: {
-          /**
-           * paddingBottom is set to 4 to account for the default date
-           * header and inline indicator alignment. The top margin is 8
-           * on the header but 4 on the inline date, this adjusts the spacing
-           * to allow the "first" inline date to align with the date header.
-           */
+          // 4 aligns the first inline date (top margin 4) with the date header (top margin 8).
           paddingBottom: 4,
           ...contentContainer,
         },
@@ -167,138 +167,62 @@ const useStyles = () => {
   );
 };
 
-const keyExtractor = (derivedItem: MessageListItemWithNeighbours) => {
-  const { message: item } = derivedItem;
-  if (item.id) {
-    return item.id;
-  }
-  if (item.created_at) {
-    return typeof item.created_at === 'string' ? item.created_at : item.created_at.toISOString();
-  }
-  return Date.now().toString();
-};
+// Delegates to the neighbour-cache key so the render key and the cache key cannot drift apart.
+const keyExtractor = (derivedItem: MessageListItemWithNeighbours, index: number) =>
+  getMessageListItemCacheKey(derivedItem.message, index);
 
 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' | 'attachmentPickerStore'
 > &
   Pick<OwnCapabilitiesContextValue, 'readEvents'> &
-  Pick<
-    ChannelContextValue,
-    | 'channel'
-    | 'channelUnreadStateStore'
-    | 'disabled'
-    | 'hideStickyDateHeader'
-    | 'loadChannelAroundMessage'
-    | 'loading'
-    | 'markRead'
-    | 'reloadChannel'
-    | 'scrollToFirstUnreadThreshold'
-    | 'setChannelUnreadState'
-    | 'setTargetedMessage'
-    | 'targetedMessage'
-    | 'threadList'
-    | 'maximumMessageLimit'
-  > &
-  Pick<ChatContextValue, 'client'> &
-  Pick<PaginatedMessageListContextValue, 'loadMore' | 'loadMoreRecent' | 'hasMore'> &
-  Pick<
-    MessagesContextValue,
-    'disableTypingIndicator' | 'FlatList' | 'myMessageTheme' | 'shouldShowUnreadUnderlay'
-  > &
-  Pick<
-    MessageInputContextValue,
-    'allowSendBeforeAttachmentsUpload' | 'messageInputFloating' | 'messageInputHeightStore'
-  > &
-  Pick<
-    ThreadContextValue,
-    'loadMoreRecentThread' | 'loadMoreThread' | 'threadHasMore' | 'thread' | 'threadInstance'
-  > & {
+  Pick<ChannelContextValue, 'channel' | 'disabled' | 'hideStickyDateHeader'> &
+  Pick<ChatContextValue, 'client'> & {
+    markRead: (options?: MarkReadFunctionOptions) => void;
+  } & Pick<MessagesContextValue, 'disableTypingIndicator' | 'FlatList' | 'myMessageTheme'> &
+  Pick<MessageInputContextValue, 'messageInputFloating' | 'messageInputHeightStore'> &
+  Pick<ThreadContextValue, 'thread'> & {
     /**
-     * Besides existing (default) UX behavior of underlying FlatList of MessageList component, if you want
-     * to attach some additional props to underlying FlatList, you can add it to following prop.
-     *
-     * You can find list of all the available FlatList props here - https://facebook.github.io/react-native/docs/flatlist#props
-     *
-     * **NOTE** Don't use `additionalFlatListProps` to get access to ref of flatlist. Use `setFlatListRef` instead.
-     *
-     * e.g.
-     * ```js
-     * <MessageList
-     *  additionalFlatListProps={{ bounces: true, keyboardDismissMode: true }} />
-     * ```
+     * Whether a message can be sent while its attachments are still uploading. Read from
+     * `messageComposer.attachments.pendingUploadsEnabled` by default.
+     */
+    pendingUploadsEnabled: boolean;
+    /**
+     * Extra props for the underlying FlatList, applied over the defaults. To get the list ref, use
+     * `setFlatListRef`.
      */
     additionalFlatListProps?: Partial<FlatListProps<MessageListItemWithNeighbours>>;
     /**
-     * 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`
-     * from context.
-     *
-     * This is a [ListHeaderComponent](https://facebook.github.io/react-native/docs/flatlist#listheadercomponent) of FlatList
-     * used in MessageList. Should be used for header by default if inverted is true or defaulted
+     * Rendered as the list footer, which is the older-message end when inverted. Receives
+     * `loadingMore`. Defaults to `ThreadFooterComponent` in a thread, `InlineLoadingMoreIndicator`
+     * otherwise.
      */
-    FooterComponent?: React.ComponentType;
+    FooterComponent?: React.ComponentType<{ loadingMore?: boolean }>;
     /**
-     * UI component for header of message list. By default message list will use `InlineLoadingMoreRecentIndicator`
-     * as HeaderComponent. If you want to implement your own inline loading indicator, you can access `loadingMoreRecent`
-     * from context.
-     *
-     * This is a [ListFooterComponent](https://facebook.github.io/react-native/docs/flatlist#listheadercomponent) of FlatList
-     * used in MessageList. Should be used for header if inverted is false
+     * Rendered as the list header, which is the newest-message end when inverted. Defaults to the
+     * loading-more-recent indicator followed by the typing indicator.
      */
     HeaderComponent?: React.ComponentType;
-    /** Whether or not the FlatList is inverted. Defaults to true */
+    /** Whether the FlatList is inverted. Defaults to true. */
     inverted?: boolean;
-    /** Turn off grouping of messages by user */
+    /** Turns off grouping of messages by user. */
     noGroupByUser?: boolean;
     onListScroll?: ScrollViewProps['onScroll'];
     /**
-     * Handler to open the thread on message. This is callback for touch event for replies button.
-     *
-     * @param message A message object to open the thread upon.
-     */
-    onThreadSelect?: (message: ThreadContextValue['thread']) => void;
-    /**
-     * Use `setFlatListRef` to get access to ref to inner FlatList.
+     * Called when the replies button of a message is pressed.
      *
-     * e.g.
-     * ```js
-     * <MessageList
-     *  setFlatListRef={(ref) => {
-     *    // Use ref for your own good
-     *  }}
-     * ```
+     * @param thread The thread of the message, to render in a `<Thread thread={thread}>`.
      */
+    onThreadSelect?: (thread: Thread) => void;
+    /** Receives the ref of the inner FlatList. */
     setFlatListRef?: (ref: FlatListType<MessageListItemWithNeighbours> | null) => void;
     /**
-     * If true, the message list will be used in a live-streaming scenario.
-     * This flag is used to make sure that the auto scroll behaves well, if multiple messages are received.
-     *
-     * This flag is experimental and is subject to change. Please test thoroughly before using it.
+     * Tunes autoscroll for live-streaming scenarios, where many messages arrive in a short time.
+     * Defaults to false.
      *
      * @experimental
      */
@@ -310,62 +234,39 @@ const messageInputHeightStoreSelector = (state: MessageInputHeightState) => ({
   height: state.height,
 });
 
-/**
- * The message list component renders a list of messages. It consumes the following contexts:
- *
- * [ChannelContext](https://getstream.io/chat/docs/sdk/reactnative/contexts/channel-context/)
- * [ChatContext](https://getstream.io/chat/docs/sdk/reactnative/contexts/chat-context/)
- * [MessagesContext](https://getstream.io/chat/docs/sdk/reactnative/contexts/messages-context/)
- * [ThreadContext](https://getstream.io/chat/docs/sdk/reactnative/contexts/thread-context/)
- * [TranslationContext](https://getstream.io/chat/docs/sdk/reactnative/contexts/translation-context/)
- */
+/** Renders the list of messages in a FlatList. */
 const MessageListWithContext = (props: MessageListPropsWithContext) => {
-  const LoadingMoreRecentIndicator = props.threadList
-    ? InlineLoadingMoreRecentThreadIndicator
-    : InlineLoadingMoreRecentIndicator;
   const {
-    allowSendBeforeAttachmentsUpload,
     animateLayout = true,
     attachmentPickerStore,
     additionalFlatListProps,
     channel,
-    channelUnreadStateStore,
     client,
     closePicker,
     disabled,
     disableTypingIndicator,
     FlatList,
-    FooterComponent = InlineLoadingMoreIndicator,
+    FooterComponent: FooterComponentProp,
     HeaderComponent,
     hideStickyDateHeader,
     inverted = true,
     isLiveStreaming = false,
-    loadChannelAroundMessage,
-    loading,
-    loadMore,
-    loadMoreRecent,
-    loadMoreRecentThread,
-    loadMoreThread,
     markRead,
-    maximumMessageLimit,
     messageInputFloating,
     messageInputHeightStore,
     myMessageTheme,
+    pendingUploadsEnabled,
     noGroupByUser,
     onListScroll,
     onThreadSelect,
     readEvents,
-    reloadChannel,
-    setChannelUnreadState,
     setFlatListRef,
-    setTargetedMessage,
-    targetedMessage,
     thread,
-    threadInstance,
-    threadList = false,
-    hasMore,
-    threadHasMore,
   } = props;
+
+  // Inside a thread the parent message and the older-replies indicator sit above the replies.
+  const FooterComponent =
+    FooterComponentProp ?? (thread ? ThreadFooterComponent : InlineLoadingMoreIndicator);
   const {
     EmptyStateIndicator,
     MessageListLoadingIndicator: LoadingIndicator,
@@ -378,19 +279,18 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     UnreadMessagesNotification,
     AutoCompleteSuggestionList,
   } = useComponentsContext();
-  const [isUnreadNotificationOpen, setIsUnreadNotificationOpen] = useState<boolean>(false);
   const { theme } = useTheme();
   const styles = useStyles();
   const { height: messageInputHeight } = useStateStore(
     messageInputHeightStore.store,
     messageInputHeightStoreSelector,
   );
+  const paginator = thread ? thread.messagePaginator : channel.messagePaginator;
 
   useIncomingMessageAnnouncements({
     activeThreadId: thread?.id,
     channel,
     ownUserId: client.user?.id,
-    threadList,
   });
 
   const myMessageThemeString = useMemo(() => JSON.stringify(myMessageTheme), [myMessageTheme]);
@@ -402,14 +302,27 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     [myMessageThemeString, scheme, theme],
   );
 
-  /**
-   * NOTE: rawMessageList changes only when messages array state changes
-   * processedMessageList changes on any state change
-   */
-  const { processedMessageList, rawMessageList, viewabilityChangedCallback } = useMessageList({
-    isLiveStreaming,
-    threadList,
+  const { maxLoadedItems, processedMessageList, rawMessageList, viewabilityChangedCallback } =
+    useMessageList({ isLiveStreaming, paginator });
+  const { loading, loadingMore, loadingMoreRecent, loadMore, loadMoreRecent } =
+    useMessageListPagination(paginator);
+  const { focusedMessageId, focusToken, goToMessage } = useMessageListFocus(paginator);
+  const reportViewableMessages = useMessageListLiveState({
+    channel,
+    markRead,
+    paginator,
+    thread,
+    userId: client.user?.id,
   });
+  const { stickyHeaderDate, updateStickyHeaderDate } = useStickyHeaderDate();
+  const { isUnreadNotificationOpen, onUnreadNotificationClose, updateUnreadNotification } =
+    useUnreadNotificationVisibility({
+      attachmentPickerStore,
+      channel,
+      markRead,
+      readEvents,
+      userId: client.userId,
+    });
 
   const previousDerivedItemsRef = useRef<Map<string, MessageListItemWithNeighbours>>(undefined);
 
@@ -438,29 +351,19 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     );
   });
 
-  const messageListLengthBeforeUpdate = useRef(0);
-  const messageListLengthAfterUpdate = processedMessageList.length;
-
-  /**
-   * 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<LocalMessage>(undefined);
   const latestNonCurrentMessageBeforeUpdateRef = useRef<LocalMessage>(undefined);
-  const topMessageAfterUpdate: LocalMessage | undefined = rawMessageList[0];
 
   const shouldScrollToRecentOnNewOwnMessageRef = useShouldScrollToRecentOnNewOwnMessage(
     rawMessageList,
-    client.userID,
+    client.userId,
   );
 
   const [autoscrollToRecent, setAutoscrollToRecent] = useState(false);
 
   const minIndexForVisible = Math.min(1, processedMessageList.length);
 
-  // While the message overlay is open we suppress autoscroll-to-recent so that
-  // incoming messages do not shift visible content and invalidate the overlay's
-  // anchored geometry. Content anchoring (minIndexForVisible) stays on.
+  // Autoscroll-to-recent is suppressed while the message overlay is open, so incoming messages do
+  // not shift content under the overlay's anchored geometry. `minIndexForVisible` stays on.
   const isOverlayOpen = useHasActiveId();
 
   const autoscrollToTopThreshold =
@@ -474,148 +377,13 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     [autoscrollToTopThreshold, minIndexForVisible],
   );
 
-  /**
-   * 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.
-   */
-  const onStartReachedTracker = useRef<Record<number, boolean>>({});
-  const onEndReachedTracker = useRef<Record<number, boolean>>({});
-
-  const onStartReachedInPromise = useRef<Promise<void> | null>(null);
-  const onEndReachedInPromise = useRef<Promise<void> | null>(null);
-
   const flatListRef = useRef<FlatListType<MessageListItemWithNeighbours> | null>(null);
 
-  const channelResyncScrollSet = useRef<boolean>(true);
-
-  /**
-   * The timeout id used to debounce our scrollToIndex calls on messageList updates
-   */
   const scrollToDebounceTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
 
-  /**
-   * The timeout id used to temporarily load the initial scroll set flag
-   */
-  const onScrollEventTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
-
-  /**
-   * Last messageID that was scrolled to after loading a new message list,
-   * this flag keeps track of it so that we dont scroll to it again on target message set
-   */
-  const messageIdLastScrolledToRef = useRef<string>(undefined);
-  const [hasMoved, setHasMoved] = useState(false);
-
   const [scrollToBottomButtonVisible, setScrollToBottomButtonVisible] = useState(false);
 
-  const [stickyHeaderDate, setStickyHeaderDate] = useState<Date | undefined>();
-  const stickyHeaderDateRef = useRef<Date | undefined>(undefined);
-
-  // ref for channel to use in useEffect without triggering it on channel change
-  const channelRef = useRef(channel);
-  channelRef.current = channel;
-
-  const updateStickyHeaderDateIfNeeded = useStableCallback(
-    (viewableItems: ViewToken<MessageListItemWithNeighbours>[]) => {
-      if (!viewableItems.length) {
-        return;
-      }
-
-      const lastMessage = viewableItems[viewableItems.length - 1].item?.message;
-
-      if (lastMessage) {
-        if (
-          !channel.state.messagePagination.hasPrev &&
-          processedMessageList[processedMessageList.length - 1].id === lastMessage.id
-        ) {
-          setStickyHeaderDate(undefined);
-          return;
-        }
-        const isMessageTypeDeleted = lastMessage.type === 'deleted';
-
-        if (
-          lastMessage?.created_at &&
-          !isMessageTypeDeleted &&
-          typeof lastMessage.created_at !== 'string' &&
-          lastMessage.created_at.toDateString() !== stickyHeaderDateRef.current?.toDateString()
-        ) {
-          stickyHeaderDateRef.current = lastMessage.created_at;
-          setStickyHeaderDate(lastMessage.created_at);
-        }
-      }
-    },
-  );
-
-  /**
-   * This function should show or hide the unread indicator depending on the
-   */
-  const updateStickyUnreadIndicator = useStableCallback(
-    (viewableItems: ViewToken<MessageListItemWithNeighbours>[]) => {
-      const channelUnreadState = channelUnreadStateStore.channelUnreadState;
-      // we need this check to make sure that regular list change do not trigger
-      // the unread notification to appear (for example if the old last read messages
-      // go out of the viewport).
-      const lastReadMessageId = channelUnreadState?.last_read_message_id;
-      const lastReadMessageVisible = viewableItems.some(
-        (item) => item.item.message.id === lastReadMessageId,
-      );
-
-      // Channels with disabled `read-events` (i.e livestreams) still surface the unread
-      // notification when the client opted into a local unread count, so the gate accepts
-      // either source.
-      const unreadNotificationSupported = readEvents || client.options.isLocalUnreadCountEnabled;
-
-      if (
-        !viewableItems.length ||
-        !unreadNotificationSupported ||
-        lastReadMessageVisible ||
-        attachmentPickerStore.state.getLatestValue().selectedPicker === 'images'
-      ) {
-        setIsUnreadNotificationOpen(false);
-        return;
-      }
-
-      const lastItem = viewableItems[viewableItems.length - 1].item;
-
-      if (lastItem) {
-        const lastItemMessage = lastItem.message;
-        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 === 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.
-   * Thus useRef.
-   */
+  // FlatList does not accept a changing `onViewableItemsChanged`, hence the ref below.
   const unstableOnViewableItemsChanged = ({
     viewableItems,
   }: {
@@ -626,10 +394,21 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     if (!viewableItems) {
       return;
     }
-    if (!hideStickyDateHeader) {
-      updateStickyHeaderDateIfNeeded(viewableItems);
+    const viewableMessages = viewableItems.map((viewable) => viewable.item.message);
+    // Inverted: the last viewable item is the topmost one on screen.
+    const topVisibleMessage = viewableMessages[viewableMessages.length - 1];
+    const isAtOldestMessage =
+      topVisibleMessage !== undefined &&
+      !paginator?.hasMoreTail &&
+      processedMessageList[processedMessageList.length - 1]?.id === topVisibleMessage.id;
+
+    if (!hideStickyDateHeader && topVisibleMessage) {
+      updateStickyHeaderDate({ isAtOldestMessage, topVisibleMessage });
     }
-    updateStickyUnreadIndicator(viewableItems);
+    if (!thread) {
+      updateUnreadNotification({ isAtOldestMessage, topVisibleMessage, viewableMessages });
+    }
+    reportViewableMessages(viewableMessages);
   };
 
   const onViewableItemsChanged = useRef(unstableOnViewableItemsChanged);
@@ -646,143 +425,20 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     [],
   );
 
-  /**
-   * Resets the pagination trackers, doing so cancels currently scheduled loading more calls
-   */
-  const resetPaginationTrackersRef = useRef(() => {
-    onStartReachedTracker.current = {};
-    onEndReachedTracker.current = {};
-  });
-
   useEffect(() => {
     if (disabled) {
       setScrollToBottomButtonVisible(false);
     }
   }, [disabled]);
 
-  /**
-   * Effect to mark the channel as read when the user scrolls to the bottom of the message list.
-   */
   useEffect(() => {
-    const shouldMarkRead = () => {
-      const channelUnreadState = channelUnreadStateStore.channelUnreadState;
-      return (
-        !channelUnreadState?.first_unread_message_id &&
-        !scrollToBottomButtonVisible &&
-        client.user?.id &&
-        !hasReadLastMessage(channel, client.user?.id)
-      );
-    };
-
-    const handleEvent = async (event: Event) => {
-      const mainChannelUpdated = !event.message?.parent_id || event.message?.show_in_channel;
-      const isMyOwnMessage = event.message?.user?.id === client.user?.id;
-      const channelUnreadState = channelUnreadStateStore.channelUnreadState;
-      // When the scrollToBottomButtonVisible is true, we need to manually update the channelUnreadState when its a received message.
-      if (
-        (scrollToBottomButtonVisible || channelUnreadState?.first_unread_message_id) &&
-        !isMyOwnMessage
-      ) {
-        const previousUnreadCount = channelUnreadState?.unread_messages ?? 0;
-        const previousLastMessage = getPreviousLastMessage(channel.state.messages, event.message);
-        setChannelUnreadState({
-          ...channelUnreadState,
-          last_read:
-            channelUnreadState?.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,
-    channelUnreadStateStore,
-    client.user?.id,
-    markRead,
-    scrollToBottomButtonVisible,
-    setChannelUnreadState,
-    threadList,
-  ]);
-
-  useEffect(() => {
-    /**
-     * Condition to check if a message is removed from MessageList.
-     * Eg: This would happen when giphy search is cancelled, message is deleted with visibility "never" etc.
-     * If such a case arises, we scroll to bottom.
-     */
-    const isMessageRemovedFromMessageList =
-      messageListLengthAfterUpdate < messageListLengthBeforeUpdate.current;
-    /**
-     * 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
-     */
-    const scrollToBottomIfNeeded = () => {
-      if (!client || !channel || rawMessageList.length === 0) {
-        return;
-      }
-
-      if (
-        isMessageRemovedFromMessageList ||
-        (topMessageBeforeUpdate.current?.created_at &&
-          topMessageAfterUpdate?.created_at &&
-          topMessageBeforeUpdate.current.created_at < topMessageAfterUpdate.created_at)
-      ) {
-        channelResyncScrollSet.current = false;
-        setScrollToBottomButtonVisible(false);
-        resetPaginationTrackersRef.current();
-
-        setTimeout(() => {
-          flatListRef.current?.scrollToOffset({
-            offset: 0,
-          });
-        }, WAIT_FOR_SCROLL_TIMEOUT);
-        setTimeout(() => {
-          channelResyncScrollSet.current = true;
-          if (channel.countUnread() > 0) {
-            markRead();
-          }
-        }, 500);
-      }
-    };
-
-    if (threadList || isMessageRemovedFromMessageList) {
-      if (maximumMessageLimit) {
-        // pruning has happened, reset the trackers
-        resetPaginationTrackersRef.current();
-      } else {
-        scrollToBottomIfNeeded();
-      }
-    }
-
-    messageListLengthBeforeUpdate.current = messageListLengthAfterUpdate;
-    topMessageBeforeUpdate.current = topMessageAfterUpdate;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [threadList, messageListLengthAfterUpdate, topMessageAfterUpdate?.id, maximumMessageLimit]);
-
-  useEffect(() => {
-    if (threadList) {
-      setAutoscrollToRecent(true);
-      return;
-    }
-
-    if (!processedMessageList.length) {
+    if (!processedMessageList.length || !paginator) {
+      if (thread) setAutoscrollToRecent(true);
       return;
     }
 
-    const notLatestSet = channel.state.messages !== channel.state.latestMessages;
-    if (notLatestSet) {
-      latestNonCurrentMessageBeforeUpdateRef.current =
-        channel.state.latestMessages[channel.state.latestMessages.length - 1];
+    if (paginator.hasMoreHead) {
+      latestNonCurrentMessageBeforeUpdateRef.current = paginator.latestMessage ?? undefined;
       setAutoscrollToRecent(false);
       setScrollToBottomButtonVisible(true);
       return;
@@ -794,108 +450,68 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
       setAutoscrollToRecent(true);
       return;
     }
-    const didMergeMessageSetsWithNoUpdates =
-      latestNonCurrentMessageBeforeUpdate?.id === latestCurrentMessageAfterUpdate.id;
-    // if didMergeMessageSetsWithNoUpdates=false, we got new messages
-    // so we should scroll to bottom if we are near the bottom already
+    // When the newest message did not change, jumping back to the latest set merged into the
+    // window without anything new; otherwise new messages arrived, so keep following them.
     const shouldForceScrollToRecent =
-      !didMergeMessageSetsWithNoUpdates ||
-      processedMessageList.length - messageListLengthBeforeUpdate.current > 0;
+      latestNonCurrentMessageBeforeUpdate?.id !== latestCurrentMessageAfterUpdate.id;
 
-    // we don't want this behaviour while pruning, as it may scroll unnecessarily in
-    // certain scenarios
-    if ((maximumMessageLimit && shouldForceScrollToRecent) || !maximumMessageLimit) {
+    // While pruning (`maxLoadedItems`), only follow new messages: anything else may scroll
+    // unnecessarily.
+    if ((maxLoadedItems && shouldForceScrollToRecent) || !maxLoadedItems) {
       setAutoscrollToRecent(shouldForceScrollToRecent);
     }
 
-    if (!didMergeMessageSetsWithNoUpdates) {
+    if (shouldForceScrollToRecent) {
       const shouldScrollToRecentOnNewOwnMessage = shouldScrollToRecentOnNewOwnMessageRef.current();
-      // we should scroll to bottom where ever we are now
-      // as we have sent a new own message
+      // A new own message scrolls to the latest wherever the list currently is.
       if (shouldScrollToRecentOnNewOwnMessage) {
         setTimeout(() => {
           flatListRef.current?.scrollToOffset({
             animated: true,
             offset: 0,
           });
-        }, WAIT_FOR_SCROLL_TIMEOUT); // flatlist might take a bit to update, so a small delay is needed
+        }, WAIT_FOR_SCROLL_TIMEOUT); // FlatList may need a moment to update
       }
     }
   }, [
-    channel,
-    threadList,
+    paginator,
+    thread,
     processedMessageList,
     shouldScrollToRecentOnNewOwnMessageRef,
-    maximumMessageLimit,
+    maxLoadedItems,
   ]);
 
-  const goToMessage = useStableCallback(async (messageId: string) => {
-    const indexOfParentInMessageList = processedMessageList.findIndex(
-      (message) => message?.id === messageId,
-    );
-    try {
-      if (indexOfParentInMessageList === -1) {
-        await loadChannelAroundMessage({ messageId });
-        return;
-      } else {
-        if (!flatListRef.current) {
-          return;
-        }
-        clearTimeout(failScrollTimeoutId.current);
-        scrollToIndexFailedRetryCountRef.current = 0;
-        // keep track of this messageId, so that we dont scroll to again in useEffect for targeted message change
-        messageIdLastScrolledToRef.current = messageId;
-        setTargetedMessage(messageId);
-        // now scroll to it with animated=true
-        flatListRef.current.scrollToIndex({
-          animated: true,
-          index: indexOfParentInMessageList,
-          viewPosition: 0.5, // try to place message in the center of the screen
-        });
-        return;
-      }
-    } catch (e) {
-      console.warn('Error while scrolling to message', e);
-    }
-  });
+  const lastFocusScrollTokenRef = useRef<number | undefined>(undefined);
 
-  /**
-   * Check if a messageId needs to be scrolled to after list loads, and scroll to it
-   * Note: This effect fires on every list change with a small debounce so that scrolling isnt abrupted by an immediate rerender
-   */
+  // Scrolls to the focused message (`messageFocusSignal`) once it is rendered. Keyed on the focus
+  // token, so every jump re-fires, even to the same ID, and list changes during the highlight do
+  // not re-scroll.
   useEffect(() => {
-    if (!targetedMessage) {
+    if (!focusedMessageId || focusToken === lastFocusScrollTokenRef.current) {
       return;
     }
-    scrollToDebounceTimeoutRef.current = setTimeout(async () => {
+    scrollToDebounceTimeoutRef.current = setTimeout(() => {
       const indexOfParentInMessageList = processedMessageList.findIndex(
-        (message) => message?.id === targetedMessage,
+        (message) => message?.id === focusedMessageId,
       );
-
-      // the message we want to scroll to has not been loaded in the state yet
-      if (indexOfParentInMessageList === -1) {
-        await loadChannelAroundMessage({ messageId: targetedMessage, setTargetedMessage });
-      } else {
-        if (!flatListRef.current) {
-          return;
-        }
-        // By a fresh scroll we should clear the retries for the previous failed scroll
-        clearTimeout(scrollToDebounceTimeoutRef.current);
-        clearTimeout(failScrollTimeoutId.current);
-        // reset the retry count
-        scrollToIndexFailedRetryCountRef.current = 0;
-        // now scroll to it
-        flatListRef.current.scrollToIndex({
-          animated: true,
-          index: indexOfParentInMessageList,
-          viewPosition: 0.5, // try to place message in the center of the screen
-        });
-        setTargetedMessage(undefined);
+      // Not in the rendered window yet: a later `processedMessageList` change re-runs this effect.
+      if (indexOfParentInMessageList === -1 || !flatListRef.current) {
+        return;
       }
+      clearTimeout(scrollToDebounceTimeoutRef.current);
+      clearTimeout(failScrollTimeoutId.current);
+      scrollToIndexFailedRetryCountRef.current = 0;
+      lastFocusScrollTokenRef.current = focusToken;
+      flatListRef.current.scrollToIndex({
+        animated: true,
+        index: indexOfParentInMessageList,
+        viewPosition: 0.5, // center the message
+      });
+      // The client does not start the highlight's auto-dismiss countdown on emit, as the message
+      // may not be visible yet. Start it now that the message is scrolled into view.
+      paginator?.scheduleMessageFocusSignalClear({ token: focusToken });
     }, WAIT_FOR_SCROLL_TIMEOUT);
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [targetedMessage]);
+  }, [paginator, focusToken, focusedMessageId, processedMessageList]);
 
   const setNativeScrollability = useStableCallback((value: boolean) => {
     if (flatListRef.current) {
@@ -914,145 +530,25 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     [goToMessage, modifiedTheme, noGroupByUser, onThreadSelect, setNativeScrollability],
   );
 
-  /**
-   * We are keeping full control on message pagination, and not relying on react-native for it.
-   * The reasons being,
-   * 1. FlatList doesn't support onStartReached prop
-   * 2. `onEndReached` function prop available on react-native, gets executed
-   *    once per content length (and thats actually a nice optimization strategy).
-   *    But it also means, we always need to prioritize onEndReached above our
-   *    logic for `onStartReached`.
-   * 3. `onEndReachedThreshold` prop decides - at which scroll position to call `onEndReached`.
-   *    Its a factor of content length (which is necessary for "real" infinite scroll). But on
-   *    the other hand, it also makes calls to `onEndReached` (and this `channel.query`) way
-   *    too early during scroll, which we don't really need. So we are going to instead
-   *    keep some fixed offset distance, to decide when to call `loadMore` or `loadMoreRecent`.
-   *
-   * We are still gonna keep the optimization, which react-native does - only call onEndReached
-   * once per content length.
-   */
-
-  /**
-   * How many messages the list pages through are loaded: the thread's replies in a thread list, the
-   * channel's messages otherwise.
-   */
-  const getLoadedMessageCount = useStableCallback(() =>
-    threadList && thread?.id
-      ? (channel?.state.threads[thread.id]?.length ?? 0)
-      : (channel?.state.messages.length ?? 0),
-  );
-
-  /**
-   * 1. Makes a call to `loadMoreRecent` function, which queries more recent messages.
-   * 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 = useStableCallback(async () => {
-    // If onStartReached has already been called for given data length, then ignore.
-    if (
-      processedMessageList?.length &&
-      onStartReachedTracker.current[processedMessageList.length]
-    ) {
-      return;
-    }
-
-    if (processedMessageList?.length) {
-      onStartReachedTracker.current[processedMessageList.length] = true;
-    }
-
-    const callback = (loadedMessageCount: number) => {
-      onStartReachedInPromise.current = null;
-      if (getLoadedMessageCount() === loadedMessageCount) {
-        onError();
-      }
-      return Promise.resolve();
-    };
-
-    const onError = () => {
-      /** Release the onStartReached trigger after 2 seconds, to try again */
-      setTimeout(() => {
-        onStartReachedTracker.current = {};
-      }, 2000);
-    };
-
-    // If onEndReached is in progress, better to wait for it to finish for smooth UX
-    if (onEndReachedInPromise.current) {
-      await onEndReachedInPromise.current;
-    }
-    const loadedMessageCount = getLoadedMessageCount();
-    onStartReachedInPromise.current = (
-      threadList && !!threadInstance && loadMoreRecentThread
-        ? loadMoreRecentThread({})
-        : loadMoreRecent()
-    )
-      .then(() => callback(loadedMessageCount))
-      .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 = useStableCallback(async () => {
-    const shouldQuery = (threadList && threadHasMore) || (!threadList && hasMore);
-    // If onEndReached has already been called for given messageList length, then ignore.
-    if (
-      (processedMessageList?.length && onEndReachedTracker.current[processedMessageList.length]) ||
-      !shouldQuery
-    ) {
-      return;
-    }
-
-    if (processedMessageList?.length) {
-      onEndReachedTracker.current[processedMessageList.length] = true;
-    }
-
-    const callback = (loadedMessageCount: number) => {
-      onEndReachedInPromise.current = null;
-      if (getLoadedMessageCount() === loadedMessageCount) {
-        onError();
-      }
-      return Promise.resolve();
-    };
-
-    const onError = () => {
-      /** Release the onEndReachedTracker trigger after 2 seconds, to try again */
-      setTimeout(() => {
-        onEndReachedTracker.current = {};
-      }, 2000);
-    };
-
-    // If onStartReached is in progress, better to wait for it to finish for smooth UX
-    if (onStartReachedInPromise.current) {
-      await onStartReachedInPromise.current;
-    }
-    const loadedMessageCount = getLoadedMessageCount();
-    onEndReachedInPromise.current = (threadList ? loadMoreThread() : loadMore())
-      .then(() => callback(loadedMessageCount))
-      .catch(onError);
-  });
-
+  // Paginates within 100 points of either edge: FlatList has no `onStartReached`, and
+  // `onEndReachedThreshold` is a fraction of the content length, which fires too early in a long
+  // list.
   const onUserScrollEvent: NonNullable<ScrollViewProps['onScroll']> = useStableCallback((event) => {
     const nativeEvent = event.nativeEvent;
-    clearTimeout(onScrollEventTimeoutRef.current);
     const offset = nativeEvent.contentOffset.y;
     const visibleLength = nativeEvent.layoutMeasurement.height;
     const contentLength = nativeEvent.contentSize.height;
-    if (!channel || !channelResyncScrollSet.current) {
-      return;
-    }
 
-    // Check if scroll has reached either start of end of list.
+    // Inverted: the start of the list is the newest end.
     const isScrollAtStart = offset < 100;
     const isScrollAtEnd = contentLength - visibleLength - offset < 100;
 
     if (isScrollAtStart) {
-      maybeCallOnStartReached();
+      loadMoreRecent();
     }
 
     if (isScrollAtEnd) {
-      maybeCallOnEndReached();
+      loadMore();
     }
   });
 
@@ -1061,18 +557,10 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     const offset = event.nativeEvent.contentOffset.y;
     const isScrollAtBottom = offset <= messageInputHeight;
 
-    const notLatestSet = channel.state.messages !== channel.state.latestMessages;
-
-    const showScrollToBottomButton =
-      messageListHasMessages && ((!threadList && notLatestSet) || !isScrollAtBottom);
-
-    /**
-     * 1. If I scroll up -> show scrollToBottom button.
-     * 2. If I scroll to bottom of screen
-     *    |-> hide scrollToBottom button.
-     *    |-> if channel is unread, call markRead().
-     */
-    setScrollToBottomButtonVisible(showScrollToBottomButton);
+    // The scroll-to-bottom button shows unless the list is at the bottom with no newer messages.
+    setScrollToBottomButtonVisible(
+      messageListHasMessages && (paginator?.hasMoreHead || !isScrollAtBottom),
+    );
 
     if (onListScroll) {
       onListScroll(event);
@@ -1080,11 +568,8 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
   });
 
   const goToNewMessages = useStableCallback(async () => {
-    const isNotLatestSet = channel.state.messages !== channel.state.latestMessages;
-
-    if (isNotLatestSet) {
-      resetPaginationTrackersRef.current();
-      await reloadChannel();
+    if (paginator?.hasMoreHead) {
+      await paginator.jumpToTheLatestMessage();
     } else if (flatListRef.current) {
       flatListRef.current.scrollToOffset({
         animated: true,
@@ -1093,17 +578,20 @@ 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.
-     */
+    // A thread marks itself read while it is open, and the channel underneath keeps its own unread
+    // state, so only a channel list marks read here.
+    if (thread) {
+      return;
+    }
+    // `updateChannelUnreadState: false` keeps the unread label on the first unread message.
     await markRead({
       updateChannelUnreadState: false,
     });
   });
 
-  const scrollToBottomUnreadCount =
-    scrollToBottomButtonVisible && !threadList ? channel?.countUnread() : undefined;
+  const scrollToBottomUnreadCount = useOwnUnreadCount(
+    scrollToBottomButtonVisible && !thread ? channel : undefined,
+  );
   const {
     accessibilityActions: messageListAccessibilityActions,
     onAccessibilityAction: messageListOnAccessibilityAction,
@@ -1120,25 +608,20 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
   const onScrollToIndexFailedRef = useRef<
     FlatListProps<MessageListItemWithNeighbours>['onScrollToIndexFailed']
   >((info) => {
-    // We got a failure as we tried to scroll to an item that was outside the render length
+    // The target item is outside the rendered range.
     if (!flatListRef.current) {
       return;
     }
-    // we don't know the actual size of all items but we can see the average, so scroll to the closest offset
-    // since we used only an average offset... we won't go to the center of the item yet
-    // with a little delay to wait for scroll to offset to complete, we can then scroll to the index
+    // Only the average item size is known, so the list gets a moment to scroll near the target
+    // before the index is scrolled to.
     failScrollTimeoutId.current = setTimeout(() => {
       try {
         flatListRef.current?.scrollToIndex({
           animated: true,
           index: info.index,
-          viewPosition: 0.5, // try to place message in the center of the screen
+          viewPosition: 0.5, // center the message
         });
-        if (messageIdLastScrolledToRef.current) {
-          // in case the target message was cleared out
-          // the state being set again will trigger the highlight again
-          setTargetedMessage(messageIdLastScrolledToRef.current);
-        }
+        // The highlight follows `messageFocusSignal` for its TTL, so retries need no state reset.
         scrollToIndexFailedRetryCountRef.current = 0;
       } catch (e) {
         if (
@@ -1148,17 +631,15 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
           scrollToIndexFailedRetryCountRef.current = 0;
           return;
         }
-        // At some cases the index we're trying to scroll to, doesn't exist yet in the messageList
-        // Scrolling to an index not in range of the Flatlist's data will result in a crash that
-        // won't call onScrollToIndexFailed.
-        // By catching this error we retry scrolling by calling onScrollToIndexFailedRef
+        // The index may not exist in the list data yet. Scrolling to an out-of-range index throws
+        // without calling `onScrollToIndexFailed`, so the error is caught and the scroll retried.
         scrollToIndexFailedRetryCountRef.current += 1;
         onScrollToIndexFailedRef.current(info);
       }
     }, WAIT_FOR_SCROLL_TIMEOUT);
 
-    // Only when index is greater than 0 and in range of items in FlatList
-    // this onScrollToIndexFailed will be called again
+    // FlatList calls `onScrollToIndexFailed` again only when the index is above 0 and within the
+    // data range.
   });
 
   const dismissImagePicker = useStableCallback(() => {
@@ -1168,16 +649,6 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     }
   });
 
-  const onScrollBeginDrag: ScrollViewProps['onScrollBeginDrag'] = useStableCallback((event) => {
-    !hasMoved && attachmentPickerStore.state.getLatestValue().selectedPicker && setHasMoved(true);
-    onUserScrollEvent(event);
-  });
-
-  const onScrollEndDrag: ScrollViewProps['onScrollEndDrag'] = useStableCallback((event) => {
-    hasMoved && attachmentPickerStore.state.getLatestValue().selectedPicker && setHasMoved(false);
-    onUserScrollEvent(event);
-  });
-
   const refCallback = useStableCallback((ref: FlatListType<MessageListItemWithNeighbours>) => {
     flatListRef.current = ref;
 
@@ -1186,28 +657,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     }
   });
 
-  const onUnreadNotificationClose = useStableCallback(async () => {
-    await markRead();
-    setIsUnreadNotificationOpen(false);
-  });
-
-  const debugRef = useDebugContext();
-
-  const isDebugModeEnabled = __DEV__ && debugRef && debugRef.current;
-
-  if (isDebugModeEnabled) {
-    if (debugRef.current.setEventType) {
-      debugRef.current.setEventType('send');
-    }
-    if (debugRef.current.setSendEventParams) {
-      debugRef.current.setSendEventParams({
-        action: thread ? 'ThreadList' : 'Messages',
-        data: processedMessageList,
-      });
-    }
-  }
-
-  // We need to omit the style related props from the additionalFlatListProps and add them directly instead of spreading
+  // `style` and `contentContainerStyle` are merged with the SDK styles below, not spread.
   let additionalFlatListPropsExcludingStyle:
     | Omit<NonNullable<typeof additionalFlatListProps>, 'style' | 'contentContainerStyle'>
     | undefined;
@@ -1223,12 +673,9 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     [additionalFlatListProps?.style, styles.listContainer],
   );
 
-  /**
-   * `strictMode` only became a `FlatList` prop in React Native 0.87, and this SDK supports `>=0.76`.
-   * Passed via spread rather than as a literal attribute because JSX excess-property checking does
-   * not apply to spreads, so this compiles on every supported version. A `@ts-expect-error` cannot
-   * work here: it is required below 0.87 and reported as unused from 0.87 onwards.
-   */
+  // `strictMode` is a `FlatList` prop only from React Native 0.87, and the SDK supports `>=0.79`.
+  // It is passed by spread because JSX excess-property checks skip spreads, so this compiles on
+  // every supported version. A `@ts-expect-error` would be reported as unused from 0.87.
   const liveStreamingListProps = useMemo(
     () => ({ strictMode: isLiveStreaming }),
     [isLiveStreaming],
@@ -1252,16 +699,13 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
 
   const viewportHeightRef = useRef<number>(undefined);
 
-  /**
-   * This debounced callback makes sure that if the current number of messages do not
-   * fill our screen, we load more messages continuously until we cover enough ground.
-   */
+  // Keeps loading more while the content does not fill the viewport.
   const debouncedPrefillMessages = useMemo(
     () =>
       debounce(
         (viewportHeight: number, contentHeight: number) => {
           if (viewportHeight >= contentHeight) {
-            maybeCallOnEndReached();
+            loadMore();
           }
         },
         500,
@@ -1270,7 +714,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
           trailing: true,
         },
       ),
-    [maybeCallOnEndReached],
+    [loadMore],
   );
 
   const onContentSizeChange = useStableCallback((width: number, height: number) => {
@@ -1294,6 +738,11 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     viewportHeightRef.current = nextViewportHeight;
   });
 
+  const ListFooterComponent = useCallback(
+    () => <FooterComponent loadingMore={loadingMore} />,
+    [FooterComponent, loadingMore],
+  );
+
   const ListHeaderComponent = useCallback(() => {
     if (HeaderComponent) {
       return <HeaderComponent />;
@@ -1301,7 +750,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
 
     return (
       <>
-        <LoadingMoreRecentIndicator />
+        <InlineLoadingMoreRecentIndicator loadingMoreRecent={loadingMoreRecent} />
         {!disableTypingIndicator && TypingIndicator && (
           <TypingIndicatorContainer>
             <TypingIndicator />
@@ -1311,7 +760,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     );
   }, [
     HeaderComponent,
-    LoadingMoreRecentIndicator,
+    loadingMoreRecent,
     TypingIndicator,
     TypingIndicatorContainer,
     disableTypingIndicator,
@@ -1343,28 +792,23 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
             // TODO: Consider hiding this behind a feature flag.
             layout={transitions.layout200}
             contentContainerStyle={flatListContentContainerStyle}
-            /** Disables the MessageList UI. Which means, message actions, reactions won't work. */
             data={processedMessageListWithNeighbors}
-            extraData={disabled}
             inverted={inverted}
             keyboardShouldPersistTaps='handled'
             keyExtractor={keyExtractor}
-            ListFooterComponent={FooterComponent}
+            ListFooterComponent={ListFooterComponent}
             ListHeaderComponent={ListHeaderComponent}
-            /**
-            If autoscrollToTopThreshold is 10, we scroll to recent only if before the update, the list was already at the
-            bottom (10 offset or below).
-            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.
-          */
+            // With `autoscrollToTopThreshold` set, the list scrolls to recent only if it was within
+            // that offset of the bottom before the update. `minIndexForVisible` is the first item
+            // index whose position is kept on list updates.
             maintainVisibleContentPosition={maintainVisibleContentPosition}
             maxToRenderPerBatch={30}
             onContentSizeChange={onContentSizeChange}
             onLayout={onLayout}
             onMomentumScrollEnd={onUserScrollEvent}
             onScroll={handleScroll}
-            onScrollBeginDrag={onScrollBeginDrag}
-            onScrollEndDrag={onScrollEndDrag}
+            onScrollBeginDrag={onUserScrollEvent}
+            onScrollEndDrag={onUserScrollEvent}
             onScrollToIndexFailed={onScrollToIndexFailedRef.current}
             onTouchEnd={dismissImagePicker}
             onViewableItemsChanged={stableOnViewableItemsChanged}
@@ -1388,7 +832,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
         importantForAccessibility='no-hide-descendants'
         style={styles.stickyHeaderContainer}
       >
-        {messageListLengthAfterUpdate && StickyHeader ? (
+        {processedMessageList.length > 0 && StickyHeader ? (
           <StickyHeader date={stickyHeaderDate} />
         ) : null}
       </View>
@@ -1407,17 +851,16 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
           <ScrollToBottomButton
             onPress={goToNewMessages}
             showNotification={scrollToBottomButtonVisible}
-            unreadCount={scrollToBottomUnreadCount}
           />
         </Animated.View>
       ) : null}
 
       <NetworkDownIndicator />
-      {isUnreadNotificationOpen && !threadList ? (
+      {isUnreadNotificationOpen && !thread ? (
         <View style={styles.unreadMessagesNotificationContainer}>
           <UnreadMessagesNotification
+            markRead={markRead}
             onCloseHandler={onUnreadNotificationClose}
-            channelUnreadStateStore={channelUnreadStateStore}
           />
         </View>
       ) : null}
@@ -1439,7 +882,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
       </Animated.View>
       <NotificationList
         bottomOffset={messageInputFloating ? messageInputHeight + 16 : undefined}
-        filter={allowSendBeforeAttachmentsUpload ? excludeCanceledUploadNotifications : undefined}
+        filter={pendingUploadsEnabled ? excludeCanceledUploadNotifications : undefined}
       />
     </View>
   );
@@ -1449,74 +892,34 @@ export type MessageListProps = Partial<MessageListPropsWithContext>;
 
 export const MessageList = (props: MessageListProps) => {
   const { closePicker, attachmentPickerStore } = useAttachmentPickerContext();
-  const {
-    channel,
-    channelUnreadStateStore,
-    disabled,
-    enableMessageGroupingByUser,
-    error,
-    hideStickyDateHeader,
-    highlightedMessageId,
-    loadChannelAroundMessage,
-    loading,
-    maximumMessageLimit,
-    markRead,
-    reloadChannel,
-    scrollToFirstUnreadThreshold,
-    setChannelUnreadState,
-    setTargetedMessage,
-    targetedMessage,
-    threadList,
-  } = useChannelContext();
+  const { channel, disabled, enableMessageGroupingByUser, hideStickyDateHeader } =
+    useChannelContext();
+  const markRead = useMarkRead(channel);
   const { client } = useChatContext();
   const { readEvents } = useOwnCapabilitiesContext();
-  const { disableTypingIndicator, FlatList, myMessageTheme, shouldShowUnreadUnderlay } =
-    useMessagesContext();
-  const { allowSendBeforeAttachmentsUpload, messageInputFloating, messageInputHeightStore } =
-    useMessageInputContext();
-  const { loadMore, loadMoreRecent, hasMore } = usePaginatedMessageListContext();
-  const { loadMoreRecentThread, loadMoreThread, threadHasMore, thread, threadInstance } =
-    useThreadContext();
+  const { disableTypingIndicator, FlatList, myMessageTheme } = useMessagesContext();
+  const pendingUploadsEnabled = usePendingUploadsEnabled();
+  const { messageInputFloating, messageInputHeightStore } = useMessageInputContext();
+  const { thread } = useThreadContext();
 
   return (
     <MessageListWithContext
       {...{
-        allowSendBeforeAttachmentsUpload,
         attachmentPickerStore,
         channel,
-        channelUnreadStateStore,
         client,
         closePicker,
         disabled,
         disableTypingIndicator,
-        enableMessageGroupingByUser,
-        error,
         FlatList,
         hideStickyDateHeader,
-        highlightedMessageId,
-        loadChannelAroundMessage,
-        loading,
-        loadMore,
-        loadMoreRecent,
-        loadMoreRecentThread,
-        loadMoreThread,
         markRead,
-        maximumMessageLimit,
         messageInputFloating,
         messageInputHeightStore,
         myMessageTheme,
+        pendingUploadsEnabled,
         readEvents,
-        reloadChannel,
-        scrollToFirstUnreadThreshold,
-        setChannelUnreadState,
-        setTargetedMessage,
-        shouldShowUnreadUnderlay,
-        targetedMessage,
         thread,
-        threadInstance,
-        threadList,
-        hasMore,
-        threadHasMore,
       }}
       {...props}
       noGroupByUser={!enableMessageGroupingByUser || props.noGroupByUser}
@@ -1524,17 +927,12 @@ export const MessageList = (props: MessageListProps) => {
   );
 };
 
-// SOme notes about why we're relying on `createAnimatedComponent` instead of `Animated.FlatList`:
-// 1. `Animated.FlatList` is much less performant for what we need. We essentially need simple
-//    `layout` animations to account for the list's outer container switching layout. What we're
-//    getting however, is an animated `CellRenderer` component as well as scroll event throttling
-//    reduced to 1. Since we don't really want any of this, we stick to doing it ourselves.
-// 2. We need to memoize the output because of the fact that `createAnimatedComponent` changes the
-//    identity of the `style` prop on every render. It also seems to be an intended thing too,
-//    so not something that's going to change soon. This means that whenever our `MessageList`
-//    rerenders (but the list's props remain stable), it anyway rerenders internally as well (for
-//    about half of the milliseconds it takes for a full `data` rerender !). This affects performance
-//    significantly, especially in high ingress scenarios (i.e a livestream).
+// `createAnimatedComponent` rather than `Animated.FlatList`: only simple `layout` animations are
+// needed, and `Animated.FlatList` also animates every `CellRenderer` and reduces scroll event
+// throttling to 1.
+// Memoized because `createAnimatedComponent` changes the identity of `style` on every render, which
+// would re-render the list internally even when its props are stable (costly in high-ingress cases
+// such as a livestream).
 const AnimatedList = React.memo(
   Animated.createAnimatedComponent(FlatList<MessageListItemWithNeighbours>),
 );