How to execute Javascript on WebView when clicking a button on React-Native

Question

Let's say I have this View containing a WebView and a Cart button over the WebView

export default class App extends Component<{}> {
  constructor(props){
    super(props);
  }
  render() {
    return (
      <View style={styles.parent}>
          <WebView
            source={{uri: 'https://mywebsite.com'}} style={styles.fullScreen}
            injectedJavaScript={jsCode}
            javaScriptEnabledAndroid={true}
          />
          <View style={styles.floatView}>
            <Button
              title="Cart"
              onPress={toggleCart}
              color="black"
            />
          </View>
      </View>
    );
  }
}

And when the user click on the button I want to execute this function

const toggleCart = function() {
  let jsCode = "app.trigger('toggle:cart');";
  //execute javascript code on webView
}

Is it something possible to do on React-Native?

Thanks

there are many answer for this question on stackoverflow. here is one https://stackoverflow.com/questions/10472839/using-javascript-in-android-webview — Nishant Bhakta, Oct 26 '17 at 14:35

score 5 · Answer 1 · answered Oct 26 '17 at 15:06

5

First get a reference to your webview and then do this:

this.webview.postMessage("Hello from RN");



//to get this data into webview

...
<script>
  document.addEventListener("message", function(data) {
    // call whatever function you need
  });
</script>
...

answered Oct 26 '17 at 15:06

Alexander Vitanov

4,074
2
19
22

This is exactly what I needed, thanks! Just a note for others: The "Hello from RN" will be at data.data in the listener function argument. Instead of function(data), you can use function({data}) to get it directly. https://developer.mozilla.org/en-US/docs/Web/API/Window/message_event – Henrique Bruno Dec 13 '21 at 22:00

score 1 · Answer 2 · answered Oct 26 '17 at 15:13

That one is nice. You can use react-native-webview-bridge

module which provides communication between react natibe code and webview, so you can send a message on click of button.

    const injectScript = `
  (function () {
                    if (WebViewBridge) {

                      WebViewBridge.onMessage = function (message) {
                        if (message === "hello from react-native") {
                          WebViewBridge.send("got the message inside webview");
                        }
                      };

                      WebViewBridge.send("hello from webview");
                    }
                  }());
`;

var Sample2 = React.createClass({
  onBridgeMessage(message){
    const { webviewbridge } = this.refs;

    switch (message) {
      case "hello from webview":
        webviewbridge.sendToBridge("hello from react-native");
        break;
      case "got the message inside webview":
        console.log("we have got a message from webview! yeah");
        break;
    }
  },

  render() {
    return (
      <WebViewBridge
        ref="webviewbridge"
        onBridgeMessage={this.onBridgeMessage.bind(this)}
        injectedJavaScript={injectScript}
        source={{uri: "http://google.com"}}/>
    );
  }
});

Above example explains it clearly and you can use it.

Don't need to use 3rd party package. `WebView` has [`onMessage`](https://facebook.github.io/react-native/docs/webview.html#onmessage) prop — bennygenel, Oct 26 '17 at 16:53
Yes it has, but onMessage prop only help in comm. from webview to RN code. — Prince, Oct 26 '17 at 17:02

score 1 · Answer 3 · answered Mar 29 '19 at 21:22

1

You can simply use the injectJavaScript method.

Give your WebView ref, then when you click the button:

 this.webview.injectJavaScript("<your code here>");

answered Mar 29 '19 at 21:22

Dror Bar

686
2
10
19

How to execute Javascript on WebView when clicking a button on React-Native

3 Answers3