stream-chat-react-native-core 8.11.0 → 8.12.0-beta.1

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

@@ -0,0 +1,75 @@
+import { useCallback, 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';
+
+/**
+ * Hook to get the group styles for a message
+ */
+export const useMessageGroupStyles = ({
+  noGroupByUser,
+  dateSeparatorDate,
+  maxTimeBetweenGroupedMessages,
+  message,
+  messageListPreviousAndNextMessageStore,
+  getMessageGroupStyle = getGroupStyle,
+}: {
+  noGroupByUser?: boolean;
+  getMessageGroupStyle: MessagesContextValue['getMessageGroupStyle'];
+  dateSeparatorDate?: Date;
+  maxTimeBetweenGroupedMessages?: number;
+  message: LocalMessage;
+  messageListPreviousAndNextMessageStore: MessagePreviousAndNextMessageStore;
+}) => {
+  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,
+  });
+
+  const groupStyles = useMemo(() => {
+    if (noGroupByUser) {
+      return [];
+    }
+    return getMessageGroupStyle({
+      dateSeparatorDate,
+      maxTimeBetweenGroupedMessages,
+      message,
+      nextMessage,
+      nextMessageDateSeparatorDate,
+      previousMessage,
+    });
+  }, [
+    noGroupByUser,
+    getMessageGroupStyle,
+    dateSeparatorDate,
+    maxTimeBetweenGroupedMessages,
+    message,
+    nextMessage,
+    nextMessageDateSeparatorDate,
+    previousMessage,
+  ]);
+
+  return groupStyles;
+};

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

