Help: How to make the RnCharts example render in a react-native index.ios.js ?

Open esutton opened this issue 9 years ago • 0 comments

I am a javascript and react-native newbie seeking guidance on how to make the RnCharts example render in a react-native index.ios.js.

I pasted and exported the example code into a new file I named RnCharts.js

const GC_HTML = `
  <html>
    <head>
      <script type="text/javascript" src="https://www.google.com/jsapi"></script>
      <script type="text/javascript">
        google.load('visualization', '1.0', {'packages':['corechart']});
        google.setOnLoadCallback(resolve); /* <--- resolve() is called by RNWebViewJSContext */
      </script>
    </head>
    <body><div id="chart_div"></div></body>
  </html>`;

const CHART_JS = `
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Day');
  data.addColumn('number', 'Weight');
  data.addColumn({ type: 'string', role: 'annotation' });
  data.addRows([
      [new Date(2015, 2, 1), 150, '150'],
      [new Date(2015, 2, 2), 152, null],
      [new Date(2015, 2, 3), 146, '146'],
      [new Date(2015, 2, 4), 150, null],
      [new Date(2015, 2, 5), 157, '157'],
      [new Date(2015, 2, 06), 147, null],
      [new Date(2015, 2, 07), 147.5, '147'],
  ]);

  var options = { enableInteractivity: false,
                  legend: {position: 'none'},
                  lineWidth: 3, width:750, height:420,
                  pointShape: 'circle', pointSize: 8,
                  chartArea: { left: 30, width: 690 }, areaOpacity: 0.07,
                  colors: ['#e14c4d'], backgroundColor: { 'fill': '#34343f' },
                  annotations: {
                    textStyle: { fontSize: 26, bold: true, color: '#bbbbbd', auroColor: '#3f3f3f' },
                  },
                  hAxis: {
                    format: 'MMM d',
                    textStyle: {color: '#bbbbbd', fontSize: 16,}, gridlines: { color: 'transparent' },
                  },
                  vAxis: { gridlines: { count: 3, color: '#3f414f' } },
                };

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  chart.draw(data, options);

  resolve(chart.getImageURI()); /* <--- resolve() is called by RNWebViewJSContext */`;

import WebViewJSContext from 'react-native-webview-js-context';

export class RNCharts {
  state: { imageUri: null };

  componentWillMount() {
    WebViewJSContext.createWithHTML(GC_HTML)
      .then(context => {
        this.ctx = context;
        this.loadChart();
      });
  }

  componentWillUnmount() {
    this.ctx && this.ctx.destroy();
  }

  render() {
    return this.state.imageUri ?
      <Image style={{ width: 375, height: 300 }} source={{ uri: this.state.imageUri }} />
      : <View />;
  }

  async loadChart() {
    var imageUri = await this.ctx.evaluateScript(CHART_JS);
    this.setState({ imageUri });
  }
}

What is the synatx to add RNCharts to render?

File: index.ios.js

'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View
} from 'react-native';

import {RNCharts} from "./RNCharts"

class ReactNativeWebviewGChart extends Component {
  render() {
    let chart = new RNCharts();
    return (
      <View style={styles.container}>
        <Text>Google Char Test</Text>
        <View>
        {chart}
        </View>
        <Text>Image should appear above</Text>
      </View>
    );
  }
}

I am excited about the potential of react-native-webview-js-context to allow me to use some of the many non-react-native components available.

Thank you for sharing your work! -Ed

Mar 21 '16 14:03 esutton