stream-chat-react-native-core 4.0.0 → 4.1.0

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

@@ -1,34 +1,18 @@
-import { filterTypingUsers } from '../utils/filterTypingUsers';
-
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import { useThreadContext } from '../../../contexts/threadContext/ThreadContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useTypingContext } from '../../../contexts/typingContext/TypingContext';
 
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../../types/types';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { filterTypingUsers } from '../utils/filterTypingUsers';
 
 export const useTypingString = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >() => {
-  const { client } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { thread } = useThreadContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { client } = useChatContext<StreamChatGenerics>();
+  const { thread } = useThreadContext<StreamChatGenerics>();
   const { t } = useTranslationContext();
-  const { typing } = useTypingContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { typing } = useTypingContext<StreamChatGenerics>();
 
   const filteredTypingUsers = filterTypingUsers({ client, thread, typing });
 

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

@@ -1,42 +1,21 @@
 import type { ChatContextValue } from '../../../contexts/chatContext/ChatContext';
 import type { ThreadContextValue } from '../../../contexts/threadContext/ThreadContext';
 import type { TypingContextValue } from '../../../contexts/typingContext/TypingContext';
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../../types/types';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 type FilterTypingUsersParams<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
-> = Pick<TypingContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'typing'> &
-  Pick<ChatContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'client'> &
-  Pick<ThreadContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'thread'>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<TypingContextValue<StreamChatGenerics>, 'typing'> &
+  Pick<ChatContextValue<StreamChatGenerics>, 'client'> &
+  Pick<ThreadContextValue<StreamChatGenerics>, 'thread'>;
 
 export const filterTypingUsers = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   client,
   thread,
   typing,
-}: FilterTypingUsersParams<At, Ch, Co, Ev, Me, Re, Us>) => {
+}: FilterTypingUsersParams<StreamChatGenerics>) => {
   const nonSelfUsers: string[] = [];
 
   if (!client || !client.user || !typing) return nonSelfUsers;

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

@@ -1,28 +1,13 @@
 import type { PaginatedMessageListContextValue } from '../../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
 import type { ThreadContextValue } from '../../../contexts/threadContext/ThreadContext';
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../../types/types';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export type GetDateSeparatorsParams<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   messages:
-    | PaginatedMessageListContextValue<At, Ch, Co, Ev, Me, Re, Us>['messages']
-    | ThreadContextValue<At, Ch, Co, Ev, Me, Re, Us>['threadMessages'];
+    | PaginatedMessageListContextValue<StreamChatGenerics>['messages']
+    | ThreadContextValue<StreamChatGenerics>['threadMessages'];
   hideDateSeparators?: boolean;
   userId?: string;
 };
@@ -32,15 +17,9 @@ export type DateSeparators = {
 };
 
 export const getDateSeparators = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  params: GetDateSeparatorsParams<At, Ch, Co, Ev, Me, Re, Us>,
+  params: GetDateSeparatorsParams<StreamChatGenerics>,
 ) => {
   const { hideDateSeparators, messages, userId } = params;
   const dateSeparators: DateSeparators = {};
@@ -49,9 +28,10 @@ export const getDateSeparators = <
     return dateSeparators;
   }
 
-  const messagesWithoutDeleted = messages.filter(
-    (message) => !message.deleted_at || userId === message.user?.id,
-  );
+  const messagesWithoutDeleted = messages.filter((message) => {
+    const isMessageTypeDeleted = message.type === 'deleted';
+    return !isMessageTypeDeleted || userId === message.user?.id;
+  });
 
   for (let i = 0; i < messagesWithoutDeleted.length; i++) {
     const previousMessage = messagesWithoutDeleted[i - 1];

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

@@ -1,33 +1,17 @@
 import type { DateSeparators } from './getDateSeparators';
 
-import type { GroupType } from '../hooks/useMessageList';
-
 import type { PaginatedMessageListContextValue } from '../../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
 import type { ThreadContextValue } from '../../../contexts/threadContext/ThreadContext';
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../../types/types';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+import type { GroupType } from '../hooks/useMessageList';
 
 export type GetGroupStylesParams<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   dateSeparators: DateSeparators;
   messages:
-    | PaginatedMessageListContextValue<At, Ch, Co, Ev, Me, Re, Us>['messages']
-    | ThreadContextValue<At, Ch, Co, Ev, Me, Re, Us>['threadMessages'];
+    | PaginatedMessageListContextValue<StreamChatGenerics>['messages']
+    | ThreadContextValue<StreamChatGenerics>['threadMessages'];
   hideDateSeparators?: boolean;
   maxTimeBetweenGroupedMessages?: number;
   noGroupByUser?: boolean;
@@ -35,15 +19,9 @@ export type GetGroupStylesParams<
 };
 
 export const getGroupStyles = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  params: GetGroupStylesParams<At, Ch, Co, Ev, Me, Re, Us>,
