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

package/src/components/ImageGallery/ImageGallery.tsx

@@ -162,7 +162,8 @@ export const ImageGallery = <
   } = useTheme();
   const [gridPhotos, setGridPhotos] = useState<Photo<StreamChatGenerics>[]>([]);
   const { overlay, translucentStatusBar } = useOverlayContext();
-  const { image, images, setImage } = useImageGalleryContext<StreamChatGenerics>();
+  const { messages, selectedMessage, setSelectedMessage } =
+    useImageGalleryContext<StreamChatGenerics>();
 
   /**
    * Height constants
@@ -257,20 +258,22 @@ export const ImageGallery = <
    * photo attachments
    */
 
-  const photos = images.reduce((acc: Photo<StreamChatGenerics>[], cur) => {
+  const photos = messages.reduce((acc: Photo<StreamChatGenerics>[], cur) => {
     const attachmentImages =
-      cur.attachments?.filter(
-        (attachment) =>
-          (attachment.type === 'giphy' &&
-            (attachment.giphy?.[giphyVersion]?.url ||
-              attachment.thumb_url ||
-              attachment.image_url)) ||
-          (attachment.type === 'image' &&
-            !attachment.title_link &&
-            !attachment.og_scrape_url &&
-            getUrlOfImageAttachment(attachment)) ||
-          (isVideoPackageAvailable() && attachment.type === 'video'),
-      ) || [];
+      cur.attachments
+        ?.filter(
+          (attachment) =>
+            (attachment.type === 'giphy' &&
+              (attachment.giphy?.[giphyVersion]?.url ||
+                attachment.thumb_url ||
+                attachment.image_url)) ||
+            (attachment.type === 'image' &&
+              !attachment.title_link &&
+              !attachment.og_scrape_url &&
+              getUrlOfImageAttachment(attachment)) ||
+            (isVideoPackageAvailable() && attachment.type === 'video'),
+        )
+        .reverse() || [];
 
     const attachmentPhotos = attachmentImages.map((a) => {
       const imageUrl = getUrlOfImageAttachment(a) as string;
@@ -298,7 +301,7 @@ export const ImageGallery = <
       };
     });
 
-    return [...acc, ...attachmentPhotos] as Photo<StreamChatGenerics>[];
+    return [...attachmentPhotos, ...acc] as Photo<StreamChatGenerics>[];
   }, []);
 
   /**
@@ -309,6 +312,12 @@ export const ImageGallery = <
    */
   const photoLength = photos.length;
 
+  /**
+   * The URL for the images may differ because of dimensions passed as
+   * part of the query.
+   */
+  const stripQueryFromUrl = (url: string) => url.split('?')[0];
+
   /**
    * Set selected photo when changed via pressing in the message list
    */
@@ -324,7 +333,9 @@ export const ImageGallery = <
     };
 
     const newIndex = photos.findIndex(
-      (photo) => photo.messageId === image?.messageId && photo.uri === image?.url,
+      (photo) =>
+        photo.messageId === selectedMessage?.messageId &&
+        stripQueryFromUrl(photo.uri) === stripQueryFromUrl(selectedMessage?.url || ''),
     );
 
     if (photoLength > 1) {
@@ -332,7 +343,7 @@ export const ImageGallery = <
     }
 
     runOnUI(updatePosition)(newIndex);
