stream-chat-react-native-core 8.5.2 → 8.6.0-beta.2

package/src/components/MessageList/MessageList.tsx

@@ -37,6 +37,10 @@ import {
   MessagesContextValue,
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
+import {
+  OwnCapabilitiesContextValue,
+  useOwnCapabilitiesContext,
+} from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import {
   PaginatedMessageListContextValue,
   usePaginatedMessageListContext,
@@ -67,11 +71,6 @@ const styles = StyleSheet.create({
     paddingBottom: 4,
   },
   flex: { flex: 1 },
-  invertAndroid: {
-    // Invert the Y AND X axis to prevent a react native issue that can lead to ANRs on android 13
-    // details: https://github.com/Expensify/App/pull/12820
-    transform: [{ scaleX: -1 }, { scaleY: -1 }],
-  },
   listContainer: {
     flex: 1,
     width: '100%',
@@ -120,6 +119,7 @@ type MessageListPropsWithContext = Pick<
   AttachmentPickerContextValue,
   'closePicker' | 'selectedPicker' | 'setSelectedPicker'
 > &
+  Pick<OwnCapabilitiesContextValue, 'readEvents'> &
   Pick<
     ChannelContextValue,
     | 'channel'
@@ -282,6 +282,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     noGroupByUser,
     onListScroll,
     onThreadSelect,
+    readEvents,
     reloadChannel,
     ScrollToBottomButton,
     selectedPicker,
@@ -446,7 +447,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     }
     messagesLength.current = processedMessageList.length;
 
-    if (!viewableItems.length) {
+    if (!viewableItems.length || !readEvents) {
       setIsUnreadNotificationOpen(false);
       return;
     }
@@ -1299,6 +1300,7 @@ export const MessageList = (props: MessageListProps) => {
   } = useChannelContext();
   const { client } = useChatContext();
   const { setMessages } = useImageGalleryContext();
+  const { readEvents } = useOwnCapabilitiesContext();
   const {
     DateHeader,
     disableTypingIndicator,
@@ -1350,6 +1352,7 @@ export const MessageList = (props: MessageListProps) => {
         MessageSystem,
         myMessageTheme,
         NetworkDownIndicator,
+        readEvents,
         reloadChannel,
         ScrollToBottomButton,
         scrollToFirstUnreadThreshold,

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

@@ -20,6 +20,7 @@ export type UseMessageListParams = {
   noGroupByUser?: boolean;
   threadList?: boolean;
   isLiveStreaming?: boolean;
+  isFlashList?: boolean;
 };
 
 export type GroupType = string;
@@ -50,7 +51,7 @@ export const shouldIncludeMessageInList = (
 };
 
 export const useMessageList = (params: UseMessageListParams) => {
-  const { noGroupByUser, threadList, isLiveStreaming } = params;
+  const { noGroupByUser, threadList, isLiveStreaming, isFlashList } = params;
   const { client } = useChatContext();
   const { hideDateSeparators, maxTimeBetweenGroupedMessages } = useChannelContext();
   const { deletedMessagesVisibilityType, getMessagesGroupStyles = getGroupStyles } =
@@ -106,11 +107,15 @@ export const useMessageList = (params: UseMessageListParams) => {
           userId: client.userID,
         })
       ) {
-        newMessageList.unshift(message);
+        if (isFlashList) {
+          newMessageList.push(message);
+        } else {
+          newMessageList.unshift(message);
+        }
       }
     }
     return newMessageList;
-  }, [client.userID, deletedMessagesVisibilityType, messageList]);
+  }, [client.userID, deletedMessagesVisibilityType, isFlashList, messageList]);
 
   const data = useRAFCoalescedValue(processedMessageList, isLiveStreaming);
 

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