@@ -1,4 +1,4 @@
-import { useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
 import type { LocalMessage } from 'stream-chat';
 
@@ -12,17 +12,24 @@ 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';
 
 export type UseMessageListParams = {
   deletedMessagesVisibilityType?: DeletedMessagesVisibilityType;
+  /**
+   * @deprecated
+   */
   noGroupByUser?: boolean;
   threadList?: boolean;
   isLiveStreaming?: boolean;
   isFlashList?: boolean;
 };
 
+/**
+ * FIXME: To change it to a more specific type.
+ */
 export type GroupType = string;
 
 export type MessageGroupStyles = {
@@ -35,23 +42,27 @@ export const shouldIncludeMessageInList = (
 ) => {
   const { deletedMessagesVisibilityType, userId } = options;
   const isMessageTypeDeleted = message.type === 'deleted';
+  const isSender = message.user?.id === userId;
+
+  if (!isMessageTypeDeleted) {
+    return true;
+  }
+
   switch (deletedMessagesVisibilityType) {
+    case 'always':
+      return true;
     case 'sender':
-      return !isMessageTypeDeleted || message.user?.id === userId;
-
+      return isSender;
     case 'receiver':
-      return !isMessageTypeDeleted || message.user?.id !== userId;
-
+      return !isSender;
     case 'never':
-      return !isMessageTypeDeleted;
-
     default:
-      return !!message;
+      return false;
   }
 };
 
 export const useMessageList = (params: UseMessageListParams) => {
-  const { noGroupByUser, threadList, isLiveStreaming, isFlashList } = params;
+  const { noGroupByUser, threadList, isLiveStreaming, isFlashList = false } = params;
   const { client } = useChatContext();
   const { hideDateSeparators, maxTimeBetweenGroupedMessages } = useChannelContext();
   const { deletedMessagesVisibilityType, getMessagesGroupStyles = getGroupStyles } =
@@ -59,64 +70,84 @@ 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 = [];
+    for (const message of messageList) {
+      if (
+        !shouldIncludeMessageInList(message, {
+          deletedMessagesVisibilityType,
+          userId: client.userID,
+        })
+      ) {
+        continue;
+      }
+      if (isFlashList) {
+        newMessageList.push(message);
+      } else {
+        newMessageList.unshift(message);
+      }
+    }
+    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.
+   */
   const dateSeparators = useMemo(
     () =>
       getDateSeparators({
-        deletedMessagesVisibilityType,
         hideDateSeparators,
-        messages: messageList,
-        userId: client.userID,
+        messages: processedMessageList,
       }),
-    [deletedMessagesVisibilityType, hideDateSeparators, messageList, client.userID],
+    [hideDateSeparators, processedMessageList],
   );
 
+  /**
+   * @deprecated use `useDateSeparator` hook instead directly in the Message.
+   */
   const dateSeparatorsRef = useRef<DateSeparators>(dateSeparators);
   dateSeparatorsRef.current = dateSeparators;
 
+  /**
+   * @deprecated use `useMessageGroupStyles` hook instead directly in the Message.
+   */
   const messageGroupStyles = useMemo(
     () =>
       getMessagesGroupStyles({
         dateSeparators: dateSeparatorsRef.current,
         hideDateSeparators,
         maxTimeBetweenGroupedMessages,
-        messages: messageList,
+        messages: processedMessageList,
         noGroupByUser,
         userId: client.userID,
       }),
     [
-      dateSeparatorsRef,
       getMessagesGroupStyles,
       hideDateSeparators,
       maxTimeBetweenGroupedMessages,
-      messageList,
+      processedMessageList,
       noGroupByUser,
       client.userID,
     ],
   );
 
+  /**
+   * @deprecated use `useMessageGroupStyles` hook instead directly in the Message.
+   */
   const messageGroupStylesRef = useRef<MessageGroupStyles>(messageGroupStyles);
   messageGroupStylesRef.current = messageGroupStyles;
 
-  const processedMessageList = useMemo<LocalMessage[]>(() => {
-    const newMessageList = [];
-    for (const message of messageList) {
-      if (
-        shouldIncludeMessageInList(message, {
-          deletedMessagesVisibilityType,
-          userId: client.userID,
-        })
-      ) {
-        if (isFlashList) {
-          newMessageList.push(message);
-        } else {
-          newMessageList.unshift(message);
-        }
-      }
-    }
-    return newMessageList;
-  }, [client.userID, deletedMessagesVisibilityType, isFlashList, messageList]);
-
   const data = useRAFCoalescedValue(processedMessageList, isLiveStreaming);
 
   return useMemo(
@@ -125,12 +156,13 @@ 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, viewabilityChangedCallback],
+    [data, messageList, messageListPreviousAndNextMessageStore, viewabilityChangedCallback],
   );
 };

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

@@ -2,10 +2,19 @@ import type { DeletedMessagesVisibilityType } from '../../../contexts/messagesCo
 import type { PaginatedMessageListContextValue } from '../../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
 import type { ThreadContextValue } from '../../../contexts/threadContext/ThreadContext';
 
+/**
+ * @deprecated in favor of `useDateSeparator` hook instead directly in the Message.
+ */
 export type GetDateSeparatorsParams = {
   messages: PaginatedMessageListContextValue['messages'] | ThreadContextValue['threadMessages'];
+  /**
+   * @deprecated The computations are done ahead of time in the useMessageList hook so this parameter is no longer needed.
+   */
   deletedMessagesVisibilityType?: DeletedMessagesVisibilityType;
   hideDateSeparators?: boolean;
+  /**
+   * @deprecated The computations are done ahead of time in the useMessageList hook so this parameter is no longer needed.
+   */
   userId?: string;
 };
 
@@ -13,33 +22,20 @@ export type DateSeparators = {
   [key: string]: Date;
 };
 
+/**
+ * @deprecated in favor of `useDateSeparator` hook instead directly in the Message.
+ */
 export const getDateSeparators = (params: GetDateSeparatorsParams) => {
-  const { deletedMessagesVisibilityType, hideDateSeparators, messages, userId } = params;
+  const { hideDateSeparators, messages } = params;
   const dateSeparators: DateSeparators = {};
 
   if (hideDateSeparators) {
     return dateSeparators;
   }
 
-  const messagesWithoutDeleted = messages.filter((message) => {
-    const isMessageTypeDeleted = message.type === 'deleted';
-
-    const isDeletedMessageVisibleToSender =
-      deletedMessagesVisibilityType === 'sender' || deletedMessagesVisibilityType === 'always';
-
-    const isDeletedMessageVisibleToReceiver =
-      deletedMessagesVisibilityType === 'receiver' || deletedMessagesVisibilityType === 'always';
-
-    return (
-      !isMessageTypeDeleted ||
-      (userId === message.user?.id && isDeletedMessageVisibleToSender) ||
-      (userId !== message.user?.id && isDeletedMessageVisibleToReceiver)
-    );
-  });
-
-  for (let i = 0; i < messagesWithoutDeleted.length; i++) {
-    const previousMessage = messagesWithoutDeleted[i - 1];
-    const message = messagesWithoutDeleted[i];
+  for (let i = 0; i < messages.length; i++) {
+    const previousMessage = messages[i - 1];
+    const message = messages[i];
 
     const messageDate = message.created_at.toDateString();
 

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

@@ -8,25 +8,46 @@ import type { ThreadContextValue } from '../../../contexts/threadContext/ThreadC
 import { isEditedMessage } from '../../../utils/utils';
 import type { GroupType } from '../hooks/useMessageList';
 
+export type MessageGroupStylesParams = {
+  message: LocalMessage;
+  previousMessage: LocalMessage;
+  nextMessage: LocalMessage;
+  maxTimeBetweenGroupedMessages?: number;
+  dateSeparatorDate?: Date;
+  nextMessageDateSeparatorDate?: Date;
+};
+
+/**
+ * @deprecated in favor of `useMessageGroupStyles` hook instead directly in the Message.
+ */
 export type GetGroupStylesParams = {
   dateSeparators: DateSeparators;
   messages: PaginatedMessageListContextValue['messages'] | ThreadContextValue['threadMessages'];
+  /**
+   * @deprecated in favor of `useDateSeparator` hook instead directly in the Message.
+   */
   hideDateSeparators?: boolean;
   maxTimeBetweenGroupedMessages?: number;
   noGroupByUser?: boolean;
+  /**
+   * @deprecated
+   */
   userId?: string;
 };
 
 export type GroupStyle = '' | 'middle' | 'top' | 'bottom' | 'single';
 
-const getGroupStyle = (
-  dateSeparators: DateSeparators,
-  message: LocalMessage,
-  previousMessage: LocalMessage,
-  nextMessage: LocalMessage,
-  hideDateSeparators?: boolean,
-  maxTimeBetweenGroupedMessages?: number,
-): GroupStyle[] => {
+/**
+ * Get the group styles for a message
+ */
+export const getGroupStyle = ({
+  message,
+  previousMessage,
+  nextMessage,
+  maxTimeBetweenGroupedMessages,
+  nextMessageDateSeparatorDate,
+  dateSeparatorDate,
+}: MessageGroupStylesParams): GroupStyle[] => {
   const groupStyles: GroupStyle[] = [];
 
   const isPrevMessageTypeDeleted = previousMessage?.type === 'deleted';
@@ -41,7 +62,7 @@ const getGroupStyle = (
     userId !== previousMessage?.user?.id ||
     !!isPrevMessageTypeDeleted ||
     // NOTE: This is needed for the group styles to work after the message separated by date.
-    (!hideDateSeparators && dateSeparators[message.id]) ||
+    dateSeparatorDate ||
     isEditedMessage(previousMessage);
 
   const isBottomMessage =
@@ -50,7 +71,7 @@ const getGroupStyle = (
     nextMessage.type === 'error' ||
     userId !== nextMessage?.user?.id ||
     !!isNextMessageTypeDeleted ||
-    (!hideDateSeparators && dateSeparators[nextMessage.id]) ||
+    nextMessageDateSeparatorDate ||
     (maxTimeBetweenGroupedMessages !== undefined &&
       (nextMessage.created_at as Date).getTime() - (message.created_at as Date).getTime() >
         maxTimeBetweenGroupedMessages) ||
@@ -98,15 +119,11 @@ const getGroupStyle = (
   return groupStyles;
 };
 
+/**
+ * @deprecated in favor of `useMessageGroupStyles` hook instead directly in the Message.
+ */
 export const getGroupStyles = (params: GetGroupStylesParams) => {
-  const {
-    dateSeparators,
-    hideDateSeparators,
-    maxTimeBetweenGroupedMessages,
-    messages,
-    noGroupByUser,
-    userId,
-  } = params;
+  const { dateSeparators, maxTimeBetweenGroupedMessages, messages, noGroupByUser } = params;
 
   if (noGroupByUser) {
     return {};
@@ -114,25 +131,19 @@ export const getGroupStyles = (params: GetGroupStylesParams) => {
 
   const messageGroupStyles: { [key: string]: GroupType[] } = {};
 
-  const messagesFilteredForNonUser = messages.filter((message) => {
-    const isMessageTypeDeleted = message.type === 'deleted';
-    return !isMessageTypeDeleted || userId === message.user?.id;
-  });
-
-  for (let i = 0; i < messagesFilteredForNonUser.length; i++) {
-    const previousMessage = messagesFilteredForNonUser[i - 1];
-    const message = messagesFilteredForNonUser[i];
-    const nextMessage = messagesFilteredForNonUser[i + 1];
+  for (let i = 0; i < messages.length; i++) {
+    const previousMessage = messages[i - 1];
+    const message = messages[i];
+    const nextMessage = messages[i + 1];
 
     if (message.id) {
-      messageGroupStyles[message.id] = getGroupStyle(
-        dateSeparators,
+      messageGroupStyles[message.id] = getGroupStyle({
+        dateSeparatorDate: dateSeparators[message.id],
+        maxTimeBetweenGroupedMessages,
         message,
-        previousMessage,
         nextMessage,
-        hideDateSeparators,
-        maxTimeBetweenGroupedMessages,
-      );
+        previousMessage,
+      });
     }
   }
 

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

@@ -7,10 +7,7 @@ export const getLastReceivedMessage = (messages: LocalMessage[]) => {
    * There are no status on dates so they will be skipped
    */
   for (const message of messages) {
-    if (
-      message?.status === MessageStatusTypes.RECEIVED ||
-      message?.status === MessageStatusTypes.SENDING
-    ) {
+    if (message?.status !== MessageStatusTypes.FAILED) {
       return message;
     }
   }

package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap

@@ -232,10 +232,10 @@ exports[`Thread should match thread snapshot 1`] = `
             }
           >
             <View
-              testID="message-list-item-0"
+              testID="message-list-item-38ef6f7c-3090-5759-a37f-ab0053aadb96"
             >
               <View
-                testID="message-list-item-0"
+                testID="message-list-item-38ef6f7c-3090-5759-a37f-ab0053aadb96"
               >
                 <View
                   style={
@@ -602,10 +602,10 @@ exports[`Thread should match thread snapshot 1`] = `
             }
           >
             <View
-              testID="message-list-item-1"
+              testID="message-list-item-516efa25-5d29-5c9a-ad2d-4cc183e785bd"
             >
               <View
-                testID="message-list-item-1"
+                testID="message-list-item-516efa25-5d29-5c9a-ad2d-4cc183e785bd"
               >
                 <View
                   style={
@@ -972,10 +972,10 @@ exports[`Thread should match thread snapshot 1`] = `
             }
           >
             <View
-              testID="message-list-item-2"
+              testID="message-list-item-82a83b16-b611-527c-b3ac-765ef6220490"
             >
               <View
-                testID="message-list-item-2"
+                testID="message-list-item-82a83b16-b611-527c-b3ac-765ef6220490"
               >
                 <View
                   style={

package/src/components/index.ts

@@ -99,6 +99,7 @@ export * from './Message/hooks/useMessageReadData';
 export * from './Message/Message';
 export * from './Message/MessageSimple/MessageAvatar';
 export * from './Message/MessageSimple/MessageBounce';
+export * from './Message/MessageSimple/MessageBlocked';
 export * from './Message/MessageSimple/MessageContent';
 export * from './Message/MessageSimple/MessageDeleted';
 export * from './Message/MessageSimple/MessageEditedTimestamp';
@@ -162,6 +163,8 @@ export * from './MessageList/utils/getGroupStyles';
 export * from './MessageList/utils/getLastReceivedMessage';
 export * from './Message/hooks/useMessageDeliveryData';
 export * from './Message/hooks/useMessageReadData';
+export * from './MessageList/hooks/useMessageDateSeparator';
+export * from './MessageList/hooks/useMessageGroupStyles';
 
 export * from './MessageMenu/MessageActionList';
 export * from './MessageMenu/MessageActionListItem';

package/src/contexts/channelContext/ChannelContext.tsx

@@ -6,7 +6,11 @@ import { MarkReadFunctionOptions } from '../../components/Channel/Channel';
 import type { EmptyStateProps } from '../../components/Indicators/EmptyStateIndicator';
 import type { LoadingProps } from '../../components/Indicators/LoadingIndicator';
 import { StickyHeaderProps } from '../../components/MessageList/StickyHeader';
-import type { ChannelUnreadState } from '../../types/types';
+import {
+  ChannelUnreadStateStore,
+  ChannelUnreadStateStoreType,
+} from '../../state-store/channel-unread-state';
+import { ChannelUnreadState } from '../../types/types';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
 import { isTestEnvironment } from '../utils/isTestEnvironment';
@@ -81,9 +85,9 @@ export type ChannelContextValue = {
     limit,
     setTargetedMessage,
   }: {
-    channelUnreadState?: ChannelUnreadState;
+    channelUnreadState?: ChannelUnreadStateStoreType['channelUnreadState'];
     limit?: number;
-    setChannelUnreadState?: React.Dispatch<React.SetStateAction<ChannelUnreadState | undefined>>;
+    setChannelUnreadState?: (data: ChannelUnreadStateStoreType['channelUnreadState']) => void;
     setTargetedMessage?: (messageId: string) => void;
   }) => Promise<void>;
 
@@ -123,7 +127,7 @@ export type ChannelContextValue = {
   read: ChannelState['read'];
   reloadChannel: () => Promise<void>;
   scrollToFirstUnreadThreshold: number;
-  setChannelUnreadState: React.Dispatch<React.SetStateAction<ChannelUnreadState | undefined>>;
+  setChannelUnreadState: (data: ChannelUnreadStateStoreType['channelUnreadState']) => void;
   setLastRead: React.Dispatch<React.SetStateAction<Date | undefined>>;
   setTargetedMessage: (messageId?: string) => void;
   /**
@@ -131,7 +135,12 @@ export type ChannelContextValue = {
    * Its a map of filename and AbortController
    */
   uploadAbortControllerRef: React.MutableRefObject<Map<string, AbortController>>;
+  /**
+   * Channel unread data
+   * @deprecated Use channelUnreadStateStore instead
+   */
   channelUnreadState?: ChannelUnreadState;
+  channelUnreadStateStore: ChannelUnreadStateStore;
   disabled?: boolean;
   enableMessageGroupingByUser?: boolean;
   /**

package/src/contexts/messageContext/MessageContext.tsx

@@ -112,7 +112,10 @@ export type MessageContextValue = {
    * @returns
    */
   handleReaction?: (reactionType: string) => Promise<void>;
-  /** Latest message id on current channel */
+  /**
+   * Latest message id on current channel
+   * @deprecated and will be removed in the future. This is pretty much accessible through the message-list itself.
+   */
   lastReceivedId?: string;
   /**
    * Theme provided only to messages that are the current users

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -603,6 +603,7 @@ export const MessageInputProvider = ({
         return;
       }
 
+      // MODERATION: This is for the case where the message is of type 'error' and if you try to edit it, it will throw an error.
       if (editedMessage && editedMessage.type !== 'error') {
         try {
           clearEditingState();
@@ -624,6 +625,10 @@ export const MessageInputProvider = ({
           } else {
             messageComposer.clear();
           }
+          // Even though we edit, but we eventually send the message as a regular message, so we need to clear the editing state.
+          if (editedMessage) {
+            clearEditingState();
+          }
           await value.sendMessage({
             localMessage,
             message,

package/src/contexts/messageListItemContext/MessageListItemContext.tsx

@@ -0,0 +1,63 @@
+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';
+import { isTestEnvironment } from '../utils/isTestEnvironment';
+
+export type MessageListItemContextValue = {
+  /**
+   * Handler to go to a particular message when its quoted.
+   *
+   * @param messageId The id of the message to go to.
+   * @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
+   */
+  modifiedTheme: Theme;
+  /**
+   * Whether to group messages by user
+   */
+  noGroupByUser?: boolean;
+  /**
+   * 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: MessageListProps['onThreadSelect'];
+};
+
+export const MessageListItemContext = createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as MessageListItemContextValue,
+);
+
+export const MessageListItemProvider = ({
+  children,
+  value,
+}: PropsWithChildren<{
+  value?: MessageListItemContextValue;
+}>) => (
+  <MessageListItemContext.Provider value={value as unknown as MessageListItemContextValue}>
+    {children}
+  </MessageListItemContext.Provider>
+);
+
+export const useMessageListItemContext = () => {
+  const contextValue = useContext(MessageListItemContext) as unknown as MessageListItemContextValue;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      'The useMessageListItemContext hook was called outside of the MessageListItemContext provider. Make sure you have configured MessageListItem component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#message-list',
+    );
+  }
+
+  return contextValue;
+};