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

package/src/components/MessageList/MessageFlashList.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   LayoutChangeEvent,
   ScrollViewProps,
@@ -8,11 +8,14 @@ import {
   ViewToken,
 } from 'react-native';
 
+import Animated, { LinearTransition } from 'react-native-reanimated';
+
 import type { FlashListProps, FlashListRef } from '@shopify/flash-list';
 import type { Channel, Event, LocalMessage, MessageResponse } from 'stream-chat';
 
 import { useMessageList } from './hooks/useMessageList';
 import { useShouldScrollToRecentOnNewOwnMessage } from './hooks/useShouldScrollToRecentOnNewOwnMessage';
+import { useTypingUsers } from './hooks/useTypingUsers';
 import { InlineLoadingMoreIndicator } from './InlineLoadingMoreIndicator';
 import { InlineLoadingMoreRecentIndicator } from './InlineLoadingMoreRecentIndicator';
 import { InlineLoadingMoreRecentThreadIndicator } from './InlineLoadingMoreRecentThreadIndicator';
@@ -27,9 +30,9 @@ import {
 } from '../../contexts/channelContext/ChannelContext';
 import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
 import {
-  ImageGalleryContextValue,
-  useImageGalleryContext,
-} from '../../contexts/imageGalleryContext/ImageGalleryContext';
+  MessageInputContextValue,
+  useMessageInputContext,
+} from '../../contexts/messageInputContext/MessageInputContext';
 import {
   MessageListItemContextValue,
   MessageListItemProvider,
@@ -49,14 +52,21 @@ import {
 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 { useStableCallback, useStateStore } from '../../hooks';
+import { bumpOverlayLayoutRevision } from '../../state-store';
+import { MessageInputHeightState } from '../../state-store/message-input-height-store';
+import { primitives } from '../../theme';
+import { MessageWrapper } from '../Message/MessageItemView/MessageWrapper';
+
+type FlashListContextApi = { getRef?: () => FlashListRef<LocalMessage> | null } | undefined;
 
 let FlashList;
+let useFlashListContext: () => FlashListContextApi = () => undefined;
 
 try {
-  FlashList = require('@shopify/flash-list').FlashList;
+  const flashListModule = require('@shopify/flash-list');
+  FlashList = flashListModule.FlashList;
+  useFlashListContext = flashListModule.useFlashListContext;
 } catch {
   FlashList = undefined;
 }
@@ -96,15 +106,18 @@ const getPreviousLastMessage = (messages: LocalMessage[], newMessage?: MessageRe
   return previousLastMessage;
 };
 
+const messageInputHeightStoreSelector = (state: MessageInputHeightState) => ({
+  height: state.height,
+});
+
 type MessageFlashListPropsWithContext = Pick<
   AttachmentPickerContextValue,
-  'closePicker' | 'selectedPicker' | 'setSelectedPicker'
+  'closePicker' | 'attachmentPickerStore'
 > &
   Pick<OwnCapabilitiesContextValue, 'readEvents'> &
   Pick<
     ChannelContextValue,
     | 'channel'
-    | 'channelUnreadState'
     | 'channelUnreadStateStore'
     | 'disabled'
     | 'EmptyStateIndicator'
@@ -125,7 +138,7 @@ type MessageFlashListPropsWithContext = Pick<
     | 'maximumMessageLimit'
   > &
   Pick<ChatContextValue, 'client'> &
-  Pick<ImageGalleryContextValue, 'setMessages'> &
+  Pick<MessageInputContextValue, 'messageInputFloating' | 'messageInputHeightStore'> &
   Pick<PaginatedMessageListContextValue, 'loadMore' | 'loadMoreRecent'> &
   Pick<
     MessagesContextValue,
@@ -134,7 +147,6 @@ type MessageFlashListPropsWithContext = Pick<
     | 'FlatList'
     | 'InlineDateSeparator'
     | 'InlineUnreadIndicator'
-    | 'legacyImageViewerSwipeBehaviour'
     | 'Message'
     | 'ScrollToBottomButton'
     | 'MessageSystem'
@@ -183,7 +195,6 @@ type MessageFlashListPropsWithContext = 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'];
@@ -259,6 +270,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     ? InlineLoadingMoreRecentThreadIndicator
     : InlineLoadingMoreRecentIndicator;
   const {
+    attachmentPickerStore,
     additionalFlashListProps,
     channel,
     channelUnreadStateStore,
@@ -269,12 +281,10 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     disableTypingIndicator,
     EmptyStateIndicator,
     // FlatList,
-    FooterComponent = LoadingMoreRecentIndicator,
+    FooterComponent,
     HeaderComponent = InlineLoadingMoreIndicator,
     hideStickyDateHeader,
-    isListActive = false,
     isLiveStreaming = false,
-    legacyImageViewerSwipeBehaviour,
     loadChannelAroundMessage,
     loading,
     LoadingIndicator,
@@ -284,6 +294,8 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     loadMoreThread,
     markRead,
     maximumMessageLimit,
+    messageInputFloating,
+    messageInputHeightStore,
     myMessageTheme,
     readEvents,
     NetworkDownIndicator,
@@ -292,11 +304,8 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     onThreadSelect,
     reloadChannel,
     ScrollToBottomButton,
-    selectedPicker,
     setChannelUnreadState,
     setFlatListRef,
-    setMessages,
-    setSelectedPicker,
     setTargetedMessage,
     StickyHeader,
     targetedMessage,
@@ -309,10 +318,16 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
   } = props;
   const flashListRef = useRef<FlashListRef<LocalMessage> | null>(null);
 
+  const { height: messageInputHeight } = useStateStore(
+    messageInputHeightStore.store,
+    messageInputHeightStoreSelector,
+  );
+
   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);
   /**
@@ -332,11 +347,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
 
   const channelResyncScrollSet = useRef<boolean>(true);
   const { theme } = useTheme();
-
-  const {
-    colors: { white_snow },
-    messageList: { container, contentContainer, listContainer },
-  } = theme;
+  const styles = useStyles();
 
   const myMessageThemeString = useMemo(() => JSON.stringify(myMessageTheme), [myMessageTheme]);
 
@@ -349,7 +360,6 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
   const { processedMessageList, rawMessageList, viewabilityChangedCallback } = useMessageList({
     isFlashList: true,
     isLiveStreaming,
-    noGroupByUser,
     threadList,
   });
 
@@ -360,8 +370,8 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
       return (
         <MessageWrapper
           message={message}
-          nextMessage={nextMessage}
           previousMessage={previousMessage}
+          nextMessage={nextMessage}
         />
       );
     },
@@ -653,7 +663,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
       !viewableItems.length ||
       !readEvents ||
       lastReadMessageVisible ||
-      selectedPicker === 'images'
+      attachmentPickerStore.state.getLatestValue().selectedPicker === 'images'
     ) {
       setIsUnreadNotificationOpen(false);
       return;
@@ -725,69 +735,23 @@ 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.
+    setScrollEnabled(value);
+  });
+
   const messageListItemContextValue: MessageListItemContextValue = useMemo(
     () => ({
       goToMessage,
       modifiedTheme,
       noGroupByUser,
       onThreadSelect,
+      setNativeScrollability,
     }),
-    [goToMessage, modifiedTheme, noGroupByUser, onThreadSelect],
+    [goToMessage, modifiedTheme, noGroupByUser, onThreadSelect, setNativeScrollability],
   );
 
-  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),
-        );
-      }
-      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;
-
-  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,
-  ]);
-
   /**
    * We are keeping full control on message pagination, and not relying on react-native for it.
    * The reasons being,
@@ -927,8 +891,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     const visibleLength = nativeEvent.layoutMeasurement.height;
     const contentLength = nativeEvent.contentSize.height;
 
-    // Show scrollToBottom button once scroll position goes beyond 150.
-    const isScrollAtStart = contentLength - visibleLength - offset < 150;
+    const isScrollAtStart = contentLength - visibleLength - offset < messageInputHeight;
 
     const notLatestSet = channel.state.messages !== channel.state.latestMessages;
 
@@ -971,19 +934,19 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
   });
 
   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);
   });
 
@@ -1012,17 +975,22 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
   }
 
   const flatListStyle = useMemo(
-    () => [styles.listContainer, listContainer, additionalFlashListProps?.style],
-    [additionalFlashListProps?.style, listContainer],
+    () => [styles.listContainer, additionalFlashListProps?.style],
+    [additionalFlashListProps?.style, styles.listContainer],
   );
 
   const flatListContentContainerStyle = useMemo(
     () => [
       styles.contentContainer,
-      contentContainer,
+      { paddingBottom: messageInputFloating ? messageInputHeight : 0 },
       additionalFlashListProps?.contentContainerStyle,
     ],
-    [additionalFlashListProps?.contentContainerStyle, contentContainer],
+    [
+      additionalFlashListProps?.contentContainerStyle,
+      styles.contentContainer,
+      messageInputFloating,
+      messageInputHeight,
+    ],
   );
 
   const currentListHeightRef = useRef<number | undefined>(undefined);
@@ -1034,16 +1002,42 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
       return;
     }
 
+    const closeCorrectionDeltaY = height - currentListHeightRef.current;
+    bumpOverlayLayoutRevision(closeCorrectionDeltaY);
+
     const changedBy = currentListHeightRef.current - height;
-    flashListRef.current?.scrollToOffset({
-      offset: currentScrollOffsetRef.current + changedBy,
+    flashListRef.current?.getNativeScrollRef()?.setNativeProps({
+      contentOffset: { x: 0, y: flashListRef.current?.getAbsoluteLastScrollOffset() + changedBy },
     });
     currentListHeightRef.current = height;
   });
 
+  const ListFooterComponent = useCallback(() => {
+    if (FooterComponent) {
+      return <FooterComponent />;
+    }
+
+    return (
+      <FlashListFooterTypingAdapter enabled={!disableTypingIndicator && !!TypingIndicator}>
+        <LoadingMoreRecentIndicator />
+        {!disableTypingIndicator && TypingIndicator && (
+          <TypingIndicatorContainer>
+            <TypingIndicator />
+          </TypingIndicatorContainer>
+        )}
+      </FlashListFooterTypingAdapter>
+    );
+  }, [
+    FooterComponent,
+    LoadingMoreRecentIndicator,
+    TypingIndicator,
+    TypingIndicatorContainer,
+    disableTypingIndicator,
+  ]);
+
   if (loading) {
     return (
-      <View style={[styles.container, { backgroundColor: white_snow }, container]}>
+      <View style={styles.container}>
         <LoadingIndicator listType='message' />
       </View>
     );
@@ -1056,13 +1050,9 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
   }
 
   return (
-    <View
-      onLayout={onLayout}
-      style={[styles.container, { backgroundColor: white_snow }, container]}
-      testID='message-flat-list-wrapper'
-    >
+    <View onLayout={onLayout} style={styles.container} testID='message-flat-list-wrapper'>
       {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>
       ) : (
@@ -1077,7 +1067,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
             }
             keyboardShouldPersistTaps='handled'
             keyExtractor={keyExtractor}
-            ListFooterComponent={FooterComponent}
+            ListFooterComponent={ListFooterComponent}
             ListHeaderComponent={HeaderComponent}
             maintainVisibleContentPosition={maintainVisibleContentPosition}
             onMomentumScrollEnd={onUserScrollEvent}
@@ -1088,6 +1078,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
             onViewableItemsChanged={stableOnViewableItemsChanged}
             ref={refCallback}
             renderItem={renderItem}
+            scrollEnabled={scrollEnabled}
             scrollEventThrottle={isLiveStreaming ? 16 : undefined}
             showsVerticalScrollIndicator={false}
             style={flatListStyle}
@@ -1097,29 +1088,84 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
           />
         </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()}
-      />
+      <Animated.View
+        layout={LinearTransition.duration(200)}
+        style={[
+          styles.scrollToBottomButtonContainer,
+          {
+            bottom: messageInputFloating
+              ? messageInputHeight + primitives.spacingMd
+              : primitives.spacingMd,
+          },
+        ]}
+      >
+        <ScrollToBottomButton
+          onPress={goToNewMessages}
+          showNotification={scrollToBottomButtonVisible}
+          unreadCount={threadList ? 0 : channel?.countUnread()}
+        />
+      </Animated.View>
       <NetworkDownIndicator />
       {isUnreadNotificationOpen && !threadList ? (
-        <UnreadMessagesNotification onCloseHandler={onUnreadNotificationClose} />
+        <View style={styles.unreadMessagesNotificationContainer}>
+          <UnreadMessagesNotification
+            onCloseHandler={onUnreadNotificationClose}
+            channelUnreadStateStore={channelUnreadStateStore}
+          />
+        </View>
       ) : null}
     </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.
+ */
+const FlashListFooterTypingAdapter = ({
+  enabled,
+  children,
+}: PropsWithChildren<{
+  enabled: boolean;
+}>) => {
+  const api = useFlashListContext();
+  const typingUsers = useTypingUsers();
+
+  const typingUsersLengthRef = useRef<number>(typingUsers.length);
+
+  useEffect(() => {
+    const listApi = api?.getRef?.();
+
+    if (!enabled || !listApi) {
+      return;
+    }
+
+    const lastScrollOffset = listApi.getAbsoluteLastScrollOffset();
+    const contentSize = listApi.getChildContainerDimensions();
+    const windowSize = listApi.getWindowSize();
+
+    const visibleLength = windowSize.height;
+    const contentLength = contentSize.height + listApi.getFirstItemOffset();
+
+    const isNearEnd = Math.ceil(lastScrollOffset + visibleLength) >= contentLength;
+
+    if (listApi && typingUsersLengthRef.current === 0 && typingUsers.length > 0 && isNearEnd) {
+      listApi.scrollToEnd({ animated: true });
+    }
+
+    typingUsersLengthRef.current = typingUsers.length;
+  }, [enabled, api, typingUsers.length]);
+
+  return children;
+};
+
 export type MessageFlashListProps = Partial<MessageFlashListPropsWithContext>;
 
 /**
@@ -1129,10 +1175,9 @@ export type MessageFlashListProps = Partial<MessageFlashListPropsWithContext>;
  * Please feel free to report any issues or suggestions.
  */
 export const MessageFlashList = (props: MessageFlashListProps) => {
-  const { closePicker, selectedPicker, setSelectedPicker } = useAttachmentPickerContext();
+  const { closePicker, attachmentPickerStore } = useAttachmentPickerContext();
   const {
     channel,
-    channelUnreadState,
     channelUnreadStateStore,
     disabled,
     EmptyStateIndicator,
@@ -1156,14 +1201,12 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
     threadList,
   } = useChannelContext();
   const { client } = useChatContext();
-  const { setMessages } = useImageGalleryContext();
   const {
     DateHeader,
     disableTypingIndicator,
     FlatList,
     InlineDateSeparator,
     InlineUnreadIndicator,
-    legacyImageViewerSwipeBehaviour,
     Message,
     MessageSystem,
     myMessageTheme,
@@ -1176,12 +1219,13 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
   const { loadMore, loadMoreRecent } = usePaginatedMessageListContext();
   const { loadMoreRecentThread, loadMoreThread, thread, threadInstance } = useThreadContext();
   const { readEvents } = useOwnCapabilitiesContext();
+  const { messageInputFloating, messageInputHeightStore } = useMessageInputContext();
 
   return (
     <MessageFlashListWithContext
       {...{
+        attachmentPickerStore,
         channel,
-        channelUnreadState,
         channelUnreadStateStore,
         client,
         closePicker,
@@ -1197,7 +1241,6 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
         InlineDateSeparator,
         InlineUnreadIndicator,
         isListActive: isChannelActive,
-        legacyImageViewerSwipeBehaviour,
         loadChannelAroundMessage,
         loading,
         LoadingIndicator,
@@ -1208,6 +1251,8 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
         markRead,
         maximumMessageLimit,
         Message,
+        messageInputFloating,
+        messageInputHeightStore,
         MessageSystem,
         myMessageTheme,
         NetworkDownIndicator,
@@ -1215,10 +1260,7 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
         reloadChannel,
         ScrollToBottomButton,
         scrollToFirstUnreadThreshold,
-        selectedPicker,
         setChannelUnreadState,
-        setMessages,
-        setSelectedPicker,
         setTargetedMessage,
         shouldShowUnreadUnderlay,
         StickyHeader,
@@ -1236,28 +1278,77 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
   );
 };
 
-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 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,
+    ],
+  );
+};