Search code examples
javascriptxmltwittersassnativescript

I'm trying to find a way to embed a twitter timeline in my NativeScript app. WebView/HTMLView?

enter image description hereI'm trying to include a section of my NativeScript app that includes a (hopefully) real-time twitter timeline. I can't get any tweets to show.

I'm using NativeScripts 'webview' to bring in some HTML. Twitter uses a tag to embed their timelines. I'm getting some stuff to show, but no tweets. 

-JS-

const Observable = require("tns-core-modules/data/observable").Observable;
const webViewModule = require("tns-core-modules/ui/web-view");

function onNavigatingTo(args) {
    const page = args.object;
    const vm = new Observable();
    // loading the WebView source while providing a HTML code
    vm.set("firstWebViewSRC", "<!DOCTYPE html><html><head><title>MyTitle</title><meta charset='utf-8' /></head><body><a class='twitter-timeline' href='https://twitter.com/RideUTA?ref_src=twsrc%5Etfw'>Tweets by RideUTA</a> <script async src='https://platform.twitter.com/widgets.js' charset='utf-8'></script></body></html>");
    vm.set("resultFirstWebView", "");
    // loading the WebView source from a local file
    vm.set("resultSecondWebView", "");
    page.bindingContext = vm;
}

-XML-

<GridLayout rows="100 50 * 50" columns="*">
    <WebView row="0" col="0" loaded="onFirstWebViewLoaded" src="{{ firstWebViewSRC }}"/>
    <Label row="1" text="{{ resultFirstWebView }}" textWrap="true" />

</GridLayout>

I'd like to have an up to date timeline of a Twitter profile. I'm getting some results, but not tweets.

Solution

  • I have created a playground here. Timeline is loading pefectly fine here. I have tested on real ios device.

    <WebView height="1200px" src="{{firstWebViewSRC}}" />

    and 

    firstWebViewSRC:"<html><head><title>MyTitle</title><meta charset='utf-8' /></head><body><a class='twitter-timeline' href='https://twitter.com/RideUTA?ref_src=twsrc%5Etfw'>Tweets by RideUTA</a> <script async src='https://platform.twitter.com/widgets.js' charset='utf-8'></script></body></html>"

    P.S. I had to remove DOCTYPE from your code.