Using extracted react-native-webview instead of the webview in RN core

[SaeedZhiany]

Currently, this library is using the RN core's webview component that causes a warning message at runtime.

[SchwSimon]

@sebastianbochan you can use the new postMessage function.

window.ReactNativeWebView.postMessage(data); Here is the the source

[sebastianbochan]

I had a few problems with this solution, but found a little bit different workaround.

[antonkashpor]

@sebastianbochan does it mean on iOS it doesn't work at all? Thanks

[sebastianbochan]

@antonkashpor @taehajoo @leonascimento Good news, I was able to find a solution to communicate between webview and app.

The newest wrapper is available on beta-webview branch.

@SamHoulder committed changes also into dist branch.

Just waiting for the feedback, hope that will work properly ;)

[SchwSimon]

Thanks @sebastianbochan

So now there still is this: https://github.com/highcharts/highcharts-react-native/issues/8#issuecomment-537530226

Referring to the dist-branch 1) "main" in the package.json 2) Error loading page (see image from the comment link above)

[spoorthy25]

@sebastianbochan : Is there any update on issue "WebView has been removed from React Native. It can now be installed and imported from 'react-native-webview' instead of 'react-native'

"

[sebastianbochan]

@spoorthy25, Please check our discussion above about the webview and test the beta version which is also available as the branch.

At this moment we are in testing stage and when the feedback will be posiitive, then I will merge meta into master official release.

[slaci]

I tried both the beta-webview and dist-branch branches on windows + android 10 emulator with react native 0.61.3, but sadly it doesn't work out of the box.

1. In the package.json I have to remove the main key, otherwise I get an error, like @SchwSimon mentioned
2. The next step is to install the webview plugin: yarn add react-native-webview
3. In the source code the html file for the webview is required from file:///android_asset so I had to copy the highcharts-layout and highcharts-files folders to android/app/src/main/assets folder. I haven't seen this mentioned anywhere, but I think this is totally required.
4. Now the sample code should work, but instead of that I get an empty screen. If I change the index.html and rebuild, then the dummy text appears, so the webview loads for sure. But the JS can't load the highcharts lib from the highcharts-files folder (theres no error, just blank screen).

My hackish solution was to copy highcharts.js from highcharts-files folder next to index.html, then put <script src="highcharts.js" /> into the html. Then in the wrapper's js I changed the runFirst variable's content to only Highcharts.chart("container", ${this.serialize(this.props.options)}); and this way the chart works!

So Im pretty sure the dynamic loading of highchart with xhr fails, but I don't know how to debug this, webkit doesn't show any errors, just silently fails.

[sebastianbochan]

Hi @slaci, Regarding to Android, it looks like the issue know form the other thread: https://github.com/highcharts/highcharts-react-native/issues/4. Could you confirm?

[slaci]

Not sure about that thread, very long and messy.

Webview has a prop called allowFileAccessFromFileURLs which seems to be a solution for me. If I put allowFileAccessFromFileURLs={true} into HighchartsReactNative.js's WebView (it already has allowFileAccess, but thats not enought), then the sample highcharts code works for me on android (still need to do the 3 points I mentioned before). The same setup: Pixel Xl 3 Android 10 emulator, react native 0.61.3 without expo.

On ios I get the assetExts error mentioned here: https://github.com/highcharts/highcharts-react-native/issues/8#issuecomment-526582952 WebView cannot load the css and js files from the hmtl file because of this. Not sure if its something to do with the metro bundler (that has an assetExts option) or with the WebView or something else...

[SchwSimon]

@sebastianbochan any updates on when master branch will be updated?

[slaci]

This branch only works on android if you add the allowFileAccessFromFileURLs prop to the webview, but on ios that doesn't help im afraid.

The only way I could make it to work on ios was to inline the highcharts.js (+ modules if needed) and the style.css into the index.html. And my runFirst variable contains only this: Highcharts.chart("container", ${this.serialize(this.props.options)}); true; in the HighchartsReactNative.js. If you dont have true; at the end, then ios will show a warning... return true; does not work, just this true;...

Fusion chart react native wrapper does something similar. They have a build script which inlines the assets automatically on build, maybe worth a look: https://github.com/fusioncharts/react-native-fusioncharts.

[sebastianbochan]

Hi, So I will add the allowFileAccessFromFileURLs param too. Update docs and release the current master branch this week.

[benidel]

Hi @sebastianbochan, I hope you're doing great ! is there any news about the update ? I'm using the library for an ilmportant project and need to know if I should wait for a resolution or find another lib or way to display the charts ?

Kinds :)

[sebastianbochan]

