CODEWITHSUNDEEP
reactjsreact-nativereact-native-gifted-chat
karim mohamed
karim mohamed

Reputation: 1

quick replies press function (gifted chat) react native

I have worked on a chat app and I want to make a function when the user tab on one of these replies showed as user message in chat UI, and I want to know which quick reply he choose , anyone helps me? this is code below:

import React, { Component } from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { GiftedChat } from 'react-native-gifted-chat';

class App extends Component {
  state ={
    messages: [
    {
    _id: 1,
    text: 'This is a quick reply. Do you love Gifted Chat? (radio) KEEP IT',
    createdAt: new Date(),
    user: {
      _id: 2,
      name: 'FAQ Bot',
      avatar: 'https://i.imgur.com/7k12EPD.png'
    },
    quickReplies: {
      type: 'radio', // or 'checkbox',
      keepIt: true,
      values: [
        {
          title: '😋 Yes',
          value: 'yes',
        },
        {
          title: '📷 Yes, let me show you with a picture!',
          value: 'yes_picture',
        },
        {
          title: '😞 Nope. What?',
          value: 'no',
        },
      ],
    }
  }
  ]
  };

  //................



 onSend(messages = []) {
    this.setState(previousState => ({
      messages: GiftedChat.append(previousState.messages, messages)


    }));
  }
  onSend(quickReply = []) {
    this.setState(previousState => ({
      quickReply: GiftedChat.append(previousState.quickReply, quickReply)


    }));
  }
  /*onSend(suggestions = []) {
    this.setState(previousState => ({

      messages: GiftedChat.append(previousState.suggestions, suggestions)

    }));
  }*/

  render() {
    return (
      <View style={{ flex: 1, backgroundColor: '#fff' }}>
        <GiftedChat
          messages={this.state.messages}
          quickReply={this.state.messages.quickReplies}
          //messages={this.state.suggestions}

          onSend={messages => this.onSend(messages)}
          onQuickReply={quickReply => this.onQuickReply(quickReply)}
          //onSend2={suggestions => this.onSend2(suggestions)}

          user={{
            _id: 1
          }}
        />


      </View>
    );
  }
}

export default App;

showed as user message in chat UI, and I want to know which quick reply he choose, anyone helps me?

Upvotes: 0

Views: 4151

Answers (1)

Ankur Yaduvanshi
Ankur Yaduvanshi

Reputation: 11

You can get the chosen quick reply. And pass into chat.

onQuickReply(quickReply) {
    if(quickReply[0].value == "yes") {
    } else if (quickReply[0].value == "yes_picture") {
    } else if (quickReply[0].value == "NO") {
    }
    
    let message = quickReply[0].value;
    let msg = {
      _id: this.state.messages.length + 1,
      text: message,
      createdAt: new Date(),
      user: {
        _id:1
      }
    }
    this.setState(previousState => ({
      messages: GiftedChat.append(previousState.messages, [msg])
    }));
    var sendBotResponsetxt = "Thanks";
    this.sendBotResponse(sendBotResponsetxt);
  }

Upvotes: 1

Related Questions