Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
SaeedZhiany opened this issue Jul 23, 2019 · 84 comments
Closed

Comments

@SaeedZhiany
Copy link

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

Screenshot_1563861438

@barunprasad
Copy link

This would throw an error with RN 0.60.x.
Screen Shot 2019-08-01 at 10 08 25 PM

@sebastianbochan
Copy link
Contributor

Hi,
Thank you for reporting about the problem. I will fix it as soon as possible.

@bartvanduinkerken
Copy link

Hi,
Any timeline on this fix?

@sebastianbochan
Copy link
Contributor

Hi @bartvanduinkerken,
At this moment we do not have ETA for it, but will try to update next week.

@bartvanduinkerken
Copy link

Hi @sebastianbochan
That would be great :) thank you for your time

@SachinSharma2018
Copy link

@sebastianbochan Any update in this because of this, we are not able to use this library.

@SchwSimon
Copy link

@sebastianbochan Same here, we need this update please.

@mukeshsharma1201
Copy link

This would throw an error with RN 0.60.x.
Screen Shot 2019-08-01 at 10 08 25 PM

Facing this same issue.

@sebastianbochan
Copy link
Contributor

sebastianbochan commented Aug 29, 2019

Hi,
Im still working on this cause of came acrossing a few problems.

Meantime I prepared a solution which works properly in Expo and iOS. It uses react-native-webview and looks like promising.

Any feedback would be really helpful.

webview_app.zip

@SchwSimon
Copy link

@sebastianbochan
Yes, that's all we need.
As stated here facebook.github.io/react-native/docs/webview
You just need to add this package github.com/react-native-community/react-native-webview
And use the WebView component from this package instead of rn.

Could you push this small update to master please?

@sebastianbochan
Copy link
Contributor

Yes yes I agree, this package is included.

This update is breaking-change, so I would preferer wait for extra feedback from other users.

@mukeshsharma1201
Copy link

mukeshsharma1201 commented Aug 30, 2019

Idk maybe I was not able to install it correctly?
I am getting Error: 'dist/highcharts-files/highcharts.js' cannot be loaded as its extension is not registered in assetExts

::1 - - [30/Aug/2019:12:22:28 +0000] "GET /assets/dist/highcharts-files/highcharts.js HTTP/1.1" 404 - "http://localhost:8081/assets/dist/src/index.html?platform=ios&hash=43e650e85e6de95a8ff51b327c36d25d" "Mozilla/5.0 (iPhone; CPU iPhone OS 12_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148"

...and a blank white screen.

And I am not using expo.

@SchwSimon
Copy link

@sebastianbochan could you please create a branch for this instead of sharing a file?

@mukeshsharma1201
Copy link

@sebastianbochan I have tried using local minified js files with react-native-webview with no luck. This wrapper is much needed. Can you please update on this issue?

@sebastianbochan
Copy link
Contributor

I prepared a beta-release candidate.

Please test the demo, created on separate branch: https://github.com/highcharts/highcharts-react-native/tree/beta-webview

Any feedback will be helpful.

@SchwSimon
Copy link

@sebastianbochan Can you fix these 2 errors in your package.json file please.

"errors": [
    "Missing required field: name",
    "Missing required field: version"
]

@sebastianbochan
Copy link
Contributor

sebastianbochan commented Sep 4, 2019

@SchwSimon

{
  "main": "node_modules/expo/AppEntry.js",
  "name": "@highcharts/highcharts-react-native",
  "version": "1.0.0",
  "license": "SEE LICENSE IN <LICENSE>",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/highcharts/highcharts-react-native-official.git"
  },
  "keywords": [
    "highcharts",
    "highstock",
    "highmaps",
    "react-native"
  ],
  "devDependencies": {
    "eslint": "^5.16.0",
    "eslint-plugin-react": "^7.12.4",
    "react": "^16.4.0",
    "react-addons-test-utils": "^15.6.2",
    "react-dom": "^16.4.0",
    "react-test-renderer": "^16.4.0",
    "react-unit": "^3.0.0"
  },
  "errors": [
    "Missing required field: name",
    "Missing required field: version"
  ]
}

will be correct?

@SchwSimon
Copy link

SchwSimon commented Sep 4, 2019

