Chart Not Rendering on iOS and Android #4

userkpkpuser · 2019-05-29T06:33:57Z

Hi Team, when we tried to run the sample example provided in Readme file, but the charts are not rendering and there is no error also.

sebastianbochan · 2019-05-29T07:54:52Z

Hi @userkpkpuser,
Please let me know if you use the newest expo / npm etc ?
Is it blank screen or its not builded at all?

ssuchanowski · 2019-06-11T13:17:41Z

When running demo via expo it works but doesn't seem to be showing anything when run normally.

I see also a blank screen, just a white background. Tested with newest npm. Will investigate more.

ssuchanowski · 2019-06-11T13:33:33Z

And for me running it on Android results in:

(this is the blank view that I see on iOS)

ssuchanowski · 2019-06-11T13:57:20Z

After debugging I see that injectedJavaScript is

"\n            var modules = [],\n                moduleCounter = modules.length,\n                hcScript;\n\n            hcScript = document.createElement('script');\n\n            hcScript.setAttribute('src', '../highcharts-files/highcharts.js');\n            hcScript.onload = function() {\n\n                if (moduleCounter === 0) {\n                    \n                Highcharts.chart(\n                'container',\n                {\"series\":[{\"data\":[1,3,2,4]}]},\n                undefined\n           ..."

So I think the path to the lib might be an issue here - didn't check it though.

masiamj · 2019-06-19T00:24:17Z

Same issue here as well. Let us know about any updates! Thanks!

loncardom · 2019-06-19T14:12:00Z

I think this is an issue with WebView, the HighchartsReactNative.js file imports WebView from 'react-native' instead of from 'react-native-webview'. If you change it, the index.html file will render but it's just a blank page (you can check if it's actually rendering by putting an alert in a script tag and checking if it pops up).

This is all on Android - very excited about using Highcharts with React Native!

sebastianbochan · 2019-07-02T13:43:52Z

Hi,
Please let me know which version of xCode (os) and Android studio, do you have?

ssuchanowski · 2019-07-02T15:22:07Z

XCode 10.1 and 10.2.1
Android Studio 3.4.1

sebastianbochan · 2019-07-03T09:45:44Z

I did steps:

Clone repo of wrapper
run yarn
run in expo, all works properly
call expo eject to have correct ios and android native apps
run the project (ios) in xCode and then in simulator

As a result all worked properly (withtout errors which you experienced).

Please correct me if I miss something or did in differant way than you.

ssuchanowski · 2019-07-03T16:07:12Z

Try non expo project

sebastianbochan · 2019-07-04T13:06:14Z

Hi @ssuchanowski,
Are you able to send me your really simple / basic project to reproduce?

SaeedZhiany · 2019-07-23T05:54:04Z

@ssuchanowski
I'm facing this problem too. I create a simple Github repo to reproduce the problem

sebastianbochan · 2019-08-02T09:52:44Z

Hi @SaeedZhiany,
Thank you for demo, will test as soon as possible.

ssuchanowski · 2019-08-16T12:18:40Z

How is this going?

Seshpenguin · 2019-08-16T13:45:53Z

I'm having this issue also with Expo 34, it seems to be broken since Expo 32 (33+ needs to use the WebView exported from 'react-native-webview' community package).

athenawisdoms · 2019-08-26T15:37:25Z

Tried using both Expo SDK 33 and 34 with "@highcharts/highcharts-react-native": "^1.0.0", getting an error

Unable to resolve module @highcharts/HighChartsReactNative from /Users/x/src/foo/index.js: Module @highcharts/HighChartsReactNative does not exist in the Haste module map.

@Seshpenguin Is there a solution to get this package working with Expo 33+ using react-native-webview?

ssuchanowski · 2019-08-26T19:22:04Z

@athenawisdoms that's probably just a caching issue, google this part does not exist in the Haste module map. and you will find a solution quickly.

ssuchanowski · 2019-09-06T08:24:44Z

@sebastianbochan any update here?

sebastianbochan · 2019-09-06T08:42:03Z

