I'm having trouble updating my WebView values based on user input in React Native. I'm trying to make charts in WebView using D3.js, and the chart displayed is depending on user input. Here is an example of my problem, the HTML times clicked is not being updated. I have tried using .reload() on webview ref also, but this just gives me a blank html instead.

    // @flow
'use strict';
import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Image,
  Text,
  TouchableHighlight,
  WebView
} from 'react-native';

export default class WebViewTest extends Component {

  constructor(props) {
    super(props);
    this.state = {
    timesClicked : 0
  };
  this._onPressButton = this._onPressButton.bind(this);
  this.generateJSCode = this.generateJSCode.bind(this);
  }

  _onPressButton() {
    let timesClicked = this.state.timesClicked++;
    console.log(timesClicked + " Clicked ");
    this.setState({
      timesClicked: this.state.timesClicked++
    });
  }

  generateJSCode() {
    console.log("Times clicked: " + this.state.timesClicked);
    let jsCode = `document.getElementById("content").innerHTML = "HTML Times clicked: ${this.state.timesClicked}";`;
    return jsCode;
  }

  render() {
    let html = `
        <div id="content">
            This is my name
        </div>
    `;

    return (
        <View style={styles.container}>
          <TouchableHighlight onPress={this._onPressButton}>
            <Text>Press me to increase click</Text>
          </TouchableHighlight>
          <Text>React Native times clicked: {this.state.timesClicked}</Text>
            <WebView
                style={styles.webView}
                source={{html : html}}
                injectedJavaScript={this.generateJSCode()}
                javaScriptEnabledAndroid={true}
            >
            </WebView>
        </View>
    );
  }
}

let styles = StyleSheet.create({
container: {
    flex: 1,
    backgroundColor: '#fff',
    margin: 30
},
webView: {
    backgroundColor: '#fff',
    height: 350,
}
});

I'm having trouble updating my WebView values based on user input in React Native. I'm trying to make charts in WebView using D3.js, and the chart displayed is depending on user input. Here is an example of my problem, the HTML times clicked is not being updated. I have tried using .reload() on webview ref also, but this just gives me a blank html instead.

    // @flow
'use strict';
import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Image,
  Text,
  TouchableHighlight,
  WebView
} from 'react-native';

export default class WebViewTest extends Component {

  constructor(props) {
    super(props);
    this.state = {
    timesClicked : 0
  };
  this._onPressButton = this._onPressButton.bind(this);
  this.generateJSCode = this.generateJSCode.bind(this);
  }

  _onPressButton() {
    let timesClicked = this.state.timesClicked++;
    console.log(timesClicked + " Clicked ");
    this.setState({
      timesClicked: this.state.timesClicked++
    });
  }

  generateJSCode() {
    console.log("Times clicked: " + this.state.timesClicked);
    let jsCode = `document.getElementById("content").innerHTML = "HTML Times clicked: ${this.state.timesClicked}";`;
    return jsCode;
  }

  render() {
    let html = `
        <div id="content">
            This is my name
        </div>
    `;

    return (
        <View style={styles.container}>
          <TouchableHighlight onPress={this._onPressButton}>
            <Text>Press me to increase click</Text>
          </TouchableHighlight>
          <Text>React Native times clicked: {this.state.timesClicked}</Text>
            <WebView
                style={styles.webView}
                source={{html : html}}
                injectedJavaScript={this.generateJSCode()}
                javaScriptEnabledAndroid={true}
            >
            </WebView>
        </View>
    );
  }
}

let styles = StyleSheet.create({
container: {
    flex: 1,
    backgroundColor: '#fff',
    margin: 30
},
webView: {
    backgroundColor: '#fff',
    height: 350,
}
});

• javascript
• html
• webview
• react-native

1 Answer 1

I was able to do this using messages instead of injected javascript. I would like to remend people to just use a library such as victory-charts or use react-art to render svg paths instead, as webviews are just not optimal for this type of problem (d3 charts in React Native).

    // @flow
'use strict';
import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Image,
  Text,
  TouchableHighlight,
  WebView
} from 'react-native';

export default class WebViewTest extends Component {

  constructor(props) {
    super(props);
    this.state = {
    timesClicked : 0
  };
  this._onPressButton = this._onPressButton.bind(this);
  }

  _onPressButton() {
    let timesClicked = this.state.timesClicked;
    timesClicked++;
    console.log(timesClicked + " Clicked ");
    this.setState({
      timesClicked: timesClicked
    });
    this.refs.myWebView.postMessage("This is my land times " + timesClicked);
  }

  render() {
    let html = `
        <div id="content">
            This is my name
        </div>
        <script>
          document.addEventListener('message', function(e) {
            document.getElementById("content").innerHTML = e.data;
          });
        </script>
    `;

    return (
        <View style={styles.container}>
          <TouchableHighlight onPress={this._onPressButton}>
            <Text>Press me to increase click</Text>
          </TouchableHighlight>
          <Text>React Native times clicked: {this.state.timesClicked}</Text>
            <WebView
                style={styles.webView}
                source={{html : html}}
                ref="myWebView"
                javaScriptEnabledAndroid={true}
                onMessage={this.onMessage}
            >
            </WebView>
        </View>
    );
  }
}

let styles = StyleSheet.create({
container: {
    flex: 1,
    backgroundColor: '#fff',
    margin: 30
},
webView: {
    backgroundColor: '#fff',
    height: 350,
}
});