CODEWITHSUNDEEP
react-nativereact-native-image-pickerreact-native-gifted-chat
Ajay Batham
Ajay Batham

Reputation: 240

How can I send image in react-native-gifted-chat?

I want to send image in react-Native-Gifted-chat like sending text. I am novice in react-native.

I have already used react-native-image-picker for pick a image from physical device, now I am unable to render image in message[].

Upvotes: 3

Views: 7856

Answers (2)

Pushpendra Chouhan
Pushpendra Chouhan

Reputation: 42

you can use this import DocumentPicker from 'react-native-document-picker';

  1. install this library first

  2. then simply choose the file from the document picker use this function

    onAttatchFile = async () => { try { const res = await DocumentPicker.pick({ type: [DocumentPicker.types.allFiles], });

       // console.log(res);
   let type = res.name.slice(res.name.lastIndexOf('.') + 1);
   if (
     res.type == 'doc' ||
     res.type == 'application/pdf' ||
     res.type == 'image/jpeg' ||
     res.type == 'image/png' ||
     res.type == 'image/jpg' ||
     res.type == 'application/msword' ||
     type == 'docx'
   ) {
     this.setState({slectedFile: res}, () => this.onSendWithImage());
   } else {
     alert(`${type} files not allowed`);
   }
 } catch (err) {
   //Handling any exception (If any)
   if (DocumentPicker.isCancel(err)) {
     //If user canceled the document selection
     // alert('Canceled from single doc picker');
   } else {
     //For Unknown Error
     // alert('Unknown Error: ' + JSON.stringify(err));
     throw err;
   }
 }

    };

  3. use this function when you want to send the image

      onSendWithImage() {

 let imageData = {
   name: this.state.slectedFile.name,
   type: this.state.slectedFile.type,
   size: this.state.slectedFile.size,
   uri: this.state.slectedFile.uri,
 };
 var formData = new FormData();
 formData.append('type', 2);
 formData.append('senderId', this.state.senderData.id),
 formData.append('recieverId', this.state.reciverData._id),
 formData.append('message', imageData);


 post('sendMessage', formData).then(res =>

    res.success ? this.msjSendSuccess(res) : this.msjSendFailure(res),
 );

    }

  4. talk with your backend and say to him /her to send the image in the image key

  5. complete enjoy React native

Upvotes: 0

Arbnor
Arbnor

Reputation: 2352

You can call the onSend method of GiftedChat with an object as a parameter. Just pass an object with image as key. For example

onSend({ image: "https://picsum.photos/id/237/200/300" });

Upvotes: 2

Related Questions