stream-chat-react-native-core 3.10.2 → 4.0.0-beta.4

package/src/components/ChannelPreview/hooks/useChannelPreviewDisplayAvatar.ts

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
 
-import { useChatContext } from '../../../contexts/chatContext/ChatContext';
-
 import type { Channel, StreamChat } from 'stream-chat';
 
+import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -28,12 +28,14 @@ export const getChannelPreviewDisplayAvatar = <
   client: StreamChat<At, Ch, Co, Ev, Me, Re, Us>,
 ) => {
   const currentUserId = client?.user?.id;
+  const channelId = channel?.id;
   const channelData = channel?.data;
   const channelName = channelData?.name;
   const channelImage = channelData?.image;
 
   if (channelImage) {
     return {
+      id: channelId,
       image: channelImage,
       name: channelName,
     };
@@ -43,16 +45,20 @@ export const getChannelPreviewDisplayAvatar = <
 
     if (otherMembers.length === 1) {
       return {
+        id: otherMembers[0].user?.id,
         image: otherMembers[0].user?.image,
         name: channelName || otherMembers[0].user?.name,
       };
     }
+
     return {
+      ids: otherMembers.slice(0, 4).map((member) => member.user?.id || ''),
       images: otherMembers.slice(0, 4).map((member) => member.user?.image || ''),
       names: otherMembers.slice(0, 4).map((member) => member.user?.name || ''),
     };
   }
   return {
+    id: channelId,
     name: channelName,
   };
 };

package/src/components/ChannelPreview/hooks/useChannelPreviewDisplayName.ts

@@ -1,11 +1,9 @@
 import { useEffect, useState } from 'react';
 
-import { useChatContext } from '../../../contexts/chatContext/ChatContext';
-
-import { vw } from '../../../utils/utils';
-
 import type { Channel } from 'stream-chat';
 
+import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -16,6 +14,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
+import { vw } from '../../../utils/utils';
 
 const maxCharacterLengthDefault = (vw(100) - 16) / 6;
 

package/src/components/ChannelPreview/hooks/useChannelPreviewDisplayPresence.ts

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
 
-import { useChatContext } from '../../../contexts/chatContext/ChatContext';
-
 import type { Channel, StreamChat } from 'stream-chat';
 
