Merge pull request #550 from GetStream/overlay-reactions-customization-fix

change ordering of spread to account for undefined in props

Author: nhannah

src/components/MessageOverlay/MessageOverlay.tsx

@@ -31,6 +31,8 @@ import {
 import { OverlayReactionList as OverlayReactionListDefault } from './OverlayReactionList';
 
 import { MessageTextContainer } from '../Message/MessageSimple/MessageTextContainer';
+import { MessageActions as DefaultMessageActions } from '../MessageOverlay/MessageActions';
+import { OverlayReactions as DefaultOverlayReactions } from '../MessageOverlay/OverlayReactions';
 
 import {
   MessageOverlayContextValue,
@@ -131,15 +133,15 @@ const MessageOverlayWithContext = <
     images,
     message,
     messageActions,
-    MessageActions,
+    MessageActions = DefaultMessageActions,
     messageReactionTitle,
     messagesContext,
     onlyEmojis,
     otherAttachments,
     overlay,
     overlayOpacity,
     OverlayReactionList = OverlayReactionListDefault,
-    OverlayReactions,
+    OverlayReactions = DefaultOverlayReactions,
     reset,
     setOverlay,
     threadList,
@@ -687,18 +689,25 @@ export const MessageOverlay = <
   } = useMessageOverlayContext<At, Ch, Co, Ev, Me, Re, Us>();
   const { overlay, setOverlay } = useOverlayContext();
 
+  const componentProps = {
+    MessageActions: props.MessageActions || MessageActions,
+    OverlayReactionList:
+      props.OverlayReactionList ||
+      OverlayReactionList ||
+      data?.OverlayReactionList,
+    OverlayReactions: props.OverlayReactions || OverlayReactions,
+  };
+
   return (
     <MemoizedMessageOverlay
       {...(data || {})}
       {...{
-        MessageActions,
         overlay,
-        OverlayReactionList,
-        OverlayReactions,
         reset,
         setOverlay,
       }}
       {...props}
+      {...componentProps}
     />
   );
 };

src/components/Thread/Thread.tsx

@@ -178,7 +178,7 @@ const ThreadWithContext = <
 
   const replyCount = thread.reply_count;
 
-  const footerComponent = (
+  const FooterComponent = () => (
     <View style={styles.threadHeaderContainer}>
       <View style={styles.messagePadding}>
         <Message
@@ -237,7 +237,7 @@ const ThreadWithContext = <
   return (
     <React.Fragment key={`thread-${thread.id}-${channel?.cid || ''}`}>
       <MessageList
-        FooterComponent={footerComponent}
+        FooterComponent={FooterComponent}
         threadList
         {...additionalMessageListProps}
       />

src/contexts/overlayContext/OverlayProvider.tsx

@@ -31,10 +31,7 @@ import { FileSelectorIcon as DefaultFileSelectorIcon } from '../../components/At
 import { ImageOverlaySelectedComponent as DefaultImageOverlaySelectedComponent } from '../../components/AttachmentPicker/components/ImageOverlaySelectedComponent';
 import { ImageSelectorIcon as DefaultImageSelectorIcon } from '../../components/AttachmentPicker/components/ImageSelectorIcon';
 import { ImageGallery } from '../../components/ImageGallery/ImageGallery';
-import { MessageActions as DefaultMessageActions } from '../../components/MessageOverlay/MessageActions';
 import { MessageOverlay } from '../../components/MessageOverlay/MessageOverlay';
-import { OverlayReactionList as DefaultOverlayReactionList } from '../../components/MessageOverlay/OverlayReactionList';
-import { OverlayReactions as DefaultOverlayReactions } from '../../components/MessageOverlay/OverlayReactions';
 import { BlurView } from '../../native';
 import { useStreami18n } from '../../utils/useStreami18n';
 
@@ -112,7 +109,7 @@ export const OverlayProvider = <
     imageGalleryGridSnapPoints,
     ImageOverlaySelectedComponent = DefaultImageOverlaySelectedComponent,
     ImageSelectorIcon = DefaultImageSelectorIcon,
-    MessageActions = DefaultMessageActions,
+    MessageActions,
     numberOfAttachmentImagesToLoadPerCall,
     numberOfAttachmentPickerImageColumns,
     numberOfImageGalleryGridColumns,
@@ -126,8 +123,8 @@ export const OverlayProvider = <
       }
     },
     topInset,
-    OverlayReactionList = DefaultOverlayReactionList,
-    OverlayReactions = DefaultOverlayReactions,
+    OverlayReactionList,
+    OverlayReactions,
     value,
   } = props;