search

TradingPal / react-native-highcharts

📈 Add Highcharts charts to react-native app for IOS and Android
https://github.com/TradingPal/react-native-highcharts
256 stars 158 forks source link

Allow import of highcharts and jquery from local assets #54

Open mobitinker opened 6 years ago

mobitinker commented 6 years ago

Feature: I'm not positive but I think the initial use of a chart requires a time-consuming http request for highcharts.js and jquery.js. I'm guessing load time would be reduced if the scripts can be loaded locally. Perhaps props could be used to pass in the local urls for Android and IOS

Infinity0106 commented 6 years ago

PR are welcome for this I tried it and failed

PvanHengel commented 6 years ago

This is quite easy, but requires you to take a couple of extra steps.

First, is you need to "import RNFS from 'react-native-fs';"

Then in your class get the absolute path to the resources folder eg:

const localPath = ${RNFS.MainBundlePath};

then in your script you simply modify like: ""

This assumes you include the resources in the root. For my projects I typically put the helper JS in a folder such as ./app/resources. The most important part, which I'm not sure how to automate, but someone who knows how the react-native link, or the bundler, would. Is from within your xcode project, you must go to the build phases tab, and in the Copy Bundle Resources section, be sure to include the files. There are other way's you could do this as other suggest using NPM to pull down highcharts, and perhaps include it from the node_modules folder rather than in your project direct. I haven't done that though.

I use the above method for several other libraries, and custom code that we display in webviews, and it works offline as well.

Hope that helps, sorry I haven't had a chance to put it in a pull request, not sure how much help is is cause its just about a one line code change, but it depends on a few other things being done.

ShMcK commented 6 years ago

I may be wrong, but doesn't browser caching store the libraries after the first loading regardless of the connection?

PvanHengel commented 6 years ago

It might but would require a connection on startup. This way also let’s you manage your versions a little better. I’m sure the cache expires, in the end it all depends on your usecase and app user expectations.

novellizator commented 6 years ago

This pull request, once merged, might help. I removed dependency on jQuery. https://github.com/TradingPal/react-native-highcharts/pull/75/files

novellizator commented 6 years ago

now that I think about it, theoretically you don't even need to have the scripts as assets. All you need to do is inject them via https://facebook.github.io/react-native/docs/webview.html#injectjavascript into the webview. Am I missing something?

msevestre commented 6 years ago

@novellizator That would be awesome if this could work without having to rely on assets at all (for jquery and also for highchart).