stream-chat-react-native-core 8.12.0 → 8.12.2

package/lib/typescript/components/MessageList/utils/getGroupStyles.d.ts

@@ -4,8 +4,8 @@ import type { PaginatedMessageListContextValue } from '../../../contexts/paginat
 import type { ThreadContextValue } from '../../../contexts/threadContext/ThreadContext';
 export type MessageGroupStylesParams = {
     message: LocalMessage;
-    previousMessage: LocalMessage;
-    nextMessage: LocalMessage;
+    previousMessage?: LocalMessage;
+    nextMessage?: LocalMessage;
     maxTimeBetweenGroupedMessages?: number;
     dateSeparatorDate?: Date;
     nextMessageDateSeparatorDate?: Date;

package/lib/typescript/components/MessageList/utils/getGroupStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getGroupStyles.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/utils/getGroupStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,2EAA2E,CAAC;AAClI,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,+CAA+C,CAAC;AAKxF,MAAM,MAAM,wBAAwB,GAAG;IACrC,OAAO,EAAE,YAAY,CAAC;IACtB,eAAe,EAAE,YAAY,CAAC;IAC9B,WAAW,EAAE,YAAY,CAAC;IAC1B,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,iBAAiB,CAAC,EAAE,IAAI,CAAC;IACzB,4BAA4B,CAAC,EAAE,IAAI,CAAC;CACrC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC,cAAc,EAAE,cAAc,CAAC;IAC/B,QAAQ,EAAE,gCAAgC,CAAC,UAAU,CAAC,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAC9F;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,EAAE,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAErE;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,4HAO3B,wBAAwB,KAAG,UAAU,EAsEvC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,QAAQ,oBAAoB;;CA0B1D,CAAC"}
+{"version":3,"file":"getGroupStyles.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/utils/getGroupStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,2EAA2E,CAAC;AAClI,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,+CAA+C,CAAC;AAKxF,MAAM,MAAM,wBAAwB,GAAG;IACrC,OAAO,EAAE,YAAY,CAAC;IACtB,eAAe,CAAC,EAAE,YAAY,CAAC;IAC/B,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,iBAAiB,CAAC,EAAE,IAAI,CAAC;IACzB,4BAA4B,CAAC,EAAE,IAAI,CAAC;CACrC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC,cAAc,EAAE,cAAc,CAAC;IAC/B,QAAQ,EAAE,gCAAgC,CAAC,UAAU,CAAC,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAC9F;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,EAAE,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAErE;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,4HAO3B,wBAAwB,KAAG,UAAU,EAsEvC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,QAAQ,oBAAoB;;CA0B1D,CAAC"}

package/lib/typescript/components/Thread/Thread.d.ts

@@ -38,6 +38,7 @@ type ThreadPropsWithContext = Pick<ChatContextValue, 'client'> & Pick<MessagesCo
      * Call custom function on closing thread if handling thread state elsewhere
      */
     onThreadDismount?: () => void;
+    shouldUseFlashList?: boolean;
 };
 export type ThreadProps = Partial<ThreadPropsWithContext>;
 /**

package/lib/typescript/components/Thread/Thread.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Thread.d.ts","sourceRoot":"","sources":["../../../../src/components/Thread/Thread.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiC,MAAM,OAAO,CAAC;AAKtD,OAAO,EAAE,gBAAgB,EAAkB,MAAM,wCAAwC,CAAC;AAC1F,OAAO,EACL,oBAAoB,EAErB,MAAM,gDAAgD,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAoB,MAAM,4CAA4C,CAAC;AAElG,OAAO,EAEL,iBAAiB,EAClB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAoB,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAC1F,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAU9D,KAAK,sBAAsB,GAAG,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC,GAC5D,IAAI,CAAC,oBAAoB,EAAE,aAAa,CAAC,GACzC,IAAI,CACF,kBAAkB,EAChB,aAAa,GACb,gBAAgB,GAChB,2BAA2B,GAC3B,cAAc,GACd,QAAQ,GACR,gBAAgB,CACnB,GAAG;IACF;;;SAGK;IACL,2BAA2B,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACzD;;;SAGK;IACL,0BAA0B,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACvD;;;;;OAKG;IACH,+BAA+B,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;IACjE,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kDAAkD;IAClD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACtD;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAkFJ,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,sBAAsB,CAAC,CAAC;AAE1D;;;;;;;;GAQG;AACH,eAAO,MAAM,MAAM,GAAI,OAAO,WAAW,sBA0BxC,CAAC"}
+{"version":3,"file":"Thread.d.ts","sourceRoot":"","sources":["../../../../src/components/Thread/Thread.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiC,MAAM,OAAO,CAAC;AAKtD,OAAO,EAAE,gBAAgB,EAAkB,MAAM,wCAAwC,CAAC;AAC1F,OAAO,EACL,oBAAoB,EAErB,MAAM,gDAAgD,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAoB,MAAM,4CAA4C,CAAC;AAElG,OAAO,EAEL,iBAAiB,EAClB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAoB,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAC1F,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAU9D,KAAK,sBAAsB,GAAG,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC,GAC5D,IAAI,CAAC,oBAAoB,EAAE,aAAa,CAAC,GACzC,IAAI,CACF,kBAAkB,EAChB,aAAa,GACb,gBAAgB,GAChB,2BAA2B,GAC3B,cAAc,GACd,QAAQ,GACR,gBAAgB,CACnB,GAAG;IACF;;;SAGK;IACL,2BAA2B,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACzD;;;SAGK;IACL,0BAA0B,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACvD;;;;;OAKG;IACH,+BAA+B,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;IACjE,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kDAAkD;IAClD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACtD;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAmFJ,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,sBAAsB,CAAC,CAAC;AAE1D;;;;;;;;GAQG;AACH,eAAO,MAAM,MAAM,GAAI,OAAO,WAAW,sBA0BxC,CAAC"}

package/lib/typescript/contexts/messageListItemContext/MessageListItemContext.d.ts

@@ -1,6 +1,5 @@
 import React, { PropsWithChildren } from 'react';
 import { MessageListProps } from '../../components/MessageList/MessageList';
-import { MessagePreviousAndNextMessageStore } from '../../state-store/message-list-prev-next-state';
 import { Theme } from '../themeContext/utils/theme';
 export type MessageListItemContextValue = {
     /**
@@ -10,10 +9,6 @@ export type MessageListItemContextValue = {
      * @returns void
      */
     goToMessage: (messageId: string) => void;
