Two-way communication between iOS Webview App with WKWebView and React App

Recently I was working on a product where I needed to send hardware data to a React JS app by web view IOS app and receive the data from React JS app to IOS App.

Preview:

How it works :

UI will be built on the React JS app and rendered on WebView of the IOS app.

1. With the click of a button (React JS app) send data to the IOS App through WebView
2. With the click on the alert button (IOS app) send data to the React JS through WebView

First, we need to give the bridge name it can be anything. I have given IOS_BRIDGE.

Second, this communication will work on the event. I have created with the name iosEvent.

Sending Data from React JS App to IOS App:

Receiving Data on IOS App from React JS App :

Sending Data from IOS App to React JS :

Receiving Data on React JS App from IOS App :

React js complete code :

IOS WebView complete code :

Complete Code: https://github.com/geek-atif/IOSReactWebview/

If you have any questions or suggestions, please leave them in the comments.

Available on Linkedin, Github, and Instagram