-  }, [image, photoLength]);
+  }, [selectedMessage, photoLength]);
 
   /**
    * Image heights are not provided and therefore need to be calculated.
@@ -371,6 +382,7 @@ export const ImageGallery = <
     scale,
     screenHeight,
     screenWidth,
+    selectedIndex,
     setSelectedIndex,
     translateX,
     translateY,
@@ -665,7 +677,7 @@ export const ImageGallery = <
             closeGridView={closeGridView}
             numberOfImageGalleryGridColumns={numberOfImageGalleryGridColumns}
             photos={gridPhotos}
-            setImage={setImage}
+            setSelectedMessage={setSelectedMessage}
             {...imageGalleryCustomComponents?.grid}
           />
         </BottomSheetModal>

package/src/components/ImageGallery/__tests__/ImageGallery.test.tsx

@@ -48,7 +48,7 @@ describe('ImageGallery', () => {
   it('render image gallery component', () => {
     const { queryAllByA11yLabel } = render(
       getComponent({
-        images: [
+        messages: [
           generateMessage({
             attachments: [
               generateImageAttachment(),
@@ -66,7 +66,7 @@ describe('ImageGallery', () => {
   it('handle handleLoad function when video item present and payload duration is available', () => {
     const { getByA11yLabel } = render(
       getComponent({
-        images: [
+        messages: [
           generateMessage({
             attachments: [generateVideoAttachment({ type: 'video' })],
           }),
@@ -89,7 +89,7 @@ describe('ImageGallery', () => {
   it('handle handleLoad function when video item present and payload duration is undefined', () => {
     const { getByA11yLabel } = render(
       getComponent({
-        images: [
+        messages: [
           generateMessage({
             attachments: [generateVideoAttachment({ type: 'video' })],
           }),
@@ -112,7 +112,7 @@ describe('ImageGallery', () => {
   it('handle handleProgress function when video item present and payload is well defined', () => {
     const { getByA11yLabel } = render(
       getComponent({
-        images: [
+        messages: [
           generateMessage({
             attachments: [generateVideoAttachment({ type: 'video' })],
           }),
@@ -140,7 +140,7 @@ describe('ImageGallery', () => {
   it('handle handleProgress function when video item present and payload is not defined', () => {
     const { getByA11yLabel } = render(
       getComponent({
-        images: [
+        messages: [
           generateMessage({
             attachments: [generateVideoAttachment({ type: 'video' })],
           }),
@@ -168,7 +168,7 @@ describe('ImageGallery', () => {
   it('handle handleEnd function when video item present', () => {
     const { getByA11yLabel } = render(
       getComponent({
-        images: [
+        messages: [
           generateMessage({
             attachments: [generateVideoAttachment({ type: 'video' })],
           }),

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

@@ -71,7 +71,7 @@ describe('ImageGalleryFooter', () => {
         <ImageGalleryContext.Provider
           value={
             {
-              images: [
+              messages: [
                 generateMessage({
                   attachments: [generateVideoAttachment({ type: 'video' })],
                 }),
@@ -123,7 +123,7 @@ describe('ImageGalleryFooter', () => {
         <ImageGalleryContext.Provider
           value={
             {
-              images: [
+              messages: [
                 generateMessage({
                   attachments: [generateVideoAttachment({ type: 'video' })],
                 }),
@@ -162,7 +162,7 @@ describe('ImageGalleryFooter', () => {
         <ImageGalleryContext.Provider
           value={
             {
-              images: [
+              messages: [
                 generateMessage({
                   attachments: [generateImageAttachment()],
                 }),

package/src/components/ImageGallery/__tests__/ImageGalleryGrid.test.tsx

@@ -76,13 +76,13 @@ describe('ImageGalleryOverlay', () => {
 
   it('should trigger the selectAndClose when the Image item is pressed', () => {
     const closeGridViewMock = jest.fn();
-    const setImageMock = jest.fn();
+    const setSelectedMessageMock = jest.fn();
 
     const { getAllByA11yLabel } = render(
       getComponent({
         closeGridView: closeGridViewMock,
         photos: [generateImageAttachment(), generateVideoAttachment({ type: 'video' })],
-        setImage: setImageMock,
+        setSelectedMessage: setSelectedMessageMock,
       }),
     );
 
@@ -93,6 +93,6 @@ describe('ImageGalleryOverlay', () => {
     });
 
     expect(closeGridViewMock).toHaveBeenCalledTimes(1);
-    expect(setImageMock).toHaveBeenCalledTimes(1);
+    expect(setSelectedMessageMock).toHaveBeenCalledTimes(1);
   });
 });

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

@@ -65,7 +65,7 @@ describe('ImageGalleryHeader', () => {
         <ImageGalleryContext.Provider
           value={
             {
-              images: [
+              messages: [
                 generateMessage({
                   attachments: [generateImageAttachment()],
                 }),
@@ -109,7 +109,7 @@ describe('ImageGalleryHeader', () => {
         <ImageGalleryContext.Provider
           value={
             {
-              images: [
+              messages: [
                 generateMessage({
                   attachments: [generateVideoAttachment({ type: 'video' })],
                 }),
@@ -146,7 +146,7 @@ describe('ImageGalleryHeader', () => {
         <ImageGalleryContext.Provider
           value={
             {
-              images: [
+              messages: [
                 generateMessage({
                   attachments: [generateImageAttachment()],
                 }),

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

@@ -107,7 +107,7 @@ export type ImageGridType<
 > = ImageGalleryGridImageComponents<StreamChatGenerics> & {
   closeGridView: () => void;
   photos: Photo<StreamChatGenerics>[];
-  setImage: React.Dispatch<
+  setSelectedMessage: React.Dispatch<
     React.SetStateAction<
       | {
           messageId?: string | undefined;
@@ -130,7 +130,7 @@ export const ImageGrid = <
     imageComponent,
     numberOfImageGalleryGridColumns,
     photos,
-    setImage,
+    setSelectedMessage,
   } = props;
 
   const {
@@ -148,7 +148,7 @@ export const ImageGrid = <
     imageComponent,
     numberOfImageGalleryGridColumns,
     selectAndClose: () => {
-      setImage({ messageId: photo.messageId, url: photo.uri });
+      setSelectedMessage({ messageId: photo.messageId, url: photo.uri });
       closeGridView();
     },
   }));

package/src/components/ImageGallery/hooks/useImageGalleryGestures.tsx

@@ -42,6 +42,7 @@ export const useImageGalleryGestures = ({
   scale,
   screenHeight,
   screenWidth,
+  selectedIndex,
   setSelectedIndex,
   translateX,
   translateY,
@@ -57,6 +58,7 @@ export const useImageGalleryGestures = ({
   scale: SharedValue<number>;
   screenHeight: number;
   screenWidth: number;
+  selectedIndex: number;
   setSelectedIndex: React.Dispatch<React.SetStateAction<number>>;
   translateX: SharedValue<number>;
   translateY: SharedValue<number>;
@@ -82,6 +84,20 @@ export const useImageGalleryGestures = ({
   const focalY = useSharedValue(0);
   const index = useSharedValue(0);
 
+  /**
+   * if a specific image index > 0 has been passed in
+   * while creating the hook, set the value of the index
+   * reference to its value.
+   *
+   * This makes it possible to seelct an image in the list,
+   * and scroll/pan as normal. Prior to this,
+   * it was always assumed that one started at index 0 in the
+   * gallery.
+   * */
+  if (index.value !== selectedIndex) {
+    index.value = selectedIndex;
+  }
+
   /**
    * Shared values for movement
    */

package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageAvatar.test.js.snap

@@ -47,6 +47,7 @@ exports[`MessageAvatar should render message avatar 1`] = `
               "width": 32,
             },
             Object {
+              "backgroundColor": "#ececec",
               "borderRadius": 16,
               "height": 32,
               "width": 32,

package/src/components/Message/MessageSimple/utils/renderText.tsx

@@ -261,7 +261,7 @@ export const renderText = <
   );
 
   const customRules = {
-    link: { react: link },
+    link: { link },
     list: { react: list },
     // Truncate long text content in the message overlay
     paragraph: messageTextNumberOfLines ? { react: paragraphText } : {},