fix: isNewest prop rerender

Author: khushal87

package/src/components/Message/MessageSimple/MessageWrapper.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import { View } from 'react-native';
 
@@ -14,6 +14,7 @@ import { ThemeProvider, useTheme } from '../../../contexts/themeContext/ThemeCon
 
 import { useStateStore } from '../../../hooks/useStateStore';
 import { ChannelUnreadStateStoreType } from '../../../state-store/channel-unread-state';
+import { MessagePreviousAndNextMessageStoreType } from '../../../state-store/message-list-prev-next-state';
 
 const channelUnreadStateSelector = (state: ChannelUnreadStateStoreType) => ({
   first_unread_message_id: state.channelUnreadState?.first_unread_message_id,
@@ -23,12 +24,11 @@ const channelUnreadStateSelector = (state: ChannelUnreadStateStoreType) => ({
 });
 
 export type MessageWrapperProps = {
-  isNewestMessage?: boolean;
   message: LocalMessage;
 };
 
 export const MessageWrapper = (props: MessageWrapperProps) => {
-  const { isNewestMessage, message } = props;
+  const { message } = props;
   const { client } = useChatContext();
   const {
     channelUnreadStateStore,
@@ -61,6 +61,14 @@ export const MessageWrapper = (props: MessageWrapperProps) => {
     messageListPreviousAndNextMessageStore,
   });
 
+  const selector = useCallback(
+    (state: MessagePreviousAndNextMessageStoreType) => ({
+      nextMessage: state.messageList[message.id]?.nextMessage,
+    }),
+    [message.id],
+  );
+  const { nextMessage } = useStateStore(messageListPreviousAndNextMessageStore.state, selector);
+  const isNewestMessage = nextMessage === undefined;
   const groupStyles = useMessageGroupStyles({
     dateSeparatorDate,
     getMessageGroupStyle,

package/src/components/MessageList/MessageFlashList.tsx

@@ -255,9 +255,8 @@ const getItemTypeInternal = (message: LocalMessage) => {
   return 'generic-message';
 };
 
-const renderItem = ({ index, item: message }: { index: number; item: LocalMessage }) => {
-  const isNewestMessage = index === 0;
-  return <MessageWrapper isNewestMessage={isNewestMessage} message={message} />;
+const renderItem = ({ item: message }: { item: LocalMessage }) => {
+  return <MessageWrapper message={message} />;
 };
 
 const channelUnreadStateSelector = (state: ChannelUnreadStateStoreType) => ({

package/src/components/MessageList/MessageList.tsx

@@ -241,10 +241,8 @@ type MessageListPropsWithContext = Pick<
     isLiveStreaming?: boolean;
   };
 
-const renderItem = ({ index, item: message }: { index: number; item: LocalMessage }) => {
-  const isNewestMessage = index === 0;
-
-  return <MessageWrapper isNewestMessage={isNewestMessage} message={message} />;
+const renderItem = ({ item: message }: { item: LocalMessage }) => {
+  return <MessageWrapper message={message} />;
 };
 
 /**