I'm trying to load a Twitter widget inside a WebView
in my React Native app, but it seems that my injected Javascript is not working for some reason.
What I'm doing is loading Twitter script asynchronously (function taken from here), then executing twttr.widgets.load()
function when script is loaded in order to draw the widget.
Is it possible to do it, or am I trying an impossible with default Webview
component?
Here is my code:
render() {
let utils = ' \
function loadScript(src, callback) { \
var s, r, t; \
r = false; \
s = document.createElement("script"); \
s.type = "text/javascript"; \
s.src = src; \
s.onload = s.onreadystatechange = function() { \
if ( !r && (!this.readyState || this.readyState == "complete") ) { \
r = true; \
callback(); \
} \
}; \
t = document.getElementsByTagName("script")[0]; \
t.parentNode.insertBefore(s, t); \
} \
';
let twitter = ' \
loadScript("//platform.twitter.com/widgets.js", function () { \
twttr.widgets.load(); \
}); \
';
let JS = utils + twitter;
let source = '<blockquote class="twitter-tweet" data-lang="es"><p lang="en" dir="ltr">8 TED Talks to inspire projects with kids: <a href="https://twitter.com/TEDTalks/status/758116657638309896">https://twitter.com/TEDTalks/status/758116657638309896</a> <a href="https://twitter.com/TEDTalks/status/758116657638309896">pic.twitter.com/HMmYAeP7Km</a></p>— TED Talks (@TEDTalks) <a href="https://twitter.com/TEDTalks/status/758116657638309896">27 de julio de 2016</a></blockquote>';
return (
<WebView
source={{html: source}}
javaScriptEnabled={true}
injectedJavascript={ JS }
/>
);
}