stream-chat-react-native-core 4.15.0-beta.2 → 5.0.0-beta.1

package/src/components/Attachment/Gallery.tsx

@@ -4,7 +4,6 @@ import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import type { Attachment } from 'stream-chat';
 
 import { GalleryImage } from './GalleryImage';
-import { useLoadingImage } from './hooks/useLoadingImage';
 import { buildGallery } from './utils/buildGallery/buildGallery';
 
 import type { Thumbnail } from './utils/buildGallery/types';
@@ -30,6 +29,7 @@ import {
   useOverlayContext,
 } from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useLoadingImage } from '../../hooks/useLoadingImage';
 import { isVideoPackageAvailable } from '../../native';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { getUrlWithoutParams } from '../../utils/utils';
@@ -83,7 +83,7 @@ const styles = StyleSheet.create({
 
 export type GalleryPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setImage' | 'setImages'> &
+> = Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setSelectedMessage' | 'setMessages'> &
   Pick<
     MessageContextValue<StreamChatGenerics>,
     | 'alignment'
@@ -141,9 +141,9 @@ const GalleryWithContext = <
     onPress,
     onPressIn,
     preventPress,
-    setImage,
-    setImages,
+    setMessages,
     setOverlay,
+    setSelectedMessage,
     threadList,
     videos,
     VideoThumbnail,
@@ -256,9 +256,9 @@ const GalleryWithContext = <
                   onPressIn={onPressIn}
                   preventPress={preventPress}
                   rowIndex={rowIndex}
-                  setImage={setImage}
-                  setImages={setImages}
+                  setMessages={setMessages}
                   setOverlay={setOverlay}
+                  setSelectedMessage={setSelectedMessage}
                   thumbnail={thumbnail}
                   VideoThumbnail={VideoThumbnail}
                 />
@@ -296,7 +296,7 @@ type GalleryThumbnailProps<
   | 'ImageLoadingIndicator'
   | 'ImageLoadingFailedIndicator'
 > &
-  Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setImage' | 'setImages'> &
+  Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setSelectedMessage' | 'setMessages'> &
   Pick<
     MessageContextValue<StreamChatGenerics>,
     'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'
@@ -322,9 +322,9 @@ const GalleryThumbnail = <
   onPressIn,
   preventPress,
   rowIndex,
-  setImage,
-  setImages,
+  setMessages,
   setOverlay,
+  setSelectedMessage,
   thumbnail,
   VideoThumbnail,
 }: GalleryThumbnailProps<StreamChatGenerics>) => {
@@ -342,11 +342,11 @@ const GalleryThumbnail = <
       // Added if-else to keep the logic readable, instead of DRY.
       // if - legacyImageViewerSwipeBehaviour is disabled
       // else - legacyImageViewerSwipeBehaviour is enabled
-      setImages([message]);
-      setImage({ messageId: message.id, url: thumbnail.url });
+      setMessages([message]);
+      setSelectedMessage({ messageId: message.id, url: thumbnail.url });
       setOverlay('gallery');
     } else if (legacyImageViewerSwipeBehaviour) {
-      setImage({ messageId: message?.id, url: thumbnail.url });
+      setSelectedMessage({ messageId: message?.id, url: thumbnail.url });
       setOverlay('gallery');
     }
   };
@@ -585,14 +585,15 @@ export const Gallery = <
     onPress: propOnPress,
     onPressIn: propOnPressIn,
     preventPress: propPreventPress,
-    setImage: propSetImage,
     setOverlay: propSetOverlay,
+    setSelectedMessage: propSetSelectedMessage,
     threadList: propThreadList,
     videos: propVideos,
     VideoThumbnail: PropVideoThumbnail,
   } = props;
 
