stream-chat-react-native-core 5.44.2-beta.1 → 6.0.0-beta.1

package/src/components/Attachment/utils/buildGallery/buildGallery.ts

@@ -8,6 +8,10 @@ import { buildThumbnailGrid } from './buildThumbnailGrid';
 
 import type { GallerySizeAndThumbnailGrid, GallerySizeConfig } from './types';
 
+import {
+  chatConfigContextDefaultvalue,
+  ChatConfigContextValue,
+} from '../../../../contexts/chatConfigContext/ChatConfigContext';
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
 
 /**
@@ -30,14 +34,16 @@ export function buildGallery<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   images,
+  resizableCDNHosts = chatConfigContextDefaultvalue.resizableCDNHosts,
   sizeConfig,
-}: {
+}: Pick<ChatConfigContextValue, 'resizableCDNHosts'> & {
   images: Attachment<StreamChatGenerics>[];
   sizeConfig: GallerySizeConfig;
 }): GallerySizeAndThumbnailGrid {
   if (images.length === 1) {
     return buildGalleryOfSingleImage({
       image: images[0],
+      resizableCDNHosts,
       sizeConfig,
     });
   }
@@ -45,6 +51,7 @@ export function buildGallery<
   if (images.length === 2) {
     return buildGalleryOfTwoImages({
       images,
+      resizableCDNHosts,
       sizeConfig,
     });
   }
@@ -52,6 +59,7 @@ export function buildGallery<
   if (images.length === 3) {
     return buildGalleryOfThreeImages({
       images,
+      resizableCDNHosts,
       sizeConfig,
     });
   }
@@ -72,6 +80,7 @@ export function buildGallery<
     ],
     images: images.slice(0, 4),
     invertedDirections: true,
+    resizableCDNHosts,
     sizeConfig,
   });
 }

package/src/components/Attachment/utils/buildGallery/buildGalleryOfSingleImage.ts

@@ -4,6 +4,7 @@ import { buildThumbnail } from './buildThumbnail';
 
 import type { GallerySizeAndThumbnailGrid, GallerySizeConfig } from './types';
 
+import { ChatConfigContextValue } from '../../../../contexts/chatConfigContext/ChatConfigContext';
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
 import { getAspectRatio } from '../getAspectRatio';
 
@@ -67,8 +68,9 @@ export function buildGalleryOfSingleImage<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   image,
+  resizableCDNHosts,
   sizeConfig,
-}: {
+}: Pick<ChatConfigContextValue, 'resizableCDNHosts'> & {
   image: Attachment<StreamChatGenerics>;
   sizeConfig: GallerySizeConfig;
 }): GallerySizeAndThumbnailGrid {
@@ -79,6 +81,7 @@ export function buildGalleryOfSingleImage<
 
   const thumbnail = buildThumbnail({
     image,
+    resizableCDNHosts,
     ...container,
   });
 

package/src/components/Attachment/utils/buildGallery/buildGalleryOfThreeImages.ts

@@ -4,6 +4,7 @@ import { buildThumbnailGrid } from './buildThumbnailGrid';
 
 import type { GallerySizeAndThumbnailGrid, GallerySizeConfig } from './types';
 
+import { ChatConfigContextValue } from '../../../../contexts/chatConfigContext/ChatConfigContext';
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
 import { getAspectRatio } from '../getAspectRatio';
 
@@ -23,8 +24,9 @@ export function buildGalleryOfThreeImages<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   images,
+  resizableCDNHosts,
   sizeConfig,
-}: {
+}: Pick<ChatConfigContextValue, 'resizableCDNHosts'> & {
   images: Attachment<StreamChatGenerics>[];
   sizeConfig: GallerySizeConfig;
 }): GallerySizeAndThumbnailGrid {
@@ -77,6 +79,7 @@ export function buildGalleryOfThreeImages<
       grid: [[1], [1, 1]],
       images: landscapeImage ? moveToFront(images, landscapeImage) : images,
       invertedDirections: true,
+      resizableCDNHosts,
       sizeConfig,
     });
   } else {
@@ -93,6 +96,7 @@ export function buildGalleryOfThreeImages<
       grid: [[1], [1, 1]],
       images: portraitImage ? moveToFront(images, portraitImage) : images,
       invertedDirections: false,
+      resizableCDNHosts,
       sizeConfig,
     });
   }

package/src/components/Attachment/utils/buildGallery/buildGalleryOfTwoImages.ts

@@ -4,6 +4,7 @@ import { buildThumbnailGrid } from './buildThumbnailGrid';
 
 import type { GallerySizeAndThumbnailGrid, GallerySizeConfig } from './types';
 
+import { ChatConfigContextValue } from '../../../../contexts/chatConfigContext/ChatConfigContext';
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
 import { getAspectRatio } from '../getAspectRatio';
 
@@ -11,8 +12,9 @@ export function buildGalleryOfTwoImages<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   images,
+  resizableCDNHosts,
   sizeConfig,
-}: {
+}: Pick<ChatConfigContextValue, 'resizableCDNHosts'> & {
   images: Attachment<StreamChatGenerics>[];
   sizeConfig: GallerySizeConfig;
 }): GallerySizeAndThumbnailGrid {
@@ -36,6 +38,7 @@ export function buildGalleryOfTwoImages<
       grid: [[1], [1]],
       images,
       invertedDirections: true,
+      resizableCDNHosts,
       sizeConfig,
     });
   }
@@ -53,6 +56,7 @@ export function buildGalleryOfTwoImages<
       grid: [[1, 1]],
       images,
       invertedDirections: true,
+      resizableCDNHosts,
       sizeConfig,
     });
   }
@@ -61,6 +65,7 @@ export function buildGalleryOfTwoImages<
     grid: [[2, 1]],
     images: isLandscape1 ? images : images.reverse(),
     invertedDirections: true,
+    resizableCDNHosts,
     sizeConfig,
   });
 }

package/src/components/Attachment/utils/buildGallery/buildThumbnail.ts

@@ -4,24 +4,30 @@ import type { Attachment } from 'stream-chat';
 
 import type { Thumbnail } from './types';
 
+import { ChatConfigContextValue } from '../../../../contexts/chatConfigContext/ChatConfigContext';
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
 
 import { getResizedImageUrl } from '../../../../utils/getResizedImageUrl';
 import { getUrlOfImageAttachment } from '../../../../utils/getUrlOfImageAttachment';
 
+export type BuildThumbnailProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<ChatConfigContextValue, 'resizableCDNHosts'> & {
+  height: number;
+  image: Attachment<StreamChatGenerics>;
+  width: number;
+  resizeMode?: ImageResizeMode;
+};
+
 export function buildThumbnail<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   height,
   image,
+  resizableCDNHosts,
   resizeMode,
   width,
-}: {
-  height: number;
-  image: Attachment<StreamChatGenerics>;
-  width: number;
-  resizeMode?: ImageResizeMode;
-}): Thumbnail {
+}: BuildThumbnailProps<StreamChatGenerics>): Thumbnail {
   const { original_height: originalImageHeight, original_width: originalImageWidth } = image;
 
   // Only resize if the original image is larger than the thumbnail container size.
@@ -41,6 +47,7 @@ export function buildThumbnail<
     url: shouldResize
       ? getResizedImageUrl({
           height,
+          resizableCDNHosts,
           url: imageUrl,
           width,
         })

package/src/components/Attachment/utils/buildGallery/buildThumbnailGrid.ts

@@ -3,6 +3,8 @@ import type { Attachment } from 'stream-chat';
 import { buildThumbnail } from './buildThumbnail';
 import type { GallerySizeAndThumbnailGrid, GallerySizeConfig, ThumbnailGrid } from './types';
 
+import { ChatConfigContextValue } from '../../../../contexts/chatConfigContext/ChatConfigContext';
+
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
 
 /**
@@ -139,8 +141,9 @@ export function buildThumbnailGrid<
   grid,
   images,
   invertedDirections = false,
+  resizableCDNHosts,
   sizeConfig,
-}: {
+}: Pick<ChatConfigContextValue, 'resizableCDNHosts'> & {
   grid: number[][];
   images: Attachment<StreamChatGenerics>[];
   invertedDirections: boolean;
@@ -167,6 +170,7 @@ export function buildThumbnailGrid<
       const thumbnail = buildThumbnail({
         height: tHeight,
         image: currentImage,
+        resizableCDNHosts,
         resizeMode: 'cover',
         width: tWidth,
       });

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -237,9 +237,13 @@ export const AttachmentPicker = React.forwardRef(
       // `id` is available for Expo MediaLibrary while Cameraroll doesn't share id therefore we use `uri`
       selected:
         selectedImages.some((image) =>
-          image.id ? image.id === asset.id : image.uri === asset.uri,
+          image.id
+            ? image.id === asset.id
+            : image.uri === asset.uri || image.originalUri === asset.uri,
         ) ||
-        selectedFiles.some((file) => (file.id ? file.id === asset.id : file.uri === asset.uri)),
+        selectedFiles.some((file) =>
+          file.id ? file.id === asset.id : file.uri === asset.uri || file.originalUri === asset.uri,
+        ),
       selectedFiles,
       selectedImages,
       setSelectedFiles,
@@ -269,6 +273,7 @@ export const AttachmentPicker = React.forwardRef(
              */
             photoError ? null : AttachmentPickerBottomSheetHandle
           }
