charting-library-examples React-native Integration JS API

I’ve successfully integrated an example for React-native.

The global problem is I am not able to integrate the JS API. According to the example, we have an included index.html file which is out of my React-native application. That’s the reason why it’s impossible to send the actual data to the trade chart.

In the case of including the library into my application.

I am getting a page loading error.

Also I’d like to notice that connecting via JS API in web version of React-js was successful.
Thus I'm looking for any solutions for JS API integration with an ability to send data to a trading chart dynamically.

Sep 28 '21 08:09 Profit-tech

That’s the reason why it’s impossible to send the actual data to the trade chart.

Thus I'm looking for any solutions for JS API integration with an ability to send data to a trading chart dynamically.

I don't think that it is impossible because of that. Did you try to implement datafeed so it will request a data from your app rather that requesting it from the network. I think this should work fine.

Sep 28 '21 11:09 timocov

The question is exactly how to implement datafeed in react-native application.

Let’s follow through the example:

Open Example.xcodeproj in Xcode.
Make a right click on AppName and select "Add Files to "AppName"".
Copy all files from https://github.com/tradingview/charting_library/.

As a result added files will include index.html (it describes in tradingview configuration). It displays via the WebView in my application also (your could find it at the screen above).

So. My base question is how to change the data for datafeed in dynamic (relying on user’s actions) if there is no access to index.html file from my React-native application.

Sep 28 '21 13:09 Profit-tech

Hi! Please, check the documentation of React Native WebView

In the example you can see Web-to-Native communication.

Inject javascript

injectedJavaScript={this.jsToInject}

jsToInject

tvWidget.onChartReady(function() {
      tvWidget.chart().onIntervalChanged().subscribe(
          null,
          function(interval) {
              const response = { type: "onIntervalChanged", interval: interval }
              window.ReactNativeWebView.postMessage(JSON.stringify(response));
          }
      );
});

Write a handler for that action

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 }
        );
    }
}}

Now if you want to make Native-to-Web communication you should use injectJavaScript method

import React, { Component } from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';

export default class App extends Component {
 render() {
   const run = `
     document.body.style.backgroundColor = 'blue';
     true;
   `;

   setTimeout(() => {
     this.webref.injectJavaScript(run);
   }, 3000);

   return (
     <View style={{ flex: 1 }}>
       <WebView
         ref={(r) => (this.webref = r)}
         source={{
           uri: 'https://github.com/react-native-webview/react-native-webview',
         }}
       />
     </View>
   );
 }
}