stream-chat-react-native-core 3.10.2 → 4.0.0-beta.4

package/src/contexts/messageInputContext/hooks/useMessageDetailsForState.ts

@@ -1,9 +1,5 @@
 import { useEffect, useState } from 'react';
 
-import { generateRandomId } from '../../../utils/utils';
-
-import type { FileUpload, ImageUpload, MessageInputContextValue } from '../MessageInputContext';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -14,6 +10,9 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
+import { generateRandomId } from '../../../utils/utils';
+
+import type { FileUpload, ImageUpload, MessageInputContextValue } from '../MessageInputContext';
 
 export const isEditingBoolean = <
   At extends UnknownType = DefaultAttachmentType,
@@ -41,12 +40,7 @@ export const useMessageDetailsForState = <
 ) => {
   const [fileUploads, setFileUploads] = useState<FileUpload[]>([]);
   const [imageUploads, setImageUploads] = useState<ImageUpload[]>([]);
-  const [mentionedUsers, setMentionedUsers] = useState(
-    (!isEditingBoolean<At, Ch, Co, Ev, Me, Re, Us>(message) &&
-      Array.isArray(message?.mentioned_users) &&
-      message.mentioned_users.map((user) => user.id)) ||
-      [],
-  );
+  const [mentionedUsers, setMentionedUsers] = useState<string[]>([]);
   const [numberOfUploads, setNumberOfUploads] = useState(0);
   const [showMoreOptions, setShowMoreOptions] = useState(true);
   const initialTextValue = initialValue || '';
@@ -60,6 +54,17 @@ export const useMessageDetailsForState = <
 
   const messageValue =
     typeof message === 'boolean' ? '' : `${message.id}${message.text}${message.updated_at}`;
+
+  useEffect(() => {
+    if (
+      !isEditingBoolean<At, Ch, Co, Ev, Me, Re, Us>(message) &&
+      Array.isArray(message?.mentioned_users)
+    ) {
+      const mentionedUsers = message.mentioned_users.map((user) => user.id);
+      setMentionedUsers(mentionedUsers);
+    }
+  }, [messageValue]);
+
   useEffect(() => {
     if (message && !isEditingBoolean<At, Ch, Co, Ev, Me, Re, Us>(message)) {
       setText(message?.text || '');

package/src/contexts/messageOverlayContext/MessageOverlayContext.tsx

@@ -1,17 +1,18 @@
-import React, { PropsWithChildren, useContext, useState } from 'react';
+import React, { PropsWithChildren, useContext } from 'react';
 
-import { getDisplayName } from '../utils/getDisplayName';
-
-import type { StyleProp, TextStyle } from 'react-native';
 import type { Attachment } from 'stream-chat';
 
-import type { Alignment, MessageContextValue } from '../messageContext/MessageContext';
-import type { MessagesContextValue } from '../messagesContext/MessagesContext';
+import { useResettableState } from './hooks/useResettableState';
 
 import type { GroupType, MessageType } from '../../components/MessageList/hooks/useMessageList';
-import type { MessageActionsProps } from '../../components/MessageOverlay/MessageActions';
+import type { MessageActionListProps } from '../../components/MessageOverlay/MessageActionList';
+import type {
+  MessageActionListItemProps,
+  MessageActionType,
+} from '../../components/MessageOverlay/MessageActionListItem';
 import type { OverlayReactionListProps } from '../../components/MessageOverlay/OverlayReactionList';
 import type { OverlayReactionsProps } from '../../components/MessageOverlay/OverlayReactions';
+import type { OverlayReactionsAvatarProps } from '../../components/MessageOverlay/OverlayReactionsAvatar';
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -23,13 +24,10 @@ import type {
   UnknownType,
 } from '../../types/types';
 import type { ReactionData } from '../../utils/utils';
-
-export type MessageAction = {
-  action: () => void;
-  title: string;
-  icon?: React.ReactElement;
-  titleStyle?: StyleProp<TextStyle>;
-};
+import type { Alignment, MessageContextValue } from '../messageContext/MessageContext';
+import type { MessagesContextValue } from '../messagesContext/MessagesContext';
+import type { OwnCapabilitiesContextValue } from '../ownCapabilitiesContext/OwnCapabilitiesContext';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type MessageOverlayData<
   At extends UnknownType = DefaultAttachmentType,
@@ -47,13 +45,14 @@ export type MessageOverlayData<
   handleReaction?: (reactionType: string) => Promise<void>;
   images?: Attachment<At>[];
   message?: MessageType<At, Ch, Co, Ev, Me, Re, Us>;
-  messageActions?: MessageAction[];
+  messageActions?: MessageActionType[];
   messageContext?: MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>;
   messageReactionTitle?: string;
   messagesContext?: MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>;
   onlyEmojis?: boolean;
   otherAttachments?: Attachment<At>[];
   OverlayReactionList?: React.ComponentType<OverlayReactionListProps<At, Ch, Co, Ev, Me, Re, Us>>;
+  ownCapabilities?: OwnCapabilitiesContextValue;
   supportedReactions?: ReactionData[];
   threadList?: boolean;
 };
@@ -70,9 +69,10 @@ export type MessageOverlayContextValue<
   /**
    * Custom UI component for rendering [message actions](https://github.com/GetStream/stream-chat-react-native/blob/master/screenshots/docs/2.png) in overlay.
    *
-   * **Default** [MessageActions](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageOverlay/MessageActions.tsx)
+   * **Default** [MessageActionList](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageOverlay/MessageActions.tsx)
    */
-  MessageActions: React.ComponentType<MessageActionsProps<At, Ch, Co, Ev, Me, Re, Us>>;
+  MessageActionList: React.ComponentType<MessageActionListProps<At, Ch, Co, Ev, Me, Re, Us>>;
+  MessageActionListItem: React.ComponentType<MessageActionListItemProps>;
   /**
    * Custom UI component for rendering [reaction selector](https://github.com/GetStream/stream-chat-react-native/blob/master/screenshots/docs/2.png) in overlay (which shows up on long press on message).
    *
@@ -85,6 +85,7 @@ export type MessageOverlayContextValue<
    * **Default** [OverlayReactions](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageOverlay/OverlayReactions.tsx)
    */
   OverlayReactions: React.ComponentType<OverlayReactionsProps>;
+  OverlayReactionsAvatar: React.ComponentType<OverlayReactionsAvatarProps>;
   reset: () => void;
   setData: React.Dispatch<React.SetStateAction<MessageOverlayData<At, Ch, Co, Ev, Me, Re, Us>>>;
   data?: MessageOverlayData<At, Ch, Co, Ev, Me, Re, Us>;
@@ -106,17 +107,7 @@ export const MessageOverlayProvider = <
 }: PropsWithChildren<{
   value?: MessageOverlayContextValue<At, Ch, Co, Ev, Me, Re, Us>;
 }>) => {
-  const [data, setData] = useState(value?.data);
-
-  const reset = () => {
-    setData(value?.data);
-  };
-
-  const messageOverlayContext = {
-    data,
-    reset,
-    setData,
-  };
+  const messageOverlayContext = useResettableState(value);
   return (
     <MessageOverlayContext.Provider value={messageOverlayContext as MessageOverlayContextValue}>
       {children}

package/src/contexts/messageOverlayContext/hooks/useResettableState.test.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Button, Text } from 'react-native';
+
+import { fireEvent, render, waitFor } from '@testing-library/react-native';
+
+import { useResettableState } from './useResettableState';
+
+const TestComponent = () => {
+  const { data, reset, setData } = useResettableState(0);
+
+  return (
+    <>
+      <Text testID='value'>{`${data}`}</Text>
+      <Button
+        onPress={() => {
+          setData(data + 1);
+        }}
+        testID='increment'
+        title='Super useful incrementer'
+      />
+      <Button
+        onPress={() => {
+          reset();
+        }}
+        testID='reset'
+        title='Oh no, go back!'
+      />
+    </>
+  );
+};
+
+const waitForOptions = {
+  timeout: 1000,
+};
+
+test('useResettableState can be reset to its initial state', async () => {
+  const { getByTestId } = render(<TestComponent />);
+
+  await waitFor(() => expect(getByTestId('value').children[0]).toBe('0'), waitForOptions);
+
+  fireEvent.press(getByTestId('increment'));
+  await waitFor(() => expect(getByTestId('value').children[0]).toBe('1'), waitForOptions);
+
+  fireEvent.press(getByTestId('reset'));
+  await waitFor(() => expect(getByTestId('value').children[0]).toBe('0'), waitForOptions);
+});

package/src/contexts/messageOverlayContext/hooks/useResettableState.ts

@@ -0,0 +1,22 @@
+import { useState } from 'react';
+
+import { useIsMountedRef } from '../../../hooks/useIsMountedRef';
+
+/**
+ * Wrapper around useState that provides a `reset`
+ * function to reset the state to its initial value.
+ *
+ * Will not set state after being unmounted.
+ * */
+export const useResettableState = <T>(values: T) => {
+  const [data, setData] = useState(values);
+  const isMounted = useIsMountedRef();
+
+  const reset = () => {
+    if (isMounted.current) {
+      setData(values);
+    }
+  };
+
+  return { data, reset, setData };
+};

package/src/contexts/messagesContext/MessagesContext.tsx

@@ -1,17 +1,10 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import { getDisplayName } from '../utils/getDisplayName';
-
 import type { TouchableOpacityProps } from 'react-native';
 
-import type { ChannelState, MessageResponse } from 'stream-chat';
+import type { MessagePinnedHeaderProps } from 'src/components/Message/MessageSimple/MessagePinnedHeader';
 
-import type { Alignment } from '../messageContext/MessageContext';
-import type { MessageAction } from '../messageOverlayContext/MessageOverlayContext';
-import type { SuggestionCommand } from '../suggestionsContext/SuggestionsContext';
-import type { DeepPartial } from '../themeContext/ThemeContext';
-import type { Theme } from '../themeContext/utils/theme';
-import type { TDateTimeParserInput } from '../translationContext/TranslationContext';
+import type { ChannelState, MessageResponse } from 'stream-chat';
 
 import type { AttachmentProps } from '../../components/Attachment/Attachment';
 import type { AttachmentActionsProps } from '../../components/Attachment/AttachmentActions';
@@ -29,20 +22,23 @@ import type { MessageAvatarProps } from '../../components/Message/MessageSimple/
 import type { MessageContentProps } from '../../components/Message/MessageSimple/MessageContent';
 import type { MessageDeletedProps } from '../../components/Message/MessageSimple/MessageDeleted';
 import type { MessageFooterProps } from '../../components/Message/MessageSimple/MessageFooter';
+
 import type { MessageRepliesProps } from '../../components/Message/MessageSimple/MessageReplies';
 import type { MessageRepliesAvatarsProps } from '../../components/Message/MessageSimple/MessageRepliesAvatars';
-import type { MessageStatusProps } from '../../components/Message/MessageSimple/MessageStatus';
 import type { MessageSimpleProps } from '../../components/Message/MessageSimple/MessageSimple';
+import type { MessageStatusProps } from '../../components/Message/MessageSimple/MessageStatus';
 import type { MessageTextProps } from '../../components/Message/MessageSimple/MessageTextContainer';
+import type { ReactionListProps } from '../../components/Message/MessageSimple/ReactionList';
 import type { MarkdownRules } from '../../components/Message/MessageSimple/utils/renderText';
+import type { MessageActionsParams } from '../../components/Message/utils/messageActions';
 import type { DateHeaderProps } from '../../components/MessageList/DateHeader';
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
 import type { InlineDateSeparatorProps } from '../../components/MessageList/InlineDateSeparator';
 import type { MessageListProps } from '../../components/MessageList/MessageList';
-import type { ScrollToBottomButtonProps } from '../../components/MessageList/ScrollToBottomButton';
 import type { MessageSystemProps } from '../../components/MessageList/MessageSystem';
+import type { ScrollToBottomButtonProps } from '../../components/MessageList/ScrollToBottomButton';
+import type { MessageActionType } from '../../components/MessageOverlay/MessageActionListItem';
 import type { OverlayReactionListProps } from '../../components/MessageOverlay/OverlayReactionList';
-import type { ReactionListProps } from '../../components/Message/MessageSimple/ReactionList';
 import type { ReplyProps } from '../../components/Reply/Reply';
 import type { FlatList } from '../../native';
 import type {
@@ -56,13 +52,12 @@ import type {
   UnknownType,
 } from '../../types/types';
 import type { ReactionData } from '../../utils/utils';
-
-export type MessagesConfig = {
-  mutesEnabled?: boolean;
-  quotedRepliesEnabled?: boolean;
-  reactionsEnabled?: boolean;
-  threadRepliesEnabled?: boolean;
-};
+import type { Alignment } from '../messageContext/MessageContext';
+import type { SuggestionCommand } from '../suggestionsContext/SuggestionsContext';
+import type { DeepPartial } from '../themeContext/ThemeContext';
+import type { Theme } from '../themeContext/utils/theme';
+import type { TDateTimeParserInput } from '../translationContext/TranslationContext';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type MessageContentType = 'attachments' | 'files' | 'gallery' | 'quoted_reply' | 'text';
 
@@ -74,7 +69,7 @@ export type MessagesContextValue<
   Me extends UnknownType = DefaultMessageType,
   Re extends UnknownType = DefaultReactionType,
   Us extends UnknownType = DefaultUserType,
-> = MessagesConfig & {
+> = {
   /**
    * UI component for Attachment.
    * Defaults to: [Attachment](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/Attachment.tsx)
@@ -95,9 +90,12 @@ export type MessagesContextValue<
    * Defaults to: [DateHeader](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageList/DateHeader.tsx)
    **/
   DateHeader: React.ComponentType<DateHeaderProps>;
+
   /** Should keyboard be dismissed when messaged is touched */
   dismissKeyboardOnMessageTouch: boolean;
+
   enableMessageGroupingByUser: boolean;
+
   /**
    * UI component to display File type attachment.
    * Defaults to: [FileAttachment](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/FileAttachment.tsx)
@@ -124,6 +122,7 @@ export type MessagesContextValue<
    * Defaults to: [Giphy](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/Giphy.tsx)
    */
   Giphy: React.ComponentType<GiphyProps<At, Ch, Co, Ev, Me, Re, Us>>;
+
   /**
    * When true, messageList will be scrolled at first unread message, when opened.
    */
@@ -161,10 +160,15 @@ export type MessagesContextValue<
    */
   MessageFooter: React.ComponentType<MessageFooterProps<At, Ch, Co, Ev, Me, Re, Us>>;
   MessageList: React.ComponentType<MessageListProps<At, Ch, Co, Ev, Me, Re, Us>>;
+  /**
+   * Custom message pinned component
+   */
+  MessagePinnedHeader: React.ComponentType<MessagePinnedHeaderProps<At, Ch, Co, Ev, Me, Re, Us>>;
   /**
    * UI component for MessageReplies
    * Defaults to: [MessageReplies](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageSimple/MessageReplies.tsx)
    */
+
   MessageReplies: React.ComponentType<MessageRepliesProps<At, Ch, Co, Ev, Me, Re, Us>>;
   /**
    * UI Component for MessageRepliesAvatars
@@ -245,16 +249,6 @@ export type MessagesContextValue<
    * @overrideType Object
    */
   additionalTouchableProps?: Omit<TouchableOpacityProps, 'style'>;
-  /**
-   * When false, pop-out animation will be disabled for message bubble, onLongPress
-   */
-  animatedLongPress?: boolean;
-  /**
-   * Full override of the block user button in the Message Actions
-   *
-   * Please check [cookbook](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#override-or-intercept-message-actions-edit-delete-reaction-reply-etc) for details.
-   */
-  blockUser?: ((message: MessageType<At, Ch, Co, Ev, Me, Re, Us>) => MessageAction) | null;
   /**
    * Custom UI component to override default cover (between Header and Footer) of Card component.
    * Accepts the same props as Card component.
@@ -270,31 +264,18 @@ export type MessagesContextValue<
    * Accepts the same props as Card component.
    */
   CardHeader?: React.ComponentType<CardProps<At, Ch, Co, Ev, Me, Re, Us>>;
-  /**
-   * Full override of the copy message button in the Message Actions
-   *
-   * Please check [cookbook](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#override-or-intercept-message-actions-edit-delete-reaction-reply-etc) for details.
-   */
-  copyMessage?: ((message: MessageType<At, Ch, Co, Ev, Me, Re, Us>) => MessageAction) | null;
+
   /**
    * Full override of the delete message button in the Message Actions
    *
    * Please check [cookbook](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#override-or-intercept-message-actions-edit-delete-reaction-reply-etc) for details.
    */
-  deleteMessage?: ((message: MessageType<At, Ch, Co, Ev, Me, Re, Us>) => MessageAction) | null;
+
+  /** Control if the deleted message is visible to both the send and reciever, either of them or none  */
+  deletedMessagesVisibilityType?: 'always' | 'never' | 'receiver' | 'sender';
+
   disableTypingIndicator?: boolean;
-  /**
-   * Full override of the edit message button in the Message Actions
-   *
-   * Please check [cookbook](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#override-or-intercept-message-actions-edit-delete-reaction-reply-etc) for details.
-   */
-  editMessage?: ((message: MessageType<At, Ch, Co, Ev, Me, Re, Us>) => MessageAction) | null;
-  /**
-   * Full override of the flag message button in the Message Actions
-   *
-   * Please check [cookbook](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#override-or-intercept-message-actions-edit-delete-reaction-reply-etc) for details.
-   */
-  flagMessage?: ((message: MessageType<At, Ch, Co, Ev, Me, Re, Us>) => MessageAction) | null;
+
   /**
    * Whether messages should be aligned to right or left part of screen.
    * By default, messages will be received messages will be aligned to left and
@@ -316,6 +297,10 @@ export type MessagesContextValue<
   handleFlag?: (message: MessageType<At, Ch, Co, Ev, Me, Re, Us>) => Promise<void>;
   /** Handler to access when a mute user action is invoked */
   handleMute?: (message: MessageType<At, Ch, Co, Ev, Me, Re, Us>) => Promise<void>;
+  /** Handler to access when a pin/unpin user action is invoked*/
+  handlePinMessage?:
+    | ((message: MessageType<At, Ch, Co, Ev, Me, Re, Us>) => MessageActionType)
+    | null;
   /** Handler to access when a quoted reply action is invoked */
   handleQuotedReply?: (message: MessageType<At, Ch, Co, Ev, Me, Re, Us>) => Promise<void>;
   /** Handler to process a reaction */
@@ -380,89 +365,18 @@ export type MessagesContextValue<
    *
    * @overrideType Function | Array<Objects>
    */
-  messageActions?:
-    | (MessageAction | null)[]
-    | (({
-        blockUser,
-        canModifyMessage,
-        copyMessage,
-        deleteMessage,
-        dismissOverlay,
-        editMessage,
-        error,
-        flagMessage,
-        isMyMessage,
-        isThreadMessage,
-        message,
-        messageReactions,
-        muteUser,
-        quotedRepliesEnabled,
-        quotedReply,
-        retry,
-        threadRepliesEnabled,
-        threadReply,
-      }: {
-        blockUser: MessageAction | null;
-        canModifyMessage: boolean;
-        copyMessage: MessageAction | null;
-        deleteMessage: MessageAction | null;
-        dismissOverlay: () => void;
-        editMessage: MessageAction | null;
-        error: boolean;
-        flagMessage: MessageAction | null;
-        isMyMessage: boolean;
-        isThreadMessage: boolean;
-        message: MessageType<At, Ch, Co, Ev, Me, Re, Us>;
-        messageReactions: boolean;
-        muteUser: MessageAction | null;
-        quotedReply: MessageAction | null;
-        retry: MessageAction | null;
-        threadReply: MessageAction | null;
-        quotedRepliesEnabled?: boolean;
-        threadRepliesEnabled?: boolean;
-      }) => (MessageAction | null)[] | undefined);
+  messageActions?: (param: MessageActionsParams<At, Ch, Co, Ev, Me, Re, Us>) => MessageActionType[];
   /**
    * Custom message header component
    */
   MessageHeader?: React.ComponentType<MessageFooterProps<At, Ch, Co, Ev, Me, Re, Us>>;
   /** Custom UI component for message text */
   MessageText?: React.ComponentType<MessageTextProps<At, Ch, Co, Ev, Me, Re, Us>>;
-  /**
-   * Full override of the mute user button in the Message Actions
-   *
-   * Please check [cookbook](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#override-or-intercept-message-actions-edit-delete-reaction-reply-etc) for details.
-   * */
-  muteUser?: ((message: MessageType<At, Ch, Co, Ev, Me, Re, Us>) => MessageAction) | null;
+
   /**
    * Theme provided only to messages that are the current users
    */
   myMessageTheme?: DeepPartial<Theme>;
-  /**
-   * Add double tap handler for message.
-   *
-   * ```
-   * <Channel
-   *  onDoubleTapMessage={({
-   *    actionHandlers: {
-   *        deleteMessage, // () => Promise<void>;
-   *        editMessage, // () => void;
-   *        quotedReply, // () => void;
-   *        resendMessage, // () => Promise<void>;
-   *        showMessageOverlay, // () => void;
-   *        toggleBanUser, // () => Promise<void>;
-   *        toggleMuteUser, // () => Promise<void>;
-   *        toggleReaction, // (reactionType: string) => Promise<void>;
-   *    },
-   *    message // message object on which longPress occured
-   *  }) => {
-   *    // Your custom action
-   *  }}
-   * />
-   * ```
-   */
-  onDoubleTapMessage?: (
-    payload: MessageTouchableHandlerPayload<At, Ch, Co, Ev, Me, Re, Us>,
-  ) => void;
   /**
    * Override default handler for onLongPress on message. You have access to payload of that handler as param:
    *
@@ -546,18 +460,7 @@ export type MessagesContextValue<
    * ```
    */
   onPressMessage?: (payload: MessageTouchableHandlerPayload<At, Ch, Co, Ev, Me, Re, Us>) => void;
-  /**
-   * Full override of the quoted reply button in the Message Actions
-   *
-   * Please check [cookbook](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#override-or-intercept-message-actions-edit-delete-reaction-reply-etc) for details.
-   */
-  quotedReply?: ((message: MessageType<At, Ch, Co, Ev, Me, Re, Us>) => MessageAction) | null;
-  /**
-   * Full override of the resend button in the Message Actions
-   *
-   * Please check [cookbook](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#override-or-intercept-message-actions-edit-delete-reaction-reply-etc) for details.
-   * */
-  retry?: ((message: MessageType<At, Ch, Co, Ev, Me, Re, Us>) => MessageAction) | null;
+
   /**
    * Full override of the reaction function on Message and Message Overlay
    *
@@ -566,12 +469,8 @@ export type MessagesContextValue<
   selectReaction?: (
     message: MessageType<At, Ch, Co, Ev, Me, Re, Us>,
   ) => (reactionType: string) => Promise<void>;
-  /**
-   * Full override of the thread reply button in the Message Actions
-   *
-   * Please check [cookbook](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#override-or-intercept-message-actions-edit-delete-reaction-reply-etc) for details.
-   * */
-  threadReply?: (message: MessageType<At, Ch, Co, Ev, Me, Re, Us>) => MessageAction;
+
+  targetedMessage?: string;
 };
 
 export const MessagesContext = React.createContext({} as MessagesContextValue);

package/src/contexts/overlayContext/OverlayContext.tsx

@@ -1,16 +1,11 @@
 import React, { useContext } from 'react';
-
-import { getDisplayName } from '../utils/getDisplayName';
+import type Animated from 'react-native-reanimated';
 
 import type { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 
-import type { AttachmentPickerContextValue } from '../attachmentPickerContext/AttachmentPickerContext';
-import type { MessageOverlayContextValue } from '../messageOverlayContext/MessageOverlayContext';
-import type { DeepPartial } from '../themeContext/ThemeContext';
-import type { Theme } from '../themeContext/utils/theme';
-
 import type { AttachmentPickerProps } from '../../components/AttachmentPicker/AttachmentPicker';
 import type { ImageGalleryCustomComponents } from '../../components/ImageGallery/ImageGallery';
+import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -22,14 +17,16 @@ import type {
   UnknownType,
 } from '../../types/types';
 import type { Streami18n } from '../../utils/Streami18n';
-
-export type BlurType = 'light' | 'dark' | undefined;
+import type { AttachmentPickerContextValue } from '../attachmentPickerContext/AttachmentPickerContext';
+import type { MessageOverlayContextValue } from '../messageOverlayContext/MessageOverlayContext';
+import type { DeepPartial } from '../themeContext/ThemeContext';
+import type { Theme } from '../themeContext/utils/theme';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type Overlay = 'alert' | 'gallery' | 'message' | 'none';
 
 export type OverlayContextValue = {
   overlay: Overlay;
-  setBlurType: React.Dispatch<React.SetStateAction<BlurType>>;
   setOverlay: React.Dispatch<React.SetStateAction<Overlay>>;
   style?: DeepPartial<Theme>;
   translucentStatusBar?: boolean;
@@ -62,15 +59,26 @@ export type OverlayProviderProps<
   Partial<
     Pick<
       MessageOverlayContextValue<At, Ch, Co, Ev, Me, Re, Us>,
-      'MessageActions' | 'OverlayReactionList' | 'OverlayReactions'
+      | 'MessageActionList'
+      | 'MessageActionListItem'
+      | 'OverlayReactionList'
+      | 'OverlayReactions'
+      | 'OverlayReactionsAvatar'
     >
   > &
   Pick<OverlayContextValue, 'translucentStatusBar'> & {
+    overlayOpacity: Animated.SharedValue<number>;
     closePicker?: (ref: React.RefObject<BottomSheetMethods>) => void;
+    error?: boolean | Error;
     /** https://github.com/GetStream/stream-chat-react-native/wiki/Internationalization-(i18n) */
     i18nInstance?: Streami18n;
     imageGalleryGridHandleHeight?: number;
     imageGalleryGridSnapPoints?: [string | number, string | number];
+    isMyMessage?: boolean;
+    isThreadMessage?: boolean;
+    message?: MessageType<At, Ch, Co, Ev, Me, Re, Us>;
+    messageReactions?: boolean;
+    messageTextNumberOfLines?: number;
     numberOfImageGalleryGridColumns?: number;
     openPicker?: (ref: React.RefObject<BottomSheetMethods>) => void;
     value?: Partial<OverlayContextValue>;