React Native : Pass data to WebView and get data out of WebView

WebViews can be really handy sometimes and they are saviors when it comes to some SVG/Canvas rendering for pretty charts on your mobile app.

Passing data into a webview and sending data is pretty easy in React native if you are in 2017. There are built methods for this. Though every thing can be found at RN Documentation for WebView, but it might just be too much to read. So let me break it down for you.

Sending Data from RN to WebView :

Sending Data to RN from WebView :

Things to take care :

It is preferred to send messages from RN to webview from onLoad function prop of webview. That way you will have your event handler registered and be listening for messages coming in.

If you don’t have

document.addEventListener(“message”, function(data) {
//..
});

registered inside WebView and you send data in, you lose data.

If you happen to find it useful, please share and feel free to comment below with questions. –– have a nice day. :)