# React Native WebView Javascript Bridge
This is an attempt to create a Javascript Bridge between React Native and Webview.
> In order for me to port [WebViewJavascriptBridge](https://github.com/marcuswestin/WebViewJavascriptBridge) to React Native, I had to extends WebView component provided by Facebook. I wanted a feature like `send` and `onMessage` to communicate between React-Native Components and Web View content.
## Installation
In order to use this frame work you have to do couple of simple step.
1. run `npm install react-native-webview-bridge`
2. go to `Project Navigator` tab in xcode
3. right click on `Libraries`
4. select `Add Files to ...` option
5. navigate to `node_modules/react-native-webview-bridge` and add `WebViewBridge` folder
6. clean compile to make sure your project can compile and build.
## Usage
In order for WebView's javascript communicates to React-Native, you have to add couple of function into your existing web app.
```html
My Awesome Web App
```
on React Native side, instead of using `WebView` component, use the following one.
```js
var React = require('react-native');
var WebViewBridge = require('react-native-webview-bridge');
var {
Component
} = React;
var WEBVIEW_REF = 'my_webview';
class MyAwesomeView extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
var webviewRef = this.refs[WEBVIEW_REF];
webviewRef.onMessage(function (message) {
console.log("This message coming from web view", message);
setTimeout(function () {
webviewRef.send("Hello from react-native");
}, 1000);
});
}
render() {
return (
);
}
}
```
### WebViewBridge
`WebViewBridge` extends 'WebView' so you can have all the available feature of `WebView`. I have just added 2 methods
#### send(message )
send any message from react-native to `web view`
#### onMessage(callback )
any messages coming from `web view` will invoke callback with an argument message. Message can be any types.
#### eval(value )
it will execute javascript string and eval it inside the `web view`. It is useful if you need to set some global variable before your script is executing. For example set JWT token as a global variable.
### Common Problems
If you are rendering `WebViewBridge` make sure that you also keep registering to the callback.
```js
registerCallback() {
var webViewBridge = this.refs[WEBVIEW_REF];
webViewBridge.onMessage(this.onBridgeMessage.bind(this));
}
```
I used that method inside my component and I keep calling it inside `componentDidUpdate`.
## Thanks
Thanks to @marcuswestin for amazing [WebViewJavascriptBridge](https://github.com/marcuswestin/WebViewJavascriptBridge) library.