@sebastianbochan you can remove the "errors" prop, this was just a list of the package.json errors.
So basically "name" and "version" props were missing.

You can also validate your package.json file here: http://package-json-validator.com

@sebastianbochan
Copy link
Contributor

@SchwSimon,
My mistake, I verified the package.json from other branch.

I added missing fields to the new package.json by commit: 16767ea

@SchwSimon
Copy link

SchwSimon commented Sep 5, 2019

@sebastianbochan Thank you, I just tested the branch, I can't bundle anymore.
EDIT: I don't use Expo.

jest-haste-map: Haste module naming collision: react-native
  The following files share their name; please adjust your hasteImpl:
    * <rootDir>\node_modules\react-native\package.json
    * <rootDir>\node_modules\expo\node_modules\react-native\package.json

@sebastianbochan
Copy link
Contributor

@SchwSimon,
The main repo is demo expo application, but if you need only Highcharts-react-native package, you should clone only the dist folder and then call npm install or yarn.

@SchwSimon
Copy link

@sebastianbochan Could you create another branch for the ones not using Expo, so we can properly install the package?

Also note that even in the /dist package, the entry point main still refers to expo "main": "node_modules/expo/AppEntry.js"

@sebastianbochan
Copy link
Contributor

@SchwSimon
Copy link

@sebastianbochan Thank you very much.
Ok so the package installation and bundling is working fine now.
But there is a TypeError, I am using the most basic example:

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

grafik

@sebastianbochan
Copy link
Contributor

@SchwSimon,
Well I was not able to reproduce this error, any ideas how can I do that?

@SchwSimon
Copy link

@sebastianbochan
I think it may be due to your node reference.
On mount you try to access this.webView which does not exist as you try to get the WebView ref by ref={this._webViewRef}

@sebastianbochan
Copy link
Contributor

@SchwSimon,
Will check that, meantime Im working on full-compatiblity with android #4

@markcrockett
Copy link

@sebastianbochan also experiencing this.webView is undefined in DidMount.

this.webView.postMessage(
this.serialize(this.props.options, true)
);

I was able to reproduce by updating chart config stored in state.

@wzhang2
Copy link

wzhang2 commented Sep 13, 2019

do we have an ETA for the fix?

@slaci
Copy link

slaci commented Nov 1, 2019

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
Copy link
Contributor

Hi @slaci,
Regarding to Android, it looks like the issue know form the other thread: #4. Could you confirm?

@slaci
Copy link

slaci commented Nov 5, 2019

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: #8 (comment)
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
Copy link

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

@slaci
Copy link

slaci commented Nov 15, 2019

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
Copy link
Contributor

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

@benidel
Copy link

benidel commented Nov 21, 2019

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
Copy link
Contributor

sebastianbochan commented Nov 21, 2019

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
Copy link
Contributor

The new version (2.0.2) has been already released.

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

@SchwSimon
Copy link

SchwSimon commented Nov 25, 2019

@sebastianbochan The Error loading page still occurs.

grafik

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
Copy link
Contributor

sebastianbochan commented Nov 25, 2019

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
Copy link

kot7kz commented Nov 26, 2019

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
Copy link

SchwSimon commented Nov 27, 2019

@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 #8 (comment).
Btw due to a current RN issue I can't run --variant=release instead for release version I directly assemble a release build.

@sebastianbochan
Copy link
Contributor

Does it work without using wrapper?

@SchwSimon
Copy link

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

@sebastianbochan
Copy link
Contributor

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

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

@SchwSimon
Copy link

@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
Copy link
Contributor

@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
Copy link
Contributor

sebastianbochan commented Jan 15, 2020

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

Zrzut ekranu 2020-01-15 o 12 45 01

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
Copy link

ap050492 commented Feb 17, 2020

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

Zrzut ekranu 2020-01-15 o 12 45 01

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
Copy link
Contributor

@mrinal-roy
Copy link

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.
Screenshot 2020-02-17 at 4 47 58 PM

@oillada
Copy link

oillada commented Feb 19, 2020

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
Copy link
Contributor

Have you tried to set correct URL by devPort option?

@michaelmeyers
Copy link

michaelmeyers commented Mar 16, 2020

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
Copy link
Contributor

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

@sebastianbochan
Copy link
Contributor

Lets keep all informations here: #51 to avoid duplicates.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests