How to send an image message only ? (without sending a text as well)

I simply want to send an image without typing any text ? I am using react-native-image-picker and i currently can send an image with a text , but what if i want to send an image only ? I tried alwaysShowSend and try to send but nothing happens unless the text field is not empty The docs are very vague on this ...

      <GiftedChat
        messages={friendMsgs}
        onSend={messages => this.onSend(messages, this.state.image)}
        user={{
          _id: user && user.id,
          name: user && user.firstName,
          avatar: user && user.profilemage
        }}
        text={this.state.text}
        alwaysShowSend={
          this.state.text ? true : false || this.state.image ? true : false
        }
        onInputTextChanged={text => this.setState({ text })}
        renderLoading={() => <Loading />}
        onLoadEarlier={this.loadMessages.bind(this, userParams)}
        isLoadingEarlier={loading}
        isAnimated
        renderAvatarOnTop
        loadEarlier={friendMsgs.length >= 20}
        scrollToBottom
        scrollToBottomComponent={() => (
          <Ionic name='ios-arrow-round-down' size={30} color='#000' />
        )}
        extraData={this.state}
        renderBubble={props => {
          const color = props.currentMessage.read ? '#0084ff' : '#389bff';
          return (
            <Bubble
              {...props}
              wrapperStyle={{ right: { backgroundColor: color } }}
            />
          );
        }}
        renderActions={() => (
          <Feather
            style={styles.uploadImage}
            onPress={this.uploadImage}
            name='image'
            size={30}
            color='#000'
          />
        )}
      />


  onSend(messages = [], image) {
    const { socket, user, navigation } = this.props;
    const { friendMsgs } = this.props.history;

    const receiver = navigation.getParam('user');

    if (socket && socket.readyState === 1) {
      const msg = {
        ...messages[0],
        image
      };

      const sendMsg = GiftedChat.append(friendMsgs, msg);

      const data = {
        senderId: user && user.id,
        receiverType: 'user',
        messageType: 'text',
        receiverId: receiver.id,
        read: false,
        content: messages[0].text
      };

      this.props.sendMsg(data, sendMsg);
    }
  }

Upvotes: 3

Answers (5)

Wahas Ali Mughal

Reputation: 188

You can simply bypass this by using this workaround

    text={(this.state.recordingUri && "Audio") ||
          (this.state.image && "Image")
    }

You can give empty string if you want.

Upvotes: 0

Anwer Solangi

Reputation: 327

You Need to make the custom send button, to do this:

import { GiftedChat, Send } from 'eact-native-gifted-chat';

and then in your component make this function:

//Where onSend is the function use to onsend;
  const customSendPress = (text, onSend) => {
    if (image && !text && onSend) {
      onSend({text: text.trim()}, true);
    } else if (text && onSend) {
      onSend({text: text.trim()}, true);
      0;
    } else {
      return false;
    }
  };

and finally create customSend button. const customSend = ({onSend, text, sendButtonProps, ...sendProps}) => { return ( <Send {...sendProps} textStyle={styles.sendButton} sendButtonProps={{ ...sendButtonProps, onPress: () => customSendPress(text, onSend), }} /> ); };

and finally update your GiftedChat component.

<GiftedChat
        messages={messages}
        onSend={(msg) => onSend(msg)}
        user={{
          _id: auth().currentUser.uid,
        }}
        renderSend={customSend}
        alwaysShowSend
        placeholder={image ? 'Add Caption' : 'Type your message'}
        renderLoading={() => {
          return <Loader />;
        }}
        renderTicks={customTicks}
      />

This will allow you to send only message with image (with caption or without caption).

Upvotes: 1

Geat

Reputation: 1209

This came up in a project for me recently. I created my own Send component which started off as a duplicate of react-native-gifted-chat-send/lib/utils/Send.

I modified the handleOnPress function definition to check if a file has been attached, and allow the message to be sent if either a file is present or the message isn't blank.

This new send component is then attached to GiftedChat through the renderSend property.

Upvotes: 1

Amr Mostafa

Reputation: 113

I did a little workaround for this, When the image is selected and the text is empty, i simply set the text to an empty space that way the onSend function works without needing to send any text with the image!.

this.setState({ text: ' ' });

Upvotes: 0

hong developer

Reputation: 13926

Could you try this?

 const msg = {
     createdAt: new Date(),
     user: user && user.id,
     image: image,
     sent: true,
     received: true,
   }
...
const sendMsg = GiftedChat.append(friendMsgs, msg);
const data = {
        senderId: user && user.id,
        receiverType: 'user',
        receiverId: receiver.id,
        read: false,
      };

      this.props.sendMsg(data, sendMsg);
this.props.sendMsg({});

Upvotes: 1

How to send an image message only ? (without sending a text as well)

Answers (5)

Related Questions