stream-chat-react-native-core 5.34.1-beta.4 → 5.35.0-beta.1

package/src/components/Reply/Reply.tsx

@@ -22,7 +22,7 @@ import {
   TranslationContextValue,
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
-import type { DefaultStreamChatGenerics } from '../../types/types';
+import { DefaultStreamChatGenerics, FileTypes } from '../../types/types';
 import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
 import { getTrimmedAttachmentTitle } from '../../utils/getTrimmedAttachmentTitle';
 import { hasOnlyEmojis } from '../../utils/utils';
@@ -94,36 +94,36 @@ const getMessageType = <
 ) => {
   let messageType;
 
-  const isLastAttachmentFile = lastAttachment.type === 'file';
+  const isLastAttachmentFile = lastAttachment.type === FileTypes.File;
 
-  const isLastAttachmentAudio = lastAttachment.type === 'audio';
+  const isLastAttachmentAudio = lastAttachment.type === FileTypes.Audio;
 
-  const isLastAttachmentVoiceRecording = lastAttachment.type === 'voiceRecording';
+  const isLastAttachmentVoiceRecording = lastAttachment.type === FileTypes.VoiceRecording;
 
-  const isLastAttachmentVideo = lastAttachment.type === 'video';
+  const isLastAttachmentVideo = lastAttachment.type === FileTypes.Video;
 
   const isLastAttachmentGiphy =
-    lastAttachment?.type === 'giphy' || lastAttachment?.type === 'imgur';
+    lastAttachment?.type === FileTypes.Giphy || lastAttachment?.type === FileTypes.Imgur;
 
   const isLastAttachmentImageOrGiphy =
-    lastAttachment?.type === 'image' &&
+    lastAttachment?.type === FileTypes.Image &&
     !lastAttachment?.title_link &&
     !lastAttachment?.og_scrape_url;
 
   const isLastAttachmentImage = lastAttachment?.image_url || lastAttachment?.thumb_url;
 
   if (isLastAttachmentFile) {
-    messageType = 'file';
+    messageType = FileTypes.File;
   } else if (isLastAttachmentVideo) {
-    messageType = 'video';
+    messageType = FileTypes.Video;
   } else if (isLastAttachmentAudio) {
-    messageType = 'audio';
+    messageType = FileTypes.Audio;
   } else if (isLastAttachmentVoiceRecording) {
-    messageType = 'voiceRecording';
+    messageType = FileTypes.VoiceRecording;
   } else if (isLastAttachmentImageOrGiphy) {
-    if (isLastAttachmentImage) messageType = 'image';
+    if (isLastAttachmentImage) messageType = FileTypes.Image;
     else messageType = undefined;
-  } else if (isLastAttachmentGiphy) messageType = 'giphy';
+  } else if (isLastAttachmentGiphy) messageType = FileTypes.Giphy;
   else messageType = 'other';
 
   return messageType;
@@ -184,10 +184,10 @@ const ReplyWithContext = <
   const hasImage =
     !error &&
     lastAttachment &&
-    messageType !== 'file' &&
-    messageType !== 'video' &&
-    messageType !== 'audio' &&
-    messageType !== 'voiceRecording' &&
+    messageType !== FileTypes.File &&
+    messageType !== FileTypes.Video &&
+    messageType !== FileTypes.Audio &&
+    messageType !== FileTypes.VoiceRecording &&
     (lastAttachment.image_url || lastAttachment.thumb_url || lastAttachment.og_scrape_url);
 
   const onlyEmojis = !lastAttachment && emojiOnlyText;
