stream-chat-react-native-core 4.0.0 → 4.1.0

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,20 +57,11 @@ import { useImageGalleryContext } from '../../contexts/imageGalleryContext/Image
 import { useOverlayContext } from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { triggerHaptic } from '../../native';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
+import { getUrlOfImageAttachment } from '../../utils/getUrlOfImageAttachment';
 import { vh, vw } from '../../utils/utils';
 
-import type { UserResponse } from 'stream-chat';
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
-
 const isAndroid = Platform.OS === 'android';
 const fullScreenHeight = Dimensions.get('screen').height;
 const measuredScreenHeight = vh(100);
@@ -84,7 +80,9 @@ export enum IsSwiping {
   FALSE,
 }
 
-export type ImageGalleryCustomComponents<Us extends UnknownType = DefaultUserType> = {
+export type ImageGalleryCustomComponents<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
   /**
    * Override props for following UI components, which are part of [image gallery](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#gallery-components).
    *
@@ -117,34 +115,29 @@ export type ImageGalleryCustomComponents<Us extends UnknownType = DefaultUserTyp
    * @overrideType object
    */
   imageGalleryCustomComponents?: {
-    footer?: ImageGalleryFooterCustomComponentProps<Us>;
-    grid?: ImageGalleryGridImageComponents<Us>;
+    footer?: ImageGalleryFooterCustomComponentProps<StreamChatGenerics>;
+    grid?: ImageGalleryGridImageComponents<StreamChatGenerics>;
     gridHandle?: ImageGalleryGridHandleCustomComponentProps;
-    header?: ImageGalleryHeaderCustomComponentProps<Us>;
+    header?: ImageGalleryHeaderCustomComponentProps<StreamChatGenerics>;
   };
 };
 
-type Props<Us extends UnknownType = DefaultUserType> = ImageGalleryCustomComponents<Us> & {
-  overlayOpacity: Animated.SharedValue<number>;
-  visible: boolean;
-  imageGalleryGridHandleHeight?: number;
-  /**
-   * This should be
-   */
-  imageGalleryGridSnapPoints?: [string | number, string | number];
-  numberOfImageGalleryGridColumns?: number;
-};
+type Props<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
+  ImageGalleryCustomComponents<StreamChatGenerics> & {
+    overlayOpacity: Animated.SharedValue<number>;
+    visible: boolean;
+    imageGalleryGridHandleHeight?: number;
+    /**
+     * This should be
+     */
+    imageGalleryGridSnapPoints?: [string | number, string | number];
+    numberOfImageGalleryGridColumns?: number;
+  };
 
 export const ImageGallery = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: Props<Us>,
+  props: Props<StreamChatGenerics>,
 ) => {
   const {
     imageGalleryCustomComponents,
@@ -160,8 +153,9 @@ export const ImageGallery = <
       imageGallery: { backgroundColor },
     },
   } = useTheme();
-  const { overlay, setBlurType, setOverlay, translucentStatusBar } = useOverlayContext();
-  const { image, images, setImage } = useImageGalleryContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const [gridPhotos, setGridPhotos] = useState<Photo<StreamChatGenerics>[]>([]);
+  const { overlay, setOverlay, translucentStatusBar } = useOverlayContext();
+  const { image, images, setImage } = useImageGalleryContext<StreamChatGenerics>();
 
   /**
    * Height constants
@@ -180,15 +174,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);
@@ -337,26 +331,37 @@ export const ImageGallery = <
    * Photos array created from all currently available
    * photo attachments
    */
