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

Answer 1

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>
...