stream-chat-react-native-core 5.36.0-beta.4 → 5.36.0-beta.6

package/src/components/MessageInput/MessageInput.tsx

@@ -268,6 +268,7 @@ const MessageInputWithContext = <
     setMaxNumberOfFiles(maxNumberOfFiles ?? 10);
 
     return closeAttachmentPicker;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const [hasResetImages, setHasResetImages] = useState(false);
@@ -288,6 +289,7 @@ const MessageInputWithContext = <
       imageUploads.forEach((image) => removeImage(image.id));
     }
     return () => setSelectedImages([]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   /**
@@ -300,24 +302,28 @@ const MessageInputWithContext = <
     }
 
     return () => setSelectedFiles([]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
     if (hasResetImages === false && imageUploadsLength === 0 && selectedImagesLength === 0) {
       setHasResetImages(true);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [imageUploadsLength, selectedImagesLength]);
 
   useEffect(() => {
     if (hasResetFiles === false && fileUploadsLength === 0 && selectedFilesLength === 0) {
       setHasResetFiles(true);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fileUploadsLength, selectedFilesLength]);
 
   useEffect(() => {
     if (imagesForInput === false && imageUploadsLength) {
       imageUploads.forEach((image) => removeImage(image.id));
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [imagesForInput, imageUploadsLength]);
 
   const uploadImagesHandler = () => {
@@ -353,6 +359,7 @@ const MessageInputWithContext = <
         removeImagesHandler();
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedImagesLength]);
 
   useEffect(() => {
@@ -377,6 +384,7 @@ const MessageInputWithContext = <
       );
       filesToRemove.forEach((file) => removeFile(file.id));
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedFilesLength]);
 
   useEffect(() => {
@@ -409,6 +417,7 @@ const MessageInputWithContext = <
         );
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [imageUploadsLength, hasImagePicker]);
 
   useEffect(() => {
@@ -440,6 +449,7 @@ const MessageInputWithContext = <
         );
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fileUploadsLength, hasImagePicker]);
 
   const editingExists = !!editing;
@@ -468,6 +478,7 @@ const MessageInputWithContext = <
     ) {
       resetInput();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editingExists]);
 
   const asyncIdsString = asyncIds.join();
@@ -484,6 +495,7 @@ const MessageInputWithContext = <
       asyncIds.forEach((id) => sendMessageAsync(id));
       sending.current = false;
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [asyncIdsString, asyncUploadsString, sendMessageAsync]);
 
   const getMembers = () => {
@@ -544,6 +556,7 @@ const MessageInputWithContext = <
         if (setFocused) setFocused(true);
       },
     }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [additionalTextInputProps],
   );
 

package/src/components/MessageList/MessageList.tsx

@@ -290,6 +290,7 @@ const MessageListWithContext = <
 
   const modifiedTheme = useMemo(
     () => mergeThemes({ style: myMessageTheme, theme }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [myMessageThemeString, theme],
   );
 
@@ -469,6 +470,7 @@ const MessageListWithContext = <
     if (getShouldMarkReadAutomatically()) {
       markRead();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [loading, scrollToBottomButtonVisible, isInitialScrollDone]);
 
   useEffect(() => {
@@ -535,6 +537,7 @@ const MessageListWithContext = <
 
     messageListLengthBeforeUpdate.current = messageListLengthAfterUpdate;
     topMessageBeforeUpdate.current = topMessageAfterUpdate;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     threadList,
     hasNoMoreRecentMessagesToLoad,
@@ -582,6 +585,7 @@ const MessageListWithContext = <
         }, 150); // flatlist might take a bit to update, so a small delay is needed
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [rawMessageList, threadList]);
 
   // TODO: do not apply on RN 0.73 and above
@@ -963,7 +967,10 @@ const MessageListWithContext = <
           viewPosition: 0.5, // try to place message in the center of the screen
         });
       }
+      // the message we want to scroll to has not been loaded in the state yet
+      loadChannelAroundMessage({ messageId: messageIdToScroll });
     }, 50);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [targetedMessage, initialScrollToFirstUnreadMessage]);
 
   const messagesWithImages =
@@ -1009,6 +1016,7 @@ const MessageListWithContext = <
     ) {
       setMessages(messagesWithImages as MessageType<StreamChatGenerics>[]);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     imageString,
     isListActive,

package/src/components/MessageList/StickyHeader.tsx

@@ -34,6 +34,7 @@ export const StickyHeader = ({ date, DateHeader, dateString }: StickyHeaderProps
       tDateTimeParser,
       timestampTranslationKey: 'timestamp/StickyHeader',
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [date]);
 
   if (!date) return null;

package/src/components/MessageList/__tests__/MessageList.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { act, cleanup, render, waitFor } from '@testing-library/react-native';
+import { act, cleanup, render, screen, waitFor } from '@testing-library/react-native';
 
 import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
@@ -362,4 +362,42 @@ describe('MessageList', () => {
       },
     });
   });
+
+  it('should scroll to a message even if out of the loaded window', async () => {
+    const user1 = generateUser();
+
+    const mockedLongMessagesList = [];
+    // we need a long enough list to make sure elements aren't preloaded by the underlying FlatList
+    for (let i = 0; i <= 150; i += 1) {
+      mockedLongMessagesList.push(generateMessage({ timestamp: new Date(), user: user1 }));
+    }
+    // could be any message that is not within the initially processed ones
+    const { id: targetedMessageId, text: targetedMessageText } = mockedLongMessagesList[3];
+    const latestMessageText = mockedLongMessagesList[mockedLongMessagesList.length - 1].text;
+
+    const mockedChannel = generateChannelResponse({
+      members: [generateMember({ user: user1 })],
+      messages: mockedLongMessagesList,
+    });
+
+    const chatClient = await getTestClientWithUser({ id: 'testID' });
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.watch();
+
+    render(
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList targetedMessage={targetedMessageId} />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(targetedMessageText)).toBeOnTheScreen();
+      expect(() => screen.getByText(latestMessageText)).toThrow();
+    });
+  });
 });

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

@@ -38,6 +38,7 @@ export function useShouldScrollToRecentOnNewOwnMessage<
         }
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [rawMessageList]);
 
   return isMyOwnNewMessageRef;

package/src/components/MessageOverlay/MessageOverlay.tsx

@@ -163,6 +163,7 @@ const MessageOverlayWithContext = <
 
   const modifiedTheme = useMemo(
     () => mergeThemes({ style: myMessageTheme, theme }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [myMessageThemeString, theme],
   );
 
@@ -206,6 +207,7 @@ const MessageOverlayWithContext = <
   useEffect(() => {
     Keyboard.dismiss();
     fadeScreen();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const onPan = useAnimatedGestureHandler<PanGestureHandlerGestureEvent>({

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

@@ -69,16 +69,19 @@ export const useFetchReactions = <
     } catch (error) {
       console.log('Error fetching reactions: ', error);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [client, messageId, reactionType, sortString, next, enableOfflineSupport]);
 
   const loadNextPage = useCallback(async () => {
     if (next) {
       await fetchReactions();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetchReactions]);
 
   useEffect(() => {
     fetchReactions();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [messageId, reactionType, sortString]);
 
   return { loading, loadNextPage, reactions };

package/src/components/ProgressControl/ProgressControl.tsx

@@ -72,6 +72,7 @@ export const ProgressControl = React.memo(
         state.value = progress * widthInNumbers;
         translateX.value = progress * widthInNumbers;
       }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [progress, widthInNumbers]);
 
     const animatedStyles = useAnimatedStyle(() => ({

package/src/components/ProgressControl/WaveProgressBar.tsx

@@ -75,12 +75,14 @@ export const WaveProgressBar = React.memo(
       state.value = stageProgress * (WAVEFORM_WIDTH * 2);
       setEndPosition(state.value);
       setCurrentWaveformProgress(stageProgress);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [progress]);
 
     const stringifiedWaveformData = waveformData.toString();
 
     const resampledWaveformData = useMemo(
       () => resampleWaveformData(waveformData, amplitudesCount),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
       [amplitudesCount, stringifiedWaveformData],
     );
 

package/src/components/Spinner/Spinner.tsx

@@ -53,6 +53,7 @@ export const Spinner = (props: SpinnerProps) => {
       }),
       -1,
     );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (

package/src/components/Thread/Thread.tsx

@@ -80,6 +80,7 @@ const ThreadWithContext = <
     if (thread?.id && thread.reply_count) {
       loadMoreThreadAsync();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(
@@ -91,6 +92,7 @@ const ThreadWithContext = <
         onThreadDismount();
       }
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [],
   );
 

package/src/contexts/channelsStateContext/ChannelsStateContext.tsx

@@ -166,6 +166,7 @@ export const ChannelsStateProvider = <
       setState,
       state,
     }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [state],
   );
 

package/src/contexts/channelsStateContext/useChannelState.ts

@@ -39,12 +39,14 @@ function useStateManager<
   >,
   initialValue?: ChannelState<StreamChatGenerics>[Key],
 ) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const memoizedInitialValue = useMemo(() => initialValue, []);
   const value =
     state[cid]?.[key] || (memoizedInitialValue as ChannelState<StreamChatGenerics>[Key]);
 
   const setValue = useCallback(
     (value: ChannelState<StreamChatGenerics>[Key]) => setState({ cid, key, value }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [cid, key],
   );
 
@@ -86,6 +88,7 @@ export function useChannelState<
     return () => {
       decreaseSubscriberCount({ cid });
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const [members, setMembers] = useStateManager(

package/src/contexts/messageInputContext/hooks/useCreateMessageInputContext.ts

@@ -232,6 +232,7 @@ export const useCreateMessageInputContext = <
       uploadNewImage,
       UploadProgressIndicator,
     }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       asyncIdsLength,
       asyncUploadsValue,

package/src/contexts/messageInputContext/hooks/useMessageDetailsForState.ts

@@ -34,6 +34,7 @@ export const useMessageDetailsForState = <
     if (fileUploads.length || imageUploads.length) {
       setShowMoreOptions(false);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [text, imageUploads.length, fileUploads.length]);
 
   const messageValue =
@@ -44,6 +45,7 @@ export const useMessageDetailsForState = <
       const mentionedUsers = message.mentioned_users.map((user) => user.id);
       setMentionedUsers(mentionedUsers);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [messageValue]);
 
   const mapAttachmentToFileUpload = (attachment: Attachment<StreamChatGenerics>): FileUpload => {
@@ -148,6 +150,7 @@ export const useMessageDetailsForState = <
         setImageUploads(newImageUploads);
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [messageValue]);
 
   return {

package/src/contexts/overlayContext/OverlayProvider.tsx

@@ -189,6 +189,7 @@ export const OverlayProvider = <
     } else {
       overlayOpacity.value = withTiming(0);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [overlay]);
 
   const attachmentPickerContext = {

package/src/hooks/useScreenDimensions.ts

@@ -25,11 +25,13 @@ export const useScreenDimensions = (rounded?: boolean) => {
     return () => subscriptions?.remove();
   }, []);
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const vw = (percentageWidth: number) => {
     const value = screenDimensions.width * (percentageWidth / 100);
     return rounded ? Math.round(value) : value;
   };
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const vh = (percentageHeight: number) => {
     const value = screenDimensions.height * (percentageHeight / 100);
     return rounded ? Math.round(value) : value;

package/src/hooks/useStreami18n.ts

@@ -45,6 +45,7 @@ export const useStreami18n = (i18nInstance?: Streami18n) => {
       unsubscribeOnTFuncOverrideListener();
       unsubscribeOnLanguageChangeListener();
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [i18nInstance]);
 
   return translators;

package/src/hooks/useViewport.ts

@@ -25,11 +25,13 @@ export const useViewport = (rounded?: boolean) => {
     return () => subscriptions?.remove();
   }, []);
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const vw = (percentageWidth: number) => {
     const value = viewportDimensions.width * (percentageWidth / 100);
     return rounded ? Math.round(value) : value;
   };
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const vh = (percentageHeight: number) => {
     const value = viewportDimensions.height * (percentageHeight / 100);
     return rounded ? Math.round(value) : value;

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "5.36.0-beta.4"
+  "version": "5.36.0-beta.6"
 }