+  params: GetGroupStylesParams<StreamChatGenerics>,
 ) => {
   const {
     dateSeparators,
@@ -53,11 +31,15 @@ export const getGroupStyles = <
     noGroupByUser,
     userId,
   } = params;
+
+  if (noGroupByUser) return {};
+
   const messageGroupStyles: { [key: string]: GroupType[] } = {};
 
-  const messagesFilteredForNonUser = messages.filter(
-    (message) => !message.deleted_at || userId === message.user?.id,
-  );
+  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] as
@@ -69,6 +51,9 @@ export const getGroupStyles = <
       | undefined;
     const groupStyles: GroupType[] = [];
 
+    const isPrevMessageTypeDeleted = previousMessage?.type === 'deleted';
+    const isNextMessageTypeDeleted = nextMessage?.type === 'deleted';
+
     const userId = message?.user?.id || null;
 
     const isTopMessage =
@@ -76,7 +61,7 @@ export const getGroupStyles = <
       previousMessage.type === 'system' ||
       userId !== previousMessage?.user?.id ||
       previousMessage.type === 'error' ||
-      !!previousMessage.deleted_at ||
+      !!isPrevMessageTypeDeleted ||
       (!hideDateSeparators && dateSeparators[message.id]) ||
       messageGroupStyles[previousMessage.id]?.includes('bottom');
 
@@ -85,7 +70,7 @@ export const getGroupStyles = <
       nextMessage.type === 'system' ||
       userId !== nextMessage?.user?.id ||
       nextMessage.type === 'error' ||