-    /**
-     * Store to get the previous and next message in the message list
-     */
-    messageListPreviousAndNextMessageStore: MessagePreviousAndNextMessageStore;
     /**
      * Theme to use for the message list item
      */

package/lib/typescript/contexts/messageListItemContext/MessageListItemContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageListItemContext.d.ts","sourceRoot":"","sources":["../../../../src/contexts/messageListItemContext/MessageListItemContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,iBAAiB,EAAc,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,EAAE,kCAAkC,EAAE,MAAM,gDAAgD,CAAC;AAEpG,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAIpD,MAAM,MAAM,2BAA2B,GAAG;IACxC;;;;;OAKG;IACH,WAAW,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC;;OAEG;IACH,sCAAsC,EAAE,kCAAkC,CAAC;IAC3E;;OAEG;IACH,aAAa,EAAE,KAAK,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,cAAc,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;CACpD,CAAC;AAEF,eAAO,MAAM,sBAAsB,4CAElC,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,sBAGrC,iBAAiB,CAAC;IACnB,KAAK,CAAC,EAAE,2BAA2B,CAAC;CACrC,CAAC,sBAID,CAAC;AAEF,eAAO,MAAM,yBAAyB,mCAUrC,CAAC"}
+{"version":3,"file":"MessageListItemContext.d.ts","sourceRoot":"","sources":["../../../../src/contexts/messageListItemContext/MessageListItemContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,iBAAiB,EAAc,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAE5E,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAIpD,MAAM,MAAM,2BAA2B,GAAG;IACxC;;;;;OAKG;IACH,WAAW,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC;;OAEG;IACH,aAAa,EAAE,KAAK,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,cAAc,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;CACpD,CAAC;AAEF,eAAO,MAAM,sBAAsB,4CAElC,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,sBAGrC,iBAAiB,CAAC;IACnB,KAAK,CAAC,EAAE,2BAA2B,CAAC;CACrC,CAAC,sBAID,CAAC;AAEF,eAAO,MAAM,yBAAyB,mCAUrC,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "8.12.0",
+  "version": "8.12.2",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
@@ -68,7 +68,7 @@
     ]
   },
   "dependencies": {
-    "@gorhom/bottom-sheet": "^5.1.8",
+    "@gorhom/bottom-sheet": "5.1.8",
     "@ungap/structured-clone": "^1.3.0",
     "dayjs": "1.11.13",
     "emoji-regex": "^10.4.0",

package/src/components/ChannelList/Skeleton.tsx

@@ -13,6 +13,8 @@ import { Defs, LinearGradient, Path, Rect, Stop, Svg } from 'react-native-svg';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+
 const paddingLarge = 16;
 const paddingMedium = 12;
 const paddingSmall = 8;
@@ -148,7 +150,7 @@ export const Skeleton = () => {
         </Svg>
       </Animated.View>
       <Svg height={height} width={width}>
-        <Path {...svgAnimatedProps} fill={maskFillColor || white_snow} />
+        <AnimatedPath animatedProps={svgAnimatedProps} fill={maskFillColor || white_snow} />
       </Svg>
     </View>
   );

package/src/components/Message/MessageSimple/MessageWrapper.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 
 import { View } from 'react-native';
 
@@ -14,7 +14,6 @@ import { ThemeProvider, useTheme } from '../../../contexts/themeContext/ThemeCon
 
 import { useStateStore } from '../../../hooks/useStateStore';
 import { ChannelUnreadStateStoreType } from '../../../state-store/channel-unread-state';
-import { MessagePreviousAndNextMessageStoreType } from '../../../state-store/message-list-prev-next-state';
 
 const channelUnreadStateSelector = (state: ChannelUnreadStateStoreType) => ({
   first_unread_message_id: state.channelUnreadState?.first_unread_message_id,
@@ -25,10 +24,12 @@ const channelUnreadStateSelector = (state: ChannelUnreadStateStoreType) => ({
 
 export type MessageWrapperProps = {
   message: LocalMessage;
+  previousMessage?: LocalMessage;
+  nextMessage?: LocalMessage;
 };
 
 export const MessageWrapper = React.memo((props: MessageWrapperProps) => {
-  const { message } = props;
+  const { message, previousMessage, nextMessage } = props;
   const { client } = useChatContext();
   const {
     channelUnreadStateStore,
@@ -47,35 +48,23 @@ export const MessageWrapper = React.memo((props: MessageWrapperProps) => {
     myMessageTheme,
     shouldShowUnreadUnderlay,
   } = useMessagesContext();
-  const {
-    goToMessage,
-    onThreadSelect,
-    noGroupByUser,
-    modifiedTheme,
-    messageListPreviousAndNextMessageStore,
-  } = useMessageListItemContext();
+  const { goToMessage, onThreadSelect, noGroupByUser, modifiedTheme } = useMessageListItemContext();
 
   const dateSeparatorDate = useMessageDateSeparator({
     hideDateSeparators,
     message,
-    messageListPreviousAndNextMessageStore,
+    previousMessage,
   });
 
-  const selector = useCallback(
-    (state: MessagePreviousAndNextMessageStoreType) => ({
-      nextMessage: state.messageList[message.id]?.nextMessage,
-    }),
-    [message.id],
-  );
-  const { nextMessage } = useStateStore(messageListPreviousAndNextMessageStore.state, selector);
   const isNewestMessage = nextMessage === undefined;
   const groupStyles = useMessageGroupStyles({
     dateSeparatorDate,
     getMessageGroupStyle,
     maxTimeBetweenGroupedMessages,
     message,
-    messageListPreviousAndNextMessageStore,
+    nextMessage,
     noGroupByUser,
+    previousMessage,
   });
 
   const { first_unread_message_id, last_read_timestamp, last_read_message_id, unread_messages } =

package/src/components/MessageList/MessageFlashList.tsx

@@ -254,10 +254,6 @@ const getItemTypeInternal = (message: LocalMessage) => {
   return 'generic-message';
 };
 
-const renderItem = ({ item: message }: { item: LocalMessage }) => {
-  return <MessageWrapper message={message} />;
-};
-
 const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) => {
   const LoadingMoreRecentIndicator = props.threadList
     ? InlineLoadingMoreRecentThreadIndicator
@@ -350,18 +346,28 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     [myMessageThemeString, theme],
   );
 
-  const {
-    messageListPreviousAndNextMessageStore,
-    processedMessageList,
-    rawMessageList,
-    viewabilityChangedCallback,
-  } = useMessageList({
+  const { processedMessageList, rawMessageList, viewabilityChangedCallback } = useMessageList({
     isFlashList: true,
     isLiveStreaming,
     noGroupByUser,
     threadList,
   });
 
+  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],
+  );
+
   /**
    * We need topMessage and channelLastRead values to set the initial scroll position.
    * So these values only get used if `initialScrollToFirstUnreadMessage` prop is true.
@@ -722,18 +728,11 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
   const messageListItemContextValue: MessageListItemContextValue = useMemo(
     () => ({
       goToMessage,
-      messageListPreviousAndNextMessageStore,
       modifiedTheme,
       noGroupByUser,
       onThreadSelect,
     }),
-    [
-      goToMessage,
-      messageListPreviousAndNextMessageStore,
-      modifiedTheme,
-      noGroupByUser,
-      onThreadSelect,
-    ],
+    [goToMessage, modifiedTheme, noGroupByUser, onThreadSelect],
   );
 
   const messagesWithImages =

package/src/components/MessageList/MessageList.tsx

@@ -233,10 +233,6 @@ type MessageListPropsWithContext = Pick<
     isLiveStreaming?: boolean;
   };
 
-const renderItem = ({ item: message }: { item: LocalMessage }) => {
-  return <MessageWrapper message={message} />;
-};
-
 /**
  * The message list component renders a list of messages. It consumes the following contexts:
  *
@@ -320,16 +316,30 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
    * NOTE: rawMessageList changes only when messages array state changes
    * processedMessageList changes on any state change
    */
-  const {
-    messageListPreviousAndNextMessageStore,
-    processedMessageList,
-    rawMessageList,
-    viewabilityChangedCallback,
-  } = useMessageList({
+  const { processedMessageList, rawMessageList, viewabilityChangedCallback } = useMessageList({
     isLiveStreaming,
     noGroupByUser,
     threadList,
   });
+
+  const processedMessageListRef = useRef(processedMessageList);
+  processedMessageListRef.current = processedMessageList;
+
+  const renderItem = useCallback(
+    ({ item: message, index }: { item: LocalMessage; index: number }) => {
+      const previousMessage = processedMessageListRef.current[index + 1];
+      const nextMessage = processedMessageListRef.current[index - 1];
+      return (
+        <MessageWrapper
+          message={message}
+          nextMessage={nextMessage}
+          previousMessage={previousMessage}
+        />
+      );
+    },
+    [processedMessageListRef],
+  );
+
   const messageListLengthBeforeUpdate = useRef(0);
   const messageListLengthAfterUpdate = processedMessageList.length;
 
@@ -771,18 +781,11 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
   const messageListItemContextValue: MessageListItemContextValue = useMemo(
     () => ({
       goToMessage,
-      messageListPreviousAndNextMessageStore,
       modifiedTheme,
       noGroupByUser,
       onThreadSelect,
     }),
-    [
-      goToMessage,
-      messageListPreviousAndNextMessageStore,
-      modifiedTheme,
-      noGroupByUser,
-      onThreadSelect,
-    ],
+    [goToMessage, modifiedTheme, noGroupByUser, onThreadSelect],
   );
 
   /**

package/src/components/MessageList/__tests__/useMessageDateSeparator.test.ts

@@ -2,15 +2,12 @@ import { renderHook } from '@testing-library/react-native';
 
 import { LocalMessage } from 'stream-chat';
 
-import { MessagePreviousAndNextMessageStore } from '../../../state-store/message-list-prev-next-state';
 import { useMessageDateSeparator } from '../hooks/useMessageDateSeparator';
 
 describe('useMessageDateSeparator', () => {
-  let messageListPreviousAndNextMessageStore: MessagePreviousAndNextMessageStore;
   let messages: LocalMessage[];
 
   beforeEach(() => {
-    messageListPreviousAndNextMessageStore = new MessagePreviousAndNextMessageStore();
     messages = [
       {
         created_at: new Date('2020-01-01T00:00:00.000Z'),
@@ -28,13 +25,10 @@ describe('useMessageDateSeparator', () => {
         text: 'Hello World',
       },
     ] as LocalMessage[];
-    messageListPreviousAndNextMessageStore.setMessageListPreviousAndNextMessage({ messages });
   });
 
   it('should return undefined if no message is passed', () => {
-    const { result } = renderHook(() =>
-      useMessageDateSeparator({ message: undefined, messageListPreviousAndNextMessageStore }),
-    );
+    const { result } = renderHook(() => useMessageDateSeparator({ message: undefined }));
     expect(result.current).toBeUndefined();
   });
 
@@ -43,7 +37,7 @@ describe('useMessageDateSeparator', () => {
       useMessageDateSeparator({
         hideDateSeparators: true,
         message: messages[1],
-        messageListPreviousAndNextMessageStore,
+        previousMessage: messages[0],
       }),
     );
     expect(result.current).toBeUndefined();
@@ -51,7 +45,7 @@ describe('useMessageDateSeparator', () => {
 
   it('should return the date separator for a message if previous message is not the same day', () => {
     const { result } = renderHook(() =>
-      useMessageDateSeparator({ message: messages[1], messageListPreviousAndNextMessageStore }),
+      useMessageDateSeparator({ message: messages[1], previousMessage: messages[0] }),
     );
     expect(result.current).toBe(messages[1].created_at);
   });
@@ -69,14 +63,12 @@ describe('useMessageDateSeparator', () => {
         text: 'World',
       },
     ] as LocalMessage[];
-    const messageListPreviousAndNextMessageStore = new MessagePreviousAndNextMessageStore();
-    messageListPreviousAndNextMessageStore.setMessageListPreviousAndNextMessage({ messages });
     const { result: resultOfFirstMessage } = renderHook(() =>
-      useMessageDateSeparator({ message: messages[0], messageListPreviousAndNextMessageStore }),
+      useMessageDateSeparator({ message: messages[0], previousMessage: undefined }),
     );
     expect(resultOfFirstMessage.current).toBe(messages[0].created_at);
     const { result: resultOfSecondMessage } = renderHook(() =>
-      useMessageDateSeparator({ message: messages[1], messageListPreviousAndNextMessageStore }),
+      useMessageDateSeparator({ message: messages[1], previousMessage: messages[0] }),
     );
     expect(resultOfSecondMessage.current).toBeUndefined();
   });

package/src/components/MessageList/hooks/useMessageDateSeparator.ts

@@ -1,13 +1,7 @@
-import { useCallback, useMemo } from 'react';
+import { useMemo } from 'react';
 
 import { LocalMessage } from 'stream-chat';
 
-import { useStateStore } from '../../../hooks/useStateStore';
-import {
-  MessagePreviousAndNextMessageStore,
-  MessagePreviousAndNextMessageStoreType,
-} from '../../../state-store/message-list-prev-next-state';
-
 export const getDateSeparatorValue = ({
   hideDateSeparators,
   message,
@@ -37,20 +31,12 @@ export const getDateSeparatorValue = ({
 export const useMessageDateSeparator = ({
   hideDateSeparators,
   message,
-  messageListPreviousAndNextMessageStore,
+  previousMessage,
 }: {
   hideDateSeparators?: boolean;
   message?: LocalMessage;
-  messageListPreviousAndNextMessageStore: MessagePreviousAndNextMessageStore;
+  previousMessage?: LocalMessage;
 }) => {
-  const selector = useCallback(
-    (state: MessagePreviousAndNextMessageStoreType) => ({
-      previousMessage: message ? state.messageList[message.id]?.previousMessage : undefined,
-    }),
-    [message],
-  );
-  const { previousMessage } = useStateStore(messageListPreviousAndNextMessageStore.state, selector);
-
   const dateSeparatorDate = useMemo(() => {
     if (!message && !previousMessage) {
       return undefined;

package/src/components/MessageList/hooks/useMessageGroupStyles.ts

@@ -1,15 +1,10 @@
-import { useCallback, useMemo } from 'react';
+import { useMemo } from 'react';
 
 import { LocalMessage } from 'stream-chat';
 
 import { useMessageDateSeparator } from './useMessageDateSeparator';
 
 import { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
-import { useStateStore } from '../../../hooks/useStateStore';
-import {
-  MessagePreviousAndNextMessageStore,
-  MessagePreviousAndNextMessageStoreType,
-} from '../../../state-store/message-list-prev-next-state';
 import { getGroupStyle } from '../utils/getGroupStyles';
 
 /**
@@ -20,7 +15,8 @@ export const useMessageGroupStyles = ({
   dateSeparatorDate,
   maxTimeBetweenGroupedMessages,
   message,
-  messageListPreviousAndNextMessageStore,
+  previousMessage,
+  nextMessage,
   getMessageGroupStyle = getGroupStyle,
 }: {
   noGroupByUser?: boolean;
@@ -28,24 +24,13 @@ export const useMessageGroupStyles = ({
   dateSeparatorDate?: Date;
   maxTimeBetweenGroupedMessages?: number;
   message: LocalMessage;
-  messageListPreviousAndNextMessageStore: MessagePreviousAndNextMessageStore;
+  previousMessage?: LocalMessage;
+  nextMessage?: LocalMessage;
 }) => {
-  const selector = useCallback(
-    (state: MessagePreviousAndNextMessageStoreType) => ({
-      nextMessage: state.messageList[message.id]?.nextMessage,
-      previousMessage: state.messageList[message.id]?.previousMessage,
-    }),
-    [message.id],
-  );
-  const { previousMessage, nextMessage } = useStateStore(
-    messageListPreviousAndNextMessageStore.state,
-    selector,
-  );
-
   // This is needed to calculate the group styles for the next message
   const nextMessageDateSeparatorDate = useMessageDateSeparator({
     message: nextMessage,
-    messageListPreviousAndNextMessageStore,
+    previousMessage: message,
   });
 
   const groupStyles = useMemo(() => {

package/src/components/MessageList/hooks/useMessageList.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useMemo, useRef } from 'react';
 
 import type { LocalMessage } from 'stream-chat';
 
@@ -12,7 +12,6 @@ import { usePaginatedMessageListContext } from '../../../contexts/paginatedMessa
 import { useThreadContext } from '../../../contexts/threadContext/ThreadContext';
 
 import { useRAFCoalescedValue } from '../../../hooks';
-import { MessagePreviousAndNextMessageStore } from '../../../state-store/message-list-prev-next-state';
 import { DateSeparators, getDateSeparators } from '../utils/getDateSeparators';
 import { getGroupStyles } from '../utils/getGroupStyles';
 
@@ -70,9 +69,6 @@ export const useMessageList = (params: UseMessageListParams) => {
   const { messages, viewabilityChangedCallback } = usePaginatedMessageListContext();
   const { threadMessages } = useThreadContext();
   const messageList = threadList ? threadMessages : messages;
-  const [messageListPreviousAndNextMessageStore] = useState(
-    () => new MessagePreviousAndNextMessageStore(),
-  );
 
   const processedMessageList = useMemo<LocalMessage[]>(() => {
     const newMessageList = [];
@@ -94,13 +90,6 @@ export const useMessageList = (params: UseMessageListParams) => {
     return newMessageList;
   }, [messageList, deletedMessagesVisibilityType, client.userID, isFlashList]);
 
-  useEffect(() => {
-    messageListPreviousAndNextMessageStore.setMessageListPreviousAndNextMessage({
-      isFlashList,
-      messages: processedMessageList,
-    });
-  }, [processedMessageList, messageListPreviousAndNextMessageStore, isFlashList]);
-
   /**
    * @deprecated use `useDateSeparator` hook instead directly in the Message.
    */
@@ -156,13 +145,12 @@ export const useMessageList = (params: UseMessageListParams) => {
       dateSeparatorsRef,
       /** Message group styles */
       messageGroupStylesRef,
-      messageListPreviousAndNextMessageStore,
       /** Messages enriched with dates/readby/groups and also reversed in order */
       processedMessageList: data,
       /** Raw messages from the channel state */
       rawMessageList: messageList,
       viewabilityChangedCallback,
     }),
-    [data, messageList, messageListPreviousAndNextMessageStore, viewabilityChangedCallback],
+    [data, messageList, viewabilityChangedCallback],
   );
 };

package/src/components/MessageList/utils/getGroupStyles.ts

@@ -10,8 +10,8 @@ import type { GroupType } from '../hooks/useMessageList';
 
 export type MessageGroupStylesParams = {
   message: LocalMessage;
-  previousMessage: LocalMessage;
-  nextMessage: LocalMessage;
+  previousMessage?: LocalMessage;
+  nextMessage?: LocalMessage;
   maxTimeBetweenGroupedMessages?: number;
   dateSeparatorDate?: Date;
   nextMessageDateSeparatorDate?: Date;

package/src/components/Thread/Thread.tsx

@@ -68,6 +68,7 @@ type ThreadPropsWithContext = Pick<ChatContextValue, 'client'> &
      * Call custom function on closing thread if handling thread state elsewhere
      */
     onThreadDismount?: () => void;
+    shouldUseFlashList?: boolean;
   };
 
 const ThreadWithContext = (props: ThreadPropsWithContext) => {
@@ -86,6 +87,7 @@ const ThreadWithContext = (props: ThreadPropsWithContext) => {
     parentMessagePreventPress = true,
     thread,
     threadInstance,
+    shouldUseFlashList = false,
   } = props;
 
   useEffect(() => {
@@ -125,7 +127,7 @@ const ThreadWithContext = (props: ThreadPropsWithContext) => {
 
   return (
     <React.Fragment key={`thread-${thread.id}`}>
-      {FlashList ? (
+      {FlashList && shouldUseFlashList ? (
         <MessageFlashList
           HeaderComponent={MemoizedThreadFooterComponent}
           threadList

package/src/contexts/messageListItemContext/MessageListItemContext.tsx

@@ -1,7 +1,6 @@
 import React, { createContext, PropsWithChildren, useContext } from 'react';
 
 import { MessageListProps } from '../../components/MessageList/MessageList';
-import { MessagePreviousAndNextMessageStore } from '../../state-store/message-list-prev-next-state';
 
 import { Theme } from '../themeContext/utils/theme';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
@@ -15,10 +14,6 @@ export type MessageListItemContextValue = {
    * @returns void
    */
   goToMessage: (messageId: string) => void;
-  /**
-   * Store to get the previous and next message in the message list
-   */
-  messageListPreviousAndNextMessageStore: MessagePreviousAndNextMessageStore;
   /**
    * Theme to use for the message list item
    */

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "8.12.0"
+  "version": "8.12.2"
 }