Merge pull request #787 from GetStream/vishal/native-image-picker-docs

fix(attachment-picker): fixing sync logic between `imageUploads` and `selectedImages`

Author: vishalnarkhede

docusaurus/docs/reactnative/core-components/channel.mdx

@@ -73,7 +73,6 @@ import InputButtons from '../common-content/core-components/channel/props/input_
 import MarkdownRules from '../common-content/core-components/channel/props/markdown_rules.mdx';
 import MaxMessageLength from '../common-content/core-components/channel/props/max_message_length.mdx'
 import MaxNumberOfFiles from '../common-content/core-components/channel/props/max_number_of_files.mdx'
-// import Message from '../common-content/core-components/channel/props/message.mdx';
 import MessageAvatar from '../common-content/core-components/channel/props/message_avatar.mdx';
 import MessageContent from '../common-content/core-components/channel/props/message_content.mdx';
 import MessageActions from '../common-content/core-components/channel/props/message_actions.mdx';

docusaurus/docs/reactnative/guides/message_input_customization.mdx

@@ -333,6 +333,7 @@ import {
   useMessageInputContext
 } from 'stream-chat-react-native';
 import { ActionSheetProvider, useActionSheet } from '@expo/react-native-action-sheet';
+import ImagePicker from 'react-native-image-crop-picker';
 
 const CustomAttachButton = () => {
   const { showActionSheetWithOptions } = useActionSheet();

package/src/components/MessageInput/MessageInput.tsx

@@ -292,6 +292,7 @@ const MessageInputWithContext = <
   useEffect(() => {
     if (imagesForInput) {
       if (selectedImagesLength > imageUploadsLength) {
+        /** User selected an image in bottom sheet attachment picker */
         const imagesToUpload = selectedImages.filter((selectedImage) => {
           const uploadedImage = imageUploads.find(
             (imageUpload) =>
@@ -301,6 +302,7 @@ const MessageInputWithContext = <
         });
         imagesToUpload.forEach((image) => uploadNewImage(image));
       } else if (selectedImagesLength < imageUploadsLength) {
+        /** User de-selected an image in bottom sheet attachment picker */
         const imagesToRemove = imageUploads.filter(
           (imageUpload) =>
             !selectedImages.find(
@@ -316,6 +318,7 @@ const MessageInputWithContext = <
   useEffect(() => {
     if (imagesForInput) {
       if (imageUploadsLength < selectedImagesLength) {
+        /** User removed some image from seleted images within ImageUploadPreview. */
         const updatedSelectedImages = selectedImages.filter((selectedImage) => {
           const uploadedImage = imageUploads.find(
             (imageUpload) =>
@@ -325,12 +328,17 @@ const MessageInputWithContext = <
         });
         setSelectedImages(updatedSelectedImages);
       } else if (imageUploadsLength > selectedImagesLength) {
+        /**
+         * User is editing some message which contains image attachments OR
+         * image attachment is added from custom image picker (other than the default bottomsheet image picker)
+         * using `uploadNewImage` function from `MessageInputContext`.
+         **/
         setSelectedImages(
           imageUploads
             .map((imageUpload) => ({
               height: imageUpload.file.height,
               source: imageUpload.file.source,
-              uri: imageUpload.url,
+              uri: imageUpload.url || imageUpload.file.uri,
               width: imageUpload.file.width,
             }))
             .filter(Boolean) as Asset[],