@@ -209,7 +209,9 @@ const ReplyWithContext = <
         ]}
       >
         {!error && lastAttachment ? (
-          messageType === 'file' || messageType === 'voiceRecording' || messageType === 'audio' ? (
+          messageType === FileTypes.File ||
+          messageType === FileTypes.Audio ||
+          messageType === FileTypes.VoiceRecording ? (
             <View
               style={[
                 styles.fileAttachmentContainer,
@@ -241,7 +243,7 @@ const ReplyWithContext = <
             />
           ) : null
         ) : null}
-        {messageType === 'video' && !lastAttachment.og_scrape_url ? (
+        {messageType === FileTypes.Video && !lastAttachment.og_scrape_url ? (
           <VideoThumbnail
             imageStyle={[styles.videoThumbnailImageStyle, videoThumbnailImageStyle]}
             style={[styles.videoThumbnailContainerStyle, videoThumbnailContainerStyle]}
@@ -264,13 +266,13 @@ const ReplyWithContext = <
                   ? quotedMessage.text.length > 170
                     ? `${quotedMessage.text.slice(0, 170)}...`
                     : quotedMessage.text
-                  : messageType === 'image'
+                  : messageType === FileTypes.Image
                   ? t('Photo')
-                  : messageType === 'video'
+                  : messageType === FileTypes.Video
                   ? t('Video')
-                  : messageType === 'file' ||
-                    messageType === 'audio' ||
-                    messageType === 'voiceRecording'
+                  : messageType === FileTypes.File ||
+                    messageType === FileTypes.Audio ||
+                    messageType === FileTypes.VoiceRecording
                   ? trimmedLastAttachmentTitle || ''
                   : '',
             }}
@@ -279,7 +281,7 @@ const ReplyWithContext = <
               textContainer: [
                 {
                   marginRight:
-                    hasImage || messageType === 'video'
+                    hasImage || messageType === FileTypes.Video
                       ? Number(
                           stylesProp.imageAttachment?.height ||
                             imageAttachment.height ||
@@ -290,9 +292,9 @@ const ReplyWithContext = <
                             imageAttachment.marginLeft ||
                             styles.imageAttachment.marginLeft,
                         )
-                      : messageType === 'file' ||
-                        messageType === 'audio' ||
-                        messageType === 'voiceRecording'
+                      : messageType === FileTypes.File ||
+                        messageType === FileTypes.Audio ||
+                        messageType === FileTypes.VoiceRecording
                       ? attachmentSize +
                         Number(
                           stylesProp.fileAttachmentContainer?.paddingLeft ||
@@ -307,7 +309,7 @@ const ReplyWithContext = <
               ],
             }}
           />
-          {messageType === 'audio' || messageType === 'voiceRecording' ? (
+          {messageType === FileTypes.Audio || messageType === FileTypes.VoiceRecording ? (
             <Text style={[styles.secondaryText, { color: grey }, secondaryText]}>
               {lastAttachment.duration
                 ? dayjs.duration(lastAttachment.duration, 'second').format('mm:ss')

package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap

@@ -1701,6 +1701,7 @@ exports[`Thread should match thread snapshot 1`] = `
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
+              onLayout={[Function]}
               onResponderGrant={[Function]}
               onResponderMove={[Function]}
               onResponderRelease={[Function]}
@@ -1716,14 +1717,14 @@ exports[`Thread should match thread snapshot 1`] = `
             >
               <RNSVGSvgView
                 align="xMidYMid"
-                bbHeight={24}
-                bbWidth={24}
+                bbHeight={32}
+                bbWidth={32}
+                fill="#7A7A7A"
                 focusable={false}
-                height={24}
+                height={32}
                 meetOrSlice={0}
                 minX={0}
                 minY={0}
-                pathFill="#7A7A7A"
                 style={
                   [
                     {
@@ -1732,40 +1733,86 @@ exports[`Thread should match thread snapshot 1`] = `
                     },
                     {
                       "flex": 0,
-                      "height": 24,
-                      "width": 24,
+                      "height": 32,
+                      "width": 32,
                     },
                   ]
                 }
-                vbHeight={24}
-                vbWidth={24}
-                width={24}
+                vbHeight={32}
+                vbWidth={32}
+                width={32}
               >
                 <RNSVGGroup
                   fill={
                     {
-                      "payload": 4278190080,
+                      "payload": 4286216826,
                       "type": 0,
                     }
                   }
+                  propList={
+                    [
+                      "fill",
+                    ]
+                  }
                 >
-                  <RNSVGPath
-                    clipRule={0}
-                    d="M13.468 2.888a5.07 5.07 0 012.983.635 5.07 5.07 0 012.041 2.265c.45 1.01.546 2.254-.144 3.449l-4.5 7.794a3.232 3.232 0 01-1.427 1.294c-.757.342-1.696.367-2.671-.196-.975-.563-1.422-1.389-1.506-2.215a3.233 3.233 0 01.408-1.883l4-6.928a1 1 0 011.732 1l-4 6.928c-.087.15-.176.425-.15.682.02.196.105.447.516.684.41.237.671.185.85.105.236-.107.43-.32.516-.47l4.5-7.795c.31-.538.29-1.093.049-1.636a3.072 3.072 0 00-1.214-1.346 3.072 3.072 0 00-1.773-.378c-.591.062-1.082.322-1.392.86l-5 8.66c-.654 1.133-.286 3.3 1.964 4.598 2.25 1.3 4.31.535 4.964-.598l3.5-6.062a1 1 0 111.732 1l-3.5 6.062c-1.345 2.33-4.75 3.031-7.696 1.33-2.946-1.7-4.042-5-2.696-7.33l5-8.66c.69-1.195 1.815-1.733 2.914-1.85z"
+                  <RNSVGGroup
+                    clipPath="id"
                     fill={
                       {
-                        "payload": 4286216826,
+                        "payload": 4278190080,
                         "type": 0,
                       }
                     }
-                    fillRule={0}
-                    propList={
-                      [
-                        "fill",
-                        "fillRule",
-                      ]
-                    }
-                  />
+                  >
+                    <RNSVGPath
+                      d="M17.5245 9.33332L14.8579 9.33332L14.8579 14.6666L9.52453 14.6666L9.52453 17.3333L14.8579 17.3333L14.8579 22.6667L17.5245 22.6667L17.5245 17.3333L22.8579 17.3333L22.8579 14.6666L17.5245 14.6666L17.5245 9.33332ZM16.1912 2.66665C8.83119 2.66665 2.85786 8.63998 2.85786 16C2.85786 23.36 8.83119 29.3333 16.1912 29.3333C23.5512 29.3333 29.5245 23.36 29.5245 16C29.5245 8.63998 23.5512 2.66665 16.1912 2.66665ZM16.1912 26.6667C10.3112 26.6666 5.52453 21.88 5.52453 16C5.52453 10.12 10.3112 5.33332 16.1912 5.33332C22.0712 5.33332 26.8579 10.12 26.8579 16C26.8579 21.88 22.0712 26.6666 16.1912 26.6667Z"
+                      fill={
+                        {
+                          "payload": 4286216826,
+                          "type": 0,
+                        }
+                      }
+                      propList={
+                        [
+                          "fill",
+                        ]
+                      }
+                    />
+                  </RNSVGGroup>
+                  <RNSVGDefs>
+                    <RNSVGClipPath
+                      fill={
+                        {
+                          "payload": 4278190080,
+                          "type": 0,
+                        }
+                      }
+                      name="id"
+                    >
+                      <RNSVGRect
+                        fill={
+                          {
+                            "payload": 4278190080,
+                            "type": 0,
+                          }
+                        }
+                        height={32}
+                        matrix={
+                          [
+                            1,
+                            0,
+                            0,
+                            1,
+                            0.191406,
+                            0,
+                          ]
+                        }
+                        width={32}
+                        x={0}
+                        y={0}
+                      />
+                    </RNSVGClipPath>
+                  </RNSVGDefs>
                 </RNSVGGroup>
               </RNSVGSvgView>
             </View>
@@ -1812,14 +1859,14 @@ exports[`Thread should match thread snapshot 1`] = `
             >
               <RNSVGSvgView
                 align="xMidYMid"
-                bbHeight={24}
-                bbWidth={24}
+                bbHeight={32}
+                bbWidth={32}
+                fill="#7A7A7A"
                 focusable={false}
-                height={24}
+                height={32}
                 meetOrSlice={0}
                 minX={0}
                 minY={0}
-                pathFill="#7A7A7A"
                 style={
                   [
                     {
@@ -1828,37 +1875,39 @@ exports[`Thread should match thread snapshot 1`] = `
                     },
                     {
                       "flex": 0,
-                      "height": 24,
-                      "width": 24,
+                      "height": 32,
+                      "width": 32,
                     },
                   ]
                 }
-                vbHeight={24}
-                vbWidth={24}
-                width={24}
+                vbHeight={32}
+                vbWidth={32}
+                width={32}
               >
                 <RNSVGGroup
                   fill={
                     {
-                      "payload": 4278190080,
+                      "payload": 4286216826,
                       "type": 0,
                     }
                   }
+                  propList={
+                    [
+                      "fill",
+                    ]
+                  }
                 >
                   <RNSVGPath
-                    clipRule={0}
-                    d="M11.636 4H16l-2.91 5.818H16L10.546 20l1.09-7.273H8L11.636 4z"
+                    d="M14.8522 28H13.5188L14.8522 18.6667H10.1855C9.01218 18.6667 9.74551 17.6667 9.77218 17.6267C11.4922 14.5867 14.0788 10.0533 17.5322 4H18.8655L17.5322 13.3333H22.2122C22.7455 13.3333 23.0388 13.5867 22.7455 14.2133C17.4788 23.4 14.8522 28 14.8522 28Z"
                     fill={
                       {
                         "payload": 4286216826,
                         "type": 0,
                       }
                     }
-                    fillRule={0}
                     propList={
                       [
                         "fill",
-                        "fillRule",
                       ]
                     }
                   />
@@ -1914,7 +1963,7 @@ exports[`Thread should match thread snapshot 1`] = `
                 [
                   {
                     "flex": 1,
-                    "fontSize": 14,
+                    "fontSize": 16,
                     "includeFontPadding": false,
                     "padding": 0,
                     "paddingTop": 0,

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -1,7 +1,6 @@
 import type { LegacyRef } from 'react';
 import React, { PropsWithChildren, useContext, useEffect, useRef, useState } from 'react';
-import type { TextInput, TextInputProps } from 'react-native';
-import { Alert, Keyboard } from 'react-native';
+import { Alert, Keyboard, Linking, TextInput, TextInputProps } from 'react-native';
 
 import uniq from 'lodash/uniq';
 import { lookup } from 'mime-types';
@@ -47,11 +46,12 @@ import type { SendButtonProps } from '../../components/MessageInput/SendButton';
 import type { UploadProgressIndicatorProps } from '../../components/MessageInput/UploadProgressIndicator';
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
 import type { Emoji } from '../../emoji-data';
-import { pickDocument } from '../../native';
-import type {
+import { pickDocument, pickImage, takePhoto } from '../../native';
+import {
   Asset,
   DefaultStreamChatGenerics,
   File,
+  FileTypes,
   FileUpload,
   ImageUpload,
   UnknownType,
@@ -159,6 +159,10 @@ export type LocalMessageInputContext<
   openCommandsPicker: () => void;
   openFilePicker: () => void;
   openMentionsPicker: () => void;
+  /**
+   * Function for picking a photo from native image picker and uploading it.
+   */
+  pickAndUploadImageFromNativePicker: () => Promise<void>;
   pickFile: () => Promise<void>;
   /**
    * Function for removing a file from the upload preview
@@ -202,6 +206,10 @@ export type LocalMessageInputContext<
   setShowMoreOptions: React.Dispatch<React.SetStateAction<boolean>>;
   setText: React.Dispatch<React.SetStateAction<string>>;
   showMoreOptions: boolean;
+  /**
+   * Function for taking a photo and uploading it
+   */
+  takeAndUploadImage: () => Promise<void>;
   text: string;
   toggleAttachmentPicker: () => void;
   /**
@@ -424,6 +432,11 @@ export type InputMessageInputContextValue<
    */
   emojiSearchIndex?: EmojiSearchIndex;
 
+  /**
+   * Handler for when the attach button is pressed.
+   */
+  handleAttachButtonPress?: () => void;
+
   /** Initial value to set on input */
   initialValue?: string;
   /**
@@ -536,7 +549,7 @@ export const MessageInputProvider = <
   }>({});
   const [giphyActive, setGiphyActive] = useState(false);
   const [sendThreadMessageInChannel, setSendThreadMessageInChannel] = useState(false);
-  const { editing, hasFilePicker, hasImagePicker, initialValue } = value;
+  const { editing, initialValue } = value;
   const {
     fileUploads,
     imageUploads,
@@ -626,21 +639,77 @@ export const MessageInputProvider = <
     }
   };
 
-  const openAttachmentPicker = () => {
-    if (hasImagePicker) {
-      Keyboard.dismiss();
-      setSelectedPicker('images');
-      openPicker();
-    } else if (hasFilePicker) {
-      pickFile();
+  /**
+   * Function for capturing a photo and uploading it
+   */
+  const takeAndUploadImage = async () => {
+    setSelectedPicker(undefined);
+    closePicker();
+    const photo = await takePhoto({ compressImageQuality: value.compressImageQuality });
+    if (photo.askToOpenSettings) {
+      Alert.alert(
+        t('Allow camera access in device settings'),
+        t('Device camera is used to take photos or videos.'),
+        [
+          { style: 'cancel', text: t('Cancel') },
+          { onPress: () => Linking.openSettings(), style: 'default', text: t('Open Settings') },
+        ],
+      );
+    }
+    if (!photo.cancelled) {
+      setSelectedImages((images) => [...images, photo]);
     }
   };
 
+  /**
+   * Function for picking a photo from native image picker and uploading it
+   */
+  const pickAndUploadImageFromNativePicker = async () => {
+    const result = await pickImage();
+    if (result.askToOpenSettings) {
+      Alert.alert(
+        t('Allow access to your Gallery'),
+        t('Device gallery permissions is used to take photos or videos.'),
+        [
+          { style: 'cancel', text: t('Cancel') },
+          { onPress: () => Linking.openSettings(), style: 'default', text: t('Open Settings') },
+        ],
+      );
+    }
+    if (result.assets && result.assets.length > 0) {
+      result.assets.forEach((asset) => {
+        if (asset.type.includes('image')) {
+          setSelectedImages((prevImages) => [...prevImages, asset]);
+        } else {
+          setSelectedFiles((prevFiles) => [
+            ...prevFiles,
+            { ...asset, mimeType: asset.type, type: FileTypes.Video },
+          ]);
+        }
+      });
+    }
+  };
+
+  /**
+   * Function to open the attachment picker if the MediaLibary is installed.
+   */
+  const openAttachmentPicker = () => {
+    Keyboard.dismiss();
+    setSelectedPicker('images');
+    openPicker();
+  };
+
+  /**
+   * Function to close the attachment picker if the MediaLibrary is installed.
+   */
   const closeAttachmentPicker = () => {
     setSelectedPicker(undefined);
     closePicker();
   };
 
+  /**
+   * Function to toggle the attachment picker if the MediaLibrary is installed.
+   */
   const toggleAttachmentPicker = () => {
     if (selectedPicker) {
       closeAttachmentPicker();
@@ -723,20 +792,20 @@ export const MessageInputProvider = <
       original_height: image.height,
       original_width: image.width,
       originalImage: image.file,
-      type: 'image',
+      type: FileTypes.Image,
     };
   };
 
   const mapFileUploadToAttachment = (file: FileUpload): Attachment<StreamChatGenerics> => {
-    if (file.type === 'image') {
+    if (file.type === FileTypes.Image) {
       return {
         fallback: file.file.name,
         image_url: file.url,
         mime_type: file.file.mimeType,
         originalFile: file.file,
-        type: 'image',
+        type: FileTypes.Image,
       };
-    } else if (file.type === 'audio') {
+    } else if (file.type === FileTypes.Audio) {
       return {
         asset_url: file.url || file.file.uri,
         duration: file.file.duration,
@@ -744,9 +813,9 @@ export const MessageInputProvider = <
         mime_type: file.file.mimeType,
         originalFile: file.file,
         title: file.file.name,
-        type: 'audio',
+        type: FileTypes.Audio,
       };
-    } else if (file.type === 'video') {
+    } else if (file.type === FileTypes.Video) {
       return {
         asset_url: file.url || file.file.uri,
         duration: file.file.duration,
@@ -755,9 +824,9 @@ export const MessageInputProvider = <
         originalFile: file.file,
         thumb_url: file.thumb_url,
         title: file.file.name,
-        type: 'video',
+        type: FileTypes.Video,
       };
-    } else if (file.type === 'voiceRecording') {
+    } else if (file.type === FileTypes.VoiceRecording) {
       return {
         asset_url: file.url || file.file.uri,
         duration: file.file.duration,
@@ -765,7 +834,7 @@ export const MessageInputProvider = <
         mime_type: file.file.mimeType,
         originalFile: file.file,
         title: file.file.name,
-        type: 'voiceRecording',
+        type: FileTypes.VoiceRecording,
         waveform_data: file.file.waveform_data,
       };
     } else {
@@ -775,7 +844,7 @@ export const MessageInputProvider = <
         mime_type: file.file.mimeType,
         originalFile: file.file,
         title: file.file.name,
-        type: 'file',
+        type: FileTypes.File,
       };
     }
   };
@@ -940,7 +1009,7 @@ export const MessageInputProvider = <
       const attachments = [
         {
           image_url: image.url,
-          type: 'image',
+          type: FileTypes.Image,
         },
       ] as StreamMessage<StreamChatGenerics>['attachments'];
 
@@ -1287,6 +1356,7 @@ export const MessageInputProvider = <
     openCommandsPicker,
     openFilePicker: pickFile,
     openMentionsPicker,
+    pickAndUploadImageFromNativePicker,
     pickFile,
     removeFile,
     removeImage,
@@ -1307,6 +1377,7 @@ export const MessageInputProvider = <
     setShowMoreOptions,
     setText,
     showMoreOptions,
+    takeAndUploadImage,
     text,
     thread,
     toggleAttachmentPicker,

package/src/contexts/messageInputContext/__tests__/MessageInputContext.test.tsx

@@ -7,15 +7,11 @@ import type { AppSettingsAPIResponse, StreamChat } from 'stream-chat';
 
 import { ChatContextValue, ChatProvider } from '../../../contexts/chatContext/ChatContext';
 
-import {
-  generateFileAttachment,
-  generateImageAttachment,
-} from '../../../mock-builders/generator/attachment';
+import { generateImageAttachment } from '../../../mock-builders/generator/attachment';
 
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { generateUser } from '../../../mock-builders/generator/user';
 
-import * as NativeUtils from '../../../native';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import { FileState } from '../../../utils/utils';
 import {
@@ -235,37 +231,4 @@ describe('MessageInputContext', () => {
       expect(result.current.text).toBe(`${initialProps.editing.text}@`);
     });
   });
-
-  it('openAttachmentPicker works', async () => {
-    jest.spyOn(NativeUtils, 'pickDocument').mockImplementation(
-      jest.fn().mockResolvedValue({
-        cancelled: false,
-        docs: [generateFileAttachment(), generateImageAttachment()],
-      }),
-    );
-    const initialProps = {
-      editing: message,
-      hasFilePicker: true,
-      hasImagePicker: false,
-    };
-    const { result } = renderHook(() => useMessageInputContext(), {
-      initialProps,
-      wrapper: (props) => (
-        <Wrapper
-          editing={initialProps.editing}
-          hasFilePicker={initialProps.hasFilePicker}
-          hasImagePicker={initialProps.hasImagePicker}
-          {...props}
-        />
-      ),
-    });
-
-    act(() => {
-      result.current.openAttachmentPicker();
-    });
-
-    await waitFor(async () => {
-      expect(await result.current.pickFile()).toBe(undefined);
-    });
-  });
 });