Comments (84)
This would throw an error with RN 0.60.x.
from highcharts-react-native.
Im getting back to working on it, hope that tomorrow have a fix for mentioned issues.
from highcharts-react-native.
So lets wait for the further feedback until tomorrow or end of this week. If all will be fine, I will merge with the current master.
from highcharts-react-native.
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.
- In the package.json I have to remove the
main
key, otherwise I get an error, like @SchwSimon mentioned - The next step is to install the webview plugin:
yarn add react-native-webview
- In the source code the html file for the webview is required from
file:///android_asset
so I had to copy thehighcharts-layout
andhighcharts-files
folders toandroid/app/src/main/assets
folder. I haven't seen this mentioned anywhere, but I think this is totally required. - 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.
from highcharts-react-native.
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.
from highcharts-react-native.
@SchwSimon
I did it.
Meantiime I also publish new beta-version which supports loading multiple files from file system or CDN (set param useCDN={true}
). All is commented in App.js.
Hope that all tests will pass.
Let me know if you came across any problems.
from highcharts-react-native.
@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 ;)
from highcharts-react-native.
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 😄 ).
from highcharts-react-native.
The new version (2.0.2) has been already released.
Im closing the ticket, but please reopen if any issues will come again.
from highcharts-react-native.
Does it work without using wrapper?
from highcharts-react-native.
Hi,
Thank you for reporting about the problem. I will fix it as soon as possible.
from highcharts-react-native.
Hi @bartvanduinkerken,
At this moment we do not have ETA for it, but will try to update next week.
from highcharts-react-native.
Hi @sebastianbochan
That would be great :) thank you for your time
from highcharts-react-native.
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.
from highcharts-react-native.
@SchwSimon,
Will check that, meantime Im working on full-compatiblity with android #4
from highcharts-react-native.
@sebastianbochan
With your next push, could you also please push a new version to the dist-branch
.
Thank you.
from highcharts-react-native.
Hi @leonascimento,
Https is not correct supported in this solution, so at this moment the only way (which I found) was skip SSL.
Could you elaborate what kind of errors you have? Still html is printed as string ? If yes, did you check this issue:
from highcharts-react-native.
@sebastianbochan I get a bundling error because you added entry point ("main") in the package.json.
It works when I remove it.
Also the component renders this:
from highcharts-react-native.
I am using the beta webview branch and it has solved my blank screen issue. I am having no problems with it. I hope this gets merged to master soon.
from highcharts-react-native.
@sebastianbochan you can use the new postMessage
function.
window.ReactNativeWebView.postMessage(data);
Here is the the source
from highcharts-react-native.
Im debugging the problem and will update you when end of the process.
from highcharts-react-native.
Hi,
Any timeline on this fix?
from highcharts-react-native.
@sebastianbochan Any update in this because of this, we are not able to use this library.
from highcharts-react-native.
@sebastianbochan Same here, we need this update please.
from highcharts-react-native.
Facing this same issue.
from highcharts-react-native.
@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?
from highcharts-react-native.
Yes yes I agree, this package is included.
This update is breaking-change, so I would preferer wait for extra feedback from other users.
from highcharts-react-native.
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.
from highcharts-react-native.
@sebastianbochan could you please create a branch for this instead of sharing a file?
from highcharts-react-native.
@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?
from highcharts-react-native.
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.
from highcharts-react-native.
@sebastianbochan Can you fix these 2 errors in your package.json file please.
"errors": [
"Missing required field: name",
"Missing required field: version"
]
from highcharts-react-native.
{
"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?
from highcharts-react-native.
@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
from highcharts-react-native.
@SchwSimon,
My mistake, I verified the package.json
from other branch.
I added missing fields to the new package.json by commit: 16767ea
from highcharts-react-native.
@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
from highcharts-react-native.
@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
.
from highcharts-react-native.
@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"
from highcharts-react-native.
@SchwSimon
Done https://github.com/highcharts/highcharts-react-native/tree/dist-branch
from highcharts-react-native.
@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]
}]
}} />
from highcharts-react-native.
@SchwSimon,
Well I was not able to reproduce this error, any ideas how can I do that?
from highcharts-react-native.
@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}
from highcharts-react-native.
@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.
from highcharts-react-native.
do we have an ETA for the fix?
from highcharts-react-native.
Hi @wzhang2
We do not have ETA for the fix at this moment.
Our main wrapper developer is our of the office and will be back in next week - he might have more detail for the case.
from highcharts-react-native.
@sebastianbochan Hi I am facing the same issue
"@highcharts/highcharts-react-native": "^1.0.0", "react": "16.8.6", "react-native": "0.60.5", "react-native-webview": "^7.1.0",
When i tried the same with the provided beta-webview branch
To fix the above, I added a condition
if (this.webView) { this.webView.postMessage( this.serialize(this.props.options, true) ); }
To fix it, when i try to pass pass source value with html directly,
source={{ html: <html>...</html>
}}
I am getting white screen(with no error).
Can you please assist on the same, been stuck up on this for more that 1 week.
Thank you
from highcharts-react-native.
Hi @BabishanM ,
Thank you for really big feedback and advices. I committed your suggestions on my beta-webview
branch.
Will be really grateful if you will be able to test it too.
ps. Im waiting for final feedback about Android before final release. (case #4)
from highcharts-react-native.
Thank you for your time to fix this.
Can you let us know when will this be reflecting in master? Like an ETA?
Again thank you.
from highcharts-react-native.
Hi @BabishanM,
On Monday I will ad CDN support and multiple modules, then prepare final beta-release. If all will be correct, I hope that 1 or 2.10 will publish official 2.0 version.
from highcharts-react-native.
It is not working as expected, I am getting blank screen.
I have mentioned about it in issue #4
Did i miss something?
from highcharts-react-native.
@sebastianbochan this is not working yet.
Just a little observation question. Do we need to use https
here?
64eb281#diff-0db2095e1ba25d92a152d80a7f75a71fR12
I saw the CDNs links on this page using https
.
http://code.highcharts.com/
from highcharts-react-native.
@sebastianbochan yes, I'm seeing just HTML printed as a string.
Thank about this link. I will try to import following the tips of this issue.
from highcharts-react-native.
@taehajoo ios or android?
from highcharts-react-native.
@sebastianbochan
Just iOS simulator via Expo. I was getting a blank white screen before using master branch but beta-webview branch fixes the issue.
from highcharts-react-native.
The master-branch is broken, so just looking for good solution, but always is the same problem, that it works in a few scenarios and does not work also in a few.
from highcharts-react-native.
Any updates on this issue? Can you please merge this in master?
from highcharts-react-native.
@sebastianbochan We also really need this, clients are waiting and paying for this service without being able to use it because of the issue.
from highcharts-react-native.
Regarding to update, in the wrapper I used webkit.postmessage and event to cache it. At this moment it was removed from webview and is still developed / reorganized.
Ref:
I can merge it but updates will be broken. Is it fine for you?
from highcharts-react-native.
I had a few problems with this solution, but found a little bit different workaround.
from highcharts-react-native.
@sebastianbochan does it mean on iOS it doesn't work at all?
Thanks
from highcharts-react-native.
Thanks @sebastianbochan
So now there still is this: #8 (comment)
Referring to the dist-branch
- "main" in the package.json
- Error loading page (see image from the comment link above)
from highcharts-react-native.
@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'
"from highcharts-react-native.
@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.
from highcharts-react-native.
Hi @slaci,
Regarding to Android, it looks like the issue know form the other thread: #4. Could you confirm?
from highcharts-react-native.
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...
from highcharts-react-native.
@sebastianbochan any updates on when master branch will be updated?
from highcharts-react-native.
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.
from highcharts-react-native.
Hi,
So I will add the allowFileAccessFromFileURLs
param too. Update docs and release the current master branch this week.
from highcharts-react-native.
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 :)
from highcharts-react-native.
@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
from highcharts-react-native.
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.
from highcharts-react-native.
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.
from highcharts-react-native.
@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.
from highcharts-react-native.
@sebastianbochan Are you still working on this issue? We are still paying and waiting to finally use this on production..
from highcharts-react-native.
Can you use the beta branch too? Does it work or not?
Its really specific case, but will test it tomorrow, again.
from highcharts-react-native.
@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.
from highcharts-react-native.
@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.
from highcharts-react-native.
@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.
from highcharts-react-native.
@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
from highcharts-react-native.
@ap050492
Created as additional branch here: https://github.com/highcharts/highcharts-react-native/tree/example-demo/example-app/newrnapp
from highcharts-react-native.
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",
}
from highcharts-react-native.
Have you tried to set correct URL by devPort option?
from highcharts-react-native.
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.
from highcharts-react-native.
Lets keep all informations here: #51 to avoid duplicates.
from highcharts-react-native.
Related Issues (20)
- Chart is not rendering in Android with hermes enable in react native. HOT 1
- Unable to update series data. HOT 3
- HighChart- When I use useUTC: false then x axis data are not showing properly HOT 6
- onLoad callback function prop HOT 1
- Chart does not render on Samsung Galaxy S20 Ultimate LTE (Android 11)
- App is crashing when chart goes out of screen doing scroll. HOT 6
- ios - non-expo - Failed to fetch script or layout - hcsript count not be read HOT 7
- Boost Module Usage
- On IOS I can only render series with 110670 data points HOT 2
- How do I define custom gauges? HOT 4
- Customize chart loader HOT 3
- App is crashing when chart goes out of screen doing scroll in Android 10. HOT 5
- Library is being used and our app is live HOT 8
- Chart is not rendering after generating apk file and installed on mobile HOT 12
- Can it rotate 3d scatter chart? HOT 1
- Is there anyway to use this library in a project which is initialized by Expo & using Typescript template? HOT 6
- `plotOptions.series.point.events` (event) param doesn't work in production
- The styledMode tru gives only black and dark mode not working HOT 2
- Not able to access the variable inside the formatter
- no news on this package
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from highcharts-react-native.