Highchart 1.0.2 doesn't rendering in react-native 0.56.0

[marcoaurelioneto]

package.json

{
"name": "SunnyWeather",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.4.1",
"react-native": "0.56.0",
"react-native-highcharts": "^1.0.2"
},
"devDependencies": {
"babel-jest": "23.2.0",
"babel-preset-react-native": "5.0.2",
"jest": "23.3.0",
"react-test-renderer": "16.4.1"
},
"jest": {
"preset": "react-native"
}
}

App.js

/**

• Sample React Native App
• https://github.com/facebook/react-native
• @Format
• @flow
  */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import ChartView from 'react-native-highcharts';

const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component {
render() {
var Highcharts='Highcharts';
var conf={
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {

                    // set up the updating of the chart each second
                    var series = this.series[0];
                    setInterval(function () {
                        var x = (new Date()).getTime(), // current time
                            y = Math.random();
                        series.addPoint([x, y], true, true);
                    }, 1000);
                }
            }
        },
        title: {
            text: 'Live random data'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150
        },
        yAxis: {
            title: {
                text: 'Value'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                    Highcharts.numberFormat(this.y, 2);
            }
        },
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        series: [{
            name: 'Random data',
            data: (function () {
                // generate an array of random data
                var data = [],
                    time = (new Date()).getTime(),
                    i;

                for (i = -19; i <= 0; i += 1) {
                    data.push({
                        x: time + i * 1000,
                        y: Math.random()
                    });
                }
                return data;
            }())
        }]
    };

const options = {
    global: {
        useUTC: false
    },
    lang: {
        decimalPoint: ',',
        thousandsSep: '.'
    }
};
return (
  <View style={styles.container}>
    <Text style={styles.welcome}>Welcome to React Native!</Text>
    <Text style={styles.instructions}>To get started, edit App.js</Text>
    <Text style={styles.instructions}>{instructions}</Text>
    <ChartView javaScriptEnabled={true}

domStorageEnabled={true} style={{height:300}} config={conf} options={options}>

);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
// alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
// textAlign: 'center',
margin: 10,
},
instructions: {
// textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});

Error

Possible Unhandle Promise Rejection (id: 0): Error: Unable to open URL: file///....

[namnhbap]

use this line: originWhitelist={['']}
<ChartView
style={{flex: 1}}
config={config}
options={options}
stock={true}
originWhitelist={['']}
/>

[marcoaurelioneto]

It's working....
Thank you!

[ws7one]

I can't see the webview or the chartview or the chart at all.. I have used the example given here,I have no idea what I have missed. Any help is appreciated

import React, { Component } from 'react';
import {
    View,
    Text,
} from 'react-native';
import ChartView from 'react-native-highcharts';

class App extends Component {
    render() {
        const Highcharts = 'Highcharts';

        const conf = {
            chart: {
                type: 'spline',
                animation: Highcharts.svg, // don't animate in old IE
                marginRight: 10,
                events: {
                    load: function () {

                        // set up the updating of the chart each second
                        const series = this.series[0];
                        setInterval(function () {
                            var x = (new Date()).getTime(), // current time
                                y = Math.random();
                            series.addPoint([x, y], true, true);
                        }, 1000);
                    }
                }
            },
            title: {
                text: 'Live random data'
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150
            },
            yAxis: {
                title: {
                    text: 'Value'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' +
                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                        Highcharts.numberFormat(this.y, 2);
                }
            },
            legend: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            series: [{
                name: 'Random data',
                data: (function () {
                    // generate an array of random data
                    let data = [],
                        time = (new Date()).getTime(),
                        i;

                    for (i = -19; i <= 0; i += 1) {
                        const val = {
                            x: time + i * 1000,
                            y: Math.random()
                        };

                        console.log(val);

                        data.push(val);
                    }
                    return data;
                }())
            }]
        };

        const options = {
            global: {
                useUTC: false
            },
            lang: {
                decimalPoint: ',',
                thousandsSep: '.'
            }
        };

        return (
            <View>
                <Text>Chart</Text>
                <ChartView
                    style={{ height: 500 }}
                    config={conf}
                    options={options}
                    javaScriptEnabled={true}
                    domStorageEnabled={true}>
                </ChartView>
            </View>
        );
    }
}
export default App;

My dependencies

{
  "name": "chartSamples",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-react-native": "^4.0.0",
    "eslint-config-rallycoding": "^3.2.0",
    "react": "16.4.1",
    "react-native": "^0.55.4",
    "react-native-highcharts": "^1.0.2"
  },
  "devDependencies": {
    "babel-jest": "23.4.0",
    "jest": "23.4.0",
    "react-test-renderer": "16.4.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

This is the output

[jonathanbentley]

I am experiencing the same issue (even with the originWhitelist={['']} workaround mentioned above). My ChartView appears as white a box with no actual chart rendered inside.

React Native 0.0.56
React Native Highcharts 1.0.2

[marcoaurelioneto]

In my case, this problem is also happening. Actually I have a data that is updated dynamically and the first time I call the data API I have this same problem, in the second it shows the chart ....

[VicFrolov]

@nguyennam271 Any idea why adding originWhitelist={['']} solves the issue?

[Pradeep119]

use nodeJS 8.11.3 version.

[VicFrolov]

I'm on 9.5.0, why does 8.11.3 fix it?

[Pradeep119]

yes it works for me.and use a device.

[ws7one]

I'm on Node.js 10.6.0. @Pradeep119 Are you sure 8.11.3 will fix it?

[Pradeep119]

yes @ws7one earlier i had older version and used huwawei device. then upgrading to node.js 8.11.3 and after using samsung device, it works for me.

my configurations are,
node.Js : 8.11.3
npm : 5.60
react-native-cli : 2.0.1
react-native: 0.50.3
react-native-highcharts: 1.0.2

[ws7one]

After almost a day, I realised that the react-native-highcharts.js thats supposed to render the html with the scripts in the header tag weren't working properly. Hence the scripts weren't running at all and I am not sure how to catch js errors from inside a webview. Hence the screen was empty because there was nothing to show. After a few iterations I realised, that the script tags mentioned inside head tags which import the libraries of jquery and highcharts and so on, weren't really getting rendered, since they were https. I changed that to http and it started working. Now I am not sure if this is a solution for everyone, but this helped me and to be honest this is not a solution. Still need to find out why http and not https, but for now I am taking a break. With recent issues with RN 0.56.0 and this, seems I have been only finding solutions just to get a basic app up and running. If anybody can find a solution for http/https issue that would fix this completely. Also a reply on how to catch errors inside webview would be quite helpful for further issues with webview.

[n13]

use this line: originWhitelist={['']} <ChartView style={{flex: 1}} config={config} options={options} stock={true} originWhitelist={['']}
/>

This worked for me - boom charts are rendering! Thanks!

[omid2929]

use this line: originWhitelist={['']} <ChartView style={{flex: 1}} config={config} options={options} stock={true} originWhitelist={['']}
/>

This worked for me - boom charts are rendering! Thanks!

This Worked for me as well