feat: improve reaction list in message customization (#3473)

This pull request enhances the customization and flexibility of the
reaction list UI components in the chat application. It introduces new
context properties and props for various reaction list subcomponents,
allowing developers to override and customize individual parts of the
reaction list (such as clustered views, items, wrappers, and count
items) both globally and at the component level. This enables more
granular control over the appearance and behavior of message reactions.

Key changes include:

**Customization API for Reaction List Components:**

- Added new context properties to `MessagesContextValue` for
`ReactionListClustered`, `ReactionListItem`, `ReactionListItemWrapper`,
and `ReactionListCountItem`, allowing these subcomponents to be
overridden via context.
- Updated the `Channel` component and its context to accept and
propagate the new reaction list component overrides, making them
available throughout the component tree.
[[1]](diffhunk://#diff-f7139f4cdb523365cfc277d72b827a3432325b9c6460cf14628f9df67d0e4d85R161-R164)
[[2]](diffhunk://#diff-f7139f4cdb523365cfc277d72b827a3432325b9c6460cf14628f9df67d0e4d85R400-R403)
[[3]](diffhunk://#diff-f7139f4cdb523365cfc277d72b827a3432325b9c6460cf14628f9df67d0e4d85R733-R736)
[[4]](diffhunk://#diff-f7139f4cdb523365cfc277d72b827a3432325b9c6460cf14628f9df67d0e4d85R1993-R1996)
[[5]](diffhunk://#diff-d3e4f4cdcef10807a38eab86f6ead6bbfe01980e7326f3cadfeb8186760d7af1R94-R97)
[[6]](diffhunk://#diff-d3e4f4cdcef10807a38eab86f6ead6bbfe01980e7326f3cadfeb8186760d7af1R214-R217)

**Component Propagation and Usage:**

- Modified `ReactionListTop` and `ReactionListBottom` to accept and
prioritize the new override props, falling back to context values if not
provided, and updated their rendering logic to use these customizable
components.
[[1]](diffhunk://#diff-1d5290d5eb1b5942da3dd1386029e3951eb7a08188398c0d943bd16d378da24aL32-R37)
[[2]](diffhunk://#diff-1d5290d5eb1b5942da3dd1386029e3951eb7a08188398c0d943bd16d378da24aR59-R61)
[[3]](diffhunk://#diff-1d5290d5eb1b5942da3dd1386029e3951eb7a08188398c0d943bd16d378da24aL70-R81)
[[4]](diffhunk://#diff-1d5290d5eb1b5942da3dd1386029e3951eb7a08188398c0d943bd16d378da24aR93-R96)
[[5]](diffhunk://#diff-1d5290d5eb1b5942da3dd1386029e3951eb7a08188398c0d943bd16d378da24aL101-R116)
[[6]](diffhunk://#diff-1d5290d5eb1b5942da3dd1386029e3951eb7a08188398c0d943bd16d378da24aL115-R133)
[[7]](diffhunk://#diff-926ded9f8a41b99e3b915a72424b44c11631585a26cfc0fa236d68979dafddb6L49-R34)
[[8]](diffhunk://#diff-926ded9f8a41b99e3b915a72424b44c11631585a26cfc0fa236d68979dafddb6R58-R59)
[[9]](diffhunk://#diff-926ded9f8a41b99e3b915a72424b44c11631585a26cfc0fa236d68979dafddb6L87-R78)
[[10]](diffhunk://#diff-926ded9f8a41b99e3b915a72424b44c11631585a26cfc0fa236d68979dafddb6R90-R110)

**Type and Export Updates:**

- Updated type definitions and exports to ensure the new reaction list
component types and props are available for use in other parts of the
codebase and by consumers of the library.
[[1]](diffhunk://#diff-784bafff5d1104bab8f993f0eab47d22373071f35a518685093bf641289b4e38L7-R7)
[[2]](diffhunk://#diff-667ac1eb12bc400d53fad690273567753408afefc69a49fa9869641181e86dd8R109-R111)
[[3]](diffhunk://#diff-327d7452e29943b63019b2b135e4c012a8fcd51a85fa38ec099c55db0d9d2cfeR52-R57)

**Refactoring and Cleanup:**

- Refactored the rendering logic in `ReactionListBottom` and
`ReactionListTop` to use the customizable components, and removed
hardcoded imports and renderers in favor of dynamic, context-driven
rendering.
[[1]](diffhunk://#diff-926ded9f8a41b99e3b915a72424b44c11631585a26cfc0fa236d68979dafddb6L1-R4)
[[2]](diffhunk://#diff-926ded9f8a41b99e3b915a72424b44c11631585a26cfc0fa236d68979dafddb6L19-L34)
[[3]](diffhunk://#diff-1d5290d5eb1b5942da3dd1386029e3951eb7a08188398c0d943bd16d378da24aL4-L7)

These changes collectively provide a more modular and extensible
approach to rendering reaction lists, making it easier for developers to
implement custom designs or behaviors for message reactions.

Author: khushal87

package/src/components/Channel/Channel.tsx

@@ -158,6 +158,10 @@ import { MessageStatus as MessageStatusDefault } from '../Message/MessageSimple/
 import { MessageSwipeContent as MessageSwipeContentDefault } from '../Message/MessageSimple/MessageSwipeContent';
 import { MessageTimestamp as MessageTimestampDefault } from '../Message/MessageSimple/MessageTimestamp';
 import { ReactionListBottom as ReactionListBottomDefault } from '../Message/MessageSimple/ReactionList/ReactionListBottom';
+import { ReactionListClustered as ReactionListClusteredDefault } from '../Message/MessageSimple/ReactionList/ReactionListClustered';
+import { ReactionListCountItem as ReactionListCountItemDefault } from '../Message/MessageSimple/ReactionList/ReactionListItem';
+import { ReactionListItem as ReactionListItemDefault } from '../Message/MessageSimple/ReactionList/ReactionListItem';
+import { ReactionListItemWrapper as ReactionListItemWrapperDefault } from '../Message/MessageSimple/ReactionList/ReactionListItemWrapper';
 import { ReactionListTop as ReactionListTopDefault } from '../Message/MessageSimple/ReactionList/ReactionListTop';
 import { StreamingMessageView as DefaultStreamingMessageView } from '../Message/MessageSimple/StreamingMessageView';
 import { AttachmentUploadPreviewList as AttachmentUploadPreviewDefault } from '../MessageInput/components/AttachmentPreview/AttachmentUploadPreviewList';
@@ -393,6 +397,10 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
       | 'reactionListPosition'
       | 'reactionListType'
       | 'ReactionListTop'
+      | 'ReactionListClustered'
+      | 'ReactionListItem'
+      | 'ReactionListItemWrapper'
+      | 'ReactionListCountItem'
       | 'Reply'
       | 'shouldShowUnreadUnderlay'
       | 'ScrollToBottomButton'
@@ -722,6 +730,10 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     reactionListPosition = 'top',
     reactionListType = 'clustered',
     ReactionListTop = ReactionListTopDefault,
+    ReactionListClustered = ReactionListClusteredDefault,
+    ReactionListItem = ReactionListItemDefault,
+    ReactionListItemWrapper = ReactionListItemWrapperDefault,
+    ReactionListCountItem = ReactionListCountItemDefault,
     Reply = ReplyDefault,
     ScrollToBottomButton = ScrollToBottomButtonDefault,
     selectReaction,
@@ -1978,6 +1990,10 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     reactionListPosition,
     reactionListType,
     ReactionListTop,
+    ReactionListClustered,
+    ReactionListItem,
+    ReactionListItemWrapper,
+    ReactionListCountItem,
     removeMessage,
     Reply,
     retrySendMessage,

package/src/components/Channel/hooks/useCreateMessagesContext.ts

@@ -91,6 +91,10 @@ export const useCreateMessagesContext = ({
   reactionListPosition,
   reactionListType,
   ReactionListTop,
+  ReactionListClustered,
+  ReactionListItem,
+  ReactionListItemWrapper,
+  ReactionListCountItem,
   removeMessage,
   Reply,
   retrySendMessage,
@@ -207,6 +211,10 @@ export const useCreateMessagesContext = ({
       reactionListPosition,
       reactionListType,
       ReactionListTop,
+      ReactionListClustered,
+      ReactionListItem,
+      ReactionListItemWrapper,
+      ReactionListCountItem,
       removeMessage,
       Reply,
       retrySendMessage,

package/src/components/Message/MessageSimple/ReactionList/ReactionListBottom.tsx

@@ -1,8 +1,7 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { FlatList, StyleSheet, View } from 'react-native';
 
-import { ReactionListClustered } from './ReactionListClustered';
-import { ReactionListItem, ReactionListItemProps } from './ReactionListItem';
+import { ReactionListItemProps } from './ReactionListItem';
 
 import {
   MessageContextValue,
@@ -16,22 +15,6 @@ import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 
 import { primitives } from '../../../../theme';
 
-const renderItem = ({ index, item }: { index: number; item: ReactionListItemProps }) => (
-  <ReactionListItem
-    handleReaction={item.handleReaction}
-    key={index}
-    onLongPress={item.onLongPress}
-    onPress={item.onPress}
-    onPressIn={item.onPressIn}
-    preventPress={item.preventPress}
-    reaction={item.reaction}
-    showReactionsOverlay={item.showReactionsOverlay}
-    supportedReactions={item.supportedReactions}
-    selected={item.reaction.own}
-    showCount={item.showCount}
-  />
-);
-
 export type ReactionListBottomProps = Partial<
   Pick<
     MessageContextValue,
@@ -46,7 +29,9 @@ export type ReactionListBottomProps = Partial<
     | 'showReactionsOverlay'
   >
 > &
-  Partial<Pick<MessagesContextValue, 'supportedReactions'>> & {
+  Partial<
+    Pick<MessagesContextValue, 'supportedReactions' | 'ReactionListClustered' | 'ReactionListItem'>
+  > & {
     type?: 'clustered' | 'segmented';
     showCount?: boolean;
   };
@@ -70,6 +55,8 @@ export const ReactionListBottom = (props: ReactionListBottomProps) => {
     supportedReactions: propSupportedReactions,
     type,
     showCount = true,
+    ReactionListClustered: propReactionListClustered,
+    ReactionListItem: propReactionListItem,
   } = props;
 
   const {
@@ -84,7 +71,11 @@ export const ReactionListBottom = (props: ReactionListBottomProps) => {
     showReactionsOverlay: contextShowReactionsOverlay,
   } = useMessageContext();
 
-  const { supportedReactions: contextSupportedReactions } = useMessagesContext();
+  const {
+    supportedReactions: contextSupportedReactions,
+    ReactionListClustered: contextReactionListClustered,
+    ReactionListItem: contextReactionListItem,
+  } = useMessagesContext();
 
   const alignment = propAlignment || contextAlignment;
   const handleReaction = propHandlerReaction || contextHandleReaction;
@@ -96,6 +87,27 @@ export const ReactionListBottom = (props: ReactionListBottomProps) => {
   const reactions = propReactions || contextReactions;
   const showReactionsOverlay = propShowReactionsOverlay || contextShowReactionsOverlay;
   const supportedReactions = propSupportedReactions || contextSupportedReactions;
+  const ReactionListClustered = propReactionListClustered || contextReactionListClustered;
+  const ReactionListItem = propReactionListItem || contextReactionListItem;
+
+  const renderItem = useCallback(
+    ({ index, item }: { index: number; item: ReactionListItemProps }) => (
+      <ReactionListItem
+        handleReaction={item.handleReaction}
+        key={index}
+        onLongPress={item.onLongPress}
+        onPress={item.onPress}
+        onPressIn={item.onPressIn}
+        preventPress={item.preventPress}
+        reaction={item.reaction}
+        showReactionsOverlay={item.showReactionsOverlay}
+        supportedReactions={item.supportedReactions}
+        selected={item.reaction.own}
+        showCount={item.showCount}
+      />
+    ),
+    [ReactionListItem],
+  );
 
   const styles = useStyles({ messageAlignment: alignment });
   const supportedReactionTypes = supportedReactions?.map(

package/src/components/Message/MessageSimple/ReactionList/ReactionListItemWrapper.tsx

@@ -4,7 +4,7 @@ import { Pressable, PressableProps, StyleProp, StyleSheet, View, ViewStyle } fro
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../../../theme';
 
-type ReactionListItemWrapperProps = PressableProps & {
+export type ReactionListItemWrapperProps = PressableProps & {
   selected?: boolean;
   style?: StyleProp<ViewStyle>;
 };

package/src/components/Message/MessageSimple/ReactionList/ReactionListTop.tsx

@@ -1,10 +1,6 @@
 import React, { useMemo } from 'react';
 import { ScrollView, StyleSheet, View } from 'react-native';
 
-import { ReactionListClustered } from './ReactionListClustered';
-
-import { ReactionListCountItem, ReactionListItem } from './ReactionListItem';
-
 import { useTheme } from '../../../../contexts';
 import {
   MessageContextValue,
@@ -29,12 +25,19 @@ export type ReactionListTopProps = Partial<
     | 'reactions'
     | 'showReactionsOverlay'
     | 'handleReaction'
-  >
-> &
-  Pick<MessagesContextValue, 'supportedReactions' | 'reactionListType'> & {
-    type?: 'clustered' | 'segmented';
-    showCount?: boolean;
-  };
+  > &
+    Pick<
+      MessagesContextValue,
+      | 'supportedReactions'
+      | 'reactionListType'
+      | 'ReactionListClustered'
+      | 'ReactionListItem'
+      | 'ReactionListCountItem'
+    >
+> & {
+  type?: 'clustered' | 'segmented';
+  showCount?: boolean;
+};
 
 /**
  * ReactionListTop - A high level component which implements all the logic required for a message reaction list
@@ -53,6 +56,9 @@ export const ReactionListTop = (props: ReactionListTopProps) => {
     handleReaction: propHandleReaction,
     type,
     showCount = true,
+    ReactionListClustered: propReactionListClustered,
+    ReactionListItem: propReactionListItem,
+    ReactionListCountItem: propReactionListCountItem,
   } = props;
 
   const {
@@ -67,7 +73,12 @@ export const ReactionListTop = (props: ReactionListTopProps) => {
     handleReaction: contextHandleReaction,
   } = useMessageContext();
 
-  const { supportedReactions: contextSupportedReactions } = useMessagesContext();
+  const {
+    supportedReactions: contextSupportedReactions,
+    ReactionListClustered: contextReactionListClustered,
+    ReactionListItem: contextReactionListItem,
+    ReactionListCountItem: contextReactionListCountItem,
+  } = useMessagesContext();
 
   const alignment = propAlignment || contextAlignment;
   const hasReactions = propHasReactions || contextHasReactions;
@@ -79,6 +90,10 @@ export const ReactionListTop = (props: ReactionListTopProps) => {
   const showReactionsOverlay = propShowReactionsOverlay || contextShowReactionsOverlay;
   const supportedReactions = propSupportedReactions || contextSupportedReactions;
   const handleReaction = propHandleReaction || contextHandleReaction;
+  const ReactionListClustered = propReactionListClustered || contextReactionListClustered;
+  const ReactionListItem = propReactionListItem || contextReactionListItem;
+  const ReactionListCountItem = propReactionListCountItem || contextReactionListCountItem;
+
   const styles = useStyles({ alignment });
 
   const supportedReactionTypes = supportedReactions?.map(

package/src/components/index.ts

@@ -106,6 +106,9 @@ export * from './Message/MessageSimple/MessageTextContainer';
 export * from './Message/MessageSimple/MessageTimestamp';
 export * from './Message/MessageSimple/ReactionList/ReactionListBottom';
 export * from './Message/MessageSimple/ReactionList/ReactionListTop';
+export * from './Message/MessageSimple/ReactionList/ReactionListClustered';
+export * from './Message/MessageSimple/ReactionList/ReactionListItem';
+export * from './Message/MessageSimple/ReactionList/ReactionListItemWrapper';
 export * from './Message/MessageSimple/utils/renderText';
 export * from './Message/utils/messageActions';
 export * from '../utils/removeReservedFields';

package/src/contexts/messagesContext/MessagesContext.tsx

@@ -49,6 +49,12 @@ import type { MessageStatusProps } from '../../components/Message/MessageSimple/
 import type { MessageTextProps } from '../../components/Message/MessageSimple/MessageTextContainer';
 import { MessageTimestampProps } from '../../components/Message/MessageSimple/MessageTimestamp';
 import { ReactionListBottomProps } from '../../components/Message/MessageSimple/ReactionList/ReactionListBottom';
+import { ReactionListClusteredProps } from '../../components/Message/MessageSimple/ReactionList/ReactionListClustered';
+import {
+  ReactionListItemProps,
+  ReactionListCountItemProps,
+} from '../../components/Message/MessageSimple/ReactionList/ReactionListItem';
+import { ReactionListItemWrapperProps } from '../../components/Message/MessageSimple/ReactionList/ReactionListItemWrapper';
 import type { ReactionListTopProps } from '../../components/Message/MessageSimple/ReactionList/ReactionListTop';
 import type { MarkdownRules } from '../../components/Message/MessageSimple/utils/renderText';
 import type { MessageActionsParams } from '../../components/Message/utils/messageActions';
@@ -608,6 +614,25 @@ export type MessagesContextValue = Pick<MessageContextValue, 'isMessageAIGenerat
    */
   ReactionListTop?: React.ComponentType<ReactionListTopProps>;
 
+  /**
+   * UI component for ReactionListBottom
+   * Defaults to: [ReactionList](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Reaction/ReactionList.tsx)
+   */
+  ReactionListClustered: React.ComponentType<ReactionListClusteredProps>;
+  /**
+   * UI component for ReactionListSegmented
+   * Defaults to: [ReactionList](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Reaction/ReactionList.tsx)
+   */
+  ReactionListItem: React.ComponentType<ReactionListItemProps>;
+
+  /**
+   * UI component for ReactionListItemWrapper
+   * Defaults to: [ReactionListItemWrapper](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Reaction/ReactionListItemWrapper.tsx)
+   */
+  ReactionListItemWrapper: React.ComponentType<ReactionListItemWrapperProps>;
+
+  ReactionListCountItem: React.ComponentType<ReactionListCountItemProps>;
+
   /**
    * Full override of the reaction function on Message and Message Overlay
    *