@@ -31,7 +31,7 @@ export function useShouldScrollToRecentOnNewOwnMessage(
     if (rawMessageList && rawMessageList.length) {
       if (!initialFocusRegistered.current) {
         initialFocusRegistered.current = true;
-        const lastMessage = rawMessageList[0];
+        const lastMessage = rawMessageList[rawMessageList.length - 1];
         if (lastMessage && lastMessage.user?.id === currentUserId) {
           lastFocusedOwnMessageId.current = lastMessage.id;
         }

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

@@ -0,0 +1,20 @@
+import { LocalMessage } from 'stream-chat';
+
+import { MessageStatusTypes } from '../../../utils/utils';
+
+export const getLastReceivedMessageFlashList = (messages: LocalMessage[]) => {
+  /**
+   * There are no status on dates so they will be skipped
+   */
+  for (let i = messages.length - 1; i >= 0; i--) {
+    const message = messages[i];
+    if (
+      message?.status === MessageStatusTypes.RECEIVED ||
+      message?.status === MessageStatusTypes.SENDING
+    ) {
+      return message;
+    }
+  }
+
+  return;
+};

package/src/components/MessageMenu/MessageUserReactions.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 
@@ -138,16 +138,20 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
     [propReactions, fetchedReactions],
   );
 
-  const renderItem = ({ item }: { item: Reaction }) => (
-    <MessageUserReactionsItem
-      MessageUserReactionsAvatar={MessageUserReactionsAvatar}
-      reaction={item}
-      supportedReactions={supportedReactions ?? []}
-    />
+  const renderItem = useCallback(
+    ({ item }: { item: Reaction }) => (
+      <MessageUserReactionsItem
+        MessageUserReactionsAvatar={MessageUserReactionsAvatar}
+        reaction={item}
+        supportedReactions={supportedReactions ?? []}
+      />
+    ),
+    [MessageUserReactionsAvatar, MessageUserReactionsItem, supportedReactions],
   );
 
-  const renderHeader = () => (
-    <Text style={[styles.reactionsText, reactionsText]}>{t('Message Reactions')}</Text>
+  const renderHeader = useCallback(
+    () => <Text style={[styles.reactionsText, reactionsText]}>{t('Message Reactions')}</Text>,
+    [t, reactionsText],
   );
 
   const selectorReactions: ReactionSelectorItemType[] = messageReactions.map((reaction) => ({

package/src/components/MessageMenu/hooks/useFetchReactions.ts

@@ -22,44 +22,47 @@ export const useFetchReactions = ({
   const [next, setNext] = useState<string | undefined>(undefined);
   const messageId = message?.id;
 
-  const { client, enableOfflineSupport } = useChatContext();
+  const { client } = useChatContext();
 
   const sortString = useMemo(() => JSON.stringify(sort), [sort]);
 
-  const fetchReactions = useCallback(async () => {
-    if (!messageId) {
-      return;
-    }
-    try {
-      const response = await client.queryReactions(
-        messageId,
-        reactionType ? { type: reactionType } : {},
-        sort,
-        { limit, next },
-      );
-      if (response) {
-        setReactions((prevReactions) =>
-          next ? [...prevReactions, ...response.reactions] : response.reactions,
+  const fetchReactions = useCallback(
+    async (next: string | undefined) => {
+      if (!messageId) {
+        return;
+      }
+      try {
+        const response = await client.queryReactions(
+          messageId,
+          reactionType ? { type: reactionType } : {},
+          sort,
+          { limit, next },
         );
-        setNext(response.next);
-        setLoading(false);
+        if (response) {
+          setNext(response.next);
+
+          setReactions((prevReactions) =>
+            next ? [...prevReactions, ...response.reactions] : response.reactions,
+          );
+          setLoading(false);
+        }
+      } catch (error) {
+        console.log('Error fetching reactions: ', error);
       }
-    } catch (error) {
-      console.log('Error fetching reactions: ', error);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [client, messageId, reactionType, sortString, next, limit, enableOfflineSupport]);
+    },
+    [messageId, client, reactionType, sort, limit],
+  );
 
   const loadNextPage = useCallback(async () => {
     if (next) {
-      await fetchReactions();
+      await fetchReactions(next);
     }
   }, [fetchReactions, next]);
 
   useEffect(() => {
     setReactions([]);
     setNext(undefined);
-    fetchReactions();
+    fetchReactions(undefined);
   }, [fetchReactions, messageId, reactionType, sortString]);
 
   useEffect(() => {

package/src/components/Thread/Thread.tsx

@@ -14,7 +14,16 @@ import {
   MessageInput as DefaultMessageInput,
   MessageInputProps,
 } from '../MessageInput/MessageInput';
-import type { MessageListProps } from '../MessageList/MessageList';
+import { MessageFlashList, MessageFlashListProps } from '../MessageList/MessageFlashList';
+import { MessageListProps } from '../MessageList/MessageList';
+
+let FlashList;
+
+try {
+  FlashList = require('@shopify/flash-list').FlashList;
+} catch {
+  FlashList = undefined;
+}
 
 type ThreadPropsWithContext = Pick<ChatContextValue, 'client'> &
   Pick<MessagesContextValue, 'MessageList'> &
@@ -37,6 +46,13 @@ type ThreadPropsWithContext = Pick<ChatContextValue, 'client'> &
      * Available props - https://getstream.io/chat/docs/sdk/reactnative/ui-components/message-list/#props
      * */
     additionalMessageListProps?: Partial<MessageListProps>;
+    /**
+     * @experimental This prop is experimental and is subject to change.
+     *
+     * Additional props for underlying MessageListFlashList component.
+     * Available props - https://shopify.github.io/flash-list/docs/usage
+     */
+    additionalMessageFlashListProps?: Partial<MessageFlashListProps>;
     /** Make input focus on mounting thread */
     autoFocus?: boolean;
     /** Closes thread on dismount, defaults to true */
@@ -58,6 +74,7 @@ const ThreadWithContext = (props: ThreadPropsWithContext) => {
   const {
     additionalMessageInputProps,
     additionalMessageListProps,
+    additionalMessageFlashListProps,
     autoFocus = true,
     closeThread,
     closeThreadOnDismount = true,
@@ -108,11 +125,19 @@ const ThreadWithContext = (props: ThreadPropsWithContext) => {
 
   return (
     <React.Fragment key={`thread-${thread.id}`}>
-      <MessageList
-        FooterComponent={MemoizedThreadFooterComponent}
-        threadList
-        {...additionalMessageListProps}
-      />
+      {FlashList ? (
+        <MessageFlashList
+          HeaderComponent={MemoizedThreadFooterComponent}
+          threadList
+          {...additionalMessageFlashListProps}
+        />
+      ) : (
+        <MessageList
+          FooterComponent={MemoizedThreadFooterComponent}
+          threadList
+          {...additionalMessageListProps}
+        />
+      )}
       <MessageInput
         additionalTextInputProps={{
           autoFocus,

package/src/components/index.ts

@@ -145,6 +145,7 @@ export * from './MessageList/InlineLoadingMoreIndicator';
 export * from './MessageList/InlineLoadingMoreRecentIndicator';
 export * from './MessageList/InlineUnreadIndicator';
 export * from './MessageList/MessageList';
+export * from './MessageList/MessageFlashList';
 export * from './MessageList/MessageSystem';
 export * from './MessageList/NetworkDownIndicator';
 export * from './MessageList/ScrollToBottomButton';

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "8.5.2"
+  "version": "8.6.0-beta.2"
 }