+          // @ts-ignore
           handleHeight={handleHeight}
           index={-1}
           onChange={setCurrentIndex}

package/src/components/AttachmentPicker/components/AttachmentPickerBottomSheetHandle.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet, View, ViewStyle } from 'react-native';
-import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+import Animated, { SharedValue, useAnimatedStyle } from 'react-native-reanimated';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 
@@ -18,7 +18,7 @@ const styles = StyleSheet.create({
 });
 
 type Props = {
-  animatedIndex: Animated.SharedValue<number>;
+  animatedIndex: SharedValue<number>;
 };
 
 export const AttachmentPickerBottomSheetHandle = ({ animatedIndex }: Props) => {

package/src/components/AttachmentPicker/components/AttachmentPickerItem.tsx

@@ -1,16 +1,15 @@
 import React from 'react';
 
-import { Alert, ImageBackground, Platform, StyleSheet, Text, View } from 'react-native';
+import { Alert, ImageBackground, StyleSheet, Text, View } from 'react-native';
 
 import { TouchableOpacity } from '@gorhom/bottom-sheet';
 import { lookup } from 'mime-types';
 
-import { useTranslationContext } from '../../../contexts';
 import { AttachmentPickerContextValue } from '../../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useViewport } from '../../../hooks/useViewport';
 import { Recorder } from '../../../icons';
-import { getLocalAssetUri } from '../../../native';
 import type { Asset, File } from '../../../types/types';
 import { getDurationLabelFromDuration } from '../../../utils/utils';
 
@@ -49,18 +48,14 @@ const AttachmentVideo = (props: AttachmentVideoProps) => {
     },
   } = useTheme();
 
