Bundle issue: `@highcharts/HighchartsReactNative` does not exist in the Haste about highcharts-react-native HOT 16 CLOSED

check if node_modules\@highcharts\HighchartsReactNative exists
For mine, it is
node_modules\@highcharts\highcharts-react-native
So I change
import HighchartsReactNative from '@highcharts/HighchartsReactNative';
to
import HighchartsReactNative from '@highcharts/highcharts-react-native';

I don't know if it is an appropriate way to do, but no error right now.

from highcharts-react-native.

@fredpinon its not a good option, because the performance will not be good (destroy-chart and create new one is not always efficient. Its the last solutution, if others will fail). I will debug it and will let you know about results.

from highcharts-react-native.

The main repo is demo expo application, but if you need only Highcharts-react-native package, you should clone only the dist folder and then call npm install or yarn.

from highcharts-react-native.

+1

from highcharts-react-native.

I ran yarn add @highcharts/highcharts-react-native in a react-native project and tried to run the below piece of code (which is the first example provided in the readme) and replaced the import with @highcharts/highcharts-react-native as suggested above but nothing draws on the screen. However when cloning the beta-webview branch and running the exact same piece of code I can see the chart.

How do you recommend adding this library to a RN project?

import React from 'react';
import {
    StyleSheet,
    View
} from 'react-native';
import HighchartsReactNative from '@highcharts/highcharts-react-native';

export default class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            chartOptions: {
                series: [{
                    data: [1, 3, 2]
                }]
            }
        };
    }

    render() {
        return (
            <View>
                <HighchartsReactNative
                    styles={styles.container}
                    options={this.state.chartOptions}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#fff',
        justifyContent: 'center'
    }
});

from highcharts-react-native.

@fredpinon I am also getting a blank chart.

Do you know what issue is the beta-webview branch addressing? I am suddenly experiencing blank charts in another expo app that uses a different charting library. That app has been rendering charts properly for months.

from highcharts-react-native.

@fredpinon
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, like you mentioned.

from highcharts-react-native.

@sebastianbochan, thanks for getting back to me. I am doing what you described at the moment to test out the library, very happy with the performance, but I am struggling to update a chart, even when using the readme example shown under optimal way to update. Is it worth opening an issue for this or are you already aware of the problem. I hope to find out why this is happening and maybe open a pr. If you have an idea of when the current changes will be merged in master that would be great to know as well. Cheers! Fred

from highcharts-react-native.

@fredpinon
Hi Fred.
I have problem in updating the chart too.
The chart can be updated successfully using Math.random in the setInterval function in this.state.option, but I can't figure it out how to update the chart using data which is fetched from API.
May I know more about your issue?

from highcharts-react-native.

I was not aware of that, so thank you. Do you call chart.update() with any specific options? Could you post it?

from highcharts-react-native.

@sebastianbochan, I simply copy pasted that example but pressing on the Chart update button did not update it. This seems to be because the new chart options are never injected in the webview. The existing injectedJavaScript prop only runs once when the page loads for the first time. Don't know if that's the best way to fix it but adding that piece of code in componentDidUpdate did update the chart:

this.webView.injectJavaScript(
    `Highcharts.chart("container", ${this.serialize(
        this.props.options,
        true,
    )}); true;`,
);

Glad to open a pr. And possibly another one to add the possibility for the wrapper to accept optional onMessage and onLoadEnd props which it would pass to the WebView. Cheers, Fred

from highcharts-react-native.

The new version (2.0.2) has been already released and update works properly.

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

from highcharts-react-native.

I got this error, I think there is nothing wrong in file path. I'm new to react-native is there anything do I need to take care? Help me resolve this.

from highcharts-react-native.

It is required to add the .hcscript into the asset extensions section of metro.config.js file, or create that file within your project.

You can find more information about setup in our docs here: https://github.com/highcharts/highcharts-react-native#installing

from highcharts-react-native.

Sorry but you should explain better the copy & paste trick. Why is so difficult to show a Little file tree with the minimun requirements to render a chart? Here the oficial tutorial to render a Chart.. https://www.highcharts.com/blog/post/creating-mobile-charts-with-highcharts-react-native/ what a waste of time man.

"It is required to add the .hcscript into the asset extensions section of metro.config.js file, or create that file within your project"
I dont know what the heck that means I don't work for Highcharts neither I want to, just want to render a chart. Is that so dificult to understand?
Learn to write documentation properly o give up guys.

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

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

Where Im supposed to put this???

from highcharts-react-native.

@ManelGonzalez-ops I faced the same problem with HighCharts and it was really frustrating to see generic steps like the ones on the documentation page.
To fix the issue, just create a file named metro.config.js in your project root folder and add the snippet mentioned on the documentation page , i.e. the following code into the file:

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

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

Hope this helps!

from highcharts-react-native.