stream-chat-react-native-core 8.13.7 → 9.0.0-beta.2

package/src/components/MessageList/MessageList.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
+  FlatList,
   FlatListProps,
   FlatList as FlatListType,
   LayoutChangeEvent,
@@ -10,7 +11,10 @@ import {
   ViewToken,
 } from 'react-native';
 
+import Animated, { LinearTransition } from 'react-native-reanimated';
+
 import debounce from 'lodash/debounce';
+
 import type { Channel, Event, LocalMessage, MessageResponse } from 'stream-chat';
 
 import { useMessageList } from './hooks/useMessageList';
@@ -20,6 +24,11 @@ import { InlineLoadingMoreIndicator } from './InlineLoadingMoreIndicator';
 import { InlineLoadingMoreRecentIndicator } from './InlineLoadingMoreRecentIndicator';
 import { InlineLoadingMoreRecentThreadIndicator } from './InlineLoadingMoreRecentThreadIndicator';
 
+import {
+  buildMessageListWithNeighbours,
+  MessageListItemWithNeighbours,
+} from './utils/buildMessageListWithNeighbours';
+
 import {
   AttachmentPickerContextValue,
   useAttachmentPickerContext,
@@ -30,10 +39,11 @@ import {
 } from '../../contexts/channelContext/ChannelContext';
 import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
 import { useDebugContext } from '../../contexts/debugContext/DebugContext';
+
 import {
-  ImageGalleryContextValue,
-  useImageGalleryContext,
-} from '../../contexts/imageGalleryContext/ImageGalleryContext';
+  MessageInputContextValue,
+  useMessageInputContext,
+} from '../../contexts/messageInputContext/MessageInputContext';
 import {
   MessageListItemContextValue,
   MessageListItemProvider,
@@ -54,40 +64,94 @@ import { mergeThemes, useTheme } from '../../contexts/themeContext/ThemeContext'
 import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 
 import { useStableCallback } from '../../hooks';
-import { FileTypes } from '../../types/types';
-import { MessageWrapper } from '../Message/MessageSimple/MessageWrapper';
+import { useStateStore } from '../../hooks/useStateStore';
+import { bumpOverlayLayoutRevision } from '../../state-store';
+import { MessageInputHeightState } from '../../state-store/message-input-height-store';
+import { primitives } from '../../theme';
+import { MessageWrapper } from '../Message/MessageItemView/MessageWrapper';
 
 // This is just to make sure that the scrolling happens in a different task queue.
 // TODO: Think if we really need this and strive to remove it if we can.
 const WAIT_FOR_SCROLL_TIMEOUT = 0;
 const MAX_RETRIES_AFTER_SCROLL_FAILURE = 10;
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    flex: 1,
-    width: '100%',
-  },
-  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.
-     */
-    paddingBottom: 4,
-  },
-  flex: { flex: 1 },
-  listContainer: {
-    flex: 1,
-    width: '100%',
-  },
-  stickyHeader: {
-    position: 'absolute',
-    top: 0,
-  },
-});
 
