charting-library-examples icon indicating copy to clipboard operation
charting-library-examples copied to clipboard

unable to find index.html used in webView example react native

Open muhammadashfaq opened this issue 4 years ago • 2 comments

Checklist Screenshot 2021-06-05 at 12 42 40 AM

`import React, {Component} from 'react'; import {SafeAreaView, Alert} from 'react-native'; import {WebView} from 'react-native-webview';

let html = `

Debug page
<script type="text/javascript" src="./dist/lightweight-charts.standalone.development.js"></script>
<script type="text/javascript">
	function generateData() {
		var res = [];
		var time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
		for (var i = 0; i < 500; ++i) {
			res.push({
				time: time.getTime() / 1000,
				value: i,
			});

			time.setUTCDate(time.getUTCDate() + 1);
		}

		return res;
	}

	var chart = LightweightCharts.createChart(document.getElementById('container'));

	var mainSeries = chart.addLineSeries({
		priceFormat: {
			minMove: 1,
			precision: 0,
		},
	});

	mainSeries.setData(generateData());
</script>
`;

class IOsChart extends Component { jsToInject = tvWidget.onChartReady(function() { tvWidget.chart().onIntervalChanged().subscribe( null, function(interval) { const response = { type: "onIntervalChanged", interval: interval } //window.ReactNativeWebView.postMessage accepts one argument, data, //which will be available on the event object, event.nativeEvent.data. data must be a string. window.ReactNativeWebView.postMessage(JSON.stringify(response)); } ); }); true; // note: this is required, or you'll sometimes get silent failures // (https://github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md);

render() { return ( <SafeAreaView style={{flex: 1}}> <WebView style={{flex: 1}} source={{uri: html}} allowFileAccessFromFileURLs={true} originWhitelist={['*']} injectedJavaScript={this.jsToInject} onMessage={(event) => { const data = JSON.parse(event.nativeEvent.data); if (data.type == 'onIntervalChanged') { Alert.alert( 'onIntervalChanged', 'Interval = ' + data.interval, [{text: 'OK', onPress: () => console.log('OK Pressed')}], {cancelable: true}, ); } }} /> </SafeAreaView> ); } }

const IOsApp = () => { return <IOsChart />; }; module.exports = IOsApp; `

Example is not working ? How to run it ?

muhammadashfaq avatar Jun 04 '21 19:06 muhammadashfaq

Did you do 4th step from https://github.com/tradingview/charting-library-examples/tree/master/react-native#how-to-start---android ?

Copy all files from tradingview/charting_library. The earliest supported version of the Charting Library is 17. If you get 404 then you need to request an access to this repository.

timocov avatar Jun 07 '21 10:06 timocov

Hello muhammadashfaq

Were you able to run? I have the same problem

soia avatar Aug 12 '21 17:08 soia