This library implements the Dialogflow Messenger custom payload protocol, you just need enable the DialogFlow Messenger integration and use this library with you Agent ID and Location

Add the dependency:

yarn add react-native-dialogflow-messenger
yarn add react-native-vector-icons
react-native link react-native-vector-icons

"react": ">= 17.x.x",
"react-native": ">= 0.64.x",

import { DialogFlowMessenger } from "react-native-dialogflow-messenger";

<DialogFlowMessenger
  location="<location>"
  agent="<agent_id>"      
  //Style
  dfMessengerBotMessage="#878fac"
  dfMessengerUserMessage="#479b3d"
  dfMessengerFontColor="#FFFFFF"
  //UI Events 
  dfAccordionClicked={(event)=>console.log("Accordion",event)}
  dfButtonClicked={(event)=>console.log("Button",event)}
  dfChipClicked={(event)=>console.log("Chip",event)}
  dfInfoCardClicked={(event)=>console.log("Info",event)}
  dfListElementClicked={(event)=>console.log("list",event)}
  //Dialogflow Events
  dfMessengerError={(event)=>console.log("Error",event)}
  dfRequestSent={(event)=>console.log("Send",event)}
  dfResponseReceived={(event)=>console.log("Response",event)}
  dfUserInputEntered={(event)=>console.log("UserInput",event)}
    />

• df-messenger-bot-message Bubble background color for agent messages.
• df-messenger-button-titlebar-color Color for the floating button and the titlebar of the chat dialog.
• df-messenger-button-titlebar-font-color Font color for the title in the titlebar.
• df-messenger-chat-background-color Color for the chat dialog background.
• df-messenger-font-color Font color for messages.
• df-messenger-input-box-color Background color for the text input box.
• df-messenger-input-font-color Font color for the text input box.
• df-messenger-input-placeholder-font-color Font color for placeholder text in text input box.
• df-messenger-minimized-chat-close-icon-color Color of the close icon in the closed chat view.
• df-messenger-send-icon Color of the send icon in the text input box.
• df-messenger-user-message Bubble background color for user messages.

• Info
• Chips
• Description
• Image
• Button
• Lists
• Accordion
• Combining response types

• df-accordion-clicked
• df-button-clicked
• df-chip-clicked
• df-info-card-clicked
• df-list-element-clicked
• df-messenger-error
• df-messenger-loaded
• df-request-sent
• df-response-received
• df-user-input-entered

• Add more style settings
• Expose messages array
• Add "Typying" animation
• Add support for Dialogflow ES

0.0.1 First release completely operational!

Danyel Cabello, danyel.nerv@gmail.com

This project is based on React Native Gifted Chat

React Native Library Boilerplate is available under the Apache2 license. See the LICENSE file for more info.