Is there anyway to use this library in a project which is initialized by Expo & using Typescript template?

Question

Is there anyway to use this library in a project which is initialized by Expo & using Typescript template?

ngmikeng opened this issue 3 years ago · 6 comments

I know this library is deprecated but hope someone has also met the issue.
I tried following the instruction but it doesn't work.

My steps:

Install package by yarn
Create file metro.config.js
Install react-native-webview by yarn
Put some //@ts-ignore in code for ignore type checking
Try with the example code in a component

import React, { useEffect, useState } from "react";
import { View, StyleSheet } from "react-native";
// @ts-ignore
import HighchartsReactNative from "@highcharts/highcharts-react-native";

const Chart: React.FC = () => {
  const [chartOptions, setChartOptions] = useState<any>();

  useEffect(() => {
    let intervalId: NodeJS.Timer;
    const chartOptionsTest = {
      chart: {
        events: {
          load: function () {
            // @ts-ignore
            // set up the updating of the chart each second
            const series = this.series[0];
            intervalId = setInterval(function () {
              const y = Math.random();
              series.addPoint(y, true, true);
            }, 1000);
          }
        }
      },
      series: [{
        data: [1, 2, 3]
      }]
    }
    setChartOptions(chartOptionsTest);

    return () => {
      if (intervalId) {
        clearInterval(intervalId);
      }
    }
  }, [])

  return (
    <View style={styles.container}>
      <HighchartsReactNative
        styles={styles.container}
        options={chartOptions}
      />
    </View>
  )
}

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

export default Chart;

Answer 1 · 2021-09-10T06:26:11.000Z

what is the error?

Answer 2 · 2021-09-14T17:35:59.000Z

what is the error?

The chart doesn't show up although there isn't any error.
I just wonder if there is anyone has used this library with the typescript template which is created by Expo CLI? or it doesn't work because it doesn't support typescript so we can close this issue.

Answer 3 · 2021-09-15T03:44:46.000Z

Can you inspect the webview? maybe there is an error there.

Answer 4 · 2021-09-15T11:00:48.000Z

Sorry, I can't inspect the webview, I've only tested it on a real device which is connected with Expo.

…

On Wed, Sep 15, 2021 at 10:44 AM Horst Leung ***@***.***> wrote: Can you inspect the webview? maybe there is an error there. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#136 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACD7VDZEQAAS2X5L7TN3GLTUCAJDTANCNFSM5C66TKIQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

Answer 5 · 2024-02-29T07:45:48.000Z

Had tough time using the package. So went about custom approach using WebView.

`utils/graph-webview-html.ts`

function graphWebviewHtml(chartOptions: Highcharts.Options): string {
	return `
    <html>
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
            <link rel="preconnect" href="https://fonts.googleapis.com">
            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
            <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
            <script src="https://code.highcharts.com/highcharts.js"></script>
            <script src="https://code.highcharts.com/highcharts-more.js"></script>
            <script src="https://code.highcharts.com/modules/exporting.js"></script>
            <script>
                var chartOptions = ${JSON.stringify(chartOptions)};
                function reviver(key, value) {
                    if (key === 'formatter' && typeof value === 'string') {
                        return new Function('return ' + value)();
                    }
                    return value;
                };
                
                const parsedChartConfig = JSON.parse(JSON.stringify(chartOptions), reviver);
                
                console.debug('chartOptions', chartOptions);
                document.addEventListener("DOMContentLoaded", (event) => {
                    Highcharts.chart('container', parsedChartConfig);    
                });
            </script>
        </head>
        <body>
            <div id="container"></div>
        </body>
    </html>
    `
}

export default graphWebviewHtml

`graphObject.ts`

function buildGraphObject() : Highcharts.Options  {
   return {
       chart: { ... },
       yAxis: {
		title: {
			text: null
		},
		labels: {
			formatter:
				'function () { return "$" + this.axis.defaultLabelFormatter.call(this); }' as unknown as Highcharts.AxisLabelsFormatterCallbackFunction,
		},
	},
	series:  { ... }
}

`HighChartsView.tsx`

export const HighChartView: React.FC<IHighChartViewProps> = ({
	style,
	webViewProps,
	chartOptions,
	onEndLoad,
	useInteractionEnabled = true
}) => {
	const html = useMemo(() => {
		if (isNil(chartOptions)) {
			return ''
		} else return graphWebviewHtml(chartOptions)
	}, [chartOptions])

	return (
		<WebView
			isUserInteractionEnabled={useInteractionEnabled}
			onLoadEnd={onEndLoad}
			originWhitelist={['']}
			style={style}
			source={{ html, baseUrl: 'web/' }}
			javaScriptEnabled={true}
			domStorageEnabled={true}
			scalesPageToFit={true}
			scrollEnabled={false}
			automaticallyAdjustContentInsets={true}
			scaleEnabled={false}
			{...webViewProps}
		/>
	)
}

Answer 6 · 2024-08-02T03:58:39.000Z

Had tough time using the package. So went about custom approach using WebView.

`utils/graph-webview-html.ts`

function graphWebviewHtml(chartOptions: Highcharts.Options): string {
	return `
    <html>
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
            <link rel="preconnect" href="https://fonts.googleapis.com">
            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
            <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
            <script src="https://code.highcharts.com/highcharts.js"></script>
            <script src="https://code.highcharts.com/highcharts-more.js"></script>
            <script src="https://code.highcharts.com/modules/exporting.js"></script>
            <script>
                var chartOptions = ${JSON.stringify(chartOptions)};
                function reviver(key, value) {
                    if (key === 'formatter' && typeof value === 'string') {
                        return new Function('return ' + value)();
                    }
                    return value;
                };
                
                const parsedChartConfig = JSON.parse(JSON.stringify(chartOptions), reviver);
                
                console.debug('chartOptions', chartOptions);
                document.addEventListener("DOMContentLoaded", (event) => {
                    Highcharts.chart('container', parsedChartConfig);    
                });
            </script>
        </head>
        <body>
            <div id="container"></div>
        </body>
    </html>
    `
}

export default graphWebviewHtml

`graphObject.ts`

function buildGraphObject() : Highcharts.Options  {
   return {
       chart: { ... },
       yAxis: {
		title: {
			text: null
		},
		labels: {
			formatter:
				'function () { return "$" + this.axis.defaultLabelFormatter.call(this); }' as unknown as Highcharts.AxisLabelsFormatterCallbackFunction,
		},
	},
	series:  { ... }
}

`HighChartsView.tsx`

export const HighChartView: React.FC<IHighChartViewProps> = ({
	style,
	webViewProps,
	chartOptions,
	onEndLoad,
	useInteractionEnabled = true
}) => {
	const html = useMemo(() => {
		if (isNil(chartOptions)) {
			return ''
		} else return graphWebviewHtml(chartOptions)
	}, [chartOptions])

	return (
		<WebView
			isUserInteractionEnabled={useInteractionEnabled}
			onLoadEnd={onEndLoad}
			originWhitelist={['']}
			style={style}
			source={{ html, baseUrl: 'web/' }}
			javaScriptEnabled={true}
			domStorageEnabled={true}
			scalesPageToFit={true}
			scrollEnabled={false}
			automaticallyAdjustContentInsets={true}
			scaleEnabled={false}
			{...webViewProps}
		/>
	)
}

I'm new here can you make a demo. That will be great. 👍