stream-chat-react-native-core 9.10.2-beta.1 → 10.0.0-rc.2

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,98 +98,47 @@ 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'> & {
     /**
-     * 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;
+    markRead: (options?: MarkReadFunctionOptions) => void;
+  } & Pick<MessagesContextValue, 'disableTypingIndicator' | 'myMessageTheme'> &
+  Pick<ThreadContextValue, 'thread'> & {
+    /**
+     * Extra props for the underlying FlashList, applied over the defaults. To get the list ref, use
+     * `setFlatListRef`.
      */
     additionalFlashListProps?: Partial<FlashListProps<LocalMessage>>;
     /**
-     * UI component for footer of message list. By default message list will use `InlineLoadingMoreIndicator`
-     * as FooterComponent. If you want to implement your own inline loading indicator, you can access `loadingMore`
-     * 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 newest-message end. Defaults to the
+     * loading-more-recent indicator followed by the typing indicator.
      */
     FooterComponent?: React.ComponentType;
     /**
-     * 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 older-message end. Receives `loadingMore`. Defaults
+     * to `ThreadFooterComponent` in a thread, `InlineLoadingMoreIndicator` otherwise.
      */
-    HeaderComponent?: React.ComponentType;
-    /** Whether or not the FlatList is inverted. Defaults to true */
-    inverted?: boolean;
-    /** Turn off grouping of messages by user */
+    HeaderComponent?: React.ComponentType<{ loadingMore?: boolean }>;
+    /** 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 FlashList. */
     setFlatListRef?: (ref: FlashListRef<LocalMessage> | 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
      */
@@ -218,12 +147,10 @@ type MessageFlashListPropsWithContext = Pick<
 
 const WAIT_FOR_SCROLL_TIMEOUT = 0;
 
-// Classify an attachment bearing message by its primary shape so FlashList only
-// recycles same shaped cells (means less work to rerender). Gallery/media is the
-// heaviest subtree to mount, so we short circuit to it as soon as we see one gallery
-// image/video nad this keeps gallery cells recycling only with other gallery cells,
-// so the Gallery subtree reconciles on rebind instead of unmount & remount. Mirrors
-// the attachment categorization in Message.
+// Classifies a message with attachments by its primary shape, so FlashList recycles only
+// same-shaped cells. The gallery is the heaviest subtree to mount, so one gallery image or video
+// returns at once: gallery cells then recycle only with each other and reconcile on rebind instead
+// of remounting. Mirrors the attachment categorization in Message.
 const getAttachmentItemType = (message: LocalMessage) => {
   const attachments = message.attachments ?? [];
   let hasGiphy = false;
@@ -235,7 +162,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 +233,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 and the older-replies indicator sit above the replies.
+  const HeaderComponent =
+    HeaderComponentProp ?? (thread ? ThreadFooterComponent : InlineLoadingMoreIndicator);
   const {
     AutoCompleteSuggestionList,
     EmptyStateIndicator,
@@ -367,30 +280,13 @@ 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 +302,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 +339,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,
@@ -455,9 +360,8 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     }
   }, [autoscrollToRecent, hasPendingInitialTargetLoad]);
 
-  // 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 (startRenderingFromBottom) 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. `startRenderingFromBottom` stays on.
   const isOverlayOpen = useHasActiveId();
 
   const maintainVisibleContentPosition = useMemo(() => {
@@ -474,123 +378,61 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     }
   }, [disabled]);
 
-  /**
-   * 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
-   */
+  const lastFocusScrollTokenRef = useRef<number | undefined>(undefined);
+
+  // Scrolls to the focused message (`messageFocusSignal`) once it is rendered. Each focus token is
+  // handled once, so list changes during the highlight do not 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: a later `processedMessageList` change re-runs this effect.
     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;
-
-    /**
-     * 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 (!list) {
+          return false;
+        }
 
-      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();
+      });
+      // 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);
+  }, [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.latestMessage ?? undefined;
       setAutoscrollToRecent(false);
       setScrollToBottomButtonVisible(true);
       return;
@@ -609,172 +451,16 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
 
     if (!didMergeMessageSetsWithNoUpdates) {
       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) {
         flashListRef.current?.scrollToEnd({
           animated: true,
         });
       }
     }
-  }, [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();
+  }, [paginator, processedMessageList, shouldScrollToRecentOnNewOwnMessageRef]);
 
-      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);
-      }
-    },
-  );
-
-  /**
-   * FlatList doesn't accept changeable function for onViewableItemsChanged prop.
-   * Thus useRef.
-   */
+  // The list does not accept a changing `onViewableItemsChanged`, hence the ref below.
   const unstableOnViewableItemsChanged = ({
     viewableItems,
   }: {
@@ -784,10 +470,30 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
       return;
     }
     viewabilityChangedCallback({ inverted: false, viewableItems });
-    if (!hideStickyDateHeader) {
-      updateStickyHeaderDateIfNeeded(viewableItems);
-    }
-    updateStickyUnreadIndicator(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 });
+    }
+    // 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);
@@ -801,8 +507,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
   );
 
   const setNativeScrollability = useStableCallback((value: boolean) => {
-    // FlashList does not have setNativeProps exposed, hence we cannot use that.
-    // Instead, we resort to state.
+    // FlashList does not expose `setNativeProps`, so scrollability is state.
     setScrollEnabled(value);
   });
 