-const keyExtractor = (item: LocalMessage) => {
+const useStyles = () => {
+  const {
+    theme: {
+      semantics,
+      messageList: {
+        container,
+        contentContainer,
+        listContainer,
+        stickyHeaderContainer,
+        scrollToBottomButtonContainer,
+        unreadMessagesNotificationContainer,
+      },
+    },
+  } = useTheme();
+
+  const { backgroundCoreApp } = semantics;
+
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+          width: '100%',
+          backgroundColor: backgroundCoreApp,
+          ...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.
+           */
+          paddingBottom: 4,
+          ...contentContainer,
+        },
+        flex: { flex: 1, backgroundColor: backgroundCoreApp },
+        listContainer: {
+          flex: 1,
+          width: '100%',
+          ...listContainer,
+        },
+        scrollToBottomButtonContainer: {
+          position: 'absolute',
+          right: 16,
+          ...scrollToBottomButtonContainer,
+        },
+        stickyHeaderContainer: {
+          left: 0,
+          position: 'absolute',
+          right: 0,
+          top: primitives.spacingMd,
+          ...stickyHeaderContainer,
+        },
+        unreadMessagesNotificationContainer: {
+          position: 'absolute',
+          top: primitives.spacingMd,
+          left: 0,
+          right: 0,
+          alignItems: 'center',
+          ...unreadMessagesNotificationContainer,
+        },
+      }),
+    [
+      backgroundCoreApp,
+      container,
+      contentContainer,
+      listContainer,
+      scrollToBottomButtonContainer,
+      stickyHeaderContainer,
+      unreadMessagesNotificationContainer,
+    ],
+  );
+};
+
+const keyExtractor = (derivedItem: MessageListItemWithNeighbours) => {
+  const { message: item } = derivedItem;
   if (item.id) {
     return item.id;
   }
@@ -123,13 +187,12 @@ const getPreviousLastMessage = (messages: LocalMessage[], newMessage?: MessageRe
 
 type MessageListPropsWithContext = Pick<
   AttachmentPickerContextValue,
-  'closePicker' | 'selectedPicker' | 'setSelectedPicker'
+  'closePicker' | 'attachmentPickerStore'
 > &
   Pick<OwnCapabilitiesContextValue, 'readEvents'> &
   Pick<
     ChannelContextValue,
     | 'channel'
-    | 'channelUnreadState'
     | 'channelUnreadStateStore'
     | 'disabled'
     | 'EmptyStateIndicator'
@@ -149,20 +212,22 @@ type MessageListPropsWithContext = Pick<
     | 'maximumMessageLimit'
   > &
   Pick<ChatContextValue, 'client'> &
-  Pick<ImageGalleryContextValue, 'setMessages'> &
   Pick<PaginatedMessageListContextValue, 'loadMore' | 'loadMoreRecent' | 'hasMore'> &
   Pick<
     MessagesContextValue,
     | 'DateHeader'
     | 'disableTypingIndicator'
     | 'FlatList'
-    | 'legacyImageViewerSwipeBehaviour'
+    | 'InlineDateSeparator'
+    | 'InlineUnreadIndicator'
+    | 'Message'
     | 'ScrollToBottomButton'
     | 'myMessageTheme'
     | 'TypingIndicator'
     | 'TypingIndicatorContainer'
     | 'UnreadMessagesNotification'
   > &
+  Pick<MessageInputContextValue, 'messageInputFloating' | 'messageInputHeightStore'> &
   Pick<
     ThreadContextValue,
     'loadMoreRecentThread' | 'loadMoreThread' | 'threadHasMore' | 'thread' | 'threadInstance'
@@ -181,7 +246,7 @@ type MessageListPropsWithContext = Pick<
      *  additionalFlatListProps={{ bounces: true, keyboardDismissMode: true }} />
      * ```
      */
-    additionalFlatListProps?: Partial<FlatListProps<LocalMessage>>;
+    additionalFlatListProps?: Partial<FlatListProps<MessageListItemWithNeighbours>>;
     /**
      * UI component for footer of message list. By default message list will use `InlineLoadingMoreIndicator`
      * as FooterComponent. If you want to implement your own inline loading indicator, you can access `loadingMore`
@@ -202,7 +267,6 @@ type MessageListPropsWithContext = Pick<
     HeaderComponent?: React.ComponentType;
     /** Whether or not the FlatList is inverted. Defaults to true */
     inverted?: boolean;
-    isListActive?: boolean;
     /** Turn off grouping of messages by user */
     noGroupByUser?: boolean;
     onListScroll?: ScrollViewProps['onScroll'];
@@ -223,7 +287,7 @@ type MessageListPropsWithContext = Pick<
      *  }}
      * ```
      */
-    setFlatListRef?: (ref: FlatListType<LocalMessage> | null) => void;
+    setFlatListRef?: (ref: FlatListType<MessageListItemWithNeighbours> | null) => void;
     /**
      * If true, the message list will be used in a live-streaming scenario.
      * This flag is used to make sure that the auto scroll behaves well, if multiple messages are received.
@@ -233,8 +297,13 @@ type MessageListPropsWithContext = Pick<
      * @experimental
      */
     isLiveStreaming?: boolean;
+    animateLayout?: boolean;
   };
 
+const messageInputHeightStoreSelector = (state: MessageInputHeightState) => ({
+  height: state.height,
+});
+
 /**
  * The message list component renders a list of messages. It consumes the following contexts:
  *
@@ -249,6 +318,8 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     ? InlineLoadingMoreRecentThreadIndicator
     : InlineLoadingMoreRecentIndicator;
   const {
+    animateLayout = true,
+    attachmentPickerStore,
     additionalFlatListProps,
     channel,
     channelUnreadStateStore,
@@ -260,12 +331,10 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     EmptyStateIndicator,
     FlatList,
     FooterComponent = InlineLoadingMoreIndicator,
-    HeaderComponent = LoadingMoreRecentIndicator,
+    HeaderComponent,
     hideStickyDateHeader,
     inverted = true,
-    isListActive = false,
     isLiveStreaming = false,
-    legacyImageViewerSwipeBehaviour,
     loadChannelAroundMessage,
     loading,
     LoadingIndicator,
@@ -275,6 +344,8 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     loadMoreThread,
     markRead,
     maximumMessageLimit,
+    messageInputFloating,
+    messageInputHeightStore,
     myMessageTheme,
     NetworkDownIndicator,
     noGroupByUser,
@@ -283,11 +354,8 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     readEvents,
     reloadChannel,
     ScrollToBottomButton,
-    selectedPicker,
     setChannelUnreadState,
     setFlatListRef,
-    setMessages,
-    setSelectedPicker,
     setTargetedMessage,
     StickyHeader,
     targetedMessage,
@@ -302,11 +370,11 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
   } = props;
   const [isUnreadNotificationOpen, setIsUnreadNotificationOpen] = useState<boolean>(false);
   const { theme } = useTheme();
-
-  const {
-    colors: { white_snow },
-    messageList: { container, contentContainer, listContainer },
-  } = theme;
+  const styles = useStyles();
+  const { height: messageInputHeight } = useStateStore(
+    messageInputHeightStore.store,
+    messageInputHeightStoreSelector,
+  );
 
   const myMessageThemeString = useMemo(() => JSON.stringify(myMessageTheme), [myMessageTheme]);
 
@@ -322,27 +390,35 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
    */
   const { processedMessageList, rawMessageList, viewabilityChangedCallback } = useMessageList({
     isLiveStreaming,
-    noGroupByUser,
     threadList,
   });
 
-  const processedMessageListRef = useRef(processedMessageList);
-  processedMessageListRef.current = processedMessageList;
+  const previousDerivedItemsRef = useRef<Map<string, MessageListItemWithNeighbours>>(undefined);
 
-  const renderItem = useCallback(
-    ({ item: message, index }: { item: LocalMessage; index: number }) => {
-      const previousMessage = processedMessageList[index + 1];
-      const nextMessage = processedMessageList[index - 1];
-      return (
-        <MessageWrapper
-          message={message}
-          nextMessage={nextMessage}
-          previousMessage={previousMessage}
-        />
-      );
-    },
-    [processedMessageList],
-  );
+  const processedMessageListWithNeighbors = useMemo(() => {
+    if (!previousDerivedItemsRef.current) {
+      previousDerivedItemsRef.current = new Map();
+    }
+
+    const { items, nextDerivedItems } = buildMessageListWithNeighbours(
+      processedMessageList,
+      previousDerivedItemsRef.current,
+    );
+    previousDerivedItemsRef.current = nextDerivedItems;
+
+    return items;
+  }, [processedMessageList]);
+
+  const renderItem = useStableCallback(({ item }: { item: MessageListItemWithNeighbours }) => {
+    const { message, previousMessage, nextMessage } = item;
+    return (
+      <MessageWrapper
+        message={message}
+        previousMessage={previousMessage}
+        nextMessage={nextMessage}
+      />
+    );
+  });
 
   const messageListLengthBeforeUpdate = useRef(0);
   const messageListLengthAfterUpdate = processedMessageList.length;
@@ -384,7 +460,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
   const onStartReachedInPromise = useRef<Promise<void> | null>(null);
   const onEndReachedInPromise = useRef<Promise<void> | null>(null);
 
-  const flatListRef = useRef<FlatListType<LocalMessage> | null>(null);
+  const flatListRef = useRef<FlatListType<MessageListItemWithNeighbours> | null>(null);
 
   const channelResyncScrollSet = useRef<boolean>(true);
 
@@ -419,26 +495,26 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
       return;
     }
 
