How can I send images/video and voice messages in React-native-Gifted-chat using render actions?

Question

I want to send images/video in chat application, developed using React-native-gifted-chat and Firebase, How can I create action for them and call that actions to upload in firebase and send images/video?

Here is my code.

handleSendImage = () => {
    console.log("handleSendImage");
  };
  renderActions(props) {
    return (
      <Actions
        {...props}
        // containerStyle={{
        //   width: 70,
        // }}
        icon={() => (
          <Icon
            name={"camera"}
            size={30}
            color={colors.btnBg}
            font={"FontAwesome"}
            onPress={this.handleSendImage}
          />
        )}
        onSend={(args) => console.log(args)}
      />
    );
  }

      

<GiftedChat
            placeholder={"Hey!"}
            alwaysShowSend
            messages={messages}
            onSend={(newMessage) => this.onSend(this.chatID(), newMessage)}
            renderInputToolbar={this.renderInputToolbar}
            renderActions={this.renderActions}
            user={{
              _id: senderId,
              name: senderName,
            }}
          />

How can I click on particular actions and send voice and images/video respectively?

yes, @OliverD, able to develop with Actions. – JPithwa Aug 27 '20 at 06:42 — JPithwa, Aug 27 '20 at 06:42
@JaydeepPithwa Can you post the solution here? – Shyam Nov 09 '20 at 07:16 — Shyam, Nov 09 '20 at 07:16
Try adding your actions to `renderActions` – Harshil Jasoliya Sep 29 '21 at 17:23 — Harshil Jasoliya, Sep 29 '21 at 17:23

score 1 · Answer 1 · answered Sep 29 '21 at 17:09

Gifted chat has renderActions property itself so just need to create custom action to upload image/video and voice.

Here, I am attaching code for upload documents like PDF/Doc file.

To upload image/video you just need to change that package instead of I've used document-picker

const renderActions = (props) => {
    return (
        <Actions
            {...props}
            options={{
                ['Document']: async (props) => {
                    try {
                        const result = await DocumentPicker.pick({
                            type: [DocumentPicker.types.pdf],
                        });
                       console.log("image file",result)
                    } catch (e) {
                        if (DocumentPicker.isCancel(e)) {
                            console.log("User cancelled!")
                        } else {
                            throw e;
                        }
                    }

                },
                Cancel: (props) => { console.log("Cancel") }
            }}
            onSend={args => console.log(args)}
        />
    )
};

Gifted-chat component


                   <GiftedChat
                    messages={messages}
                    showAvatarForEveryMessage={true}
                    onSend={messages => onSend(messages)}
                    renderActions={() => renderActions()}
                    user={{
                        _id: 2,
                        name: 'React Native',
                        avatar: 'https://placeimg.com/140/140/any',
                    }}
                    renderCustomView={renderCustomView}
                />

How can I send images/video and voice messages in React-native-Gifted-chat using render actions?

1 Answers1

Linked