@@ -817,159 +522,38 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     [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.
-   */
-
-  /**
-   * 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.
-   */
-  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);
-  });
-
+  // Paginates within 100 points of either edge. Not inverted: the top is the oldest end.
   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 isScrollAtBottom = contentLength - visibleLength - offset < messageInputHeight;
 
-    const notLatestSet = channel.state.messages !== channel.state.latestMessages;
-
-    const showScrollToBottomButton =
-      messageListHasMessages && ((!threadList && notLatestSet) || !isScrollAtStart);
-
-    /**
-     * 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);
@@ -977,11 +561,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,17 +570,20 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     }
 
     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,
@@ -1018,16 +602,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,12 +610,7 @@ 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
+  // `style` and `contentContainerStyle` are merged with the SDK styles below, not spread.
   let additionalFlashListPropsExcludingStyle:
     | Omit<NonNullable<typeof additionalFlashListProps>, 'style' | 'contentContainerStyle'>
     | undefined;
@@ -1084,9 +653,8 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     bumpOverlayLayoutRevision(closeCorrectionDeltaY);
 
     const changedBy = currentListHeightRef.current - height;
-    // `getNativeScrollRef()` is typed as returning the `ScrollView` *component* by flash-list,
-    // which under React Native 0.87's Strict TypeScript API is a function type rather than the
-    // host instance it actually returns at runtime. Re-assert the instance type.
+    // flash-list types `getNativeScrollRef()` as the `ScrollView` component, a function type under
+    // React Native 0.87's Strict TypeScript API, but it returns the host instance at runtime.
     const nativeScrollRef = flashListRef.current?.getNativeScrollRef() as
       | ScrollViewRef
       | null
@@ -1100,6 +668,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 +680,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
 
     return (
       <FlashListFooterTypingAdapter enabled={!disableTypingIndicator && !!TypingIndicator}>
-        <LoadingMoreRecentIndicator />
+        <InlineLoadingMoreRecentIndicator loadingMoreRecent={loadingMoreRecent} />
         {!disableTypingIndicator && TypingIndicator && (
           <TypingIndicatorContainer>
             <TypingIndicator />
@@ -1117,7 +690,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     );
   }, [
     FooterComponent,
-    LoadingMoreRecentIndicator,
+    loadingMoreRecent,
     TypingIndicator,
     TypingIndicatorContainer,
     disableTypingIndicator,
@@ -1153,12 +726,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 +754,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 +772,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,17 +801,15 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
       </Animated.View>
       <NotificationList
         bottomOffset={messageInputFloating ? messageInputHeight + 16 : undefined}
-        filter={allowSendBeforeAttachmentsUpload ? excludeCanceledUploadNotifications : undefined}
+        filter={pendingUploadsEnabled ? excludeCanceledUploadNotifications : undefined}
       />
     </View>
   );
 };
 
 /**
- * Unfortunately, FlashList does not handle autoscrolling if the footer changes properly. Because
- * of that, we calculate this manually and autoscroll to the bottom if we're near the end. We only
- * do this if the typing indicator is about to be rendered for now. Later on we can rely on proper
- * layout calculations.
+ * Scrolls to the end when the typing indicator appears and the list is near the end, as FlashList
+ * does not autoscroll when its footer changes.
  */
 const FlashListFooterTypingAdapter = ({
   enabled,
@@ -1281,82 +851,46 @@ const FlashListFooterTypingAdapter = ({
 export type MessageFlashListProps = Partial<MessageFlashListPropsWithContext>;
 
 /**
- * This is a @experimental component.
- * It is implemented using @shopify/flash-list package to optimize the performance of the MessageList component.
- * The implementation is experimental and is subject to change.
- * Please feel free to report any issues or suggestions.
+ * A `MessageList` built on `@shopify/flash-list` for performance. The implementation is subject to
+ * change.
+ *
+ * @experimental
  */
 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}
@@ -1400,12 +934,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,
         },