-  const { setImage: contextSetImage, setImages } = useImageGalleryContext<StreamChatGenerics>();
+  const { setMessages, setSelectedMessage: contextSetSelectedMessage } =
+    useImageGalleryContext<StreamChatGenerics>();
   const {
     alignment: contextAlignment,
     groupStyles: contextGroupStyles,
@@ -628,7 +629,7 @@ export const Gallery = <
   const onPress = propOnPress || contextOnPress;
   const preventPress =
     typeof propPreventPress === 'boolean' ? propPreventPress : contextPreventPress;
-  const setImage = propSetImage || contextSetImage;
+  const setSelectedMessage = propSetSelectedMessage || contextSetSelectedMessage;
   const setOverlay = propSetOverlay || contextSetOverlay;
   const threadList = propThreadList || contextThreadList;
   const VideoThumbnail = PropVideoThumbnail || ContextVideoThumnbnail;
@@ -653,9 +654,9 @@ export const Gallery = <
         onPress,
         onPressIn,
         preventPress,
-        setImage,
-        setImages,
+        setMessages,
         setOverlay,
+        setSelectedMessage,
         threadList,
         videos,
         VideoThumbnail,

package/src/components/Attachment/Giphy.tsx

@@ -3,8 +3,6 @@ import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
 import type { Attachment } from 'stream-chat';
 
-import { useLoadingImage } from './hooks/useLoadingImage';
-
 import {
   ImageGalleryContextValue,
   useImageGalleryContext,
@@ -22,6 +20,7 @@ import {
   useOverlayContext,
 } from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useLoadingImage } from '../../hooks/useLoadingImage';
 import { GiphyIcon } from '../../icons';
 import { Lightning } from '../../icons/Lightning';
 import type { DefaultStreamChatGenerics } from '../../types/types';
@@ -135,7 +134,7 @@ const styles = StyleSheet.create({
 
 export type GiphyPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setImage' | 'setImages'> &
+> = Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setSelectedMessage' | 'setMessages'> &
   Pick<
     MessageContextValue<StreamChatGenerics>,
     | 'handleAction'
@@ -174,9 +173,9 @@ const GiphyWithContext = <
     onPress,
     onPressIn,
     preventPress,
-    setImage,
-    setImages,
+    setMessages,
     setOverlay,
+    setSelectedMessage,
   } = props;
 
   const { actions, giphy: giphyData, image_url, thumb_url, title, type } = attachment;
@@ -211,8 +210,8 @@ const GiphyWithContext = <
   const giphyDimensions: { height?: number; width?: number } = {};
 
   const defaultOnPress = () => {
-    setImages([message]);
-    setImage({ messageId: message.id, url: uri });
+    setMessages([message]);
+    setSelectedMessage({ messageId: message.id, url: uri });
     setOverlay('gallery');
   };
 
@@ -448,7 +447,7 @@ export const Giphy = <
   const { handleAction, isMyMessage, message, onLongPress, onPress, onPressIn, preventPress } =
     useMessageContext<StreamChatGenerics>();
   const { additionalTouchableProps, giphyVersion } = useMessagesContext<StreamChatGenerics>();
-  const { setImage, setImages } = useImageGalleryContext<StreamChatGenerics>();
+  const { setMessages, setSelectedMessage } = useImageGalleryContext<StreamChatGenerics>();
   const { setOverlay } = useOverlayContext();
 
   const {
@@ -473,9 +472,9 @@ export const Giphy = <
         onPress,
         onPressIn,
         preventPress,
-        setImage,
-        setImages,
+        setMessages,
         setOverlay,
+        setSelectedMessage,
       }}
       {...props}
     />

package/src/components/Avatar/Avatar.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Image, ImageStyle, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 import Svg, { Circle, CircleProps } from 'react-native-svg';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useLoadingImage } from '../../hooks/useLoadingImage';
 import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
 
 const randomImageBaseUrl = 'https://getstream.io/random_png/';
@@ -68,7 +69,7 @@ export const Avatar: React.FC<AvatarProps> = (props) => {
     },
   } = useTheme();
 
-  const [imageError, setImageError] = useState(false);
+  const { isLoadingImageError, setLoadingImageError } = useLoadingImage();
 
   return (
     <View>
@@ -84,37 +85,50 @@ export const Avatar: React.FC<AvatarProps> = (props) => {
           containerStyle,
         ]}
       >
