stream-chat-react-native-core 4.8.0-beta.1 → 4.9.0-beta.2

package/src/components/Attachment/Gallery.tsx

@@ -1,6 +1,8 @@
 import React, { useMemo } from 'react';
-import { Image, ImageProps, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
+import { GalleryImage } from './GallaryImage';
+import { useLoadingImage } from './hooks/useLoadingImage';
 import { buildGallery } from './utils/buildGallery/buildGallery';
 
 import { getGalleryImageBorderRadius } from './utils/getGalleryImageBorderRadius';
@@ -27,25 +29,7 @@ import {
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { isVideoPackageAvailable } from '../../native';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import { getUrlWithoutParams, makeImageCompatibleUrl } from '../../utils/utils';
-
-const GalleryImage: React.FC<
-  Omit<ImageProps, 'height' | 'source'> & {
-    uri: string;
-  }
-> = (props) => {
-  const { uri, ...rest } = props;
-
-  return (
-    <Image
-      {...rest}
-      source={{
-        uri: makeImageCompatibleUrl(uri),
-      }}
-      testID='image-attachment-single'
-    />
-  );
-};
+import { getUrlWithoutParams } from '../../utils/utils';
 
 const MemoizedGalleryImage = React.memo(
   GalleryImage,
@@ -54,7 +38,7 @@ const MemoizedGalleryImage = React.memo(
 ) as typeof GalleryImage;
 
 const styles = StyleSheet.create({
-  flex: { flex: 1 },
+  errorTextSize: { fontSize: 10 },
   galleryContainer: {
     borderTopLeftRadius: 13,
     borderTopRightRadius: 13,
@@ -62,7 +46,19 @@ const styles = StyleSheet.create({
     flexWrap: 'wrap',
     overflow: 'hidden',
   },
-  imageContainer: { display: 'flex', flexDirection: 'row', justifyContent: 'center', padding: 1 },
+  imageContainer: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    padding: 1,
+  },
+  imageContainerStyle: { alignItems: 'center', flex: 1, justifyContent: 'center' },
+  imageLoadingIndicatorStyle: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'absolute',
+  },
   moreImagesContainer: {
     alignItems: 'center',
     justifyContent: 'center',
@@ -88,7 +84,11 @@ export type GalleryPropsWithContext<
   > &
   Pick<
     MessagesContextValue<StreamChatGenerics>,
-    'additionalTouchableProps' | 'legacyImageViewerSwipeBehaviour' | 'VideoThumbnail'
+    | 'additionalTouchableProps'
+    | 'legacyImageViewerSwipeBehaviour'
+    | 'VideoThumbnail'
+    | 'ImageLoadingIndicator'
+    | 'ImageLoadingFailedIndicator'
   > &
   Pick<OverlayContextValue, 'setOverlay'> & {
     channelId: string | undefined;
@@ -118,6 +118,8 @@ const GalleryWithContext = <
     alignment,
     groupStyles,
     hasThreadReplies,
+    ImageLoadingFailedIndicator,
+    ImageLoadingIndicator,
     images,
     legacyImageViewerSwipeBehaviour,
     message,
@@ -133,6 +135,9 @@ const GalleryWithContext = <
     VideoThumbnail,
   } = props;
 
+  const { isLoadingImage, isLoadingImageError, setLoadingImage, setLoadingImageError } =
+    useLoadingImage();
+
   const {
     theme: {
       colors: { overlay },
@@ -304,18 +309,37 @@ const GalleryWithContext = <
                       ]}
                     />
                   ) : (
-                    <MemoizedGalleryImage
-                      resizeMode={resizeMode}
-                      style={[
-                        borderRadius,
-                        image,
-                        {
-                          height: height - 1,
-                          width: width - 1,
-                        },
-                      ]}
-                      uri={url}
-                    />
+                    <View style={styles.imageContainerStyle}>
+                      <MemoizedGalleryImage
+                        onError={(error) => {
+                          console.warn(error);
+                          setLoadingImage(false);
+                          setLoadingImageError(true);
+                        }}
+                        onLoadEnd={() => setLoadingImage(false)}
+                        onLoadStart={() => setLoadingImage(true)}
+                        resizeMode={resizeMode}
+                        style={[
+                          borderRadius,
+                          image,
+                          {
+                            height: height - 1,
+                            width: width - 1,
+                          },
+                        ]}
+                        uri={url}
+                      />
+                      {isLoadingImage && (
+                        <View style={{ position: 'absolute' }}>
+                          <ImageLoadingIndicator style={styles.imageLoadingIndicatorStyle} />
+                        </View>
+                      )}
+                      {isLoadingImageError && (
+                        <View style={{ position: 'absolute' }}>
+                          <ImageLoadingFailedIndicator style={styles.imageLoadingIndicatorStyle} />
+                        </View>
+                      )}
+                    </View>
                   )}
                   {colIndex === numOfColumns - 1 &&
                   rowIndex === numOfRows - 1 &&
@@ -412,6 +436,8 @@ export const Gallery = <
     alignment: propAlignment,
     groupStyles: propGroupStyles,
     hasThreadReplies,
+    ImageLoadingFailedIndicator: PropImageLoadingFailedIndicator,
+    ImageLoadingIndicator: PropImageLoadingIndicator,
     images: propImages,
     onLongPress: propOnLongPress,
     onPress: propOnPress,
@@ -439,6 +465,8 @@ export const Gallery = <
   } = useMessageContext<StreamChatGenerics>();
   const {
     additionalTouchableProps: contextAdditionalTouchableProps,
+    ImageLoadingFailedIndicator: ContextImageLoadingFailedIndicator,
+    ImageLoadingIndicator: ContextImageLoadingIndicator,
     legacyImageViewerSwipeBehaviour,
     VideoThumbnail: ContextVideoThumnbnail,
   } = useMessagesContext<StreamChatGenerics>();
@@ -461,6 +489,9 @@ export const Gallery = <
   const setOverlay = propSetOverlay || contextSetOverlay;
   const threadList = propThreadList || contextThreadList;
   const VideoThumbnail = PropVideoThumbnail || ContextVideoThumnbnail;
+  const ImageLoadingFailedIndicator =
+    PropImageLoadingFailedIndicator || ContextImageLoadingFailedIndicator;
+  const ImageLoadingIndicator = PropImageLoadingIndicator || ContextImageLoadingIndicator;
 
   return (
     <MemoizedGallery
@@ -470,6 +501,8 @@ export const Gallery = <
         channelId: message?.cid,
         groupStyles,
         hasThreadReplies: hasThreadReplies || !!message?.reply_count,
+        ImageLoadingFailedIndicator,
+        ImageLoadingIndicator,
         images,
         legacyImageViewerSwipeBehaviour,
         message,

package/src/components/Attachment/Giphy.tsx

@@ -3,6 +3,8 @@ import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
 import type { Attachment } from 'stream-chat';
 
+import { useLoadingImage } from './hooks/useLoadingImage';
+
 import {
   ImageGalleryContextValue,
   useImageGalleryContext,
@@ -40,6 +42,11 @@ const styles = StyleSheet.create({
     fontWeight: '600',
     paddingVertical: 16,
   },
+  centerChild: {
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'center',
+  },
   container: {
     overflow: 'hidden',
     width: 270,
@@ -84,6 +91,17 @@ const styles = StyleSheet.create({
     padding: 8,
     width: '60%',
   },
+  imageErrorIndicatorStyle: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+  },
+  imageLoadingIndicatorStyle: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+    position: 'absolute',
+  },
   selectionContainer: {
     borderBottomRightRadius: 0,
     borderRadius: 16,
@@ -128,7 +146,13 @@ export type GiphyPropsWithContext<
     | 'onPressIn'
     | 'preventPress'
   > &
-  Pick<MessagesContextValue<StreamChatGenerics>, 'giphyVersion' | 'additionalTouchableProps'> & {
+  Pick<
+    MessagesContextValue<StreamChatGenerics>,
+    | 'giphyVersion'
+    | 'additionalTouchableProps'
+    | 'ImageLoadingIndicator'
+    | 'ImageLoadingFailedIndicator'
+  > & {
     attachment: Attachment<StreamChatGenerics>;
   } & Pick<OverlayContextValue, 'setOverlay'>;
 
@@ -142,6 +166,8 @@ const GiphyWithContext = <
     attachment,
     giphyVersion,
     handleAction,
+    ImageLoadingFailedIndicator,
+    ImageLoadingIndicator,
     isMyMessage,
     message,
     onLongPress,
@@ -155,6 +181,9 @@ const GiphyWithContext = <
 
   const { actions, giphy: giphyData, image_url, thumb_url, title, type } = attachment;
 
+  const { isLoadingImage, isLoadingImageError, setLoadingImage, setLoadingImageError } =
+    useLoadingImage();
+
   const {
     theme: {
       colors: { accent_blue, black, grey, grey_dark, grey_gainsboro, label_bg_transparent, white },
@@ -214,6 +243,13 @@ const GiphyWithContext = <
       </View>
       <View style={styles.selectionImageContainer}>
         <Image
+          onError={(error) => {
+            console.warn(error);
+            setLoadingImage(false);
+            setLoadingImageError(true);
+          }}
+          onLoadEnd={() => setLoadingImage(false)}
+          onLoadStart={() => setLoadingImage(true)}
           resizeMode='contain'
           source={{ uri: makeImageCompatibleUrl(uri) }}
           style={[styles.giphy, giphyDimensions, giphy]}
@@ -299,16 +335,36 @@ const GiphyWithContext = <
       <View
         style={[
           styles.container,
+          styles.centerChild,
           { backgroundColor: isMyMessage ? grey_gainsboro : white },
           container,
         ]}
       >
         <Image
+          accessibilityLabel='giphy-attachment-image'
+          onError={(error) => {
+            console.warn(error);
+            setLoadingImage(false);
+            setLoadingImageError(true);
+          }}
+          onLoadEnd={() => setLoadingImage(false)}
+          onLoadStart={() => setLoadingImage(true)}
           resizeMode='contain'
           source={{ uri: makeImageCompatibleUrl(uri) }}
           style={[styles.giphy, giphyDimensions, giphy]}
           testID='giphy-attachment-image'
         />
+
+        {isLoadingImageError && (
+          <View style={{ position: 'absolute' }}>
+            <ImageLoadingFailedIndicator style={styles.imageErrorIndicatorStyle} />
+          </View>
+        )}
+        {isLoadingImage && (
+          <View style={{ position: 'absolute' }}>
+            <ImageLoadingIndicator style={styles.imageLoadingIndicatorStyle} />
+          </View>
+        )}
         <View style={[styles.giphyMask, giphyMask]}>
           <View
             style={[
@@ -387,12 +443,23 @@ export const Giphy = <
   const { additionalTouchableProps, giphyVersion } = useMessagesContext<StreamChatGenerics>();
   const { setImage, setImages } = useImageGalleryContext<StreamChatGenerics>();
   const { setOverlay } = useOverlayContext();
+
+  const {
+    ImageLoadingFailedIndicator: ContextImageLoadingFailedIndicator,
+    ImageLoadingIndicator: ContextImageLoadingIndicator,
+  } = useMessagesContext<StreamChatGenerics>();
+  const ImageLoadingFailedIndicator =
+    ContextImageLoadingFailedIndicator || props.ImageLoadingFailedIndicator;
+  const ImageLoadingIndicator = ContextImageLoadingIndicator || props.ImageLoadingIndicator;
+
   return (
     <MemoizedGiphy
       {...{
         additionalTouchableProps,
         giphyVersion,
         handleAction,
+        ImageLoadingFailedIndicator,
+        ImageLoadingIndicator,
         isMyMessage,
         message,
         onLongPress,

package/src/components/Attachment/ImageLoadingFailedIndicator.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { StyleSheet, Text, View, ViewProps } from 'react-native';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+
+import { Warning } from '../../icons';
+
+const WARNING_ICON_SIZE = 14;
+
+const styles = StyleSheet.create({
+  container: {
+    alignContent: 'center',
+    alignItems: 'center',
+    borderRadius: 20,
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  errorText: {
+    fontSize: 8,
+    justifyContent: 'center',
+    paddingHorizontal: 8,
+  },
+  warningIconStyle: {
+    borderRadius: 24,
+    marginLeft: 4,
+    marginTop: 6,
+  },
+});
+
+export type ImageLoadingFailedIndicatorProps = ViewProps;
+
+export const ImageLoadingFailedIndicator = (props: ImageLoadingFailedIndicatorProps) => {
+  const {
+    theme: {
+      colors: { accent_red, overlay, white },
+    },
+  } = useTheme();
+
+  const { t } = useTranslationContext();
+
+  const { style, ...rest } = props;
+  return (
+    <View {...rest} accessibilityHint='image-loading-error' style={[style]}>
+      <View style={[styles.container, { backgroundColor: overlay }]}>
+        <Warning
+          height={WARNING_ICON_SIZE}
+          pathFill={accent_red}
+          style={styles.warningIconStyle}
+          width={WARNING_ICON_SIZE}
+        />
+        <Text style={[styles.errorText, { color: white }]}>{t('Error loading')}</Text>
+      </View>
+    </View>
+  );
+};

package/src/components/Attachment/ImageLoadingIndicator.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { ActivityIndicator, StyleSheet, View, ViewProps } from 'react-native';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'center',
+    width: '100%',
+  },
+});
+
+export type ImageLoadingIndicatorProps = ViewProps;
+
+export const ImageLoadingIndicator = (props: ImageLoadingIndicatorProps) => {
+  const {
+    theme: {
+      messageSimple: {
+        loadingIndicator: { container },
+      },
+    },
+  } = useTheme();
+  const { style, ...rest } = props;
+  return (
+    <View {...rest} accessibilityHint='image-loading' style={[styles.container, container, style]}>
+      <ActivityIndicator />
+    </View>
+  );
+};

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

@@ -4,6 +4,7 @@ import { fireEvent, render, waitFor } from '@testing-library/react-native';
 import { v4 as uuidv4 } from 'uuid';
 
 import { MessageProvider } from '../../../contexts/messageContext/MessageContext';
+import { MessagesProvider } from '../../../contexts/messagesContext/MessagesContext';
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import {
   generateAttachmentAction,
@@ -12,6 +13,9 @@ import {
   generateImageAttachment,
 } from '../../../mock-builders/generator/attachment';
 import { generateMessage } from '../../../mock-builders/generator/message';
+
+import { ImageLoadingFailedIndicator } from '../../Attachment/ImageLoadingFailedIndicator';
+import { ImageLoadingIndicator } from '../../Attachment/ImageLoadingIndicator';
 import { Attachment } from '../Attachment';
 import { AttachmentActions } from '../AttachmentActions';
 
@@ -19,9 +23,11 @@ const getAttachmentComponent = (props) => {
   const message = generateMessage();
   return (
     <ThemeProvider>
-      <MessageProvider value={{ message }}>
-        <Attachment {...props} />
-      </MessageProvider>
+      <MessagesProvider value={{ ImageLoadingFailedIndicator, ImageLoadingIndicator }}>
+        <MessageProvider value={{ message }}>
+          <Attachment {...props} />
+        </MessageProvider>
+      </MessagesProvider>
     </ThemeProvider>
   );
 };

package/src/components/Attachment/__tests__/Gallery.test.js

@@ -1,6 +1,11 @@
 import React from 'react';
 
-import { render, waitFor } from '@testing-library/react-native';
+import {
+  fireEvent,
+  render,
+  waitFor,
+  waitForElementToBeRemoved,
+} from '@testing-library/react-native';
 
 import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
 
@@ -230,4 +235,34 @@ describe('Gallery', () => {
       expect(queryAllByTestId('gallery-column-1-item-1').length).toBe(1);
     });
   });
+
+  it('should render an error indicator', async () => {
+    const image1 = generateImageAttachment({
+      original_height: 300,
+      original_width: 600,
+    });
+
+    const component = await getComponent([image1]);
+    const { getByA11yLabel, getByAccessibilityHint } = render(component);
+
+    fireEvent(getByA11yLabel('gallery-image'), 'error');
+    expect(getByAccessibilityHint('image-loading-error')).toBeTruthy();
+  });
+
+  it('should render a loading indicator and when successful render the image', async () => {
+    const image1 = generateImageAttachment({
+      original_height: 300,
+      original_width: 600,
+    });
+
+    const component = await getComponent([image1]);
+    const { getByA11yLabel, getByAccessibilityHint } = render(component);
+
+    fireEvent(getByA11yLabel('gallery-image'), 'onLoadStart');
+    expect(getByAccessibilityHint('image-loading')).toBeTruthy();
+
+    fireEvent(getByA11yLabel('gallery-image'), 'onLoadFinish');
+    waitForElementToBeRemoved(() => getByAccessibilityHint('image-loading'));
+    expect(getByA11yLabel('gallery-image')).toBeTruthy();
+  });
 });