stream-chat-react-native-core 9.10.1 → 10.0.0-rc.1

package/src/components/MessageList/MessageFlashList.tsx

@@ -4,15 +4,24 @@ import { LayoutChangeEvent, ScrollViewProps, StyleSheet, View, useColorScheme }
 import Animated from 'react-native-reanimated';
 
 import type { FlashListProps, FlashListRef } from '@shopify/flash-list';
-import type { Channel, Event, LocalMessage, MessageResponse } from 'stream-chat';
+import type { LocalMessage, Thread } from 'stream-chat';
 
+import { getAttachmentPreviewUrl } 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 { useTypingUsers } from './hooks/useTypingUsers';
+import { useUnreadNotificationVisibility } from './hooks/useUnreadNotificationVisibility';
 import { InlineLoadingMoreIndicator } from './InlineLoadingMoreIndicator';
 import { InlineLoadingMoreRecentIndicator } from './InlineLoadingMoreRecentIndicator';
-import { InlineLoadingMoreRecentThreadIndicator } from './InlineLoadingMoreRecentThreadIndicator';
+import { getMessageListItemCacheKey } from './utils/buildMessageListWithNeighbours';
 
 import {
   AttachmentPickerContextValue,
@@ -24,6 +33,7 @@ import {
 } from '../../contexts/channelContext/ChannelContext';
 import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
 import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
+import { usePendingUploadsEnabled } from '../../contexts/messageInputContext/hooks/usePendingUploadsEnabled';
 import {
   MessageInputContextValue,
   useMessageInputContext,
@@ -40,10 +50,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';
 
@@ -55,8 +61,10 @@ import { primitives } from '../../theme';
 import type { ScrollViewRef, ViewabilityConfig, ViewToken } from '../../types/react-native-compat';
 import { FileTypes } from '../../types/types';
 import { transitions } from '../../utils/animations/transitions';
+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/PortalWhileClosingView';
 
 type FlashListContextApi = { getRef?: () => FlashListRef<LocalMessage> | null } | undefined;
@@ -72,41 +80,13 @@ try {
   FlashList = undefined;
 }
 
-const keyExtractor = (item: LocalMessage) => {
-  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 = (item: LocalMessage, index: number) => getMessageListItemCacheKey(item, index);
 
 const flatListViewabilityConfig: ViewabilityConfig = {
   viewAreaCoveragePercentThreshold: 1,
 };
 
-const hasReadLastMessage = (channel: Channel, userId: string) => {
-  const latestMessageIdInChannel =
-    channel.state.latestMessages[channel.state.latestMessages.length - 1]?.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;
-};
-
 const messageInputHeightStoreSelector = (state: MessageInputHeightState) => ({
   height: state.height,
 });
@@ -118,37 +98,18 @@ type MessageFlashListPropsWithContext = Pick<
   Pick<OwnCapabilitiesContextValue, 'readEvents'> &
   Pick<
     ChannelContextValue,
-    | 'channel'
-    | 'channelUnreadStateStore'
-    | 'disabled'
-    | 'hideStickyDateHeader'
-    | 'highlightedMessageId'
-    | 'loadChannelAroundMessage'
-    | 'loading'
-    | 'markRead'
-    | 'reloadChannel'
-    | 'scrollToFirstUnreadThreshold'
-    | 'setChannelUnreadState'
-    | 'setTargetedMessage'
-    | 'hasPendingInitialTargetLoad'
-    | 'targetedMessage'
-    | 'threadList'
-    | 'maximumMessageLimit'
+    'channel' | 'disabled' | 'hideStickyDateHeader' | 'hasPendingInitialTargetLoad'
   > &
   Pick<ChatContextValue, 'client'> &
-  Pick<
-    MessageInputContextValue,
-    'allowSendBeforeAttachmentsUpload' | 'messageInputFloating' | 'messageInputHeightStore'
-  > &
-  Pick<PaginatedMessageListContextValue, 'loadMore' | 'loadMoreRecent'> &
-  Pick<
-    MessagesContextValue,
-    'disableTypingIndicator' | 'FlatList' | 'myMessageTheme' | 'shouldShowUnreadUnderlay'
-  > &
-  Pick<
-    ThreadContextValue,
-    'loadMoreRecentThread' | 'loadMoreThread' | 'thread' | 'threadInstance'
-  > & {
+  Pick<MessageInputContextValue, 'messageInputFloating' | 'messageInputHeightStore'> & {
+    /**
+     * Whether the composer lets a message be sent while its attachments are still uploading
+     * (`messageComposer.attachments.pendingUploadsEnabled`). Read from the composer by default.
+     */
+    pendingUploadsEnabled: boolean;
+    markRead: (options?: MarkReadFunctionOptions) => void;
+  } & Pick<MessagesContextValue, 'disableTypingIndicator' | 'myMessageTheme'> &
+  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.
@@ -181,7 +142,7 @@ type MessageFlashListPropsWithContext = Pick<
      * 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
      */
-    HeaderComponent?: React.ComponentType;
+    HeaderComponent?: React.ComponentType<{ loadingMore?: boolean }>;
     /** Whether or not the FlatList is inverted. Defaults to true */
     inverted?: boolean;
     /** Turn off grouping of messages by user */
@@ -190,9 +151,9 @@ type MessageFlashListPropsWithContext = Pick<
     /**
      * 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.
+     * @param thread The thread of the message, to render in a `<Thread thread={thread}>`.
      */
-    onThreadSelect?: (message: ThreadContextValue['thread']) => void;
+    onThreadSelect?: (thread: Thread) => void;
     /**
      * Use `setFlatListRef` to get access to ref to inner FlatList.
      *
@@ -235,7 +196,7 @@ const getAttachmentItemType = (message: LocalMessage) => {
       attachment.type === FileTypes.Image &&
       !attachment.og_scrape_url &&
       !attachment.title_link &&
-      (!!attachment.image_url || !!attachment.thumb_url);
+      !!getAttachmentPreviewUrl(attachment, attachment.image_url, attachment.thumb_url);
     const isGalleryVideo =
       attachment.type === FileTypes.Video && !attachment.og_scrape_url && isVideoPlayerAvailable();
     if (isGalleryImage || isGalleryVideo) {
@@ -306,49 +267,35 @@ const getItemTypeInternal = (message: LocalMessage) => {
 };
 
 const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) => {
-  const LoadingMoreRecentIndicator = props.threadList
-    ? InlineLoadingMoreRecentThreadIndicator
-    : InlineLoadingMoreRecentIndicator;
   const {
-    allowSendBeforeAttachmentsUpload,
     attachmentPickerStore,
     additionalFlashListProps,
     channel,
-    channelUnreadStateStore,
     client,
     closePicker,
     disabled,
     disableTypingIndicator,
-    // FlatList,
     FooterComponent,
-    HeaderComponent = InlineLoadingMoreIndicator,
+    HeaderComponent: HeaderComponentProp,
     hideStickyDateHeader,
     isLiveStreaming = false,
-    loadChannelAroundMessage,
-    loading,
-    loadMore,
-    loadMoreRecent,
-    loadMoreRecentThread,
-    loadMoreThread,
     markRead,
-    maximumMessageLimit,
     messageInputFloating,
     messageInputHeightStore,
     myMessageTheme,
+    pendingUploadsEnabled,
     readEvents,
     noGroupByUser,
     onListScroll,
     onThreadSelect,
-    reloadChannel,
-    setChannelUnreadState,
     setFlatListRef,
-    setTargetedMessage,
     hasPendingInitialTargetLoad,
-    targetedMessage,
     thread,
-    threadInstance,
-    threadList = false,
   } = props;
+
+  // Inside a thread the parent message sits above the replies, along with the older-replies indicator.
+  const HeaderComponent =
+    HeaderComponentProp ?? (thread ? ThreadFooterComponent : InlineLoadingMoreIndicator);
   const {
     AutoCompleteSuggestionList,
     EmptyStateIndicator,
@@ -367,30 +314,16 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     messageInputHeightStore.store,
     messageInputHeightStoreSelector,
   );
+  const paginator = thread ? thread.messagePaginator : channel.messagePaginator;
 
-  const [hasMoved, setHasMoved] = useState(false);
   const [scrollToBottomButtonVisible, setScrollToBottomButtonVisible] = useState(false);
-  const [isUnreadNotificationOpen, setIsUnreadNotificationOpen] = useState<boolean>(false);
-  const [stickyHeaderDate, setStickyHeaderDate] = useState<Date | undefined>();
   const [scrollEnabled, setScrollEnabled] = useState<boolean>(true);
 
-  const stickyHeaderDateRef = useRef<Date | undefined>(undefined);
-  /**
-   * 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);
-
   /**
    * The timeout id used to debounce our scrollToIndex calls on messageList updates
    */
   const scrollToDebounceTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
 
-  const channelResyncScrollSet = useRef<boolean>(true);
   const { theme } = useTheme();
   const styles = useStyles();
 
@@ -406,8 +339,27 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
   const { processedMessageList, rawMessageList, viewabilityChangedCallback } = useMessageList({
     isFlashList: true,
     isLiveStreaming,
-    threadList,
+    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 renderItem = useCallback(
     ({ item: message, index }: { item: LocalMessage; index: number }) => {
@@ -424,18 +376,8 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     [processedMessageList],
   );
 
-  /**
-   * 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 topMessageAfterUpdate: LocalMessage | undefined = rawMessageList[0];
-
   const latestNonCurrentMessageBeforeUpdateRef = useRef<LocalMessage>(undefined);
 
-  const messageListLengthBeforeUpdate = useRef(0);
-  const messageListLengthAfterUpdate = processedMessageList.length;
-
   const shouldScrollToRecentOnNewOwnMessageRef = useShouldScrollToRecentOnNewOwnMessage(
     rawMessageList,
     client.userID,
@@ -474,123 +416,66 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     }
   }, [disabled]);
 
+  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's rendered. Re-attempts when the
+   * list updates while a focus is pending, and marks each focus token handled so unrelated list
+   * changes during the highlight window don't re-scroll.
    */
   useEffect(() => {
-    if (!targetedMessage) {
+    if (!focusedMessageId || focusToken === lastFocusScrollTokenRef.current) {
       return;
     }
 
     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
+    // Not in the rendered window yet (jumpToMessage already loaded-around it, so a later
+    // processedMessageList change re-runs this) — bail rather than re-jump (no jump↔effect loop).
     if (indexOfParentInMessageList === -1) {
-      loadChannelAroundMessage({ messageId: targetedMessage, setTargetedMessage });
-    } else {
-      scrollToDebounceTimeoutRef.current = setTimeout(async () => {
-        clearTimeout(scrollToDebounceTimeoutRef.current);
-
-        const scrollToIndex = async () => {
-          const list = flashListRef.current;
-
-          if (!list) {
-            return false;
-          }
-
-          await list.scrollToIndex({
-            animated: true,
-            index: indexOfParentInMessageList,
-            viewPosition: 0.5,
-          });
-
-          return true;
-        };
-
-        await scrollToIndex();
-        requestAnimationFrame(async () => {
-          await scrollToIndex();
-          setTargetedMessage(undefined);
-        });
-      }, WAIT_FOR_SCROLL_TIMEOUT);
+      return;
     }
-  }, [loadChannelAroundMessage, processedMessageList, setTargetedMessage, targetedMessage]);
 
-  const goToMessage = useStableCallback(async (messageId: string) => {
-    const indexOfParentInMessageList = processedMessageList.findIndex(
-      (message) => message?.id === messageId,
-    );
+    lastFocusScrollTokenRef.current = focusToken;
+    scrollToDebounceTimeoutRef.current = setTimeout(async () => {
+      clearTimeout(scrollToDebounceTimeoutRef.current);
 
-    try {
-      if (indexOfParentInMessageList === -1) {
-        clearTimeout(scrollToDebounceTimeoutRef.current);
-        await loadChannelAroundMessage({ messageId, setTargetedMessage });
-      } else {
-        setTargetedMessage(messageId);
-      }
-    } catch (e) {
-      console.warn('Error while scrolling to message', e);
-    }
-  });
+      const scrollToIndex = async () => {
+        const list = flashListRef.current;
 
-  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 =
-      messageListLengthBeforeUpdate.current - messageListLengthAfterUpdate === 1;
+        if (!list) {
+          return false;
+        }
 
-    /**
-     * 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 || processedMessageList.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(() => {
-          channelResyncScrollSet.current = true;
-          if (channel.countUnread() > 0) {
-            markRead();
-          }
-        }, WAIT_FOR_SCROLL_TIMEOUT);
-      }
-    };
+        await list.scrollToIndex({
+          animated: true,
+          index: indexOfParentInMessageList,
+          viewPosition: 0.5,
+        });
 
-    if (isMessageRemovedFromMessageList && !maximumMessageLimit) {
-      scrollToBottomIfNeeded();
-    }
+        return true;
+      };
 
-    messageListLengthBeforeUpdate.current = messageListLengthAfterUpdate;
-    topMessageBeforeUpdate.current = topMessageAfterUpdate;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [messageListLengthAfterUpdate, topMessageAfterUpdate?.id, maximumMessageLimit]);
+      await scrollToIndex();
+      requestAnimationFrame(async () => {
+        await scrollToIndex();
+      });
+      // Start the highlight's auto-dismiss countdown now that the message is scrolled into view.
+      // The LLC deliberately does NOT start it on emit (the message may not be visible yet), so
+      // without this the highlight would persist forever.
+      paginator?.scheduleMessageFocusSignalClear({ token: focusToken });
+    }, WAIT_FOR_SCROLL_TIMEOUT);
+  }, [paginator, focusToken, focusedMessageId, processedMessageList]);
 
   useEffect(() => {
-    if (!processedMessageList.length) {
+    if (!processedMessageList.length || !paginator) {
       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.lastMessage ?? undefined;
       setAutoscrollToRecent(false);
       setScrollToBottomButtonVisible(true);
       return;
@@ -617,159 +502,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
         });
       }
     }
-  }, [channel, processedMessageList, shouldScrollToRecentOnNewOwnMessageRef, threadList]);
-
-  /**
-   * 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,
-  ]);
-
-  const updateStickyHeaderDateIfNeeded = useStableCallback(
-    (viewableItems: ViewToken<LocalMessage>[]) => {
-      if (!viewableItems.length) {
-        return;
-      }
-
-      const lastItem = viewableItems[0];
-
-      if (!lastItem) return;
-
-      if (
-        !channel.state.messagePagination.hasPrev &&
-        processedMessageList[0].id === lastItem.item.id
-      ) {
-        setStickyHeaderDate(undefined);
-        return;
-      }
-      const isMessageTypeDeleted = lastItem.item.type === 'deleted';
-
-      if (
-        lastItem?.item?.created_at &&
-        !isMessageTypeDeleted &&
-        typeof lastItem.item.created_at !== 'string' &&
-        lastItem.item.created_at.toDateString() !== stickyHeaderDateRef.current?.toDateString()
-      ) {
-        stickyHeaderDateRef.current = lastItem.item.created_at;
-        setStickyHeaderDate(lastItem.item.created_at);
-      }
-    },
-  );
-
-  /**
-   * This function should show or hide the unread indicator depending on the
-   */
-  const updateStickyUnreadIndicator = useStableCallback(
-    (viewableItems: ViewToken<LocalMessage>[]) => {
-      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.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[0];
-
-      if (!lastItem) return;
-
-      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[0].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);
-      }
-    },
-  );
+  }, [paginator, processedMessageList, shouldScrollToRecentOnNewOwnMessageRef]);
 
   /**
    * FlatList doesn't accept changeable function for onViewableItemsChanged prop.
@@ -784,10 +517,30 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
       return;
     }
     viewabilityChangedCallback({ inverted: false, viewableItems });
-    if (!hideStickyDateHeader) {
-      updateStickyHeaderDateIfNeeded(viewableItems);
+
+    const viewableMessages = viewableItems.map((viewable) => viewable.item);
+    // Not inverted: the first viewable item is the topmost one on screen.
+    const topVisibleMessage = viewableMessages[0];
+    // Content shorter than the window cannot scroll, so FlashList keeps the offset of its initial
+    // scroll and misses the oldest message on screen. Short content shows every message.
+    const list = flashListRef.current;
+    const contentFitsWindow = list
+      ? list.getChildContainerDimensions().height <= list.getWindowSize().height
+      : false;
+    const isAtOldestMessage =
+      topVisibleMessage !== undefined &&
+      !paginator?.hasMoreTail &&
+      (contentFitsWindow || processedMessageList[0]?.id === topVisibleMessage.id);
+
+    if (!hideStickyDateHeader && topVisibleMessage) {
+      updateStickyHeaderDate({ isAtOldestMessage, topVisibleMessage });
+    }
+    if (!thread) {
+      updateUnreadNotification({ isAtOldestMessage, topVisibleMessage, viewableMessages });
     }
-    updateStickyUnreadIndicator(viewableItems);
+    // Viewability reflects the real layout, so this is right even at mount: a channel opened at its
+    // first unread has the newest message off screen and is not viewing live.
+    reportViewableMessages(viewableMessages);
   };
 
   const onViewableItemsChanged = useRef(unstableOnViewableItemsChanged);
@@ -818,150 +571,35 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
   );
 
   /**
-   * 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.
-   */
-
-  /**
-   * 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 maybeCallOnStartReached = useStableCallback(async () => {
-    // If onEndReached has already been called for given messageList length, then ignore.
-    if (
-      processedMessageList?.length &&
-      onStartReachedTracker.current[processedMessageList.length]
-    ) {
-      return;
-    }
-
-    if (processedMessageList?.length) {
-      onStartReachedTracker.current[processedMessageList.length] = true;
-    }
-
-    const callback = () => {
-      onStartReachedInPromise.current = null;
-      return Promise.resolve();
-    };
-
-    const onError = () => {
-      /** Release the onEndReachedTracker trigger after 2 seconds, to try again */
-      setTimeout(() => {
-        onStartReachedTracker.current = {};
-      }, 2000);
-    };
-
-    // If onStartReached is in progress, better to wait for it to finish for smooth UX
-    if (onEndReachedInPromise.current) {
-      await onEndReachedInPromise.current;
-    }
-    onStartReachedInPromise.current = (
-      threadList && !!threadInstance && loadMoreRecentThread
-        ? loadMoreRecentThread({})
-        : loadMoreRecent()
-    )
-      .then(callback)
-      .catch(onError);
-  });
-
-  /**
-   * 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.
+   * Pagination is driven from the scroll position rather than the list's `onEndReached`, from a
+   * fixed distance to either edge. Not inverted: the top is the oldest end.
    */
-  const maybeCallOnEndReached = useStableCallback(async () => {
-    // If onStartReached has already been called for given data length, then ignore.
-    if (processedMessageList?.length && onEndReachedTracker.current[processedMessageList.length]) {
-      return;
-    }
-
-    if (processedMessageList?.length) {
-      onEndReachedTracker.current[processedMessageList.length] = true;
-    }
-
-    const callback = () => {
-      onEndReachedInPromise.current = null;
-
-      return Promise.resolve();
-    };
-
-    const onError = () => {
-      /** Release the onStartReached trigger after 2 seconds, to try again */
-      setTimeout(() => {
-        onEndReachedTracker.current = {};
-      }, 2000);
-    };
-
-    // If onEndReached is in progress, better to wait for it to finish for smooth UX
-    if (onStartReachedInPromise.current) {
-      await onStartReachedInPromise.current;
-    }
-
-    onEndReachedInPromise.current = (threadList ? loadMoreThread() : loadMore())
-      .then(callback)
-      .catch(onError);
-  });
-
   const onUserScrollEvent: NonNullable<ScrollViewProps['onScroll']> = useStableCallback((event) => {
     const nativeEvent = event.nativeEvent;
     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.
-    const isScrollAtEnd = offset < 100;
-    const isScrollAtStart = contentLength - visibleLength - offset < 100;
+    const isScrollAtTop = offset < 100;
+    const isScrollAtBottom = contentLength - visibleLength - offset < 100;
 
-    if (isScrollAtEnd) {
-      maybeCallOnEndReached();
+    if (isScrollAtTop) {
+      loadMore();
     }
 
-    if (isScrollAtStart) {
-      maybeCallOnStartReached();
+    if (isScrollAtBottom) {
+      loadMoreRecent();
     }
   });
 
-  /**
-   * Resets the pagination trackers, doing so cancels currently scheduled loading more calls
-   */
-  const resetPaginationTrackersRef = useRef(() => {
-    onStartReachedTracker.current = {};
-    onEndReachedTracker.current = {};
-  });
-
-  const currentScrollOffsetRef = useRef(0);
-
   const handleScroll: ScrollViewProps['onScroll'] = useStableCallback((event) => {
     const messageListHasMessages = processedMessageList.length > 0;
     const nativeEvent = event.nativeEvent;
     const offset = nativeEvent.contentOffset.y;
-    currentScrollOffsetRef.current = offset;
     const visibleLength = nativeEvent.layoutMeasurement.height;
     const contentLength = nativeEvent.contentSize.height;
 
-    const isScrollAtStart = contentLength - visibleLength - offset < messageInputHeight;
-
-    const notLatestSet = channel.state.messages !== channel.state.latestMessages;
-
-    const showScrollToBottomButton =
-      messageListHasMessages && ((!threadList && notLatestSet) || !isScrollAtStart);
+    const isScrollAtBottom = contentLength - visibleLength - offset < messageInputHeight;
 
     /**
      * 1. If I scroll up -> show scrollToBottom button.
@@ -969,7 +607,9 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
      *    |-> hide scrollToBottom button.
      *    |-> if channel is unread, call markRead().
      */
-    setScrollToBottomButtonVisible(showScrollToBottomButton);
+    setScrollToBottomButtonVisible(
+      messageListHasMessages && (paginator?.hasMoreHead || !isScrollAtBottom),
+    );
 
     if (onListScroll) {
       onListScroll(event);
@@ -977,11 +617,8 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
   });
 
   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 (flashListRef.current) {
       flashListRef.current.scrollToEnd({
         animated: true,
@@ -989,6 +626,11 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     }
 
     setScrollToBottomButtonVisible(false);
+    // 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;
+    }
     /**
      *  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.
@@ -998,8 +640,9 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     });
   });
 
-  const scrollToBottomUnreadCount =
-    scrollToBottomButtonVisible && !threadList ? channel?.countUnread() : undefined;
+  const scrollToBottomUnreadCount = useOwnUnreadCount(
+    scrollToBottomButtonVisible && !thread ? channel : undefined,
+  );
   const {
     accessibilityActions: messageListAccessibilityActions,
     onAccessibilityAction: messageListOnAccessibilityAction,
@@ -1018,16 +661,6 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     }
   });
 
-  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: FlashListRef<LocalMessage>) => {
     flashListRef.current = ref;
 
@@ -1036,11 +669,6 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     }
   });
 
-  const onUnreadNotificationClose = useStableCallback(async () => {
-    await markRead();
-    setIsUnreadNotificationOpen(false);
-  });
-
   // We need to omit the style related props from the additionalFlatListProps and add them directly instead of spreading
   let additionalFlashListPropsExcludingStyle:
     | Omit<NonNullable<typeof additionalFlashListProps>, 'style' | 'contentContainerStyle'>
@@ -1100,6 +728,11 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     currentListHeightRef.current = height;
   });
 
+  const ListHeaderComponent = useCallback(
+    () => <HeaderComponent loadingMore={loadingMore} />,
+    [HeaderComponent, loadingMore],
+  );
+
   const ListFooterComponent = useCallback(() => {
     if (FooterComponent) {
       return <FooterComponent />;
@@ -1107,7 +740,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
 
     return (
       <FlashListFooterTypingAdapter enabled={!disableTypingIndicator && !!TypingIndicator}>
-        <LoadingMoreRecentIndicator />
+        <InlineLoadingMoreRecentIndicator loadingMoreRecent={loadingMoreRecent} />
         {!disableTypingIndicator && TypingIndicator && (
           <TypingIndicatorContainer>
             <TypingIndicator />
@@ -1117,7 +750,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     );
   }, [
     FooterComponent,
-    LoadingMoreRecentIndicator,
+    loadingMoreRecent,
     TypingIndicator,
     TypingIndicatorContainer,
     disableTypingIndicator,
@@ -1153,12 +786,12 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
             keyboardShouldPersistTaps='handled'
             keyExtractor={keyExtractor}
             ListFooterComponent={ListFooterComponent}
-            ListHeaderComponent={HeaderComponent}
+            ListHeaderComponent={ListHeaderComponent}
             maintainVisibleContentPosition={maintainVisibleContentPosition}
             onMomentumScrollEnd={onUserScrollEvent}
             onScroll={handleScroll}
-            onScrollBeginDrag={onScrollBeginDrag}
-            onScrollEndDrag={onScrollEndDrag}
+            onScrollBeginDrag={onUserScrollEvent}
+            onScrollEndDrag={onUserScrollEvent}
             onTouchEnd={dismissImagePicker}
             onViewableItemsChanged={stableOnViewableItemsChanged}
             ref={refCallback}
@@ -1181,7 +814,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
         importantForAccessibility='no-hide-descendants'
         style={styles.stickyHeaderContainer}
       >
-        {messageListLengthAfterUpdate && StickyHeader ? (
+        {processedMessageList.length > 0 && StickyHeader ? (
           <StickyHeader date={stickyHeaderDate} />
         ) : null}
       </View>
@@ -1199,15 +832,14 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
         <ScrollToBottomButton
           onPress={goToNewMessages}
           showNotification={scrollToBottomButtonVisible}
-          unreadCount={scrollToBottomUnreadCount}
         />
       </Animated.View>
       <NetworkDownIndicator />
-      {isUnreadNotificationOpen && !threadList ? (
+      {isUnreadNotificationOpen && !thread ? (
         <View style={styles.unreadMessagesNotificationContainer}>
           <UnreadMessagesNotification
+            markRead={markRead}
             onCloseHandler={onUnreadNotificationClose}
-            channelUnreadStateStore={channelUnreadStateStore}
           />
         </View>
       ) : null}
@@ -1229,7 +861,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
       </Animated.View>
       <NotificationList
         bottomOffset={messageInputFloating ? messageInputHeight + 16 : undefined}
-        filter={allowSendBeforeAttachmentsUpload ? excludeCanceledUploadNotifications : undefined}
+        filter={pendingUploadsEnabled ? excludeCanceledUploadNotifications : undefined}
       />
     </View>
   );
@@ -1290,73 +922,37 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
   const { closePicker, attachmentPickerStore } = useAttachmentPickerContext();
   const {
     channel,
-    channelUnreadStateStore,
     disabled,
     enableMessageGroupingByUser,
-    error,
     hideStickyDateHeader,
-    highlightedMessageId,
-    isChannelActive,
-    loadChannelAroundMessage,
-    loading,
-    markRead,
-    maximumMessageLimit,
-    reloadChannel,
-    scrollToFirstUnreadThreshold,
-    setChannelUnreadState,
-    setTargetedMessage,
     hasPendingInitialTargetLoad,
-    targetedMessage,
-    threadList,
   } = useChannelContext();
+  const markRead = useMarkRead(channel);
   const { client } = useChatContext();
-  const { disableTypingIndicator, FlatList, myMessageTheme, shouldShowUnreadUnderlay } =
-    useMessagesContext();
-  const { loadMore, loadMoreRecent } = usePaginatedMessageListContext();
-  const { loadMoreRecentThread, loadMoreThread, thread, threadInstance } = useThreadContext();
+  const { disableTypingIndicator, myMessageTheme } = useMessagesContext();
+  const { thread } = useThreadContext();
   const { readEvents } = useOwnCapabilitiesContext();
-  const { allowSendBeforeAttachmentsUpload, messageInputFloating, messageInputHeightStore } =
-    useMessageInputContext();
+  const pendingUploadsEnabled = usePendingUploadsEnabled();
+  const { messageInputFloating, messageInputHeightStore } = useMessageInputContext();
 
   return (
     <MessageFlashListWithContext
       {...{
-        allowSendBeforeAttachmentsUpload,
         attachmentPickerStore,
         channel,
-        channelUnreadStateStore,
         client,
         closePicker,
         disabled,
         disableTypingIndicator,
-        enableMessageGroupingByUser,
-        error,
-        FlatList,
         hideStickyDateHeader,
-        highlightedMessageId,
-        isListActive: isChannelActive,
-        loadChannelAroundMessage,
-        loading,
-        loadMore,
-        loadMoreRecent,
-        loadMoreRecentThread,
-        loadMoreThread,
         markRead,
-        maximumMessageLimit,
         messageInputFloating,
         messageInputHeightStore,
         myMessageTheme,
+        pendingUploadsEnabled,
         readEvents,
-        reloadChannel,
-        scrollToFirstUnreadThreshold,
-        setChannelUnreadState,
-        setTargetedMessage,
         hasPendingInitialTargetLoad,
-        shouldShowUnreadUnderlay,
-        targetedMessage,
         thread,
-        threadInstance,
-        threadList,
       }}
       {...props}
       noGroupByUser={!enableMessageGroupingByUser || props.noGroupByUser}