Chart Not Rendering on iOS and Android

[userkpkpuser]

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]

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]

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]

And for me running it on Android results in:

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

[ssuchanowski]

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]

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

[loncardom]

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]

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

[ssuchanowski]

XCode 10.1 and 10.2.1 Android Studio 3.4.1

[sebastianbochan]

I did steps:

1. Clone repo of wrapper
2. run yarn
3. run in expo, all works properly
4. call expo eject to have correct ios and android native apps
5. 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]

Try non expo project

[sebastianbochan]

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

[SaeedZhiany]

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

[sebastianbochan]

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

[ssuchanowski]

How is this going?

[Seshpenguin]

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]

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]

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

@sebastianbochan any update here?

[sebastianbochan]

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:

• https://github.com/highcharts/highcharts-react-native/issues/8

[ms042087]

Mine showing a blank page. Any update on this?

[sebastianbochan]

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

[ms042087]

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

1. 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'

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

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

Hope it helps.

[sebastianbochan]

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:

• https://github.com/react-native-community/react-native-webview/issues/428
• https://github.com/expo/expo/issues/5088

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]

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

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]

@sebastianbochan yes it works for me

[sebastianbochan]

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

[BabishanM]

Hi @sebastianbochan ,

Current from branch 'beta-webview', I am getting white screen.

In order to fix this issue, Do I need to follow @ms042087 steps? I tried but unfortunately it is not working. I ran the code in debug mode.

Am i missing something?

[ms042087]

Hi @BabishanM, Have you put the files (i.e. Folder: highcharts-layout and highcharts-files) to android/app/src/main/assets and /ios?

[BabishanM]

Hi @ms042087 , yes I did. I copied both the folders(i.e. Folder: highcharts-layout and highcharts-files).

//Android

//ios

Do i need to copy only the files present inside both the folder?

P.S i ran my project in debug mode

Sorry about the green image. Company policy

[leonascimento]

@sebastianbochan after to create a simple project and to install your branch through npm install --save highcharts/highcharts-react-native#beta-webview.

Enviroment:

expo version: 33 SDK version node: v10.13.0 npm: 6.4.1 OS: macOS Mojave 10.14.5 Android version: 9

I tried an example from the readme and this is not working yet.

[Jessica7]

I had the same problem as well :(

[sebastianbochan]

@ms042087, Are you able to reproduce the problem?

@Jessica7 @leonascimento which version of RN / android you have? Loading modules from CDN will be a solution for you ?

[leonascimento]

@sebastianbochan I'm using the 33 SDK expo version that uses React Native 0.59.8.

Maybe will be a great solution.

[ms042087]

Hi everyone @Jessica7 @leonascimento @leonascimento @sebastianbochan , could you please try the below HighchartsReactNative.js? I am using React native 0.59.1. https://github.com/ms042087/tonyho/blob/master/HighchartsReactNative.js

[sebastianbochan]

This version uses not up-to-date webview pack. So after update you will have an error with incorrect packages.

[ms042087]

@sebastianbochan import React from 'react'; import { Text, View, Dimensions, StyleSheet, Platform } from 'react-native'; import { WebView } from 'react-native-webview';

Work for me as well.

I am using react-native-webview@5.8.1

[sebastianbochan]

Are you able to post me your package.json?

[jayanth1234]

Can some one please post the render code of the above output..? Since I am getting the HTML code or snippet in the emulator or mobile. Thanks!! in advance

[sebastianbochan]

@jayanth1234, @ms042087, @leonascimento, @Jessica7

I pushed new version which allows you also load files from CDN (set param useCDN={true}). All is commented in App.js.

Hope that all tests will pass.

Regarding error with non-parsing HTML, its related with mode (I guess, correct me if Im wrong) and known bugs in react-native-webview (See mentioned refs in one of my previous posts).

Unfortunately its not strictly related with wrapper.

Let me know if you came across any problems.

[BabishanM]

Hi @sebastianbochan I am using react-naive 0.60 and it is not working for me, I am getting blank screen

[athenawisdoms]

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

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

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:

• https://github.com/react-native-community/react-native-webview/issues/809

[IgorUsoltsev]

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]

Thank you for the feedback!

[sebastianbochan]

The new version (2.0.2) has been already released.

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

[bestjsguru]

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]

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

[horstleung]

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