Botsquad webview react native demo

App.js

import React, { useRef } from "react";
import { Button, StyleSheet, View } from "react-native";
import { WebView } from "react-native-webview";

const userId = "myuserid";
const botHost = "robin.staging.bsqd.me";

export default function App() {
  const webviewRef = useRef();

  function sendMessage(message) {
    message = message.replace("'", "\\'"); // javascript injectie voorkomen...
    webviewRef.current.injectJavaScript(`ChatScreen.sendMessage('${message}')`);
  }

  function resetConversation() {
    // het geheime bericht ".stop" sturen zorgt ervoor dat je met een schone lei begint na reload
    sendMessage(".stop");
    // laad de webview opnieuw
    webviewRef.current.reload();
  }

  function onMessage(m) {
    let event;
    try {
      event = JSON.parse(m.nativeEvent.data);
    } catch (e) {
      return;
    }

    // console.log("Got chat event:", event);

    // Doe hier iets met event

    if (event.type === "text") {
      // text to speech hier
      console.log("TTS: " + event.payload.message);
    }
  }

  return (
    <View style={styles.container}>
      <WebView
        style={{ flex: 1 }}
        source={{ uri: `https://${botHost}/embed` }}
        ref={webviewRef}
        onLoadEnd={() => {
          setTimeout(() => {
            webviewRef.current.injectJavaScript(`
              const events = ChatScreen.eventDispatcher()
              events.removeAllListeners("chat_event")
              events.addListener("chat_event",  e => window.ReactNativeWebView.postMessage(JSON.stringify(e)))
        `);
          }, 500);
        }}
        onMessage={onMessage}
      />
      <Button
        onPress={() => sendMessage("Hallo daar")}
        title="Send a message"
        color="#841584"
      />
      <Button
        onPress={resetConversation}
        title="New conversation"
        color="#ff9900"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f0f0f0",
    alignItems: "stretch",
    justifyContent: "center",
  },
});