Hi @ssuchanowski,
Im prepared the beta-version of wrapper on separate branch (beta-webview). If you will be able to test it, I would be grateful for any feedback.

Related topic:

Using extracted react-native-webview instead of the webview in RN core #8

ms042087 · 2019-09-07T09:49:02Z

Mine showing a blank page. Any update on this?

sebastianbochan · 2019-09-09T11:33:45Z

@ms042087,
Let me know which version of android you have

ms042087 · 2019-09-10T04:30:02Z

@sebastianbochan Android 9.0, compiler compileSdkVersion = 28

Finally get it done.

Blank page or page showing html text are basically due to wrong path or Android debug mode problem. I tried to put a website URL into source, it displayed normally. Therefore, the WebView module should work fine.

Main Problem:
I think it is not possible to put local html file into WebView source in Android debug mode.
Also, the source for WebView uses require() which I think it is for IOS. uri:... should be used for Android. Using require() gives blank page and using uri:... gives html text in Android virtual device.

My Solution:

Change the source to
source = {(Platform.OS == 'ios') ? require('../highcharts-layout/index.html') : { uri: 'file:///android_asset/highcharts-layout/index.html' }}

This changes the source path of the local files based on the platforms.
Remember to import 'Platform' from 'react native'

Put the files (i.e. Folder: highcharts-layout and highcharts-files) to android/app/src/main/assets and /ios
Use release mode instead of debug mode
i.e. run react-native run-android --variant=release

Hope it helps.

sebastianbochan · 2019-09-11T12:46:33Z

Hi @userkpkpuser,
Thank you for the suggestions. When I tested the solution (point 1) I had a problem (blank page) in old Android 6.

Its strickly related with webview problems like:

At this moment, I think that the best solution is adding platform recognizing (like you suggested) + add an option of load files prom CDN instead of local files system.

Points 2 and 3 will be only in docs (for user adaption).

Does it make sense?

ms042087 · 2019-09-20T08:05:51Z

@sebastianbochan
yes, it makes sense to load file from CDN instead of local files system.

I retested my solution and it works for me.
Point 1 + 2 should be done together. Have you put the files to android/app/src/main/assets?
If not works, I think that maybe my solution is not suitable for old version of Android.

sebastianbochan · 2019-09-27T13:05:02Z

Hi @ms042087,
Thank you for really big feedback and advices. I committed your suggestions (and some for iOS) on my beta-webview branch.

Will be really grateful if you will be able to test it too.

ps. if all will work properly I will add CDN and modules options.

ms042087 · 2019-09-27T13:55:27Z

@sebastianbochan
yes it works for me

sebastianbochan · 2019-09-27T14:42:30Z

Thank you for feedback, Im starting to add CDN support and multiple modules.

athenawisdoms · 2019-10-05T17:39:31Z

@sebastianbochan

What is the proper way to install the beta-webview branch in an Expo project?

Tried npm install --save highcharts/highcharts-react-native#beta-webview but getting the error Duplicate module name: react-native after running expo start:

node:43440) UnhandledPromiseRejectionWarning: Error: jest-haste-map: Haste module naming collision:
  Duplicate module name: react-native
  Paths: /Users/x/foo/node_modules/react-native/package.json collides with /Users/x/foo/node_modules/highcharts-react-native/node_modules/react-native/package.json

package.json shows react-native on https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz" and expo v34.0.4.

sebastianbochan · 2019-10-07T12:23:03Z

@BabishanM,
Unfortunately I was not able to reproduce the problem, which android do you have?

@athenawisdoms
I did not publish it in npm, so at this moment I recommend to download beta-webview, and use package by import HighchartsReactNative from path/to/the/beta-webview

sebastianbochan · 2019-10-17T13:38:05Z

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:

[Documentation] Clarify migration path for this.webView.postMessage removal react-native-webview/react-native-webview#809

IgorUsoltsev · 2019-11-18T12:55:52Z

Had the issue with Expo + RN High Charts as well.

And the case was ONLY with published project.

The reason was really funny enough.

