src/components/Channel/Channel.tsx

@@ -818,10 +818,6 @@ const ChannelWithContext = <
   const loadChannel = () =>
     channelQueryCall(async () => {
       if (!channel?.initialized || !channel.state.isUpToDate) {
-        channel?.state.clearMessages();
-        if (messages.length > 0) {
-          setMessages([]);
-        }
         await channel?.watch();
         channel?.state.setIsUpToDate(true);
       }
@@ -830,11 +826,8 @@ const ChannelWithContext = <
     });
 
   const reloadChannel = () => {
-    if (channel) {
-      return loadChannel();
-    }
-
-    return;
+    channel?.state.clearMessages();
+    return loadChannel();
   };
 
   /**

src/components/MessageList/MessageList.tsx

@@ -455,15 +455,10 @@ const MessageListWithContext = <
   }, [disabled]);
 
   useEffect(() => {
-    if (
-      channel &&
-      channel.countUnread() > 0 &&
-      (channel.countUnread() <= scrollToFirstUnreadThreshold ||
-        !initialScrollToFirstUnreadMessage)
-    ) {
+    if (channel && channel.countUnread() <= scrollToFirstUnreadThreshold) {
       channel.markRead();
     }
-  }, []);
+  }, [loading]);
 
   useEffect(() => {
     /**
@@ -726,7 +721,7 @@ const MessageListWithContext = <
 
     const shouldMarkRead =
       !threadList &&
-      isScrollAtBottom &&
+      offset === 0 &&
       channel?.state.isUpToDate &&
       channel.countUnread() > 0;
 
@@ -836,7 +831,9 @@ const MessageListWithContext = <
   const onScrollEndDrag = () =>
     hasMoved && selectedPicker && setHasMoved(false);
 
-  const refCallback = (ref) => {
+  const refCallback = (
+    ref: FlatListType<MessageType<At, Ch, Co, Ev, Me, Re, Us>>,
+  ) => {
     flatListRef.current = ref;
 
     if (setFlatListRef) {

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;