Chart not redering in iOS #39
Comments
|
Hi @VictorVilelaDuarte, Do you use debug or production mode? |
|
Same issue solved with useCDN Error: '@highcharts/highcharts-react-native/highcharts-layout/css/styles.css' cannot be loaded as its extension is not registered in assetExts
Error: '@highcharts/highcharts-react-native/highcharts-files/highcharts.js' cannot be loaded as its extension is not registered in assetExts |
|
Probably the highcharts.js and styles files are stored in the wrong path of application. Have you tried to move to local iOS application locations like other users suggested? |
of course ，according this -> https://github.com/highcharts/highcharts-react-native#files-are-not-loaded |
|
Same error |
|
Im getting the same error. Even if I use useCDN the error still appears, but the chart renders. |
|
I was not able to reproduce the issue at this moment, but one of our users reported me also similar problem and solved it by coping files to the right direction.
Can you verify it? Meanwhile Im in touch with our iOS developer, when I will let you know when receive any feedback. |
|
I was able to run with the
ps. I noticed that when I set Are you able to share your simplified apps? |
|
I also have this issue. I can set useCDN and useSSL to true and it works, but still get the following error in metro bundler output.
I also need the charts to be accessible offline. If i don't set useSSL and useCDN the charts are not rendering and i get the following output.
I did test and change the webview source prop to source={{ uri: 'highcharts-layout/index.html' }} as @sebastianbochan commented above. The error disappeared but the chart are still not rendering. |
|
In the slow internet scenarios my network call getting succeeded and chart is appearing blank in some cases so the useCDN isn't a solution for some cases I tried this and it didn't worked for me |
|
@ControlAltDel01 @manohargunduboina-gep do you use expo project or native RN / xCode? |
|
@sebastianbochan xCode |
|
@sebastianbochan Also xCode |
|
@ControlAltDel01 will check your project on Monday and debug the problem. Thank you for the input. |
|
@ControlAltDel01 https://github.com/highcharts/highcharts-react-native#files-are-not-loaded Related topic: #46 @manohargunduboina-gep does the problem appear in android / ios or both? Probably it can be also related with missing metro.config.js. Have you tried to add it ? https://stackoverflow.com/questions/53314515/loading-asset-with-custom-extension-not-working |
|
@sebastianbochan As the title of the issue, I have problem with iOS. I did not set up the repo for android. But I have tried it on android on another repo and it works without any problems. |
|
How about add |
|
@sebastianbochan It used to work in android but currently its not working on either I tried updating my My current
|
|
Right, but still |
|
I tried this earlier and its not working can you suggest any changes
|
|
I did test adding css and js to assetExts like @manohargunduboina-gep I get the following error: Not sure what it means. |
|
@ControlAltDel01 It looks like a problem with bundler but not with wrapper I guess. |
|
@sebastianbochan do you have a minimal working example with and without Expo using bundled files? To me it seems like perhaps it's not possible to bundle js files with the metro bundler and thus it may not be possible to use the dynamic xhr approach in HighchartsReactNative. There are other ways to load assets in at least Expo that may work. Using, for example, https://docs.expo.io/versions/latest/sdk/asset/. Perhaps there's some similar support in clean RN? |
|
@ControlAltDel01 @manohargunduboina-gep One of our users found that the reason of issue is in ... new webview. Ref to webview issue: Solution: Related thread: Could you test in your apps and let us know about results? @J-Zeitler App without expo is available here: https://github.com/highcharts/highcharts-react-native/tree/example-demo |
|
I could run my app with Highcharts getting rendered in |
|
Im debugging the problem and will update you when end of the process. |
|
Regarding to issues with metro, one of our users share his solution for the problem: metro config Related thread: #4 |
I tried this solution but didn't work. I have the highchart's folders on /ios folder but the charts don't load. In android, charts works fine. |
|
@manoharglm does it work for you too? |
|
I'm running on react-native 0.62.0 (no expo) and can't get the chart to show up on IOS. I've added added css to the metro config and am running the latest version of this library(^2.1.2) and node (v14). I've also added the "highcharts-files" and "highcharts-layout" folders to /ios There's nothing special to my chart, so i don't see why it only renders a blank screen. The loader animation is the only thing that briefly shows up: <HighchartsReactNative I went into the the library in my node_modules and hard coded a uri to the webview and it loaded fine, so the issue is with rendering the highchartsLayout |
|
How about using CDN and SSL? It also does not work? |
|
I have the following set and the chart doesn't show: |
^ using these options I had the chart show but I'm still given this error Error: 'node_modules/@highcharts/highcharts-react-native/highcharts-layout/css/styles.css' cannot be loaded as its extension is not registered in assetExts |
Add to your metro.config to solve the css error. How did you get your chart to show? which version of react-native are you running and are you using expo? |
|
bump |
I'm using Expo and I created the module.exports = (async () => {
const {
resolver: { sourceExts, assetExts },
} = await getDefaultConfig();
return {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
resolver: {
sourceExts,
assetExts: [...assetExts, 'css'],
},
};
})();I'm getting the following error message: EDIT: No more error :D |
|
@Niravpatel129 which RN version are you running? were you able to get the charts to appear? Mine are showing a blank screen, where the component should render in the View |
I'm using React Native Expo latest version <HighchartsReactNative
useCDN={true}
useSSL={true}
styles={styles.container}
options={chartOptions}
/>the above is an example of what my chart looks like and yeah it seems to work perfectly minus a issue with landscape mode which may be from webview and not highcharts itself. |
|
I upgraded to ^2.2.1 and the issue seems to have resoled itself |
|
Updating
|
|
I'd like to make a note that the chart I was initially trying to render was also a stock chart. These aren't supported with the highcharts-react-native library. https://www.highcharts.com/forum/viewtopic.php?t=43300 If you need this type of chart in your project, the alternative is: |
|
Update: I cleared my metro cache and it renders the chart now but I still get the error. If you're using That being said, the styles still don't make it through. |
|
@sebastianbochan @kdenz it works fine now in iOS with |
it works. |
|
No progress on using it without |
|
@mrinal-roy-au2 |
|
Any updates on this one? I am still getting the error related to |
|
+1 |
|
We are wokring on that and debugging the problem. Can be related with new versions of modules. Thankfully, we are able to reproduce the problem. I will inform you about progress, when find a reason of issue. |
|
Thanks @sebastianbochan and your team for a good library.
highchartsLayout = (Platform.OS == 'ios') ?
require('../highcharts-layout/index.html') : { uri: (props.devPath || 'file://') + '/android_asset/highcharts-layout/index.html' };--> highchartsLayout = (Platform.OS == 'ios') ?
{ uri: 'Highcharts.bundle/highcharts-layout/index.html' } : { uri: (props.devPath || devPath) + '/android_asset/' + 'Highcharts.bundle/highcharts-layout/index.html' }
--> For android, It required to place |
|
We just finished testing the wrapper and released the beta version which is available here https://github.com/highcharts/highcharts-react-native/tree/beta-3 Any feedback will be really helpful. Please keep in mind, that all packages should be in the latest versions of them. Number of versions are declared also in the |
|
Hi @sebastianbochan with new approach, is the performance as good as old approach? |
|
The most important thing was change the way of loading local (and from CDN) files and fix some small bugs. The performance increase due to non-using simulations of ajax. |
|
The new 3.0 version is released. Im closing this ticket. If you will encounter any problems, please create a new ticket. In this case we will avoid confusing and keep the newest version on track. |
I am using this component in my project Android and iOS.
I already followed the all steps that I read in Read.me, i´m using React-Native 0.61 without Expo.
In Android the component works very well, but in iOS the chart is every a blank space, I tried to use CDN and it worked fine, so I think the problem is when the component try to read the files on /ios
Can someone help me, plese?
The text was updated successfully, but these errors were encountered: