Data exchange between React Native app and WebView

A project we recently worked on needed some complicated charts. We built those charts using JavaScript library and it worked fine on browsers.

Now we need to build mobile app using React Native and it would take a lot of time to build those charts natively. So we decided to use WebView (Link is not available ) to render the html pages which already displays charts nicely.

React Native comes with WebView component by default. So rendering the html page using WebView was easy. However, once the page is rendered the React Native app could not exchange any data with the web page.

In this blog post we'll discuss how to make React Native app communicate with the pages rendered using WebView with the help of react-native-webview-bridge library.

What is React Native WebView Bridge ?

react-native-webview-bridge is a wrapper on top of React Native's WebView component with some extra features.

First we need to install react-native-webview-bridge package.

1npm install react-native-webview-bridge --save
Copy

Next we need to import the WebView bridge module.

1// ES6
2import WebViewBridge from "react-native-webview-bridge";
3
4// ES5
5let WebViewBridge = require("react-native-webview-bridge");
Copy

Now let's create a basic React component. This component will be responsible for rendering html page using WebView.

1React.createClass({
2  render: function () {
3    return (
4      <WebViewBridge
5        ref="webviewbridge"
6        onBridgeMessage={this.onBridgeMessage.bind(this)}
7        source={{ uri: "https://www.example.com/charts" }}
8      />
9    );
10  },
11});
Copy

After the component is mounted then we will send data to web view.

1componentDidMount() {
2  let chartData = {data: '...'};
3
4  // Send this chart data over to web view after 5 seconds.
5  setTimeout(() => {
6    this.refs.webviewbridge.sendToBridge(JSON.stringify(data));
7  }, 5000);
8},
Copy

Next, We will add code to receive data from web view.

1onBridgeMessage: function (webViewData) {
2  let jsonData = JSON.parse(webViewData);
3
4  if (jsonData.success) {
5    Alert.alert(jsonData.message);
6  }
7  console.log('data received', webViewData, jsonData);
8  //.. do some react native stuff when data is received
9}
Copy

At this time code should look something like this.

1React.createClass({
2  componentDidMount() {
3    let chartData = { data: "..." };
4
5    // Send this chart data over to web view after 5 seconds.
6    setTimeout(() => {
7      this.refs.webviewbridge.sendToBridge(JSON.stringify(data));
8    }, 5000);
9  },
10
11  render: function () {
12    return (
13      <WebViewBridge
14        ref="webviewbridge"
15        onBridgeMessage={this.onBridgeMessage.bind(this)}
16        source={{
17          uri: "https://www.example.com/charts",
18        }}
19      />
20    );
21  },
22
23  onBridgeMessage: function (webViewData) {
24    let jsonData = JSON.parse(webViewData);
25
26    if (jsonData.success) {
27      Alert.alert(jsonData.message);
28    }
29    console.log("data received", webViewData, jsonData);
30    //.. do some react native stuff when data is received
31  },
32});
Copy

Okay, We've added all the React Native side of code. We now need to add some JavaScript code on our web page to complete the functionality.

Why do we need to add JavaScript snippet on my web page?

This is a two way data exchange scenario. When our React Native app sends any data, this JavaScript snippet will parse that data and will trigger functions accordingly. We'll also be able to send some data back to React Native app from JavaScript.

The example in the README of WebViewBridge library shows how to inject JavaScript snippet in React component. However, we prefer JavaScript code to be added to web page directly since it provides more control and flexibility.

Coming back to our implementation, Let's now add the snippet in our web page.

1<script>
2 (function () {
3    if (WebViewBridge) {
4
5      // This function gets triggered when data received from React Native app.
6      WebViewBridge.onMessage = function (reactNativeData) {
7
8        // Converts the payload in JSON format.
9        var jsonData = JSON.parse(reactNativeData);
10
11        // Passes data to charts for rendering
12        renderChart(jsonData.data);
13
14        // Data to send from web view to React Native app.
15        var dataToSend = JSON.stringify({success: true, message: 'Data received'});
16
17        // Keep calm and send the data.
18        WebViewBridge.send(dataToSend);
19      };
20    }
21  }())
22</script>
Copy

Done! We've achieved our goal of having a two way communication channel between our React Native app and the web page.

Checkout this link for more examples of how to use WebView Bridge.