I committed - to beta branch - some changes today and would like to release new version on Monday (25.11) morning (Friday is not good option to release 😄 ).

[sebastianbochan]

The new version (2.0.2) has been already released.

Im closing the ticket, but please reopen if any issues will come again.

[SchwSimon]

@sebastianbochan The Error loading page still occurs.

I use the most basic setup

<HighchartsReactNative
    styles={{}}
    options={{
        series: [{
            data: [1, 2, 3]
        }]
    }} />

Here is more debug output:

'Encountered an error loading page',
  description: 'net::ERR_FILE_NOT_FOUND',
  code: -1,
  canGoForward: false,
  canGoBack: false,
  title: 'Webpage not available',
  loading: false,
  url: 'file:///android_asset/highcharts-layout/index.html',
  target: 113

[sebastianbochan]

Did you run npm install and have you tried move files like I described in Readme?

The current release is the same as beta-version branch.

[kot7kz]

Hello @sebastianbochan

i have updated to 2.0.2, and i'm getting the error "'node_modules/@highcharts/highcharts-react-native/highcharts-files/highcharts.js' cannot be loaded as its extension is not registered in assetExts"

at C:\Users\stron\Desktop\Hex\node_modules\metro\src\Assets.js:356:13

i've tried multiple things including moving the files in readme and deleting that one line of AppEntry but still no success.

[SchwSimon]

@sebastianbochan I properly installed the latest version 2.0.2, yes I read the Readme and FAQ.

I always clean re-build. I tried linking the files in multiple ways, always the same error as mentioned here https://github.com/highcharts/highcharts-react-native/issues/8#issuecomment-558146884. Btw due to a current RN issue I can't run --variant=release instead for release version I directly assemble a release build.

[sebastianbochan]

Does it work without using wrapper?

[SchwSimon]

@sebastianbochan Are you still working on this issue? We are still paying and waiting to finally use this on production..

[sebastianbochan]

Can you use the beta branch too? Does it work or not?

Its really specific case, but will test it tomorrow, again.

[SchwSimon]

@sebastianbochan I have a pretty up to date environment using the default way to init a RN app without expo (see here: React Native CLI Quickstart) or any other special tools or similar.

This is how most rn apps are inited without expo so I would not say that this is a specific case.

[sebastianbochan]

@SchwSimon, I created a temporary project in native react-native (according to your advices) and now Im debugging why loading (by CDN) does not work. If will find a reason, then will focus on loading files from local filesystem.

[sebastianbochan]

@SchwSimon @okanisildur @kot7kz are you able to share your simplified apps which uses our wrapper?

I was able to run with the useCDN / useSSL flags without any problems.

ps. I noticed that when I set flex:1 - webview disappears in the newest 8.0.2 version. ps2. The app is only in RN not in Expo.

[ap050492]

@SchwSimon @okanisildur @kot7kz are you able to share your simplified apps which uses our wrapper?

I was able to run with the useCDN / useSSL flags without any problems.

ps. I noticed that when I set flex:1 - webview disappears in the newest 8.0.2 version. ps2. The app is only in RN not in Expo.

Facing same issue "ERR_FILE_NOT_FOUND", Can you please share sample code

[sebastianbochan]

@ap050492 Created as additional branch here: https://github.com/highcharts/highcharts-react-native/tree/example-demo/example-app/newrnapp

[mrinal-roy]

Hey @sebastianbochan I copied your ditto App.js file. But got this error. Also you can see my package.json side-by-side with same dependencies.

[oillada]

im faceing the issues only in android simulator, ios work fine, im working on a expo app

Encountered an error loading page, Object { "canGoBack": false, "canGoForward": false, "code": -1, "description": "net::ERR_FILE_NOT_FOUND", "loading": false, "target": 1143, "title": "", "url": "file:///android_asset/highcharts-layout/index.html", }

[sebastianbochan]

Have you tried to set correct URL by devPort option?

[michaelmeyers]

I too am getting this error on Android only. Error loading page Domain: Undefined Error Code: -1 Description: net::ERR_FILE_NOT_FOUND

iOS works fine. Not using Expo. In my package.json: "react": "16.9.0", "react-native": "0.61.4", "@highcharts/highcharts-react-native": "2.1.1"

Running on an older device LG-M322. Android 7.0 ChartView styles={styles.container} options={config} useCDN useSSL currently using useCDN and useSSL to make it run on iOS.

[sebastianbochan]

Im debugging the problem and will update you when end of the process.

[sebastianbochan]

Lets keep all informations here: https://github.com/highcharts/highcharts-react-native/issues/51 to avoid duplicates.