-    const lastItem = viewableItems[viewableItems.length - 1];
+    const lastMessage = viewableItems[viewableItems.length - 1].item?.message;
 
-    if (lastItem) {
+    if (lastMessage) {
       if (
         !channel.state.messagePagination.hasPrev &&
-        processedMessageList[processedMessageList.length - 1].id === lastItem.item.id
+        processedMessageList[processedMessageList.length - 1].id === lastMessage.id
       ) {
         setStickyHeaderDate(undefined);
         return;
       }
-      const isMessageTypeDeleted = lastItem.item.type === 'deleted';
+      const isMessageTypeDeleted = lastMessage.type === 'deleted';
 
       if (
-        lastItem?.item?.created_at &&
+        lastMessage?.created_at &&
         !isMessageTypeDeleted &&
-        typeof lastItem.item.created_at !== 'string' &&
-        lastItem.item.created_at.toDateString() !== stickyHeaderDateRef.current?.toDateString()
+        typeof lastMessage.created_at !== 'string' &&
+        lastMessage.created_at.toDateString() !== stickyHeaderDateRef.current?.toDateString()
       ) {
-        stickyHeaderDateRef.current = lastItem.item.created_at;
-        setStickyHeaderDate(lastItem.item.created_at);
+        stickyHeaderDateRef.current = lastMessage.created_at;
+        setStickyHeaderDate(lastMessage.created_at);
       }
     }
   });