-  const { duration: videoDuration, uri } = asset;
+  const { duration: videoDuration, id: assetId, originalUri, uri } = asset;
 
   const durationLabel = getDurationLabelFromDuration(videoDuration);
 
   const size = vw(100) / (numberOfAttachmentPickerImageColumns || 3) - 2;
 
   /* Patches video files with uri and mimetype */
-  const patchVideoFile = async (files: File[]) => {
-    // For the case of Expo CLI where you need to fetch the file uri from file id. Here it is only done for iOS since for android the file.uri is fine.
-    const localAssetURI =
-      Platform.OS === 'ios' && asset.id && getLocalAssetUri && (await getLocalAssetUri(asset.id));
-    const uri = localAssetURI || asset.uri || '';
+  const patchVideoFile = (files: File[]) => {
     // We need a mime-type to upload a video file.
     const mimeType = lookup(asset.name) || 'multipart/form-data';
     return [
@@ -70,18 +65,19 @@ const AttachmentVideo = (props: AttachmentVideoProps) => {
         id: asset.id,
         mimeType,
         name: asset.name,
+        originalUri,
         size: asset.size,
         uri,
       },
     ];
   };
 
-  const updateSelectedFiles = async () => {
+  const updateSelectedFiles = () => {
     if (numberOfUploads >= maxNumberOfFiles) {
       Alert.alert(t('Maximum number of files reached'));
       return;
     }
-    const files = await patchVideoFile(selectedFiles);
+    const files = patchVideoFile(selectedFiles);
     setSelectedFiles(files);
   };
 
@@ -89,7 +85,9 @@ const AttachmentVideo = (props: AttachmentVideoProps) => {
     if (selected) {
       setSelectedFiles((files) =>
         // `id` is available for Expo MediaLibrary while Cameraroll doesn't share id therefore we use `uri`
-        files.filter((file) => (file.id ? file.id !== asset.id : file.uri !== asset.uri)),
+        files.filter((file) =>
+          file.id ? file.id !== assetId : file.uri !== uri && file.originalUri !== uri,
+        ),
       );
     } else {
       updateSelectedFiles();
@@ -99,7 +97,7 @@ const AttachmentVideo = (props: AttachmentVideoProps) => {
   return (
     <TouchableOpacity onPress={onPressVideo}>
       <ImageBackground
-        source={{ uri }}
+        source={{ uri: originalUri }}
         style={[
           {
             height: size,
@@ -149,37 +147,23 @@ const AttachmentImage = (props: AttachmentImageProps) => {
 
   const size = vw(100) / (numberOfAttachmentPickerImageColumns || 3) - 2;
 
-  const { uri } = asset;
-
-  /* Patches image files with uri */
-  const patchImageFile = async (images: Asset[]) => {
-    // For the case of Expo CLI where you need to fetch the file uri from file id. Here it is only done for iOS since for android the file.uri is fine.
-    const localAssetURI =
-      Platform.OS === 'ios' && asset.id && getLocalAssetUri && (await getLocalAssetUri(asset.id));
-    const uri = localAssetURI || asset.uri || '';
-    return [
-      ...images,
-      {
-        ...asset,
-        uri,
-      },
-    ];
-  };
+  const { id: assetId, originalUri, uri } = asset;
 
-  const updateSelectedImages = async () => {
+  const updateSelectedImages = () => {
     if (numberOfUploads >= maxNumberOfFiles) {
       Alert.alert(t('Maximum number of files reached'));
       return;
     }
-    const images = await patchImageFile(selectedImages);
-    setSelectedImages(images);
+    setSelectedImages([...selectedImages, asset]);
   };
 
   const onPressImage = () => {
     if (selected) {
       // `id` is available for Expo MediaLibrary while Cameraroll doesn't share id therefore we use `uri`
       setSelectedImages((images) =>
-        images.filter((image) => (image.id ? image.id !== asset.id : image.uri !== asset.uri)),
+        images.filter((image) =>
+          assetId ? image.id !== assetId : image.uri !== uri && originalUri !== uri,
+        ),
       );
     } else {
       updateSelectedImages();

package/src/components/AttachmentPicker/components/AttachmentPickerSelectionBar.tsx

@@ -1,13 +1,11 @@
 import React from 'react';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
 
-import {
-  useChannelContext,
-  useMessagesContext,
-  useOwnCapabilitiesContext,
-} from '../../../contexts';
 import { useAttachmentPickerContext } from '../../../contexts/attachmentPickerContext/AttachmentPickerContext';
+import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
 import { useMessageInputContext } from '../../../contexts/messageInputContext/MessageInputContext';
+import { useMessagesContext } from '../../../contexts/messagesContext/MessagesContext';
+import { useOwnCapabilitiesContext } from '../../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 
 const styles = StyleSheet.create({
@@ -36,6 +34,7 @@ export const AttachmentPickerSelectionBar = () => {
   const {
     hasCameraPicker,
     hasFilePicker,
+    hasImagePicker,
     imageUploads,
     openPollCreationDialog,
     pickFile,
@@ -75,18 +74,20 @@ export const AttachmentPickerSelectionBar = () => {
 
   return (
     <View style={[styles.container, container, { height: attachmentSelectionBarHeight }]}>
-      <TouchableOpacity
-        hitSlop={{ bottom: 15, top: 15 }}
-        onPress={setImagePicker}
-        testID='upload-photo-touchable'
-      >
-        <View style={[styles.icon, icon]}>
-          <ImageSelectorIcon
-            numberOfImageUploads={imageUploads.length}
-            selectedPicker={selectedPicker}
-          />
-        </View>
-      </TouchableOpacity>
+      {hasImagePicker ? (
+        <TouchableOpacity
+          hitSlop={{ bottom: 15, top: 15 }}
+          onPress={setImagePicker}
+          testID='upload-photo-touchable'
+        >
+          <View style={[styles.icon, icon]}>
+            <ImageSelectorIcon
+              numberOfImageUploads={imageUploads.length}
+              selectedPicker={selectedPicker}
+            />
+          </View>
+        </TouchableOpacity>
+      ) : null}
       {hasFilePicker ? (
         <TouchableOpacity
           hitSlop={{ bottom: 15, top: 15 }}

package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import {
+  FlatList,
   LayoutChangeEvent,
   Pressable,
   PressableProps,
@@ -19,7 +20,6 @@ import {
   useSuggestionsContext,
 } from '../../contexts/suggestionsContext/SuggestionsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { FlatList } from '../../native';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 const AUTO_COMPLETE_SUGGESTION_LIST_HEADER_HEIGHT = 50;

package/src/components/Avatar/Avatar.tsx

@@ -10,6 +10,7 @@ import {
 } from 'react-native';
 import Svg, { Circle, CircleProps } from 'react-native-svg';
 
+import { useChatConfigContext } from '../../contexts/chatConfigContext/ChatConfigContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useLoadingImage } from '../../hooks/useLoadingImage';
 import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
@@ -72,6 +73,7 @@ export const Avatar = (props: AvatarProps) => {
     size,
     testID,
   } = props;
+  const { resizableCDNHosts } = useChatConfigContext();
   const {
     theme: {
       avatar: { container, image, presenceIndicator, presenceIndicatorContainer },
@@ -120,6 +122,7 @@ export const Avatar = (props: AvatarProps) => {
                       }`
                   : getResizedImageUrl({
                       height: size,
+                      resizableCDNHosts,
                       url: imageProp,
                       width: size,
                     }),

package/src/components/Avatar/GroupAvatar.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import { Image, ImageProps, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
+import { useChatConfigContext } from '../../contexts/chatConfigContext/ChatConfigContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useLoadingImage } from '../../hooks/useLoadingImage';
 import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
+
 const randomImageBaseUrl = 'https://getstream.io/random_png/';
 const randomSvgBaseUrl = 'https://getstream.io/random_svg/';
 const streamCDN = 'stream-io-cdn.com';
@@ -39,6 +41,7 @@ export type GroupAvatarProps = {
  */
 export const GroupAvatar = (props: GroupAvatarProps) => {
   const { containerStyle, ImageComponent = Image, images, names, size, testID } = props;
+  const { resizableCDNHosts } = useChatConfigContext();
   const {
     theme: {
       groupAvatar: { container, image },
@@ -149,6 +152,7 @@ export const GroupAvatar = (props: GroupAvatarProps) => {
                         }`
                     : getResizedImageUrl({
                         height,
+                        resizableCDNHosts,
                         url,
                         width,
                       }),