npm package: @heryordejy/rn-webview-bridge
Description: React Native WebView Javascript Bridge - updated
Author: Ayodeji Yusuf Oyebode
Latest version: 1.1.4

<!-- ## Please take a look at this [issue](https://github.com/alinz/react-native-webview-bridge/issues/109) first -->

# React Native WebView Javascript Bridge

<!-- I have been testing and reading a lot of way to safely create a bridge between react-native and webview. I'm happy to announced that the wait is over and from **React-Native 0.20 and above**, the bridge is fully functional. -->

## Installation

In order to use this extension, you have to do the following steps:

in your react-native project,
run `npm install @heryordejy/rn-webview-bridge --save`

###### or

run `yarn add @heryordejy/rn-webview-bridge`

### iOS

1. go to xcode's `Project Navigator` tab
<p align="center">
    <img src ="https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/01.png" />
</p>
2. right click on `Libraries`
3. select `Add Files to ...` option
<p align="center">
    <img src ="https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/02.png" />
</p>
4. navigate to `node_modules/@heryordejy/rn-webview-bridge/ios` and add `React-Native-Webview-Bridge.xcodeproj` folder
<p align="center">
    <img src ="https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/03.png" />
</p>
5. on project `Project Navigator` tab, click on your project's name and select Target's name and from there click on `Build Phases`
<p align="center">
    <img src ="https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/04.png" />
</p>
6. expand `Link Binary With Libraries` and click `+` sign to add a new one.
7. select `libReact-Native-Webviwe-Bridge.a` and click `Add` button.
<p align="center">
    <img src ="https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/05.png" />
</p>
8. clean compile to make sure your project can compile and build.

### Android

1. add the following import to `MainApplication.java` (`MainActivity.java` if RN < 0.29) of your application

```java
import com.github.alinz.reactnativewebviewbridge.WebViewBridgePackage;
```

2. add the following code to add the package to ` MainApplication.java`` ( `MainActivity.java` if RN < 0.29)

```java
protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
                new WebViewBridgePackage() //<- this
        );
    }
```

3. add the following codes to your `android/setting.gradle`

> you might have multiple 3rd party libraries, make sure that you don't create multiple include.

```
include ':app', ':@heyordejy/rn-webview-bridge'
project(':@heyordejy/rn-webview-bridge').projectDir = new File(rootProject.projectDir, '../node_modules/rn-webview-bridge/android')
```

4. edit `android/app/build.gradle` and add the following line inside `dependencies`

```
compile project(':@heyordejy/rn-webview-bridge')
```

5. run `react-native run-android` to see if everything is compilable.

## Usage

just import the module with one of your choices way:

** CommonJS style **

```js
var WebViewBridge = require("@heyordejy/rn-webview-bridge");
```

** ES6/ES2015 style **

```js
import WebViewBridge from "@heyordejy/rn-webview-bridge";
```

`WebViewBridge` is an extension of `WebView`. It injects special script into any pages once it loads. Also it extends the functionality of `WebView` by adding 1 new method and 1 new props.

#### sendToBridge(message)

the message must be in string. because this is the only way to send data back and forth between native and webview.

#### onBridgeMessage

this is a prop that needs to be a function. it will be called once a message is received from webview. The type of received message is also in string.

#### allowFileAccessFromFileURLs (Android only)

this is a prop that allows locally loaded pages via file:// to access other file:// resources. Pass-thru to corresponding [setting](<https://developer.android.com/reference/android/webkit/WebSettings.html#setAllowFileAccessFromFileURLs(boolean)>) in WebView. Default is `false` for Android 4.1 and above.

#### allowUniversalAccessFromFileURLs (Android only)

this is a prop that allows locally loaded pages via file:// to access resources in any origin. Pass-thru to corresponding [setting](<https://developer.android.com/reference/android/webkit/WebSettings.html#setAllowUniversalAccessFromFileURLs(boolean)>) in WebView. Default is `false` for Android 4.1 and above.

## Bridge Script

bridge script is a special script which injects into all the webview. It automatically register a global variable called `WebViewBridge`. It has 2 optional methods to implement and one method to send message to native side.

#### send(message)

this method sends a message to native side. the message must be in string type or `onError` method will be called.

#### onMessage

this method needs to be implemented. it will be called once a message arrives from native side. The type of message is in string.

#### onError (iOS only)

this is an error reporting method. It will be called if there is an error happens during sending a message. It receives a error message in string type.

## Notes

> a special bridge script will be injected once the page is going to different URL. So you don't have to manage when it needs to be injected.

> You can still pass your own javascript to be injected into webview. However, Bridge script will be injected first and then your custom script.

## Simple Example

This example can be found in `examples` folder.

```js
const injectScript = `
  (function () {
                    if (WebViewBridge) {

                      WebViewBridge.onMessage = function (message) {
                        if (message === "hello from react-native") {
                          WebViewBridge.send("got the message inside webview");
                        }
                      };
                
                      WebViewBridge.send("hello from webview");
                    }
                  }());
`;

var Sample2 = React.createClass({
  onBridgeMessage(message) {
    const { webviewbridge } = this.refs;

    switch (message) {
      case "hello from webview":
        webviewbridge.sendToBridge("hello from react-native");
        break;
      case "got the message inside webview":
        console.log("we have got a message from webview! yeah");
        break;
    }
  },

  render() {
    return (
      <WebViewBridge
        ref="webviewbridge"
        onBridgeMessage={this.onBridgeMessage.bind(this)}
        injectedJavaScript={injectScript}
        source={{ uri: "http://google.com" }}
      />
    );
  },
});
```