https://github.com/highcharts/highcharts-react-native/blob/beta-webview/dist/src/HighchartsReactNative.js#L12 - here guys you use HTTP. As I suppose in the latest versions of iOS Apple could have blocked non secure connections in iFrames (i.e. WebViews). So I just changed it to HTTPS:
const cdnPath = 'https://code.highcharts.com/'; and it worked!

Please give some time to Expo so cache could go on. Hope that will help you!

sebastianbochan · 2019-11-19T09:20:48Z

Thank you for the feedback!

sebastianbochan · 2019-11-25T12:38:59Z

The new version (2.0.2) has been already released.

Im closing the ticket, but please reopen if any issues will come again.

bestjsguru · 2019-11-27T01:55:50Z

Hi @sebastianbochan
I love the react native and I am very interested in your highchart component.
So I am going to use it on my react native cli project but it shows the empty background
react-native: 0.61
react: 16.9
npm: 6.12.1
node: 12.13.1
@highchart/highcharts-react-native: 2.0.2

I tried to use react-native 0.59 for this component but had the same problem
used 1.0.0 version on RN 0.59

sebastianbochan · 2019-12-03T13:21:46Z

@bestjsguru did you run this in Android or iOS? Which version of OS?

horstleung · 2019-12-04T09:35:11Z

