Skip to content

Commit fdb6ac8

Browse files
committed
added android instruction
1 parent 84c43a2 commit fdb6ac8

File tree

1 file changed

+48
-11
lines changed

1 file changed

+48
-11
lines changed

README.md

Lines changed: 48 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,73 @@
11
# 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.
33

44

55

66
## Installation
77

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

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
1215
<p align="center">
1316
<img src ="https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/01.png" />
1417
</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
1720
<p align="center">
1821
<img src ="https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/02.png" />
1922
</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
2124
<p align="center">
2225
<img src ="https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/03.png" />
2326
</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`
2528
<p align="center">
2629
<img src ="https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/04.png" />
2730
</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.
3033
<p align="center">
3134
<img src ="https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/05.png" />
3235
</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.
3471

3572
## Usage
3673

@@ -70,7 +107,7 @@ this method sends a message to native side. the message must be in string type o
70107

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

73-
#### onError
110+
#### onError (iOS only)
74111

75112
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.
76113

0 commit comments

Comments
 (0)