Chart not redering in iOS

Question

Chart not redering in iOS

VictorVilelaDuarte opened this issue 5 years ago · 58 comments

VictorVilelaDuarte commented 5 years ago

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?

wrightmk commented 5 years ago

bump

huyhai commented 4 years ago

+1

Answer 1 · 2019-12-27T10:20:34.000Z

Hi @VictorVilelaDuarte,
Thank you for contacting us. Do you receive any errors? Let me know about your version of RN / React / iOS etc.

Do you use debug or production mode?

Answer 2 · 2019-12-27T13:54:31.000Z

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

Answer 3 · 2019-12-28T15:41:07.000Z

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?

Answer 4 · 2019-12-29T10:23:59.000Z

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

Answer 5 · 2019-12-30T06:01:05.000Z

Same error

Answer 6 · 2020-01-09T14:49:19.000Z

Im getting the same error. Even if I use useCDN the error still appears, but the chart renders.

Answer 7 · 2020-01-10T12:18:40.000Z

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.

I've managed to get the library working by adding the highcharts-layout & highcharts-files directories into the Copy Bundles Resources section in Build Phases within Xcode, and changing the webview source prop to source={{ uri: 'highcharts-layout/index.html' }}.

Can you verify it?

Meanwhile Im in touch with our iOS developer, when I will let you know when receive any feedback.

Answer 8 · 2020-01-20T15:28:34.000Z

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.

Are you able to share your simplified apps?

Answer 9 · 2020-01-30T14:51:00.000Z

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.

Error: 'node_modules/@highcharts/highcharts-react-native/highcharts-layout/css/styles.css' cannot be loaded as its extension is not registered in assetExts
at /Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:356:13
at Generator.next ()
at asyncGeneratorStep (/Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:52:24)
at _next (/Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:72:9)
at /Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:77:7
at new Promise ()
at /Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:69:12
at getAsset (/Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:337:20)
at /Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Server.js:992:28
at Generator.next ()
::ffff:192.168.0.101 - - [30/Jan/2020:14:34:55 +0000] "GET /assets/node_modules/@highcharts/highcharts-react-native/highcharts-layout/css/styles.css HTTP/1.1" 404 - "http://192.168.0.111:8081/assets/node_modules/@highcharts/highcharts-react-native/highcharts-layout/index.html?platform=ios&hash=775baec528c94a8295a3828ef8922a40" "Mozilla/5.0 (iPhone; CPU iPhone OS 12_4_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148"

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.

Error: 'node_modules/@highcharts/highcharts-react-native/highcharts-layout/css/styles.css' cannot be loaded as its extension is not registered in assetExts
at /Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:356:13
at Generator.next ()
at asyncGeneratorStep (/Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:52:24)
at _next (/Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:72:9)
at /Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:77:7
at new Promise ()
at /Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:69:12
at getAsset (/Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:337:20)
at /Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Server.js:992:28
at Generator.next ()
::ffff:192.168.0.101 - - [30/Jan/2020:14:39:08 +0000] "GET /assets/node_modules/@highcharts/highcharts-react-native/highcharts-layout/css/styles.css HTTP/1.1" 404 - "http://192.168.0.111:8081/assets/node_modules/@highcharts/highcharts-react-native/highcharts-layout/index.html?platform=ios&hash=775baec528c94a8295a3828ef8922a40" "Mozilla/5.0 (iPhone; CPU iPhone OS 12_4_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148"
Error: 'node_modules/@highcharts/highcharts-react-native/highcharts-files/highcharts.js' cannot be loaded as its extension is not registered in assetExts
at /Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:356:13
at Generator.next ()
at asyncGeneratorStep (/Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:52:24)
at _next (/Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:72:9)
at /Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:77:7
at new Promise ()
at /Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:69:12
at getAsset (/Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:337:20)
at /Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Server.js:992:28
at Generator.next ()
::ffff:192.168.0.101 - - [30/Jan/2020:14:39:08 +0000] "GET /assets/node_modules/@highcharts/highcharts-react-native/highcharts-files/highcharts.js HTTP/1.1" 404 - "http://192.168.0.111:8081/assets/node_modules/@highcharts/highcharts-react-native/highcharts-layout/index.html?platform=ios&hash=775baec528c94a8295a3828ef8922a40" "Mozilla/5.0 (iPhone; CPU iPhone OS 12_4_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148"

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.
My repo is https://github.com/ControlAltDel01/highcharts-react-native-testing

Answer 10 · 2020-02-19T14:43:34.000Z

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

Answer 11 · 2020-02-20T11:14:17.000Z

@ControlAltDel01 @manohargunduboina-gep do you use expo project or native RN / xCode?

Answer 12 · 2020-02-20T11:15:33.000Z