@@ -452,22 +528,24 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     // 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);
+    const lastReadMessageVisible = viewableItems.some(
+      (item) => item.item.message.id === lastReadMessageId,
+    );
 
     if (
       !viewableItems.length ||
       !readEvents ||
       lastReadMessageVisible ||
-      selectedPicker === 'images'
+      attachmentPickerStore.state.getLatestValue().selectedPicker === 'images'
     ) {
       setIsUnreadNotificationOpen(false);
       return;
     }
 
-    const lastItem = viewableItems[viewableItems.length - 1];
+    const lastItem = viewableItems[viewableItems.length - 1].item;
 
     if (lastItem) {
-      const lastItemMessage = lastItem.item;
+      const lastItemMessage = lastItem.message;
       const lastItemCreatedAt = lastItemMessage.created_at;
 
       const unreadIndicatorDate = channelUnreadState?.last_read?.getTime();
@@ -782,14 +860,21 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [targetedMessage]);
 
+  const setNativeScrollability = useStableCallback((value: boolean) => {
+    if (flatListRef.current) {
+      flatListRef.current.setNativeProps({ scrollEnabled: value });
+    }
+  });
+
   const messageListItemContextValue: MessageListItemContextValue = useMemo(
     () => ({
       goToMessage,
       modifiedTheme,
       noGroupByUser,
       onThreadSelect,
+      setNativeScrollability,
     }),
-    [goToMessage, modifiedTheme, noGroupByUser, onThreadSelect],
+    [goToMessage, modifiedTheme, noGroupByUser, onThreadSelect, setNativeScrollability],
   );
 
   /**
@@ -920,8 +1005,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
   const handleScroll: ScrollViewProps['onScroll'] = useStableCallback((event) => {
     const messageListHasMessages = processedMessageList.length > 0;
     const offset = event.nativeEvent.contentOffset.y;
-    // Show scrollToBottom button once scroll position goes beyond 150.
-    const isScrollAtBottom = offset <= 150;
+    const isScrollAtBottom = offset <= messageInputHeight;
 
     const notLatestSet = channel.state.messages !== channel.state.latestMessages;
 
@@ -966,121 +1050,68 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
 
   const scrollToIndexFailedRetryCountRef = useRef<number>(0);
   const failScrollTimeoutId = useRef<ReturnType<typeof setTimeout>>(undefined);
-  const onScrollToIndexFailedRef = useRef<FlatListProps<LocalMessage>['onScrollToIndexFailed']>(
-    (info) => {
-      // We got a failure as we tried to scroll to an item that was outside the render length
-      if (!flatListRef.current) {
-        return;
-      }
-      // we don't know the actual size of all items but we can see the average, so scroll to the closest offset
-      // since we used only an average offset... we won't go to the center of the item yet
-      // with a little delay to wait for scroll to offset to complete, we can then scroll to the index
-      failScrollTimeoutId.current = setTimeout(() => {
-        try {
-          flatListRef.current?.scrollToIndex({
-            animated: true,
-            index: info.index,
-            viewPosition: 0.5, // try to place message in the center of the screen
-          });
-          if (messageIdLastScrolledToRef.current) {
-            // in case the target message was cleared out
-            // the state being set again will trigger the highlight again
-            setTargetedMessage(messageIdLastScrolledToRef.current);
-          }
+  const onScrollToIndexFailedRef = useRef<
+    FlatListProps<MessageListItemWithNeighbours>['onScrollToIndexFailed']
+  >((info) => {
+    // We got a failure as we tried to scroll to an item that was outside the render length
+    if (!flatListRef.current) {
+      return;
+    }
+    // we don't know the actual size of all items but we can see the average, so scroll to the closest offset
+    // since we used only an average offset... we won't go to the center of the item yet
+    // with a little delay to wait for scroll to offset to complete, we can then scroll to the index
+    failScrollTimeoutId.current = setTimeout(() => {
+      try {
+        flatListRef.current?.scrollToIndex({
+          animated: true,
+          index: info.index,
+          viewPosition: 0.5, // try to place message in the center of the screen
+        });
+        if (messageIdLastScrolledToRef.current) {
+          // in case the target message was cleared out
+          // the state being set again will trigger the highlight again
+          setTargetedMessage(messageIdLastScrolledToRef.current);
+        }
+        scrollToIndexFailedRetryCountRef.current = 0;
+      } catch (e) {
+        if (
+          !onScrollToIndexFailedRef.current ||
+          scrollToIndexFailedRetryCountRef.current > MAX_RETRIES_AFTER_SCROLL_FAILURE
+        ) {
           scrollToIndexFailedRetryCountRef.current = 0;
-        } catch (e) {
-          if (
-            !onScrollToIndexFailedRef.current ||
-            scrollToIndexFailedRetryCountRef.current > MAX_RETRIES_AFTER_SCROLL_FAILURE
-          ) {
-            scrollToIndexFailedRetryCountRef.current = 0;
-            return;
-          }
-          // At some cases the index we're trying to scroll to, doesn't exist yet in the messageList
-          // Scrolling to an index not in range of the Flatlist's data will result in a crash that
-          // won't call onScrollToIndexFailed.
-          // By catching this error we retry scrolling by calling onScrollToIndexFailedRef
-          scrollToIndexFailedRetryCountRef.current += 1;
-          onScrollToIndexFailedRef.current(info);
+          return;
         }
-      }, WAIT_FOR_SCROLL_TIMEOUT);
-
-      // Only when index is greater than 0 and in range of items in FlatList
-      // this onScrollToIndexFailed will be called again
-    },
-  );
-
-  const messagesWithImages =
-    legacyImageViewerSwipeBehaviour &&
-    processedMessageList.filter((message) => {
-      const isMessageTypeDeleted = message.type === 'deleted';
-      if (!isMessageTypeDeleted && message.attachments) {
-        return message.attachments.some(
-          (attachment) =>
-            attachment.type === FileTypes.Image &&
-            !attachment.title_link &&
-            !attachment.og_scrape_url &&
-            (attachment.image_url || attachment.thumb_url),
-        );
+        // At some cases the index we're trying to scroll to, doesn't exist yet in the messageList
+        // Scrolling to an index not in range of the Flatlist's data will result in a crash that
+        // won't call onScrollToIndexFailed.
+        // By catching this error we retry scrolling by calling onScrollToIndexFailedRef
+        scrollToIndexFailedRetryCountRef.current += 1;
+        onScrollToIndexFailedRef.current(info);
       }
-      return false;
-    });
-
-  /**
-   * This is for the useEffect to run again in the case that a message
-   * gets edited with more or the same number of images
-   */
-  const imageString =
-    legacyImageViewerSwipeBehaviour &&
-    messagesWithImages &&
-    messagesWithImages
-      .map((message) =>
-        message.attachments
-          ?.map((attachment) => attachment.image_url || attachment.thumb_url || '')
-          .join(),
-      )
-      .join();
-
-  const numberOfMessagesWithImages =
-    legacyImageViewerSwipeBehaviour && messagesWithImages && messagesWithImages.length;
-  const threadExists = !!thread;
+    }, WAIT_FOR_SCROLL_TIMEOUT);
 
