I am trying to embed calendly widget into a react native application. The embedding is done and the code works with booking the event functionality also working. However, I am trying to listen the events emitted by the widget, without any success.
This is what my component code looks like. I am trying to use the postMessage method both from the injectedJavascript prop and from the static html that I have, but it's not working at any point.
import React, { useRef, useState } from "react"
import { StyleSheet } from "react-native"
import { WebView } from "react-native-webview"
function isCalendlyEvent(e) {
return e.data.event &&
e.data.event.indexOf("calendly") === 0
}
const BookAppointment = ({ navigation }) => {
const webViewRef = useRef(null)
const source = {
html: `
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<div class="calendly-inline-widget" style="min-width:320px;height:100%;" data-auto-load="false" id="myHeader">
</div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
<script>
Calendly.initInlineWidget({
"parentElement": document.getElementById('myHeader'),
"url": 'https://calendly.com/taranathchimbili/doctor-appointment',
"prefill": {
"name": "John Doe",
"email": "[email protected]",
}
});
window.ReactNativeWebView.postMessage({"some": "something"});
window.addEventListener("message", function(event) {
window.ReactNativeWebView.postMessage(event);
});
true;
</script>`
}
const onMessage = (event) => {
console.log("event", event)
}
return (
<WebView
injectedJavaScriptForMainFrameOnly={true}
ref={(ref) => (webViewRef.current = ref)}
originWhitelist={["*"]}
source={source}
startInLoadingState={true}
renderLoading={() => <Loading text={"Loading..."} />}
onMessage={onMessage}
injectedJavaScript='
window.addEventListener("message", function(event) {
window.ReactNativeWebView.postMessage(event);
});
true;
'
/>
)
export default BookAppointment
These are the reference links -
The postMessage method only accepts strings:
window.ReactNativeWebView.postMessage(JSON.stringify(event.data));