@sebastianbochan xCode

Answer 13 · 2020-02-20T11:29:16.000Z

@sebastianbochan Also xCode

Answer 14 · 2020-02-21T09:24:23.000Z

@ControlAltDel01 will check your project on Monday and debug the problem.

Thank you for the input.

Answer 15 · 2020-02-25T13:08:12.000Z

@ControlAltDel01
It looks like problem with incorrect paths of files in your project. Have you tried to move them to assets/android

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

Answer 16 · 2020-02-25T14:17:00.000Z

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

Answer 17 · 2020-02-25T15:21:56.000Z

How about add metro.config.js ?

Answer 18 · 2020-02-26T07:23:11.000Z

@sebastianbochan It used to work in android but currently its not working on either I tried updating my metro.config.js using extraNodeModules and I didn't got any result

My current metro.config.js

module.exports = { transformer: { getTransformOptions: async () => ({ transform: { experimentalImportSupport: true, inlineRequires: false, }, }), }, };

Answer 19 · 2020-02-26T10:22:40.000Z

Right, but still assetExts is missing there.

Answer 20 · 2020-02-26T11:25:20.000Z

I tried this earlier and its not working can you suggest any changes

const defaultAssetExts = require("metro-config/src/defaults/defaults").assetExts;

module.exports = { transformer: { getTransformOptions: async () => ({ transform: { experimentalImportSupport: true, inlineRequires: false, }, }), }, resolver: { assetExts: [ ...defaultAssetExts, "css", "js" ] } };

Answer 21 · 2020-02-26T12:37:58.000Z

I did test adding css and js to assetExts like @manohargunduboina-gep

const defaultAssetExts = require("metro-config/src/defaults/defaults").assetExts;

module.exports = {
  resolver: {
    assetExts: [
      ...defaultAssetExts,
      "js",
      "css"
    ]
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
};

I get the following error:

2020-02-26 13:31:41.904 [fatal][tid:main] Unhandled JS Exception: undefined is not a function (near '...stry").registerAsset({...')

http://192.168.0.111:8081/index.bundle?platform=ios&dev=true&minify=false:1288:203
loadModuleImplementation@http://192.168.0.111:8081/index.bundle?platform=ios&dev=true&minify=false:271:14
http://192.168.0.111:8081/index.bundle?platform=ios&dev=true&minify=false:1278:31
loadModuleImplementation@http://192.168.0.111:8081/index.bundle?platform=ios&dev=true&minify=false:271:14
guardedLoadModule@http://192.168.0.111:8081/index.bundle?platform=ios&dev=true&minify=false:163:47
global code@http://192.168.0.111:8081/index.bundle?platform=ios&dev=true&minify=false:1297:4

Not sure what it means.

Answer 22 · 2020-02-28T12:53:23.000Z

@ControlAltDel01 It looks like a problem with bundler but not with wrapper I guess.

Answer 23 · 2020-03-03T12:26:52.000Z

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

Answer 24 · 2020-03-05T10:35:10.000Z

@ControlAltDel01 @manohargunduboina-gep

One of our users found that the reason of issue is in ... new webview.

Ref to webview issue:

react-native-webview/react-native-webview#875 (comment)

Solution:
Put a debugger into Webview.ios.js and restart the app.

Related thread:

#48

Could you test in your apps and let us know about results?

@J-Zeitler
When you download the github repo, this is simple expo app.

App without expo is available here: https://github.com/highcharts/highcharts-react-native/tree/example-demo

Answer 25 · 2020-03-16T11:05:21.000Z

I could run my app with Highcharts getting rendered in android. But I am getting error as below in iOS:

Error: 'node_modules/@highcharts/highcharts-react-native/highcharts-layout/css/styles.css' cannot be loaded as its extension is not registered in assetExts
    at /Users/techprescient/Desktop/searchtoiletapp/node_modules/metro/src/Assets.js:356:13
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/techprescient/Desktop/searchtoiletapp/node_modules/metro/src/Assets.js:52:24)
    at _next (/Users/techprescient/Desktop/searchtoiletapp/node_modules/metro/src/Assets.js:72:9)
    at /Users/techprescient/Desktop/searchtoiletapp/node_modules/metro/src/Assets.js:77:7
    at new Promise (<anonymous>)
    at /Users/techprescient/Desktop/searchtoiletapp/node_modules/metro/src/Assets.js:69:12
    at getAsset (/Users/techprescient/Desktop/searchtoiletapp/node_modules/metro/src/Assets.js:337:20)
    at /Users/techprescient/Desktop/searchtoiletapp/node_modules/metro/src/Server.js:992:28
    at Generator.next (<anonymous>)
