|
1 | 1 | # React Native WebView Javascript Bridge
|
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. |
| 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.19 and above**, the bridge is fully functional. |
3 | 3 |
|
4 | 4 |
|
5 | 5 |
|
6 | 6 | ## Installation
|
7 | 7 |
|
8 | 8 | In order to use this extension, you have to do the following steps:
|
9 | 9 |
|
10 |
| -1. in your react-native project, run `npm install react-native-webview-bridge` |
11 |
| -2. go to xcode's `Project Navigator` tab |
| 10 | +in your react-native project, run `npm install react-native-webview-bridge` |
| 11 | + |
| 12 | +### iOS |
| 13 | + |
| 14 | +1. go to xcode's `Project Navigator` tab |
12 | 15 | <p align="center">
|
13 | 16 | <img src ="https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/01.png" />
|
14 | 17 | </p>
|
15 |
| -3. right click on `Libraries` |
16 |
| -4. select `Add Files to ...` option |
| 18 | +2. right click on `Libraries` |
| 19 | +3. select `Add Files to ...` option |
17 | 20 | <p align="center">
|
18 | 21 | <img src ="https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/02.png" />
|
19 | 22 | </p>
|
20 |
| -5. navigate to `node_modules/react-native-webview-bridge/ios` and add `React-Native-Webview-Bridge.xcodeproj` folder |
| 23 | +4. navigate to `node_modules/react-native-webview-bridge/ios` and add `React-Native-Webview-Bridge.xcodeproj` folder |
21 | 24 | <p align="center">
|
22 | 25 | <img src ="https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/03.png" />
|
23 | 26 | </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` |
| 27 | +5. on project `Project Navigator` tab, click on your project's name and select Target's name and from there click on `Build Phases` |
25 | 28 | <p align="center">
|
26 | 29 | <img src ="https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/04.png" />
|
27 | 30 | </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. |
| 31 | +6. expand `Link Binary With Libraries` and click `+` sign to add a new one. |
| 32 | +7. select `libReact-Native-Webviwe-Bridge.a` and click `Add` button. |
30 | 33 | <p align="center">
|
31 | 34 | <img src ="https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/05.png" />
|
32 | 35 | </p>
|
33 |
| -9. clean compile to make sure your project can compile and build. |
| 36 | +8. clean compile to make sure your project can compile and build. |
| 37 | + |
| 38 | +### Android (Beta) |
| 39 | + |
| 40 | +1. add the following import to `MainActivity.java` of your application |
| 41 | + |
| 42 | +```java |
| 43 | +import com.github.alinz.reactnativewebviewbridge.WebViewBridgePackage; |
| 44 | +``` |
| 45 | + |
| 46 | +2. add the following code to add the package to `MainActivity.java` |
| 47 | + |
| 48 | +```java |
| 49 | +mReactInstanceManager = ReactInstanceManager.builder() |
| 50 | + ... |
| 51 | + .addPackage(new WebViewBridgePackage()) |
| 52 | + ... |
| 53 | +``` |
| 54 | + |
| 55 | +3. add the following codes to your `android/setting.gradle` |
| 56 | + |
| 57 | +> you might have multiple 3rd party libraries, make sure that you don't create multiple include. |
| 58 | +
|
| 59 | +``` |
| 60 | +include ':app', ':react-native-webview-bridge' |
| 61 | +project(':react-native-webview-bridge').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview-bridge/android') |
| 62 | +``` |
| 63 | + |
| 64 | +4. edit `android/app/build.gradle` and add the following line inside `dependencies` |
| 65 | + |
| 66 | +``` |
| 67 | +compile project(':react-native-webview-bridge') |
| 68 | +``` |
| 69 | + |
| 70 | +5. run `react-native run-android` to see if everything is compilable. |
34 | 71 |
|
35 | 72 | ## Usage
|
36 | 73 |
|
@@ -70,7 +107,7 @@ this method sends a message to native side. the message must be in string type o
|
70 | 107 |
|
71 | 108 | this method needs to be implemented. it will be called once a message arrives from native side. The type of message is in string.
|
72 | 109 |
|
73 |
| -#### onError |
| 110 | +#### onError (iOS only) |
74 | 111 |
|
75 | 112 | 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 | 113 |
|
|
0 commit comments