-        <Image
-          accessibilityLabel={testID || 'Avatar Image'}
-          onError={() => setImageError(true)}
-          source={{
-            uri:
-              imageError ||
-              !imageProp ||
-              imageProp.includes(randomImageBaseUrl) ||
-              imageProp.includes(randomSvgBaseUrl)
-                ? imageProp?.includes(streamCDN)
-                  ? imageProp
-                  : `${randomImageBaseUrl}${name ? `?name=${getInitials(name)}&size=${size}` : ''}`
-                : getResizedImageUrl({
+        {isLoadingImageError ? (
+          <View
+            style={{
+              backgroundColor: '#ececec',
+              borderRadius: size / 2,
+              height: size,
+              width: size,
+            }}
+          />
+        ) : (
+          <Image
+            accessibilityLabel={testID || 'Avatar Image'}
+            onError={() => setLoadingImageError(true)}
+            source={{
+              uri:
+                !imageProp ||
+                imageProp.includes(randomImageBaseUrl) ||
+                imageProp.includes(randomSvgBaseUrl)
+                  ? imageProp?.includes(streamCDN)
+                    ? imageProp
+                    : `${randomImageBaseUrl}${
+                        name ? `?name=${getInitials(name)}&size=${size}` : ''
+                      }`
+                  : getResizedImageUrl({
+                      height: size,
+                      url: imageProp,
+                      width: size,
+                    }),
+            }}
+            style={[
+              image,
+              size
+                ? {
+                    backgroundColor: '#ececec',
+                    borderRadius: size / 2,
                     height: size,
-                    url: imageProp,
                     width: size,
-                  }),
-          }}
-          style={[
-            image,
-            size
-              ? {
-                  borderRadius: size / 2,
-                  height: size,
-                  width: size,
-                }
-              : {},
-            imageStyle,
-          ]}
-          testID={testID || 'avatar-image'}
-        />
+                  }
+                : {},
+              imageStyle,
+            ]}
+            testID={testID || 'avatar-image'}
+          />
+        )}
       </View>
       {online && (
         <View

package/src/components/Avatar/GroupAvatar.tsx

@@ -1,7 +1,8 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Image, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useLoadingImage } from '../../hooks/useLoadingImage';
 import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
 
 const randomImageBaseUrl = 'https://getstream.io/random_png/';
@@ -44,8 +45,7 @@ export const GroupAvatar: React.FC<GroupAvatarProps> = (props) => {
     },
   } = useTheme();
 
-  const [imageError, setImageError] = useState(false);
-
+  const { isLoadingImageError, setLoadingImageError } = useLoadingImage();
   /**
    * [
    *    [
@@ -115,24 +115,33 @@ export const GroupAvatar: React.FC<GroupAvatarProps> = (props) => {
       ]}
       testID={testID || 'group-avatar'}
     >
-      {avatarImages.map((column, colIndex) => (
+      {isLoadingImageError ? (
         <View
-          key={`avatar-column-${colIndex}`}
-          style={[
-            styles.flex,
-            {
-              flexDirection: imagesOrNames.length === 2 ? 'column' : 'row',
-            },
-          ]}
-        >
-          {column.map(({ height, name, url, width }, rowIndex) => (
-            <Image
-              accessibilityLabel={testID || 'Avatar Image'}
-              key={`avatar-${url}-${rowIndex}`}
-              onError={() => setImageError(true)}
-              source={{
-                uri:
-                  imageError || url.includes(randomSvgBaseUrl)
+          style={{
+            backgroundColor: '#ececec',
+            borderRadius: size / 2,
+            height: size,
+            width: size,
+          }}
+        />
+      ) : (
+        avatarImages.map((column, colIndex) => (
+          <View
+            key={`avatar-column-${colIndex}`}
+            style={[
+              styles.flex,
+              {
+                flexDirection: imagesOrNames.length === 2 ? 'column' : 'row',
+              },
+            ]}
+          >
+            {column.map(({ height, name, url, width }, rowIndex) => (
+              <Image
+                accessibilityLabel={testID || 'Avatar Image'}
+                key={`avatar-${url}-${rowIndex}`}
+                onError={() => setLoadingImageError(true)}
+                source={{
+                  uri: url.includes(randomSvgBaseUrl)
                     ? url.includes(streamCDN)
                       ? url
                       : `${randomImageBaseUrl}${
@@ -143,21 +152,23 @@ export const GroupAvatar: React.FC<GroupAvatarProps> = (props) => {
                         url,
                         width,
                       }),
-              }}
-              style={[
-                image,
-                size
-                  ? {
-                      height,
-                      width,
-                    }
-                  : {},
-              ]}
-              testID={`group-avatar-image-${colIndex}-${rowIndex}`}
-            />
-          ))}
-        </View>
-      ))}
+                }}
+                style={[
+                  image,
+                  size
+                    ? {
+                        backgroundColor: '#ececec',
+                        height,
+                        width,
+                      }
+                    : {},
+                ]}
+                testID={`group-avatar-image-${colIndex}-${rowIndex}`}
+              />
+            ))}
+          </View>
+        ))
+      )}
     </View>
   );
 };