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

Issue Description

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 …

Steps to Reproduce / Code Snippets

  <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);
    }
  }

Expected Results

[FILL THIS OUT]

Additional Information

• React version: 16.8.3
• React Native version: 0.59.9
• react-native-gifted-chat version: 0.9.11
• Platform(s) (iOS, Android, or both?): both

[charles-goode]

Ok true. Then this should work right?

renderSend={({onSend, text, sendButtonProps, ...props}) => <Send {...props} sendButtonProps={{...sendButtonProps, onPress: () => this.customOnPress(text, onSend)}} />}
alwaysShowSend={true}

where customOnPress replaces this in Send.tsx:

handleOnPress = () => {
    const { text, onSend } = this.props
    if (text && onSend) {
      onSend({ text: text.trim() } as Partial<TMessage>, true)
    }
  }

And maybe also include the disabled stuff from my previous post if that’s at all relevant.

[anwersolangi]

Haven’t tested this but I think

renderSend={(props) => <Send {...props} disabled={this.customDisabled()} />}
alwaysShowSend={true}

Should work, where custom disabled is false when image is attached

The onSend function is not invoking if the text field is empty