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 to render the html pages which already displays charts nicely.
React Native comes with
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
with the help of
What is React Native WebView Bridge ?
a wrapper on top of React Native’s
WebView component with some extra features.
First we need to install react-native-webview-bridge package.
Next we need to import the
WebView bridge module.
Now let’s create a basic React component.
This component will be responsible for rendering html page using
After the component is mounted then we will send data to web view.
Next, We will add code to receive data from web view.
At this time code should look something like this.
Coming back to our implementation, Let’s now add the snippet in our web page.
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.