::1 - - [16/Mar/2020:09:59:33 +0000] "GET /assets/node_modules/@highcharts/highcharts-react-native/highcharts-layout/css/styles.css HTTP/1.1" 404 - "http://localhost:8081/assets/node_modules/@highcharts/highcharts-react-native/highcharts-layout/index.html?platform=ios&hash=775baec528c94a8295a3828ef8922a40" "Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148"
Error: 'node_modules/@highcharts/highcharts-react-native/highcharts-files/highcharts.js' cannot be loaded as its extension is not registered in assetExts
    at /Users/techprescient/Desktop/searchtoiletapp/node_modules/metro/src/Assets.js:356:13
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/techprescient/Desktop/searchtoiletapp/node_modules/metro/src/Assets.js:52:24)
    at _next (/Users/techprescient/Desktop/searchtoiletapp/node_modules/metro/src/Assets.js:72:9)
    at /Users/techprescient/Desktop/searchtoiletapp/node_modules/metro/src/Assets.js:77:7
    at new Promise (<anonymous>)
    at /Users/techprescient/Desktop/searchtoiletapp/node_modules/metro/src/Assets.js:69:12
    at getAsset (/Users/techprescient/Desktop/searchtoiletapp/node_modules/metro/src/Assets.js:337:20)
    at /Users/techprescient/Desktop/searchtoiletapp/node_modules/metro/src/Server.js:992:28
    at Generator.next (<anonymous>)
::1 - - [16/Mar/2020:09:59:33 +0000] "GET /assets/node_modules/@highcharts/highcharts-react-native/highcharts-files/highcharts.js HTTP/1.1" 404 - "http://localhost:8081/assets/node_modules/@highcharts/highcharts-react-native/highcharts-layout/index.html?platform=ios&hash=775baec528c94a8295a3828ef8922a40" "Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148"

Answer 26 · 2020-03-17T13:56:30.000Z

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

Answer 27 · 2020-03-19T09:48:59.000Z

Regarding to issues with metro, one of our users share his solution for the problem:

metro config

module.exports = (async () => {
  const {
      resolver: { sourceExts, assetExts },
  } = await getDefaultConfig()
  return {
      transformer: {
          getTransformOptions: async () => ({
              transform: {
                  experimentalImportSupport: false,
                  inlineRequires: false,
              },
          }),
      },
      resolver: {
        sourceExts,
        assetExts: [...assetExts, 'css'],
      },
  }
})()

Related thread: #4

Answer 28 · 2020-03-27T17:59:42.000Z

Regarding to issues with metro, one of our users share his solution for the problem:

metro config

module.exports = (async () => {
  const {
      resolver: { sourceExts, assetExts },
  } = await getDefaultConfig()
  return {
      transformer: {
          getTransformOptions: async () => ({
              transform: {
                  experimentalImportSupport: false,
                  inlineRequires: false,
              },
          }),
      },
      resolver: {
        sourceExts,
        assetExts: [...assetExts, 'css'],
      },
  }
})()

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.

Answer 29 · 2020-04-01T10:45:36.000Z

For me on iOS, it works with

useCDN={true}
useSSL={true}

But only after I fixed a bug here for onMessage for WebView
onMessage = {this.props.onMessage ? (event) => this.props.onMessage(event.nativeEvent.data) : {} }
The bug is that if you do not pass in onMessage, it defaults to empty object {} instead of empty function ()=>{} which will cause error when the code tries to call it somewhere.
After making {} into ()=>{} it works.

Oh and also add css to resolver.assetExts in metro.config.js

Nevertheless, using it without CDN still causes this metro bundler issue, even after I copied the files to ios folder
Error: 'node_modules/@highcharts/highcharts-react-native/highcharts-files/highcharts.js' cannot be loaded as its extension is not registered in assetExts
To which if I add js to assetExts it'll crash the bundler.

I'm happy to just use the CDN version for now though : )

Answer 30 · 2020-04-03T08:27:07.000Z

Thank you @kdenz. Lets wait for the feedback from other users.

@scabezasiq @manoharglm @mrinal-roy-au2 any comments about the solution?

Answer 31 · 2020-04-03T10:39:39.000Z

Great.. Thanks for the fix @kdenz

Answer 32 · 2020-04-06T09:07:11.000Z

@manoharglm does it work for you too?

Answer 33 · 2020-04-07T14:13:01.000Z

The charts are still not loading without useCDN but as @kdenz mentioned in the comment it'll fix the onMessage issue

Answer 34 · 2020-04-22T21:27:45.000Z

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:

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

Answer 35 · 2020-04-23T08:38:26.000Z

How about using CDN and SSL? It also does not work?

Answer 36 · 2020-04-23T08:47:13.000Z

