Added support of CDN and multiple files.

App.js

@@ -7,15 +7,23 @@ import {
 } from 'react-native';
 import HighchartsReactNative from './dist/src/HighchartsReactNative';
 
+const modules = [
+    //'solid-gauge'
+];
+
 export default class App extends React.Component {
     constructor(props) {
         super(props);
 
         this.state = {
             chartOptions: {
                 series: [{
-                    data: [1, 5, 2]
-                }]
+                    name: 'Speed',
+                    data: [1, 2, 3]
+                }],
+                chart: {
+                    type: 'line'
+                }
             }
         };
     }
@@ -24,9 +32,10 @@ export default class App extends React.Component {
         return (
             <View>
                 <HighchartsReactNative
-
+                    //useCDN={true}
                     styles={styles.container}
                     options={this.state.chartOptions}
+                    //modules={modules}
                 />
             </View>
         );

README.md

@@ -1,5 +1,5 @@
 # Highcharts React Native
-Official minimal [Highcharts](https://www.highcharts.com/) wrapper for React.
+Official minimal [Highcharts](https://www.highcharts.com/) wrapper for React Native.
 
 ## Table of Contents
 1. [Getting started](#getting-started)
@@ -55,7 +55,7 @@ import {
     StyleSheet,
     View
 } from 'react-native';
-import HighchartsReactNative from '@highcharts/HighchartsReactNative';
+import HighchartsReactNative from '@highcharts/highcharts-react-native';
 
 export default class App extends React.Component {
     constructor(props) {
@@ -98,7 +98,7 @@ import {
     StyleSheet,
     View
 } from 'react-native';
-import HighchartsReactNative from '@highcharts/HighchartsReactNative';
+import HighchartsReactNative from '@highcharts/highcharts-react-native';
 
 export default class App extends React.Component {
     constructor(props) {
@@ -154,7 +154,7 @@ import {
     StyleSheet,
     View
 } from 'react-native';
-import HighchartsReactNative from '@highcharts/HighchartsReactNative';
+import HighchartsReactNative from '@highcharts/highcharts-react-native';
 
 const modules = [
     'highcharts-more',
@@ -209,7 +209,7 @@ import {
     View,
     Button
 } from 'react-native';
-import HighchartsReactNative from '@highcharts/HighchartsReactNative';
+import HighchartsReactNative from '@highcharts/highcharts-react-native';
 
 export default class App extends React.Component {
     constructor(props) {
@@ -285,13 +285,17 @@ Available options:
 
 ```jsx
   <HighchartsReact
+    useCDN={false}
     styles={styles}
     options={this.state.chartOptions}
     modules={modules}
     callback={chartCallback}
   />
 ```
 
+### useCDN
+You can define if modules should be loaded from CDN (requires network connection).
+
 ### styles
 You can style your container using JavaScript like in the regular react and react native.
 

dist/src/HighchartsReactNative.js

@@ -9,6 +9,7 @@ import {
 import { WebView } from 'react-native-webview';
 
 const win = Dimensions.get('window');
+const cdnPath = 'http://code.highcharts.com/';
 const path = '../highcharts-files/';
 const highchartsLayout = (Platform.OS == 'ios') ? require('../highcharts-layout/index.html') : { uri: 'file:///android_asset/highcharts-layout/index.html' }
 
@@ -22,7 +23,9 @@ export default class HighchartsReactNative extends React.PureComponent {
         this.state = {
             width: userStyles.width || win.width,
             height: userStyles.height || win.height,
-            chartOptions: this.props.options
+            chartOptions: this.props.options,
+            useCDN: this.props.useCDN || false,
+            modules: this.props.modules && this.props.modules.toString() || []
         };
 
         // catch rotation event
@@ -76,10 +79,16 @@ export default class HighchartsReactNative extends React.PureComponent {
         return serializedOptions;
     }
     render() {
+        const scriptsPath = this.state.useCDN ? cdnPath : path;
         const runFirst = `
            
+           var modulesList = ${JSON.stringify(this.state.modules)};
 
-           function loadDoc() {
+           if (modulesList.length > 0) {
+              modulesList = modulesList.split(',');
+           }
+
+           function loadScripts(file, callback, redraw, isModule) {
 
               var xhttp = new XMLHttpRequest();
               xhttp.onreadystatechange = function() {
@@ -88,16 +97,37 @@ export default class HighchartsReactNative extends React.PureComponent {
                     var hcScript = document.createElement('script');
                     hcScript.innerHTML = this.responseText;
                     document.body.appendChild(hcScript);
-             
-                    Highcharts.chart("container", ${this.serialize(this.props.options)});
+
+                    if (callback) {
+                        callback.call();
+                    }
+
+                    if (redraw) {
+                        Highcharts.chart("container", ${this.serialize(this.props.options)});
+                    }
                 }
               };
-              xhttp.open("GET", "${path}highcharts.js", true);
+              xhttp.open("GET", '${scriptsPath}' + (isModule ? 'modules/' + file : file) + '.js', true);
               xhttp.send();
             }
 
 
-            loadDoc();
+            loadScripts('highcharts', function () {
+                var redraw = modulesList.length > 0 ? false : true;
+
+                loadScripts('highcharts-more', function () {
+                    if (modulesList.length > 0) {
+                        for (var i = 0; i < modulesList.length; i++) {
+                            if (i === (modulesList.length - 1)) {
+                                redraw = true;
+                            } else {
+                                redraw = false;
+                            }
+                            loadScripts(modulesList[i], undefined, redraw, true);
+                        }
+                    }
+                }, redraw);
+            }, false);
         `;
 
         // Create container for the chart
@@ -122,4 +152,4 @@ export default class HighchartsReactNative extends React.PureComponent {
             />
         </View>;
     }
-}
+}