Skip to content

Commit cbf19e1

Browse files
committed
Merge branch 'release/v0.16.0'
2 parents f86720e + a432ba6 commit cbf19e1

File tree

64 files changed

+1497
-860
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+1497
-860
lines changed

README.md

Lines changed: 81 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,123 +1,124 @@
11
# React Native WebView Javascript Bridge
2-
This project is inspired by [WebViewJavascriptBridge](https://github.com/marcuswestin/WebViewJavascriptBridge).
2+
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.16 and above**, the bridge is fully functional.
3+
34

4-
> In order for me to extend React-Native's WebView, I had to use `Category` feature objective-c, that would be the simplest and most elegant way by far.
55

66
## Installation
77

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

1010
1. in your react-native project, run `npm install react-native-webview-bridge`
1111
2. go to xcode's `Project Navigator` tab
12+
<p align="center">
13+
<img src ="https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/01.png" />
14+
</p>
1215
3. right click on `Libraries`
1316
4. select `Add Files to ...` option
14-
5. navigate to `node_modules/react-native-webview-bridge` and add `WebViewBridge` folder
15-
6. clean compile to make sure your project can compile and build.
17+
<p align="center">
18+
<img src ="https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/02.png" />
19+
</p>
20+
5. navigate to `node_modules/react-native-webview-bridge/ios` and add `React-Native-Webview-Bridge.xcodeproj` folder
21+
<p align="center">
22+
<img src ="https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/03.png" />
23+
</p>
24+
6. on project `Project Navigator` tab, click on your project's name and select Target's name and from there click on `Build Phases`
25+
<p align="center">
26+
<img src ="https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/04.png" />
27+
</p>
28+
7. expand `Link Binary With Libraries` and click `+` sign to add a new one.
29+
8. select `libReact-Native-Webviwe-Bridge.a` and click `Add` button.
30+
<p align="center">
31+
<img src ="https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/05.png" />
32+
</p>
33+
9. clean compile to make sure your project can compile and build.
1634

1735
## Usage
1836

19-
There is a script which will be injected by this extension to the first page that you load. In order for your webpage to get access to the injected script, you have to use the following function.
20-
21-
```js
22-
function WebViewBridgeReady(cb) {
23-
//checks whether WebViewBirdge exists in global scope.
24-
if (window.WebViewBridge) {
25-
cb(window.WebViewBridge);
26-
return;
27-
}
37+
just import the module with one of your choices way:
2838

29-
function handler() {
30-
//remove the handler from listener since we don't need it anymore
31-
document.removeEventListener('WebViewBridge', handler, false);
32-
//pass the WebViewBridge object to the callback
33-
cb(window.WebViewBridge);
34-
}
39+
** CommonJS style **
3540

36-
//if WebViewBridge doesn't exist in global scope attach itself to document
37-
//event system. Once the code is being injected by extension, the handler will
38-
//be called.
39-
document.addEventListener('WebViewBridge', handler, false);
40-
}
41+
```js
42+
var WebViewBridge = require('react-native-webview-bridge');
4143
```
4244

43-
so now, anywhere in your script in webpage, you can call
45+
** ES6/ES2015 style **
4446

4547
```js
46-
WebViewBridgeReady(function (WebViewBridge) {
47-
//at this time, you should be able to use the injected code here.
48-
});
48+
import WebViewBridge from 'react-native-webview-bridge';
4949
```
5050

51-
`WebViewBridge` exposes 2 methods, `send` and `onMessage`;
51+
`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.
5252

53-
if you want to send a message to `React-Native` component, call the `send` method.
53+
#### sendToBridge(message)
54+
the message must be in string. because this is the only way to send data back and forth between native and webview.
5455

55-
if you want to receive message from `React-Native`, attach a function to `onMessage`.
5656

57-
For Example:
57+
#### onBridgeMessage
58+
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.
5859

59-
```js
60-
WebViewBridgeReady(function (WebViewBridge) {
61-
WebViewBridge.onMessage = function(message) {
62-
console.log('got a message from react-native', message);
63-
};
6460

65-
//sending a message to react-native
66-
WebViewBridge.send("Hello this is me calling from web page");
67-
});
68-
```
61+
## Bridge Script
6962

63+
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.
7064

71-
On React-Native side, you just have to load the `WebViewBridge` component.
65+
#### send(message)
7266

73-
```js
74-
var React = require('react-native');
75-
var WebViewBridge = require('react-native-webview-bridge');
76-
```
67+
this method sends a message to native side. the message must be in string type or `onError` method will be called.
68+
69+
#### onMessage
7770

78-
Since `WebViewBridge` is extending `WebView` component, it behaves exactly as WebView.
79-
What it means that `WebViewBridge` has all the methods and props of `WebView` component.
71+
this method needs to be implemented. it will be called once a message arrives from native side. The type of message is in string.
8072

81-
So here's an example of using `WebViewBridge`,
73+
#### onError
74+
75+
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.
76+
77+
## Notes
78+
79+
> 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.
80+
81+
> You can still pass your own javascript to be injected into webview. However, Bridge script will be injected first and then your custom script.
82+
83+
84+
## Simple Example
85+
This example can be found in `examples` folder.
8286

8387
```js
84-
var React = require('react-native');
85-
var WebViewBridge = require('react-native-webview-bridge');
88+
const injectScript = `
89+
(function () {
90+
if (WebViewBridge) {
8691
87-
var {
88-
Component
89-
} = React;
92+
WebViewBridge.onMessage = function (message) {
93+
alert('got a message from Native: ' + message);
9094
91-
var WEBVIEW_REF = 'my_webview';
95+
WebViewBridge.send("message from webview");
96+
};
9297
93-
class MyAwesomeView extends Component {
94-
constructor(props) {
95-
super(props);
96-
}
98+
}
99+
}());
100+
`;
97101

102+
var Sample2 = React.createClass({
98103
componentDidMount() {
99-
var webviewRef = this.refs[WEBVIEW_REF];
100-
101-
webviewRef.onMessage(function (message) {
102-
console.log("This message coming from web view", message);
103-
webviewRef.send("Hello from react-native");
104-
});
105-
106-
webviewRef.injectBridgeScript();
107-
}
108-
109-
render() {
104+
setTimeout(() => {
105+
this.refs.webviewbridge.sendToBridge("hahaha");
106+
}, 5000);
107+
},
108+
onBridgeMessage: function (message) {
109+
console.log(message);
110+
},
111+
render: function() {
110112
return (
111113
<WebViewBridge
112-
ref={WEBVIEW_REF}
113-
url="http://<my awesome project url>"
114-
style={{flex: 1}}
115-
/>
114+
ref="webviewbridge"
115+
onBridgeMessage={this.onBridgeMessage}
116+
injectedJavaScript={injectScript}
117+
onBridgeMessage={(message) => {
118+
console.log(message);
119+
}}
120+
url={"http://google.com"}/>
116121
);
117122
}
118-
}
119-
120-
Added feature
121-
122-
- 0.3.4
123-
- added `print` feature [exampl ecode](https://github.com/alinz/react-native-webview-bridge/blob/v0.3.4/example/Sample1/index.ios.js#L53)
123+
});
124+
```

doc/assets/01.png

68.9 KB
Loading

doc/assets/02.png

69.8 KB
Loading

doc/assets/03.png

101 KB
Loading

doc/assets/04.png

164 KB
Loading

doc/assets/05.png

48.3 KB
Loading

example/Sample1/android/app/build.gradle

Lines changed: 0 additions & 29 deletions
This file was deleted.

example/Sample1/android/app/src/main/res/values/strings.xml

Lines changed: 0 additions & 3 deletions
This file was deleted.

example/Sample1/android/settings.gradle

Lines changed: 0 additions & 3 deletions
This file was deleted.

example/Sample1/iOS/main.jsbundle

Lines changed: 0 additions & 8 deletions
This file was deleted.

0 commit comments

Comments
 (0)