Unable to pass actual javascript objects to `data`

[chandlervdw]

When trying to render a tooltip, the data API option led me down a rabbit hole into the darkest depths of Mordor.

To render useful info in a tooltip, I need to access information living in my RN code from within the webview. "Ah, the data option looks promising," I said to myself. Boy, was I wrong.

Passing a string worked fine but this doesn't help me because, ultimately, I need to pass an array of objects. But, passing a data object simply gives you [object Object] when trying to reference data or window.data within some helper functions inside of Highchart's webview.

• "Well, if a normal string works, using JSON.parse(data) should work, as well!" Doing so prevented the webview from rendering anything at all. Huh?
• I tried passing data={JSON.stringify({ foo: "bar" })} into <HighchartsReactNative /> and that also prevented the webview from rendering.
• I fudged with HighchartsReactNative.js:108 to no avail.

Finally, I asked myself "What gives?", and submitted this issue.

[sebastianbochan]

Hi @chandlervdw, The problem is more complex and related with issue here: https://github.com/highcharts/highcharts-react-native/issues/79

Im not sure how it should be parsed when i.e you add a data. Could you paste an example?

Its a second example of requiremenet, so I need to check it deeper.

[chandlervdw]

@sebastianbochan it’s as simple as trying to pass an object like this:

<HighchartsReactNative data={{ foo: "bar" }} />

Within the Webview's javascript scope, window.data (or just data) exists as a global variable but the information isn't passed properly. So, data.foo is not accessible and the data global variable simply outputs [object Object] to the console.

Is that clear enough?

[chandlervdw]

@sebastianbochan no word from you for 3 weeks. 😭 This bug is likely going to prevent us from using this library. Is there anything I can do to help push this forward?

[sebastianbochan]

I apologize for late reply, I did not receive notification about your answer.

Now its clear, but we cannot consider it as a bug, but as feature request.

I will try to add this option, next week.

EDIT: According to the official props listing here I do not see the param as "data" which should be available as window.data.

Is it a custom param for the particular version of webview or something?

@chandlervdw

[chandlervdw]

@sebastianbochan thanks for the response and the effort towards this request. But the documentation you referenced is deprecated and isn't the webview library you're using in this project. You're using react-native-webview; the Communicating between JS and Native Guide references a few methods:

React Native -> Web: The injectedJavaScript prop React Native -> Web: The injectJavaScript method Web -> React Native: The postMessage method and onMessage prop

Maybe you want to consider injectJavascript (runs every update), injectedJavaScriptBeforeContentLoaded (runs once before the web page loads for the first time) instead of/in addition to injectedJavascript (runs once after page loads)?

But I don't know if the issue surrounding setting a JSON string as a window global will persist (the main issue I shared here), and so I'm unsure why this is considered an enhancement instead of a bug. Remember, I'm trying to access information living in my RN code from within the webview. The whole premise of your data prop is exactly what I need, it’s just not working properly.

Lastly, it looks like the way you're using postMessage doesn't line up with their documentation because it’s not an actual prop on the Webview. With this library, that method is fired within the injected javascript, i.e. window.ReactNativeWebView.postMessage("Hello!")

[sebastianbochan]

Sorry, my mistake about the docs.

Im using the injectJavascript method, so adding the data param there is really easy to implement.

Summarising: the data kept in props.data should be available in windows.data, right? If yes, I will add it at the beginning of next week (I hope that on Monday).

[aditya1711]

Sorry, my mistake about the docs.

Im using the injectJavascript method, so adding the data param there is really easy to implement.

Summarising: the data kept in props.data should be available in windows.data, right? If yes, I will add it at the beginning of next week (I hope that on Monday).

Is this fixed in the latest release?

[astron97]

Sorry, my mistake about the docs. Im using the injectJavascript method, so adding the data param there is really easy to implement. Summarising: the data kept in props.data should be available in windows.data, right? If yes, I will add it at the beginning of next week (I hope that on Monday).

Is this fixed in the latest release?

@sebastianbochan Any update on this issue would be appreciated. Thanks.

[Denyllon]

Hello @astron97 @aditya1711 @chandlervdw ,

First of all, really apologize for the silence in this topic. I've just took a look on it, and realized it does not work correctly in the new version. Also found the reason, and will fix the data parameter as soon as possible. Please observe the package version looking for the new release, or this issue directly, to get information whether is it already fixed.

Kind regards, and thank you for your patience!