-      !!nextMessage.deleted_at ||
+      !!isNextMessageTypeDeleted ||
       (!hideDateSeparators && dateSeparators[nextMessage.id]) ||
       (maxTimeBetweenGroupedMessages !== undefined &&
         nextMessage.created_at.getTime() - message.created_at.getTime() >
@@ -101,12 +86,14 @@ export const getGroupStyles = <
     /**
      * Add group styles key for bottom message
      */
+
+    const isMessageTypeDeleted = message.type === 'deleted';
     if (isBottomMessage) {
       /**
        * If the bottom message is also the top, or deleted, or an error,
        * add the key for single message instead of bottom
        */
-      if (isTopMessage || message.deleted_at || message.type === 'error') {
+      if (isTopMessage || isMessageTypeDeleted || message.type === 'error') {
         groupStyles.splice(0, groupStyles.length);
         groupStyles.push('single');
       } else {
@@ -119,7 +106,7 @@ export const getGroupStyles = <
      * deleted or an error add the key for single otherwise middle
      */
     if (!isTopMessage && !isBottomMessage) {
-      if (message.deleted_at || message.type === 'error') {
+      if (isMessageTypeDeleted || message.type === 'error') {
         groupStyles.splice(0, groupStyles.length);
         groupStyles.push('single');
       } else {
@@ -128,14 +115,6 @@ export const getGroupStyles = <
       }
     }
 
-    /**
-     * If noGroupByUser set add the key for single
-     */
-    if (noGroupByUser) {
-      groupStyles.splice(0, groupStyles.length);
-      groupStyles.push('single');
-    }
-
     if (message.id) {
       messageGroupStyles[message.id] = groupStyles;
     }

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

@@ -1,31 +1,21 @@
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../../types/types';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { MessageStatusTypes } from '../../../utils/utils';
+
 import type { MessageType } from '../hooks/useMessageList';
 
 export const getLastReceivedMessage = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  messages: MessageType<At, Ch, Co, Ev, Me, Re, Us>[],
+  messages: MessageType<StreamChatGenerics>[],
 ) => {
   /**
    * There are no status on dates so they will be skipped
    */
   for (const message of messages) {
-    if (message?.status === 'received' || message?.status === 'sending') {
+    if (
+      message?.status === MessageStatusTypes.RECEIVED ||
+      message?.status === MessageStatusTypes.SENDING
+    ) {
       return message;
     }
   }

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

@@ -1,31 +1,16 @@
 import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
 import type { PaginatedMessageListContextValue } from '../../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
 import type { ThreadContextValue } from '../../../contexts/threadContext/ThreadContext';
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../../types/types';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export const getReadStates = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   clientUserId: string | undefined,
   messages:
-    | PaginatedMessageListContextValue<At, Ch, Co, Ev, Me, Re, Us>['messages']
-    | ThreadContextValue<At, Ch, Co, Ev, Me, Re, Us>['threadMessages'],
-  read?: ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>['read'],
+    | PaginatedMessageListContextValue<StreamChatGenerics>['messages']
+    | ThreadContextValue<StreamChatGenerics>['threadMessages'],
+  read?: ChannelContextValue<StreamChatGenerics>['read'],
 ) => {
   const readData = messages.reduce((acc, cur) => {
     if (cur.id) {

package/src/components/MessageOverlay/MessageActionList.tsx

@@ -0,0 +1,170 @@
+import React from 'react';
+import { StyleSheet, ViewStyle } from 'react-native';
+import Animated, { interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+
+import { MessageActionListItem as DefaultMessageActionListItem } from './MessageActionListItem';
+
+import {
+  MessageOverlayData,
+  useMessageOverlayContext,
+} from '../../contexts/messageOverlayContext/MessageOverlayContext';
+import type { OverlayProviderProps } from '../../contexts/overlayContext/OverlayContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+import { vw } from '../../utils/utils';
+
+const styles = StyleSheet.create({
+  bottomBorder: {
+    borderBottomWidth: 1,
+  },
+  container: {
+    borderRadius: 16,
+    marginTop: 8,
+    maxWidth: 275,
+  },
+  row: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    minWidth: vw(65),
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+  },
+  titleStyle: {
+    paddingLeft: 20,
+  },
+});
+
+export type MessageActionListPropsWithContext<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<
+  OverlayProviderProps<StreamChatGenerics>,
+  | 'MessageActionListItem'
+  | 'error'
+  | 'isMyMessage'
+  | 'isThreadMessage'
+  | 'message'
+  | 'messageReactions'
+> &
+  Pick<MessageOverlayData<StreamChatGenerics>, 'alignment' | 'messageActions'> & {
+    showScreen: Animated.SharedValue<number>;
+  };
+
+const MessageActionListWithContext = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: MessageActionListPropsWithContext<StreamChatGenerics>,
+) => {
+  const {
+    alignment,
+    messageActions,
+    showScreen,
+    MessageActionListItem = DefaultMessageActionListItem,
+    isMyMessage,
+    message,
+    messageReactions,
+    error,
+    isThreadMessage,
+  } = props;
+
+  const messageActionProps = {
+    error,
+    isMyMessage,
+    isThreadMessage,
+    message,
+    messageReactions,
+  };
+
+  const {
+    theme: {
+      colors: { white_snow },
+    },
+  } = useTheme();
+
+  const height = useSharedValue(0);
+  const width = useSharedValue(0);
+
+  const showScreenStyle = useAnimatedStyle<ViewStyle>(
+    () => ({
+      transform: [
+        {
+          translateY: interpolate(showScreen.value, [0, 1], [-height.value / 2, 0]),
+        },
+        {
+          translateX: interpolate(
+            showScreen.value,
+            [0, 1],
+            [alignment === 'left' ? -width.value / 2 : width.value / 2, 0],
+          ),
+        },
+        {
+          scale: showScreen.value,
+        },
+      ],
+    }),
+    [alignment],
+  );
+
+  return (
+    <Animated.View
+      onLayout={({ nativeEvent: { layout } }) => {
+        width.value = layout.width;
+        height.value = layout.height;
+      }}
+      style={[styles.container, { backgroundColor: white_snow }, showScreenStyle]}
+      testID='message-action-list'
+    >
+      {messageActions?.map((messageAction, index) => (
+        <MessageActionListItem
+          key={messageAction.title}
+          {...messageActionProps}
+          {...{ ...messageAction, index, length: messageActions.length }}
+        />
+      ))}
+    </Animated.View>
+  );
+};
+
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: MessageActionListPropsWithContext<StreamChatGenerics>,
+  nextProps: MessageActionListPropsWithContext<StreamChatGenerics>,
+) => {
+  const { alignment: prevAlignment, messageActions: prevMessageActions } = prevProps;
+  const { alignment: nextAlignment, messageActions: nextMessageActions } = nextProps;
+
+  const messageActionsEqual = prevMessageActions?.length === nextMessageActions?.length;
+  if (!messageActionsEqual) return false;
+
+  const alignmentEqual = prevAlignment === nextAlignment;
+  if (!alignmentEqual) return false;
+
+  return true;
+};
+
+const MemoizedMessageActionList = React.memo(
+  MessageActionListWithContext,
+  areEqual,
+) as typeof MessageActionListWithContext;
+
+export type MessageActionListProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<Omit<MessageActionListPropsWithContext<StreamChatGenerics>, 'showScreen'>> &
+  Pick<
+    MessageActionListPropsWithContext<StreamChatGenerics>,
+    'showScreen' | 'message' | 'isMyMessage' | 'error' | 'isThreadMessage' | 'messageReactions'
+  >;
+
+/**
+ * MessageActionList - A high level component which implements all the logic required for MessageActions
+ */
+export const MessageActionList = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: MessageActionListProps<StreamChatGenerics>,
+) => {
+  const { data } = useMessageOverlayContext<StreamChatGenerics>();
+
+  const { alignment, messageActions } = data || {};
+
+  return <MemoizedMessageActionList {...{ alignment, messageActions }} {...props} />;
+};

package/src/components/MessageOverlay/MessageActionListItem.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import { StyleProp, StyleSheet, Text, TextStyle, View } from 'react-native';
+import { TapGestureHandler } from 'react-native-gesture-handler';
+import Animated from 'react-native-reanimated';
+
+import { useMessageActionAnimation } from './hooks/useMessageActionAnimation';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+import { vw } from '../../utils/utils';
+import type { MessageOverlayPropsWithContext } from '../MessageOverlay/MessageOverlay';
+
+const styles = StyleSheet.create({
+  bottomBorder: {
+    borderBottomWidth: 1,
+  },
+  container: {
+    borderRadius: 16,
+    marginTop: 8,
+    maxWidth: 275,
+  },
+  row: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    minWidth: vw(65),
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+  },
+  titleStyle: {
+    paddingLeft: 20,
+  },
+});
+
+export type ActionType =
+  | 'blockUser'
+  | 'copyMessage'
+  | 'deleteMessage'
+  | 'editMessage'
+  | 'flagMessage'
+  | 'muteUser'
+  | 'pinMessage'
+  | 'selectReaction'
+  | 'reply'
+  | 'retry'
+  | 'quotedReply'
+  | 'threadReply'
+  | 'unpinMessage';
+
+export type MessageActionType = {
+  action: () => void;
+  actionType: ActionType;
+  title: string;
+  icon?: React.ReactElement;
+  titleStyle?: StyleProp<TextStyle>;
+};
+
+export type MessageActionListItemProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = MessageActionType &
+  Pick<
+    MessageOverlayPropsWithContext<StreamChatGenerics>,
+    'error' | 'isMyMessage' | 'isThreadMessage' | 'message' | 'messageReactions'
+  > & {
+    index: number;
+    length: number;
+  };
+
+const MessageActionListItemWithContext = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: MessageActionListItemProps<StreamChatGenerics>,
+) => {
+  const { action, actionType, icon, index, length, title, titleStyle } = props;
+
+  const {
+    theme: {
+      colors: { black, border },
+      overlay: { messageActions },
+    },
+  } = useTheme();
+
+  const { animatedStyle, onTap } = useMessageActionAnimation({ action });
+
+  return (
+    <TapGestureHandler onHandlerStateChange={onTap}>
+      <Animated.View
+        style={[
+          styles.row,
+          index !== length - 1 ? { ...styles.bottomBorder, borderBottomColor: border } : {},
+          animatedStyle,
+          messageActions.actionContainer,
+        ]}
+        testID={`${actionType}-list-item`}
+      >
+        <View style={messageActions.icon}>{icon}</View>
+        <Text style={[styles.titleStyle, messageActions.title, { color: black }, titleStyle]}>
+          {title}
+        </Text>
+      </Animated.View>
+    </TapGestureHandler>
+  );
+};
+
+const messageActionIsEqual = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  prevProps: MessageActionListItemProps<StreamChatGenerics>,
+  nextProps: MessageActionListItemProps<StreamChatGenerics>,
+) => prevProps.length === nextProps.length;
+
+export const MemoizedMessageActionListItem = React.memo(
+  MessageActionListItemWithContext,
+  messageActionIsEqual,
+) as typeof MessageActionListItemWithContext;
+
+/**
+ * MessageActionListItem - A high-level component that implements all the logic required for a `MessageAction` in a `MessageActionList`
+ */
+export const MessageActionListItem = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: MessageActionListItemProps<StreamChatGenerics>,
+) => <MemoizedMessageActionListItem {...props} />;