CODEWITHSUNDEEP
react-native
Pansit Wattanaprasobsuk
Pansit Wattanaprasobsuk

Reputation: 301

Integrate Mathquill into React Native by WebView

In WebView I added index.html

<WebView     
   source={{ uri: 'file:///android_asset/index.html' }}    
   startInLoadingState={true}    
   style={{ marginTop: 20, height: 100 }} />

In index.html file

<!DOCTYPE html>
<html>
<header>
    <link rel="stylesheet" href="./mathquill.css" />
    <script src="./jquery.min.js"></script>
    <script src="./mathquill.js"></script>
    <script>
        var MQ = MathQuill.getInterface(2);
    </script>
</header>
<body>
        <span id="problem">ax^2 + bx + c = 0</span>
        <script>
          var problemSpan = document.getElementById('problem');
          MQ.StaticMath(problemSpan);
        </script>
</body>
</html>

I want know how to communicate with WebView to change the text to appear.

Upvotes: 1

Views: 697

Answers (1)

Pansit Wattanaprasobsuk
Pansit Wattanaprasobsuk

Reputation: 301

Found solution.

add this to index.html

  document.addEventListener("message", function(data) {
     ...
  }

change WebView to

  <WebView 
    ref={(webview) => this.webview = webview }
    source={{ uri: 'file:///android_asset/index.html' }}
    startInLoadingState={true}
    style={{ marginTop: 20, height: 100 }}
  />

and to post data by (I tested in componentDidMount)

  componentDidMount() {
    this.webview.postMessage('message')
  }

Upvotes: 1

Related Questions