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 stackoverflow.com/questions/10472839/… — Nishant Bhakta
– Nishant Bhakta, Commented Oct 26, 2017 at 14:35

Alexander Vitanov · Accepted Answer · 2017-10-26 15:06:10Z

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, 2017 at 15:06

Alexander Vitanov

4,1602 gold badges22 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Henrique Bruno Over a year ago

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. developer.mozilla.org/en-US/docs/Web/API/Window/message_event

Prince · Accepted Answer · 2017-10-26 15:13:47Z

1

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.

answered Oct 26, 2017 at 15:13

Prince

8516 silver badges11 bronze badges

2 Comments

bennygenel Over a year ago

Don't need to use 3rd party package. WebView has onMessage prop

Prince Over a year ago

Yes it has, but onMessage prop only help in comm. from webview to RN code.

Dror Bar · Accepted Answer · 2019-03-29 21:22:44Z

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, 2019 at 21:22

Dror Bar

7182 gold badges11 silver badges19 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related