Sending/Getting messages to/from a React Native Webview

Enter react-native-webview-bridge, a JavaScript bridge between your React Native app and a WebView contained inside it:

var WebViewBridge = require('react-native-webview-bridge');

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 Example = React.createClass({
  onBridgeMessage: function (message) {
    const { webviewbridge } = this.refs;
    switch (message) {
      case "hello from webview":
        webviewbridge.sendToBridge("hello from react-native");
      case "got the message inside webview":
        console.log("we have got a message from webview! yeah");
  render: function() {
    return (

module.exports = Example;

React Native Webview with Javascript Bridge →

Related: JockeyJS

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.