@sebastianbochan
I've init a new rn project with the following package.json

  "name": "highcharts",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@highcharts/highcharts-react-native": "^2.0.2",
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-webview": "^7.5.2"
  },
  "devDependencies": {
    "@babel/core": "^7.7.4",
    "@babel/runtime": "^7.7.4",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.9.0",
    "eslint": "^6.7.2",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.57.0",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

Then I receive some error messages in terminal:

Error: 'node_modules/@highcharts/highcharts-react-native/highcharts-files/highcharts.js' cannot be loaded as its extension is not registered in assetExts

After that, I added 'css', 'js to metro as following:

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

const { getDefaultConfig } = require('metro-config')


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

Finally I got this:

Am I missing any installation step?

mrinal-roy · 2020-02-19T12:03:41Z

I am getting this error:
**Encountered an error loading page {"canGoBack": false, "canGoForward": false, "code": -1, "description": "net::ERR_FILE_NOT_FOUND", "loading": false, "target": 18623, "title": "", "url": "file:///android_asset/highcharts-layout/index.html"}**

I am running RN 0.61.5 with android emulator. Please tell me which files to add and where?

oillada · 2020-02-19T17:46:26Z

Same issues here, any help?

georgeCts · 2020-02-19T22:40:15Z

I am getting this error:
**Encountered an error loading page {"canGoBack": false, "canGoForward": false, "code": -1, "description": "net::ERR_FILE_NOT_FOUND", "loading": false, "target": 18623, "title": "", "url": "file:///android_asset/highcharts-layout/index.html"}**

I am running RN 0.61.5 with android emulator. Please tell me which files to add and where?

Same issue :(

nerami · 2020-02-19T22:43:21Z

@sebastianbochan Android 9.0, compiler compileSdkVersion = 28

Finally get it done.

Blank page or page showing html text are basically due to wrong path or Android debug mode problem. I tried to put a website URL into source, it displayed normally. Therefore, the WebView module should work fine.

Main Problem:
I think it is not possible to put local html file into WebView source in Android debug mode.
Also, the source for WebView uses require() which I think it is for IOS. uri:... should be used for Android. Using require() gives blank page and using uri:... gives html text in Android virtual device.

My Solution:

Change the source to
source = {(Platform.OS == 'ios') ? require('../highcharts-layout/index.html') : { uri: 'file:///android_asset/highcharts-layout/index.html' }}

This changes the source path of the local files based on the platforms.
Remember to import 'Platform' from 'react native'

Put the files (i.e. Folder: highcharts-layout and highcharts-files) to android/app/src/main/assets and /ios

Use release mode instead of debug mode
i.e. run react-native run-android --variant=release

Hope it helps.

This worked for me! Thanks!

mustapha-khan · 2020-03-13T07:33:54Z

I am getting this error:
**Encountered an error loading page {"canGoBack": false, "canGoForward": false, "code": -1, "description": "net::ERR_FILE_NOT_FOUND", "loading": false, "target": 18623, "title": "", "url": "file:///android_asset/highcharts-layout/index.html"}**
I am running RN 0.61.5 with android emulator. Please tell me which files to add and where?

Same issue :(

i am having similar issue on using highchart in EXPO application .
getting the error on running app on emulator or physical device : ERR_FILE_NOT_FOUND

the issue seems to be in the source provided to webView in highcharts react native wrapper . i.e:
source={highchartsLayout}

I solved it by using expo-asset-utils to convert my required file into asset in componentdidmount() and used the uri of this asset as source of webView so that my modified HighchartsReactNative.js file looks like :

async componentDidMount() {
try {
const asset = await AssetUtils.resolveAsync(require('../highcharts-layout/index.html'));
this.setState({ asset });
console.log("=- -= CHEK ASSET -= = ", asset)
} catch (error) {
console.log({ error });
}
Dimensions.addEventListener('change', this.onRotate);
}

and in webview using source as :

source={{uri:this.state.asset.localUri}}

using the uri of asset didn't work for me hence using loacalUri

try this and it might help you

sebastianbochan · 2020-03-13T11:41:45Z

Thank you for the suggestion.
Will test it.

sebastianbochan · 2020-03-18T14:41:16Z

@mustapha-khan could you share your simplified working project? When I run the Expo SDK 64, was not able to run it properly in Android.

horstleung · 2020-03-19T08:04:21Z

@sebastianbochan
I've init a new rn project with the following package.json

  "name": "highcharts",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@highcharts/highcharts-react-native": "^2.0.2",
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-webview": "^7.5.2"
  },
  "devDependencies": {
    "@babel/core": "^7.7.4",
    "@babel/runtime": "^7.7.4",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.9.0",
    "eslint": "^6.7.2",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.57.0",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

Then I receive some error messages in terminal:

Error: 'node_modules/@highcharts/highcharts-react-native/highcharts-files/highcharts.js' cannot be loaded as its extension is not registered in assetExts

After that, I added 'css', 'js to metro as following:

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

const { getDefaultConfig } = require('metro-config')


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

Finally I got this:

Am I missing any installation step?

I get it work after changing the metro config file into

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

sebastianbochan · 2020-03-19T09:46:53Z

Big thanks for the hint. Will share it with our users to be ensure that it worked.

ChenRaul · 2020-05-20T07:20:58Z

@sebastianbochan Except for yours Highcharts, actually, that's what you're talking about with using react-native-webview,when the html file import other JS files which will hint xxxx.js cannot be loaded as its extension is not registered in assetExts.if I add ‘js’ into assetExts while it didn't work.
So do you have any other solutions? thanks.

Environment
OS: iPhone
OS version:
"react": "16.11.0",
"react-native": "0.62.2",
react-native-webview : 8.0.0;

samimhakimi · 2020-07-09T09:07:44Z

platforms

How to implement this could you please explain it?

sebastianbochan · 2020-07-15T07:32:33Z

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.

walidbezzaoui · 2020-10-19T19:01:35Z

any progress on this ?

horstleung · 2020-10-20T02:33:41Z

any progress on this ?

3.0 fixed this issue. But 3.0 got another problem with iOS, here is the [hotfix].(#104 (comment)).

ManelGonzalez-ops · 2020-12-07T17:23:04Z

There's not even a working example on the internet with this thing working... hilarious

DamanSoftRadixx · 2023-09-28T10:12:23Z

If any one try to Implement HIChartView in flutter with native code with the help of ( implement class with PlatformView) in flutter . Then make sure during make instance of HIChartView give them layout and background color to HIChartView if background color missing then view not rendered and it will not showing error in log .

sebastianbochan added the pending reply label Jun 7, 2019

sebastianbochan mentioned this issue Jul 3, 2019

Duplicate module name: react-animated #2

Closed

sebastianbochan mentioned this issue Sep 11, 2019

Using extracted react-native-webview instead of the webview in RN core #8

Closed

leonascimento mentioned this issue Oct 29, 2019

Can not use in react-native 0.61.1 #23

Closed

sebastianbochan closed this as completed Nov 25, 2019

v0lume mentioned this issue Jan 30, 2020

No way to load JS files react-native-webview/react-native-webview#1178

Closed

sebastianbochan mentioned this issue Mar 18, 2020

Chart not rendering on Android Simulator using EXPO cli #51

Closed

sebastianbochan mentioned this issue Mar 19, 2020

Chart not redering in iOS #39

Closed

Chart Not Rendering on iOS and Android #4

Chart Not Rendering on iOS and Android #4

Comments

userkpkpuser commented May 29, 2019

sebastianbochan commented May 29, 2019

ssuchanowski commented Jun 11, 2019

ssuchanowski commented Jun 11, 2019

ssuchanowski commented Jun 11, 2019

masiamj commented Jun 19, 2019

loncardom commented Jun 19, 2019

sebastianbochan commented Jul 2, 2019 • edited Loading

ssuchanowski commented Jul 2, 2019 • edited Loading

sebastianbochan commented Jul 3, 2019 • edited Loading

ssuchanowski commented Jul 3, 2019

sebastianbochan commented Jul 4, 2019

SaeedZhiany commented Jul 23, 2019

sebastianbochan commented Aug 2, 2019

ssuchanowski commented Aug 16, 2019

Seshpenguin commented Aug 16, 2019 • edited Loading

athenawisdoms commented Aug 26, 2019

ssuchanowski commented Aug 26, 2019

ssuchanowski commented Sep 6, 2019

sebastianbochan commented Sep 6, 2019

ms042087 commented Sep 7, 2019

sebastianbochan commented Sep 9, 2019 • edited Loading

ms042087 commented Sep 10, 2019

sebastianbochan commented Sep 11, 2019 • edited Loading

ms042087 commented Sep 20, 2019

sebastianbochan commented Sep 27, 2019

ms042087 commented Sep 27, 2019

sebastianbochan commented Sep 27, 2019

athenawisdoms commented Oct 5, 2019 • edited Loading

sebastianbochan commented Oct 7, 2019

sebastianbochan commented Oct 17, 2019

IgorUsoltsev commented Nov 18, 2019

sebastianbochan commented Nov 19, 2019

sebastianbochan commented Nov 25, 2019

bestjsguru commented Nov 27, 2019 • edited Loading

sebastianbochan commented Dec 3, 2019

horstleung commented Dec 4, 2019

mrinal-roy commented Feb 19, 2020

oillada commented Feb 19, 2020

georgeCts commented Feb 19, 2020

nerami commented Feb 19, 2020

mustapha-khan commented Mar 13, 2020

sebastianbochan commented Mar 13, 2020 • edited Loading

sebastianbochan commented Mar 18, 2020

horstleung commented Mar 19, 2020

sebastianbochan commented Mar 19, 2020

ChenRaul commented May 20, 2020 • edited Loading

samimhakimi commented Jul 9, 2020

sebastianbochan commented Jul 15, 2020

walidbezzaoui commented Oct 19, 2020

horstleung commented Oct 20, 2020

ManelGonzalez-ops commented Dec 7, 2020

DamanSoftRadixx commented Sep 28, 2023

sebastianbochan commented Jul 2, 2019 •

edited

Loading

ssuchanowski commented Jul 2, 2019 •

edited

Loading

sebastianbochan commented Jul 3, 2019 •

edited

Loading

Seshpenguin commented Aug 16, 2019 •

edited

Loading

sebastianbochan commented Sep 9, 2019 •

edited

Loading

sebastianbochan commented Sep 11, 2019 •

edited

Loading

athenawisdoms commented Oct 5, 2019 •

edited

Loading

bestjsguru commented Nov 27, 2019 •

edited

Loading

sebastianbochan commented Mar 13, 2020 •

edited

Loading

ChenRaul commented May 20, 2020 •

edited

Loading