-  useEffect(() => {
-    if (
-      legacyImageViewerSwipeBehaviour &&
-      isListActive &&
-      ((threadList && thread) || (!threadList && !thread))
-    ) {
-      setMessages(messagesWithImages as LocalMessage[]);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    imageString,
-    isListActive,
-    legacyImageViewerSwipeBehaviour,
-    numberOfMessagesWithImages,
-    threadExists,
-    threadList,
-  ]);
+    // Only when index is greater than 0 and in range of items in FlatList
+    // this onScrollToIndexFailed will be called again
+  });
 
   const dismissImagePicker = useStableCallback(() => {
-    if (selectedPicker) {
-      setSelectedPicker(undefined);
+    if (attachmentPickerStore.state.getLatestValue().selectedPicker) {
+      attachmentPickerStore.setSelectedPicker(undefined);
       closePicker();
     }
   });
 
   const onScrollBeginDrag: ScrollViewProps['onScrollBeginDrag'] = useStableCallback((event) => {
-    !hasMoved && selectedPicker && setHasMoved(true);
+    !hasMoved && attachmentPickerStore.state.getLatestValue().selectedPicker && setHasMoved(true);
     onUserScrollEvent(event);
   });
 
   const onScrollEndDrag: ScrollViewProps['onScrollEndDrag'] = useStableCallback((event) => {
-    hasMoved && selectedPicker && setHasMoved(false);
+    hasMoved && attachmentPickerStore.state.getLatestValue().selectedPicker && setHasMoved(false);
     onUserScrollEvent(event);
   });
 
-  const refCallback = useStableCallback((ref: FlatListType<LocalMessage>) => {
+  const refCallback = useStableCallback((ref: FlatListType<MessageListItemWithNeighbours>) => {
     flatListRef.current = ref;
 
     if (setFlatListRef) {
@@ -1121,19 +1152,26 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
   }
 
   const flatListStyle = useMemo(
-    () => [styles.listContainer, listContainer, additionalFlatListProps?.style],
-    [additionalFlatListProps?.style, listContainer],
+    () => [styles.listContainer, additionalFlatListProps?.style],
+    [additionalFlatListProps?.style, styles.listContainer],
   );
 
   const flatListContentContainerStyle = useMemo(
     () => [
+      { paddingTop: messageInputFloating ? messageInputHeight : 0 },
       styles.contentContainer,
       additionalFlatListProps?.contentContainerStyle,
-      contentContainer,
     ],
-    [additionalFlatListProps?.contentContainerStyle, contentContainer],
+    [
+      additionalFlatListProps?.contentContainerStyle,
+      styles.contentContainer,
+      messageInputHeight,
+      messageInputFloating,
+    ],
   );
 
+  const ListComponent = animateLayout ? AnimatedList : FlatList;
+
   const viewportHeightRef = useRef<number>(undefined);
 
   /**
@@ -1169,43 +1207,72 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     if (additionalFlatListProps?.onLayout) {
       additionalFlatListProps.onLayout(event);
     }
-    viewportHeightRef.current = event.nativeEvent.layout.height;
+    const nextViewportHeight = event.nativeEvent.layout.height;
+    if (viewportHeightRef.current !== nextViewportHeight) {
+      const previousViewportHeight = viewportHeightRef.current ?? nextViewportHeight;
+      const closeCorrectionDeltaY = nextViewportHeight - previousViewportHeight;
+      bumpOverlayLayoutRevision(closeCorrectionDeltaY);
+    }
+    viewportHeightRef.current = nextViewportHeight;
   });
 
-  if (!FlatList) {
+  const ListHeaderComponent = useCallback(() => {
+    if (HeaderComponent) {
+      return <HeaderComponent />;
+    }
+
+    return (
+      <>
+        <LoadingMoreRecentIndicator />
+        {!disableTypingIndicator && TypingIndicator && (
+          <TypingIndicatorContainer>
+            <TypingIndicator />
+          </TypingIndicatorContainer>
+        )}
+      </>
+    );
+  }, [
+    HeaderComponent,
+    LoadingMoreRecentIndicator,
+    TypingIndicator,
+    TypingIndicatorContainer,
+    disableTypingIndicator,
+  ]);
+
+  if (!ListComponent) {
     return null;
   }
 
   if (loading) {
     return (
-      <View style={[styles.container, { backgroundColor: white_snow }, container]}>
+      <View style={styles.container}>
         <LoadingIndicator listType='message' />
       </View>
     );
   }
 
+  // TODO: Make sure this is actually overridable as the previous FlatList was.
   return (
-    <View
-      style={[styles.container, { backgroundColor: white_snow }, container]}
-      testID='message-flat-list-wrapper'
-    >
+    <View style={styles.container} testID='message-flat-list-wrapper'>
       {/* Don't show the empty list indicator for Thread messages */}
       {processedMessageList.length === 0 && !thread ? (
-        <View style={[styles.flex, { backgroundColor: white_snow }]} testID='empty-state'>
+        <View style={styles.flex} testID='empty-state'>
           {EmptyStateIndicator ? <EmptyStateIndicator listType='message' /> : null}
         </View>
       ) : (
         <MessageListItemProvider value={messageListItemContextValue}>
-          <FlatList
+          <ListComponent
+            // TODO: Consider hiding this behind a feature flag.
+            layout={LayoutTransition}
             contentContainerStyle={flatListContentContainerStyle}
             /** Disables the MessageList UI. Which means, message actions, reactions won't work. */
-            data={processedMessageList}
+            data={processedMessageListWithNeighbors}
             extraData={disabled}
             inverted={inverted}
             keyboardShouldPersistTaps='handled'
             keyExtractor={keyExtractor}
             ListFooterComponent={FooterComponent}
-            ListHeaderComponent={HeaderComponent}
+            ListHeaderComponent={ListHeaderComponent}
             /**
             If autoscrollToTopThreshold is 10, we scroll to recent only if before the update, the list was already at the
             bottom (10 offset or below).
@@ -1227,7 +1294,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
             renderItem={renderItem}
             scrollEventThrottle={isLiveStreaming ? 16 : undefined}
             showsVerticalScrollIndicator={false}
-            // @ts-expect-error react-native internal
+            // @ts-expect-error Safe to do for now
             strictMode={isLiveStreaming}
             style={flatListStyle}
             testID='message-flat-list'
@@ -1236,24 +1303,39 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
           />
         </MessageListItemProvider>
       )}
-      <View style={styles.stickyHeader}>
+      <View style={styles.stickyHeaderContainer}>
         {messageListLengthAfterUpdate && StickyHeader ? (
           <StickyHeader date={stickyHeaderDate} DateHeader={DateHeader} />
         ) : null}
       </View>
-      {!disableTypingIndicator && TypingIndicator && (
-        <TypingIndicatorContainer>
-          <TypingIndicator />
-        </TypingIndicatorContainer>
-      )}
-      <ScrollToBottomButton
-        onPress={goToNewMessages}
-        showNotification={scrollToBottomButtonVisible}
-        unreadCount={threadList ? 0 : channel?.countUnread()}
-      />
+      {scrollToBottomButtonVisible ? (
+        <Animated.View
+          layout={LinearTransition.duration(200)}
+          style={[
+            {
+              bottom: messageInputFloating
+                ? messageInputHeight + primitives.spacingMd + 16
+                : primitives.spacingMd,
+            },
+            styles.scrollToBottomButtonContainer,
+          ]}
+        >
+          <ScrollToBottomButton
+            onPress={goToNewMessages}
+            showNotification={scrollToBottomButtonVisible}
+            unreadCount={threadList ? 0 : channel?.countUnread()}
+          />
+        </Animated.View>
+      ) : null}
+
       <NetworkDownIndicator />
       {isUnreadNotificationOpen && !threadList ? (
-        <UnreadMessagesNotification onCloseHandler={onUnreadNotificationClose} />
+        <View style={styles.unreadMessagesNotificationContainer}>
+          <UnreadMessagesNotification
+            onCloseHandler={onUnreadNotificationClose}
+            channelUnreadStateStore={channelUnreadStateStore}
+          />
+        </View>
       ) : null}
     </View>
   );
@@ -1262,10 +1344,9 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
 export type MessageListProps = Partial<MessageListPropsWithContext>;
 
 export const MessageList = (props: MessageListProps) => {
-  const { closePicker, selectedPicker, setSelectedPicker } = useAttachmentPickerContext();
+  const { closePicker, attachmentPickerStore } = useAttachmentPickerContext();
   const {
     channel,
-    channelUnreadState,
     channelUnreadStateStore,
     disabled,
     EmptyStateIndicator,
@@ -1273,7 +1354,6 @@ export const MessageList = (props: MessageListProps) => {
     error,
     hideStickyDateHeader,
     highlightedMessageId,
-    isChannelActive,
     loadChannelAroundMessage,
     loading,
     LoadingIndicator,
@@ -1289,7 +1369,6 @@ export const MessageList = (props: MessageListProps) => {
     threadList,
   } = useChannelContext();
   const { client } = useChatContext();
-  const { setMessages } = useImageGalleryContext();
   const { readEvents } = useOwnCapabilitiesContext();
   const {
     DateHeader,
@@ -1297,7 +1376,6 @@ export const MessageList = (props: MessageListProps) => {
     FlatList,
     InlineDateSeparator,
     InlineUnreadIndicator,
-    legacyImageViewerSwipeBehaviour,
     Message,
     MessageSystem,
     myMessageTheme,
@@ -1307,6 +1385,7 @@ export const MessageList = (props: MessageListProps) => {
     TypingIndicatorContainer,
     UnreadMessagesNotification,
   } = useMessagesContext();
+  const { messageInputFloating, messageInputHeightStore } = useMessageInputContext();
   const { loadMore, loadMoreRecent, hasMore } = usePaginatedMessageListContext();
   const { loadMoreRecentThread, loadMoreThread, threadHasMore, thread, threadInstance } =
     useThreadContext();
@@ -1314,8 +1393,8 @@ export const MessageList = (props: MessageListProps) => {
   return (
     <MessageListWithContext
       {...{
+        attachmentPickerStore,
         channel,
-        channelUnreadState,
         channelUnreadStateStore,
         client,
         closePicker,
@@ -1326,13 +1405,10 @@ export const MessageList = (props: MessageListProps) => {
         enableMessageGroupingByUser,
         error,
         FlatList,
-        hasMore,
         hideStickyDateHeader,
         highlightedMessageId,
         InlineDateSeparator,
         InlineUnreadIndicator,
-        isListActive: isChannelActive,
-        legacyImageViewerSwipeBehaviour,
         loadChannelAroundMessage,
         loading,
         LoadingIndicator,
@@ -1343,6 +1419,8 @@ export const MessageList = (props: MessageListProps) => {
         markRead,
         maximumMessageLimit,
         Message,
+        messageInputFloating,
+        messageInputHeightStore,
         MessageSystem,
         myMessageTheme,
         NetworkDownIndicator,
@@ -1350,24 +1428,39 @@ export const MessageList = (props: MessageListProps) => {
         reloadChannel,
         ScrollToBottomButton,
         scrollToFirstUnreadThreshold,
-        selectedPicker,
         setChannelUnreadState,
-        setMessages,
-        setSelectedPicker,
         setTargetedMessage,
         shouldShowUnreadUnderlay,
         StickyHeader,
         targetedMessage,
         thread,
-        threadHasMore,
         threadInstance,
         threadList,
         TypingIndicator,
         TypingIndicatorContainer,
         UnreadMessagesNotification,
+        hasMore,
+        threadHasMore,
       }}
       {...props}
       noGroupByUser={!enableMessageGroupingByUser || props.noGroupByUser}
     />
   );
 };
+
+// SOme notes about why we're relying on `createAnimatedComponent` instead of `Animated.FlatList`:
+// 1. `Animated.FlatList` is much less performant for what we need. We essentially need simple
+//    `layout` animations to account for the list's outer container switching layout. What we're
+//    getting however, is an animated `CellRenderer` component as well as scroll event throttling
+//    reduced to 1. Since we don't really want any of this, we stick to doing it ourselves.
+// 2. We need to memoize the output because of the fact that `createAnimatedComponent` changes the
+//    identity of the `style` prop on every render. It also seems to be an intended thing too,
+//    so not something that's going to change soon. This means that whenever our `MessageList`
+//    rerenders (but the list's props remain stable), it anyway rerenders internally as well (for
+//    about half of the milliseconds it takes for a full `data` rerender !). This affects performance
+//    significantly, especially in high ingress scenarios (i.e a livestream).
+const AnimatedList = React.memo(
+  Animated.createAnimatedComponent(FlatList<MessageListItemWithNeighbours>),
+);
+
+const LayoutTransition = LinearTransition.duration(200);