+import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+
 import type {
   DefaultAttachmentType,
   DefaultChannelType,

package/src/components/ChannelPreview/hooks/useLatestMessagePreview.ts

@@ -1,5 +1,7 @@
 import { useEffect, useState } from 'react';
 
+import type { Channel, ChannelState, MessageResponse, StreamChat } from 'stream-chat';
+
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import {
   isDayOrMoment,
@@ -7,8 +9,6 @@ import {
   useTranslationContext,
 } from '../../../contexts/translationContext/TranslationContext';
 
-import type { Channel, ChannelState, MessageResponse, StreamChat } from 'stream-chat';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -65,7 +65,8 @@ const getLatestMessageDisplayText = <
   t: (key: string) => string,
 ) => {
   if (!message) return [{ bold: false, text: t('Nothing yet...') }];
-  if (message.deleted_at) return [{ bold: false, text: t('Message deleted') }];
+  const isMessageTypeDeleted = message.type === 'deleted';
+  if (isMessageTypeDeleted) return [{ bold: false, text: t('Message deleted') }];
   const currentUserId = client.userID;
   const messageOwnerId = message.user?.id;
   const members = Object.keys(channel.state.members);

package/src/components/Chat/Chat.tsx

@@ -1,7 +1,10 @@
 import React, { PropsWithChildren, useEffect, useState } from 'react';
 import { Platform } from 'react-native';
+
 import Dayjs from 'dayjs';
 
+import type { Channel } from 'stream-chat';
+
 import { useCreateChatContext } from './hooks/useCreateChatContext';
 import { useIsOnline } from './hooks/useIsOnline';
 import { useMutedUsers } from './hooks/useMutedUsers';
@@ -9,6 +12,7 @@ import { useMutedUsers } from './hooks/useMutedUsers';
 import { ChatContextValue, ChatProvider } from '../../contexts/chatContext/ChatContext';
 import { useOverlayContext } from '../../contexts/overlayContext/OverlayContext';
 import { DeepPartial, ThemeProvider } from '../../contexts/themeContext/ThemeContext';
+import type { Theme } from '../../contexts/themeContext/utils/theme';
 import {
   TranslationContextValue,
   TranslationProvider,
@@ -16,12 +20,6 @@ import {
 import { useStreami18n } from '../../hooks/useStreami18n';
 
 import { SDK } from '../../native';
-import { version } from '../../version.json';
-
-import type { Channel } from 'stream-chat';
-
-import type { Theme } from '../../contexts/themeContext/utils/theme';
-import type { Streami18n } from '../../utils/Streami18n';
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -32,6 +30,8 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import type { Streami18n } from '../../utils/Streami18n';
+import { version } from '../../version.json';
 
 export type ChatProps<
   At extends UnknownType = DefaultAttachmentType,

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

@@ -1,16 +1,17 @@
 import React from 'react';
 import { View } from 'react-native';
-import { act, cleanup, render, waitFor } from '@testing-library/react-native';
-
-import { Chat } from '../Chat';
 
-import { Streami18n } from '../../../utils/Streami18n';
+import { act, cleanup, render, waitFor } from '@testing-library/react-native';
 
+import { setNetInfoFetchMock } from '../../../../jest-setup';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import dispatchConnectionChangedEvent from '../../../mock-builders/event/connectionChanged';
 import dispatchConnectionRecoveredEvent from '../../../mock-builders/event/connectionRecovered';
 import { getTestClient } from '../../../mock-builders/mock';
+import { Streami18n } from '../../../utils/Streami18n';
+import { Chat } from '../Chat';
 
 const ChatContextConsumer = ({ fn }) => {
   fn(useChatContext());
@@ -38,6 +39,8 @@ describe('Chat', () => {
 
   it('listens and updates state on a connection changed event', async () => {
     let context;
+    const netInfoFetch = jest.fn();
+    setNetInfoFetchMock(netInfoFetch);
 
     render(
       <Chat client={chatClient}>
@@ -49,15 +52,16 @@ describe('Chat', () => {
       </Chat>,
     );
 
-    const { connectionRecovering } = context;
+    await waitFor(() => expect(netInfoFetch).toHaveBeenCalledTimes(1));
 
+    const { connectionRecovering } = context;
     act(() => dispatchConnectionChangedEvent(chatClient));
-
     await waitFor(() => {
       expect(context.connectionRecovering).toStrictEqual(!connectionRecovering);
       expect(context.isOnline).toBeFalsy();
     });
   });
+
   it('listens and updates state on a connection recovered event', async () => {
     let context;
 

package/src/components/Chat/hooks/useIsOnline.ts

@@ -1,12 +1,13 @@
 import { useCallback, useEffect, useState } from 'react';
 
+import type { NetInfoSubscription } from '@react-native-community/netinfo';
+
+import type { StreamChat, Event as StreamEvent } from 'stream-chat';
+
 import { useAppStateListener } from '../../../hooks/useAppStateListener';
 import { useIsMountedRef } from '../../../hooks/useIsMountedRef';
 import { NetInfo } from '../../../native';
 
-import type { NetInfoSubscription } from '@react-native-community/netinfo';
-import type { StreamChat, Event as StreamEvent } from 'stream-chat';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -85,18 +86,21 @@ export const useIsOnline = <
 
     let unsubscribeNetInfo: NetInfoSubscription;
     const setNetInfoListener = () => {
-      NetInfo.fetch().then((netInfoState) => {
-        notifyChatClient(netInfoState);
-      });
       unsubscribeNetInfo = NetInfo.addEventListener((netInfoState) => {
+        if (netInfoState === false && !client.wsConnection?.isHealthy) {
+          setConnectionRecovering(true);
+          setIsOnline(false);
+        }
         notifyChatClient(netInfoState);
       });
     };
 
     const setInitialOnlineState = async () => {
       const status = await NetInfo.fetch();
-
-      if (isMounted.current) setIsOnline(status);
+      if (isMounted.current) {
+        setIsOnline(status);
+        notifyChatClient(status);
+      }
     };
 
     setInitialOnlineState();

package/src/components/ImageGallery/ImageGallery.tsx

@@ -9,7 +9,7 @@ import {
   StyleSheet,
   ViewStyle,
 } from 'react-native';
-import BottomSheet from '@gorhom/bottom-sheet';
+
 import {
   PanGestureHandler,
   PanGestureHandlerGestureEvent,
@@ -18,6 +18,7 @@ import {
   TapGestureHandler,
   TapGestureHandlerGestureEvent,
 } from 'react-native-gesture-handler';
+
 import Animated, {
   cancelAnimation,
   Easing,
@@ -32,6 +33,10 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 
+import { BottomSheetModal, BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+
+import type { UserResponse } from 'stream-chat';
+
 import { AnimatedGalleryImage } from './components/AnimatedGalleryImage';
 import {
   ImageGalleryFooter,
@@ -52,9 +57,6 @@ import { useImageGalleryContext } from '../../contexts/imageGalleryContext/Image
 import { useOverlayContext } from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { triggerHaptic } from '../../native';
-import { vh, vw } from '../../utils/utils';
-
-import type { UserResponse } from 'stream-chat';
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -65,6 +67,9 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
+import { getUrlOfImageAttachment } from '../../utils/getUrlOfImageAttachment';
+import { vh, vw } from '../../utils/utils';
 
 const isAndroid = Platform.OS === 'android';
 const fullScreenHeight = Dimensions.get('screen').height;
@@ -160,7 +165,8 @@ export const ImageGallery = <
       imageGallery: { backgroundColor },
     },
   } = useTheme();
-  const { overlay, setBlurType, setOverlay, translucentStatusBar } = useOverlayContext();
+  const [gridPhotos, setGridPhotos] = useState<Photo<Us>[]>([]);
+  const { overlay, setOverlay, translucentStatusBar } = useOverlayContext();
   const { image, images, setImage } = useImageGalleryContext<At, Ch, Co, Ev, Me, Re, Us>();
 
   /**
@@ -180,15 +186,15 @@ export const ImageGallery = <
     : vh(100);
   const halfScreenHeight = screenHeight / 2;
   const quarterScreenHeight = screenHeight / 4;
-  const snapPoints = React.useMemo(() => [0, (screenHeight * 9) / 10], []);
+  const snapPoints = React.useMemo(() => [(screenHeight * 9) / 10], []);
 
   /**
-   * BottomSheet ref
+   * BottomSheetModal ref
    */
-  const bottomSheetRef = useRef<BottomSheet>(null);
+  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
 
   /**
-   * BottomSheet state
+   * BottomSheetModal state
    */
   const [currentBottomSheetIndex, setCurrentBottomSheetIndex] = useState(0);
   const animatedBottomSheetIndex = useSharedValue(0);
@@ -344,19 +350,30 @@ export const ImageGallery = <
           attachment.type === 'image' &&
           !attachment.title_link &&
           !attachment.og_scrape_url &&
-          (attachment.image_url || attachment.thumb_url),
+          getUrlOfImageAttachment(attachment),
       ) || [];
 
-    const attachmentPhotos = attachmentImages.map((attachmentImage) => ({
-      created_at: cur.created_at,
-      id: `photoId-${cur.id}-${attachmentImage.image_url || attachmentImage.thumb_url}`,
-      messageId: cur.id,
-      uri: attachmentImage.image_url || attachmentImage.thumb_url || '',
-      user: cur.user,
-      user_id: cur.user_id,
-    }));
+    const attachmentPhotos = attachmentImages.map((a) => {
+      const imageUrl = getUrlOfImageAttachment(a) as string;
+
+      return {
+        channelId: cur.cid,
+        created_at: cur.created_at,
+        id: `photoId-${cur.id}-${imageUrl}`,
+        messageId: cur.id,
+        original_height: a.original_height,
+        original_width: a.original_width,
+        uri: getResizedImageUrl({
+          height: screenHeight,
+          url: imageUrl,
+          width: screenWidth,
+        }),
+        user: cur.user,
+        user_id: cur.user_id,
+      };
+    });
 
-    return [...acc, ...attachmentPhotos];
+    return [...acc, ...attachmentPhotos] as Photo<Us>[];
   }, []);
 
   /**
@@ -397,8 +414,15 @@ export const ImageGallery = <
   const uriForCurrentImage = photos[selectedIndex]?.uri;
   useEffect(() => {
     setCurrentImageHeight(screenHeight);
-    if (photos[index.value]?.uri) {
-      Image.getSize(photos[index.value].uri, (width, height) => {
+    const photo = photos[index.value];
+    const height = photo?.original_height;
+    const width = photo?.original_width;
+
+    if (height && width) {
+      const imageHeight = Math.floor(height * (screenWidth / width));
+      setCurrentImageHeight(imageHeight > screenHeight ? screenHeight : imageHeight);
+    } else if (photo?.uri) {
+      Image.getSize(photo.uri, (width, height) => {
         const imageHeight = Math.floor(height * (screenWidth / width));
         setCurrentImageHeight(imageHeight > screenHeight ? screenHeight : imageHeight);
       });
@@ -646,7 +670,6 @@ export const ImageGallery = <
               () => {
                 showScreen.value = 0;
                 runOnJS(setOverlay)('none');
-                runOnJS(setBlurType)(undefined);
               },
             );
             scale.value = withTiming(0.6, {
@@ -1038,16 +1061,22 @@ export const ImageGallery = <
   );
 
   /**
-   * Functions to open and close BottomSheet with image grid
+   * Functions toclose BottomSheetModal with image grid
    */
   const closeGridView = () => {
-    if (bottomSheetRef.current) {
-      bottomSheetRef.current.close();
+    if (bottomSheetModalRef.current?.close) {
+      bottomSheetModalRef.current.close();
+      setGridPhotos([]);
     }
   };
+
+  /**
+   * Function to open BottomSheetModal with image grid
+   */
   const openGridView = () => {
-    if (bottomSheetRef.current) {
-      bottomSheetRef.current.snapTo(1);
+    if (bottomSheetModalRef.current?.present) {
+      bottomSheetModalRef.current.present();
+      setGridPhotos(photos);
     }
   };
 
@@ -1153,30 +1182,32 @@ export const ImageGallery = <
         closeGridView={closeGridView}
         currentBottomSheetIndex={currentBottomSheetIndex}
       />
-      <BottomSheet
-        animatedIndex={animatedBottomSheetIndex}
-        containerHeight={fullScreenHeight}
-        handleComponent={() => (
-          <ImageGridHandle
+      <BottomSheetModalProvider>
+        <BottomSheetModal
+          animatedIndex={animatedBottomSheetIndex}
+          enablePanDownToClose={true}
+          handleComponent={() => (
+            <ImageGridHandle
+              closeGridView={closeGridView}
+              {...imageGalleryCustomComponents?.gridHandle}
+            />
+          )}
+          handleHeight={imageGalleryGridHandleHeight ?? 40}
+          index={0}
+          onChange={(index: number) => setCurrentBottomSheetIndex(index)}
+          ref={bottomSheetModalRef}
+          snapPoints={imageGalleryGridSnapPoints || snapPoints}
+        >
+          <ImageGrid
             closeGridView={closeGridView}
-            {...imageGalleryCustomComponents?.gridHandle}
+            numberOfImageGalleryGridColumns={numberOfImageGalleryGridColumns}
+            photos={gridPhotos}
+            resetVisibleValues={resetVisibleValues}
+            setImage={setImage}
+            {...imageGalleryCustomComponents?.grid}
           />
-        )}
-        handleHeight={imageGalleryGridHandleHeight ?? 40}
-        index={0}
-        onChange={(index: number) => setCurrentBottomSheetIndex(index)}
-        ref={bottomSheetRef}
-        snapPoints={imageGalleryGridSnapPoints || snapPoints}
-      >
-        <ImageGrid
-          closeGridView={closeGridView}
-          numberOfImageGalleryGridColumns={numberOfImageGalleryGridColumns}
-          photos={photos}
-          resetVisibleValues={resetVisibleValues}
-          setImage={setImage}
-          {...imageGalleryCustomComponents?.grid}
-        />
-      </BottomSheet>
+        </BottomSheetModal>
+      </BottomSheetModalProvider>
     </Animated.View>
   );
 };
@@ -1199,8 +1230,11 @@ const styles = StyleSheet.create({
 export type Photo<Us extends UnknownType = DefaultUserType> = {
   id: string;
   uri: string;
+  channelId?: string;
   created_at?: string | Date;
   messageId?: string;
+  original_height?: number;
+  original_width?: number;
   user?: UserResponse<Us> | null;
   user_id?: string;
 };

package/src/components/ImageGallery/components/AnimatedGalleryImage.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import { View } from 'react-native';
+import type { ImageStyle, StyleProp } from 'react-native';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 
 import { vw } from '../../../utils/utils';
 
-import type { ImageStyle, StyleProp } from 'react-native';
-
 const screenWidth = vw(100);
 const halfScreenWidth = vw(50);
 const oneEight = 1 / 8;

package/src/components/ImageGallery/components/ImageGalleryFooter.tsx

@@ -7,9 +7,8 @@ import { useTranslationContext } from '../../../contexts/translationContext/Tran
 import { Grid as GridIconDefault, Share as ShareIconDefault } from '../../../icons';
 import { deleteFile, saveFile, shareImage } from '../../../native';
 
-import type { Photo } from '../ImageGallery';
-
 import type { DefaultUserType, UnknownType } from '../../../types/types';
+import type { Photo } from '../ImageGallery';
 
 const ReanimatedSafeAreaView = Animated.createAnimatedComponent
   ? Animated.createAnimatedComponent(SafeAreaView)
@@ -126,9 +125,7 @@ export const ImageGalleryFooter = <Us extends UnknownType = DefaultUserType>(pro
     setShareMenuOpen(true);
     try {
       const localImage = await saveFile({
-        fileName: `${photo.user?.name || photo.user_id || 'ChatPhoto'}-${
-          photo.messageId
-        }-${selectedIndex}.jpg`,
+        fileName: `${photo.user?.id || 'ChatPhoto'}-${photo.messageId}-${selectedIndex}.jpg`,
         fromUrl: photo.uri,
       });
       await shareImage({ type: 'image/jpeg', url: localImage });

package/src/components/ImageGallery/components/ImageGalleryHeader.tsx

@@ -19,9 +19,8 @@ import {
 } from '../../../contexts/translationContext/TranslationContext';
 import { Close } from '../../../icons';
 
-import type { Photo } from '../ImageGallery';
-
 import type { DefaultUserType, UnknownType } from '../../../types/types';
+import type { Photo } from '../ImageGallery';
 
 const ReanimatedSafeAreaView = Animated.createAnimatedComponent
   ? Animated.createAnimatedComponent(SafeAreaView)
@@ -100,9 +99,9 @@ export const ImageGalleryHeader = <Us extends UnknownType = DefaultUserType>(pro
     },
   } = useTheme();
   const { t, tDateTimeParser } = useTranslationContext();
-  const { setBlurType, setOverlay, translucentStatusBar } = useOverlayContext();
+  const { setOverlay, translucentStatusBar } = useOverlayContext();
 
-  const parsedDate = tDateTimeParser(photo?.created_at);
+  const parsedDate = photo ? tDateTimeParser(photo?.created_at) : null;
 
   /**
    * .calendar is required on moment types, but in reality it
@@ -114,7 +113,7 @@ export const ImageGalleryHeader = <Us extends UnknownType = DefaultUserType>(pro
       ? parsedDate.calendar
         ? parsedDate.calendar()
         : parsedDate.fromNow()
-      : parsedDate;
+      : null;
 
   const headerStyle = useAnimatedStyle<ViewStyle>(() => ({
     opacity: opacity.value,
@@ -132,7 +131,6 @@ export const ImageGalleryHeader = <Us extends UnknownType = DefaultUserType>(pro
 
   const hideOverlay = () => {
     setOverlay('none');
-    setBlurType(undefined);
   };
 
   return (
@@ -160,7 +158,7 @@ export const ImageGalleryHeader = <Us extends UnknownType = DefaultUserType>(pro
               <Text style={[styles.userName, { color: black }, usernameText]}>
                 {photo?.user?.name || t('Unknown User')}
               </Text>
-              <Text style={[styles.date, { color: black }, dateText]}>{date}</Text>
+              {date && <Text style={[styles.date, { color: black }, dateText]}>{date}</Text>}
             </View>
           )}
           {rightElement ? (

package/src/components/ImageGallery/components/ImageGrid.tsx

@@ -1,16 +1,15 @@
 import React from 'react';
 import { ImageBackground, StyleSheet } from 'react-native';
-import { BottomSheetFlatList, TouchableOpacity } from '@gorhom/bottom-sheet';
 
-import { Avatar } from '../../Avatar/Avatar';
+import { BottomSheetFlatList, TouchableOpacity } from '@gorhom/bottom-sheet';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import type { DefaultUserType, UnknownType } from '../../../types/types';
 import { vw } from '../../../utils/utils';
+import { Avatar } from '../../Avatar/Avatar';
 
 import type { Photo } from '../ImageGallery';
 
-import type { DefaultUserType, UnknownType } from '../../../types/types';
-
 const styles = StyleSheet.create({
   avatarImage: {
     borderRadius: 22,
@@ -161,7 +160,7 @@ export const ImageGrid = <Us extends UnknownType = DefaultUserType>(props: Props
         { backgroundColor: white },
         contentContainer,
       ]}
-      data={imageGridItems}
+      data={imageGridItems as GridImageItem<UnknownType>[]}
       keyExtractor={(item, index) => `${item.uri}-${index}`}
       numColumns={numberOfImageGalleryGridColumns || 3}
       renderItem={renderItem}

package/src/components/ImageGallery/components/ImageGridHandle.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
+
 import { TouchableOpacity } from '@gorhom/bottom-sheet';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';

package/src/components/Indicators/LoadingErrorIndicator.tsx

@@ -48,7 +48,7 @@ const LoadingErrorWrapper: React.FC<LoadingErrorWrapperProps> = (props) => {
 };
 
 export type LoadingErrorProps = {
-  error?: boolean;
+  error?: boolean | Error;
   listType?: 'channel' | 'message' | 'default';
   loadNextPage?: () => Promise<void>;
   retry?: () => void;

package/src/components/Indicators/LoadingIndicator.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { Spinner } from '../Spinner/Spinner';
-
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+import { Spinner } from '../Spinner/Spinner';
 
 const styles = StyleSheet.create({
   container: {