Add a file upload button to chat screen

Question

My RN 0.61.5 app is running the react-native-gifted-chat 0.13.0. Here is the render which is pretty plain:

render() {
      console.log("In GiftedChat render : ");
      return ( 
          <GiftedChat 
            messages={this.state.messages}
            onSend={messages => this._onSend(messages)}
            user={{_id: this.state.myself.id,
                   name: this.state.myself.name,
                   avatar: this.state.myself.user_data.avatar}}
          />         
      );
    }

I would like to add a file upload button (which can open gallery or file manager) by the typing text box allowing user to upload an image or video file. How can I do that? I have searched online and gone over the doc but did not find a way/hook to add a button to the chat screen.

score 1 · Answer 1 · answered Aug 09 '20 at 11:00

There is a prop called renderActions() in gifted chat docs. It adds a custom action button on the left of the message composer. I have implemented image uploading button by using this.

<GiftedChat
    messages={this.state.messages}
    onSend={this.send}
    ...
    renderActions={() => (
      <React.Fragment>
        <ImgPicker setmsgImgUrl={this.setmsgImgUrl} />
      </React.Fragment>
    )}
/>

I have created the ImgPicker component by using codes in the expo docs image picker. If you want to see the ImgPicker component code, here is the link.

Github link for the ImgPicker Component Code

Add a file upload button to chat screen

1 Answers1