I have the following set and the chart doesn't show:
useCDN={true}
useSSL={true}

Answer 37 · 2020-04-23T21:35:38.000Z

I have the following set and the chart doesn't show:
useCDN={true}
useSSL={true}

^ 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

Answer 38 · 2020-04-23T22:13:43.000Z

Regarding to issues with metro, one of our users share his solution for the problem:

metro config

module.exports = (async () => {
  const {
      resolver: { sourceExts, assetExts },
  } = await getDefaultConfig()
  return {
      transformer: {
          getTransformOptions: async () => ({
              transform: {
                  experimentalImportSupport: false,
                  inlineRequires: false,
              },
          }),
      },
      resolver: {
        sourceExts,
        assetExts: [...assetExts, 'css'],
      },
  }
})()

Related thread: #4

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?

Answer 39 · 2020-04-30T16:19:44.000Z

Regarding to issues with metro, one of our users share his solution for the problem:

I'm using Expo and I created the metro.config.js file in my root, with the following code:

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:

error getDefaultConfig is not defined. 

ReferenceError: getDefaultConfig is not defined

EDIT:
found the import
was missing:
const { getDefaultConfig } = require('metro-config');

No more error :D

Answer 40 · 2020-04-30T20:59:11.000Z

@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

Answer 41 · 2020-05-04T20:19:55.000Z

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

Answer 42 · 2020-05-04T23:41:07.000Z

I upgraded to ^2.2.1 and the issue seems to have resoled itself

Answer 43 · 2020-05-14T16:26:41.000Z

Updating metro-config.js with the aforementioned code AND adding useCDN and useSSL fixed the error (for me) but nothing is rendered, even though I've got very simple data going in. Additionally, the styles (backgroundColor) are never applied.

...
    const styles = StyleSheet.create({
      container: {
        background: "#000"
      }
    });

    return (
      <HighchartsReactNative
        useCDN={true}
        useSSL={true}
        options={{
          series: [{
            data: [1, 2, 3]
          }]
        }}
        modules={["highcharts-more"]}
        styles={styles.container}
      />
    );

Answer 44 · 2020-05-14T18:30:03.000Z

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:
https://github.com/TradingPal/react-native-highcharts

Answer 45 · 2020-05-14T19:47:52.000Z

Update: I cleared my metro cache and it renders the chart now but I still get the error. If you're using expo, you can simply type shift + r to restart the bundler and clear the cache.

That being said, the styles still don't make it through.

Answer 46 · 2020-05-29T04:54:43.000Z

@sebastianbochan @kdenz it works fine now in iOS with

useCDN={true}
useSSL={true}

Answer 47 · 2020-05-29T04:55:51.000Z

Thank you @kdenz. Lets wait for the feedback from other users.

@scabezasiq @manoharglm @mrinal-roy-au2 any comments about the solution?

it works.
Thanks @kdenz

Answer 48 · 2020-06-02T08:56:00.000Z

No progress on using it without useCDN={true}, i.e. using local files?

Answer 49 · 2020-06-03T07:55:19.000Z

@mrinal-roy-au2
Could you create a quick PR with your changes which solved the problem? I will verify it and merge for other users.

Answer 50 · 2020-06-21T22:50:17.000Z

Any updates on this one? I am still getting the error related to styles.css, tried all the options discussed here, even the metro.config.js technique didn't fix the error.
Thanks

Answer 51 · 2020-07-15T07:32:13.000Z

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.

Answer 52 · 2020-07-23T09:01:26.000Z

Thanks @sebastianbochan and your team for a good library.
I just abled to render chart on iOS with useCDN={false}. The solution worked for the both debug & release configuration. But it required some setups as following:

I created a .bundle file (E.g.: Highcharts.bundle). Then moving two folders: highcharts-layout & highcharts-files into the bundle.
Add the bundle to iOS project.
Update some code in HighchartsReactNative.js

Change highchartsLayout assign statement for loading layout from the bundle instead of module

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' }

Adding more condition (this.status == 0 || this.status == 200) for script request. As status == 200 is for webservice only, for locally, it should be zero.

if (this.readyState == 4 && this.status == 200)

-->

 if (this.readyState == 4 && (this.status == 0 || this.status == 200))

For android, It required to place Highcharts.bundle to android/app/src/main/assets folder

Answer 53 · 2020-07-23T14:09:51.000Z

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 package.json file.

Answer 54 · 2020-07-23T17:01:01.000Z

Hi @sebastianbochan with new approach, is the performance as good as old approach?

Answer 55 · 2020-07-24T07:38:43.000Z

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.

Answer 56 · 2020-08-03T11:59:15.000Z

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.