React-native Integration JS API

[Profit-tech]

• 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.

[timocov]

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.

[Profit-tech]

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.

[makedonsky94]

Hi! Please, check the documentation of React Native WebView

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

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

2. 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>
);

} }

[Shai-E]

Did anyone come up with a working solution? Is there anyone who successfully integrated the charts in react native and made it look good on mobile?

[ronbansal]

Any updates on this? I am stuck in the same position

[Xplosive06]

The same here, don't know what to do...

[wakie92]

Same here......