-  const photos = images.reduce((acc: Photo<Us>[], cur) => {
+  const photos = images.reduce((acc: Photo<StreamChatGenerics>[], cur) => {
     const attachmentImages =
       cur.attachments?.filter(
         (attachment) =>
           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<StreamChatGenerics>[];
   }, []);
 
   /**
@@ -397,8 +402,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 +658,6 @@ export const ImageGallery = <
               () => {
                 showScreen.value = 0;
                 runOnJS(setOverlay)('none');
-                runOnJS(setBlurType)(undefined);
               },
             );
             scale.value = withTiming(0.6, {
@@ -1038,16 +1049,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);
     }
   };
 
@@ -1133,13 +1150,13 @@ export const ImageGallery = <
           </TapGestureHandler>
         </Animated.View>
       </TapGestureHandler>
-      <ImageGalleryHeader<Us>
+      <ImageGalleryHeader<StreamChatGenerics>
         opacity={headerFooterOpacity}
         photo={photos[selectedIndex]}
         visible={headerFooterVisible}
         {...imageGalleryCustomComponents?.header}
       />
-      <ImageGalleryFooter<Us>
+      <ImageGalleryFooter<StreamChatGenerics>
         opacity={headerFooterOpacity}
         openGridView={openGridView}
         photo={photos[selectedIndex]}
@@ -1153,30 +1170,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>
   );
 };
@@ -1196,12 +1215,17 @@ const styles = StyleSheet.create({
   },
 });
 
-export type Photo<Us extends UnknownType = DefaultUserType> = {
+export type Photo<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
   id: string;
   uri: string;
+  channelId?: string;
   created_at?: string | Date;
   messageId?: string;
-  user?: UserResponse<Us> | null;
+  original_height?: number;
+  original_width?: number;
+  user?: UserResponse<StreamChatGenerics> | 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,10 +7,9 @@ import { useTranslationContext } from '../../../contexts/translationContext/Tran
 import { Grid as GridIconDefault, Share as ShareIconDefault } from '../../../icons';
 import { deleteFile, saveFile, shareImage } from '../../../native';
 
+import type { DefaultStreamChatGenerics } from '../../../types/types';
 import type { Photo } from '../ImageGallery';
 
-import type { DefaultUserType, UnknownType } from '../../../types/types';
-
 const ReanimatedSafeAreaView = Animated.createAnimatedComponent
   ? Animated.createAnimatedComponent(SafeAreaView)
   : SafeAreaView;
@@ -47,7 +46,9 @@ const styles = StyleSheet.create({
   },
 });
 
-export type ImageGalleryFooterCustomComponent<Us extends UnknownType = DefaultUserType> = ({
+export type ImageGalleryFooterCustomComponent<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = ({
   openGridView,
   photo,
   share,
@@ -56,28 +57,34 @@ export type ImageGalleryFooterCustomComponent<Us extends UnknownType = DefaultUs
   openGridView: () => void;
   share: () => Promise<void>;
   shareMenuOpen: boolean;
-  photo?: Photo<Us>;
+  photo?: Photo<StreamChatGenerics>;
 }) => React.ReactElement | null;
 
-export type ImageGalleryFooterCustomComponentProps<Us extends UnknownType = DefaultUserType> = {
-  centerElement?: ImageGalleryFooterCustomComponent<Us>;
+export type ImageGalleryFooterCustomComponentProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
+  centerElement?: ImageGalleryFooterCustomComponent<StreamChatGenerics>;
   GridIcon?: React.ReactElement;
-  leftElement?: ImageGalleryFooterCustomComponent<Us>;
-  rightElement?: ImageGalleryFooterCustomComponent<Us>;
+  leftElement?: ImageGalleryFooterCustomComponent<StreamChatGenerics>;
+  rightElement?: ImageGalleryFooterCustomComponent<StreamChatGenerics>;
   ShareIcon?: React.ReactElement;
 };
 
-type Props<Us extends UnknownType = DefaultUserType> =
-  ImageGalleryFooterCustomComponentProps<Us> & {
+type Props<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
+  ImageGalleryFooterCustomComponentProps<StreamChatGenerics> & {
     opacity: Animated.SharedValue<number>;
     openGridView: () => void;
-    photo: Photo<Us>;
+    photo: Photo<StreamChatGenerics>;
     photoLength: number;
     selectedIndex: number;
     visible: Animated.SharedValue<number>;
   };
 
-export const ImageGalleryFooter = <Us extends UnknownType = DefaultUserType>(props: Props<Us>) => {
+export const ImageGalleryFooter = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: Props<StreamChatGenerics>,
+) => {
   const {
     centerElement,
     GridIcon,
@@ -126,9 +133,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

@@ -15,14 +15,14 @@ import { useOverlayContext } from '../../../contexts/overlayContext/OverlayConte
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import {
   isDayOrMoment,
+  TDateTimeParserOutput,
   useTranslationContext,
 } from '../../../contexts/translationContext/TranslationContext';
 import { Close } from '../../../icons';
 
+import type { DefaultStreamChatGenerics } from '../../../types/types';
 import type { Photo } from '../ImageGallery';
 
-import type { DefaultUserType, UnknownType } from '../../../types/types';
-
 const ReanimatedSafeAreaView = Animated.createAnimatedComponent
   ? Animated.createAnimatedComponent(SafeAreaView)
   : SafeAreaView;
@@ -58,29 +58,37 @@ const styles = StyleSheet.create({
   },
 });
 
-export type ImageGalleryHeaderCustomComponent<Us extends UnknownType = DefaultUserType> = ({
+export type ImageGalleryHeaderCustomComponent<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = ({
   hideOverlay,
   photo,
 }: {
   hideOverlay: () => void;
-  photo?: Photo<Us>;
+  photo?: Photo<StreamChatGenerics>;
 }) => React.ReactElement | null;
 
-export type ImageGalleryHeaderCustomComponentProps<Us extends UnknownType = DefaultUserType> = {
-  centerElement?: ImageGalleryHeaderCustomComponent<Us>;
+export type ImageGalleryHeaderCustomComponentProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
+  centerElement?: ImageGalleryHeaderCustomComponent<StreamChatGenerics>;
   CloseIcon?: React.ReactElement;
-  leftElement?: ImageGalleryHeaderCustomComponent<Us>;
-  rightElement?: ImageGalleryHeaderCustomComponent<Us>;
+  leftElement?: ImageGalleryHeaderCustomComponent<StreamChatGenerics>;
+  rightElement?: ImageGalleryHeaderCustomComponent<StreamChatGenerics>;
 };
 
-type Props<Us extends UnknownType = DefaultUserType> =
-  ImageGalleryHeaderCustomComponentProps<Us> & {
+type Props<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
+  ImageGalleryHeaderCustomComponentProps<StreamChatGenerics> & {
     opacity: Animated.SharedValue<number>;
     visible: Animated.SharedValue<number>;
-    photo?: Photo<Us>;
+    photo?: Photo<StreamChatGenerics>;
   };
 
-export const ImageGalleryHeader = <Us extends UnknownType = DefaultUserType>(props: Props<Us>) => {
+export const ImageGalleryHeader = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: Props<StreamChatGenerics>,
+) => {
   const { centerElement, CloseIcon, leftElement, opacity, photo, rightElement, visible } = props;
   const [height, setHeight] = useState(200);
   const {
@@ -100,21 +108,34 @@ 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
-   * is unavailable on first render. We therefore check if it
-   * is available and call it, otherwise we call .fromNow.
+   * .calendar and .fromNow can be initialized after the first render,
+   * and attempting to access them at that time will cause an error
+   * to be thrown.
+   *
+   * This falls back to null if neither exist.
    */
-  const date =
-    parsedDate && isDayOrMoment(parsedDate)
-      ? parsedDate.calendar
-        ? parsedDate.calendar()
-        : parsedDate.fromNow()
-      : parsedDate;
+  const getDateObject = (date: TDateTimeParserOutput | null) => {
+    if (date === null || !isDayOrMoment(date)) {
+      return null;
+    }
+
+    if (date.calendar) {
+      return date.calendar();
+    }
+
+    if (date.fromNow) {
+      return date.fromNow();
+    }
+
+    return null;
+  };
+
+  const date = getDateObject(parsedDate);
 
   const headerStyle = useAnimatedStyle<ViewStyle>(() => ({
     opacity: opacity.value,
@@ -132,7 +153,6 @@ export const ImageGalleryHeader = <Us extends UnknownType = DefaultUserType>(pro
 
   const hideOverlay = () => {
     setOverlay('none');
-    setBlurType(undefined);
   };
 
   return (
@@ -160,7 +180,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 ? (