react-native-vk-webview-bridge
Version:
React Native WebView Javascript Bridge
103 lines (102 loc) • 10.7 kB
JSON
{
"_args": [
[
{
"raw": "react-native-webview-bridge@git+https://github.com/react-native-lib/react-native-webview-bridge.git",
"scope": null,
"escapedName": "react-native-webview-bridge",
"name": "react-native-webview-bridge",
"rawSpec": "git+https://github.com/react-native-lib/react-native-webview-bridge.git",
"spec": "git+https://github.com/react-native-lib/react-native-webview-bridge.git",
"type": "hosted",
"hosted": {
"type": "github",
"ssh": "git@github.com:react-native-lib/react-native-webview-bridge.git",
"sshUrl": "git+ssh://git@github.com/react-native-lib/react-native-webview-bridge.git",
"httpsUrl": "git+https://github.com/react-native-lib/react-native-webview-bridge.git",
"gitUrl": "git://github.com/react-native-lib/react-native-webview-bridge.git",
"shortcut": "github:react-native-lib/react-native-webview-bridge",
"directUrl": "https://raw.githubusercontent.com/react-native-lib/react-native-webview-bridge/master/package.json"
}
},
"/Users/joshua/vanke/newwork"
]
],
"_from": "git+https://github.com/react-native-lib/react-native-webview-bridge.git",
"_id": "react-native-webview-bridge@0.33.0",
"_inCache": true,
"_installable": true,
"_location": "/react-native-webview-bridge",
"_phantomChildren": {
"loose-envify": "1.2.0"
},
"_requested": {
"raw": "react-native-webview-bridge@git+https://github.com/react-native-lib/react-native-webview-bridge.git",
"scope": null,
"escapedName": "react-native-webview-bridge",
"name": "react-native-webview-bridge",
"rawSpec": "git+https://github.com/react-native-lib/react-native-webview-bridge.git",
"spec": "git+https://github.com/react-native-lib/react-native-webview-bridge.git",
"type": "hosted",
"hosted": {
"type": "github",
"ssh": "git@github.com:react-native-lib/react-native-webview-bridge.git",
"sshUrl": "git+ssh://git@github.com/react-native-lib/react-native-webview-bridge.git",
"httpsUrl": "git+https://github.com/react-native-lib/react-native-webview-bridge.git",
"gitUrl": "git://github.com/react-native-lib/react-native-webview-bridge.git",
"shortcut": "github:react-native-lib/react-native-webview-bridge",
"directUrl": "https://raw.githubusercontent.com/react-native-lib/react-native-webview-bridge/master/package.json"
}
},
"_requiredBy": [
"/"
],
"_resolved": "git+https://github.com/react-native-lib/react-native-webview-bridge.git#3d55ce2efe78226ad3e06768b9bf995dffc4c76b",
"_shasum": "d90eb2a1ae6ce3a520f8085dcf9c12d8deaa88d0",
"_shrinkwrap": null,
"_spec": "react-native-webview-bridge@git+https://github.com/react-native-lib/react-native-webview-bridge.git",
"_where": "/Users/joshua/vanke/newwork",
"author": {
"name": "Ali Najafizadeh"
},
"bugs": {
"url": "https://github.com/alinz/react-native-webview-bridge/issues"
},
"contributors": [
{
"name": "Hunter Medney"
}
],
"dependencies": {
"invariant": "2.2.0",
"keymirror": "0.1.1"
},
"description": "React Native WebView Javascript Bridge",
"devDependencies": {},
"directories": {
"example": "example",
"lib": "lib"
},
"gitHead": "3d55ce2efe78226ad3e06768b9bf995dffc4c76b",
"homepage": "https://github.com/alinz/react-native-webview-bridge",
"keywords": [
"react-native",
"react-component",
"ios",
"webview-bridge"
],
"license": "MIT",
"main": "webview-bridge",
"name": "react-native-vk-webview-bridge",
"optionalDependencies": {},
"readme": "## Please take a look at this [issue](https://github.com/alinz/react-native-webview-bridge/issues/109) first\n\n# React Native WebView Javascript Bridge\nI 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.\n\n\n\n## Installation\n\nIn order to use this extension, you have to do the following steps:\n\nin your react-native project, run `npm install react-native-webview-bridge --save`\n\n### iOS\n\n1. go to xcode's `Project Navigator` tab\n<p align=\"center\">\n <img src =\"https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/01.png\" />\n</p>\n2. right click on `Libraries`\n3. select `Add Files to ...` option\n<p align=\"center\">\n <img src =\"https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/02.png\" />\n</p>\n4. navigate to `node_modules/react-native-webview-bridge/ios` and add `React-Native-Webview-Bridge.xcodeproj` folder\n<p align=\"center\">\n <img src =\"https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/03.png\" />\n</p>\n5. on project `Project Navigator` tab, click on your project's name and select Target's name and from there click on `Build Phases`\n<p align=\"center\">\n <img src =\"https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/04.png\" />\n</p>\n6. expand `Link Binary With Libraries` and click `+` sign to add a new one.\n7. select `libReact-Native-Webviwe-Bridge.a` and click `Add` button.\n<p align=\"center\">\n <img src =\"https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/05.png\" />\n</p>\n8. clean compile to make sure your project can compile and build.\n\n### Android\n\n1. add the following import to `MainApplication.java` (`MainActivity.java` if RN < 0.29) of your application\n\n```java\nimport com.github.alinz.reactnativewebviewbridge.WebViewBridgePackage;\n```\n\n2. add the following code to add the package to `MainApplication.java`` (`MainActivity.java` if RN < 0.29)\n\n```java\nprotected List<ReactPackage> getPackages() {\n return Arrays.<ReactPackage>asList(\n new MainReactPackage(),\n new WebViewBridgePackage() //<- this\n );\n }\n```\n\n3. add the following codes to your `android/setting.gradle`\n\n> you might have multiple 3rd party libraries, make sure that you don't create multiple include.\n\n```\ninclude ':app', ':react-native-webview-bridge'\nproject(':react-native-webview-bridge').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview-bridge/android')\n```\n\n4. edit `android/app/build.gradle` and add the following line inside `dependencies`\n\n```\ncompile project(':react-native-webview-bridge')\n```\n\n5. run `react-native run-android` to see if everything is compilable.\n\n## Usage\n\njust import the module with one of your choices way:\n\n** CommonJS style **\n\n```js\nvar WebViewBridge = require('react-native-webview-bridge');\n```\n\n** ES6/ES2015 style **\n\n```js\nimport WebViewBridge from 'react-native-webview-bridge';\n```\n\n`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.\n\n#### sendToBridge(message)\nthe message must be in string. because this is the only way to send data back and forth between native and webview.\n\n\n#### onBridgeMessage\nthis 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.\n\n#### allowFileAccessFromFileURLs (Android only)\nthis 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.\n\n#### allowUniversalAccessFromFileURLs (Android only)\nthis 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.\n\n## Bridge Script\n\nbridge 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.\n\n#### send(message)\n\nthis method sends a message to native side. the message must be in string type or `onError` method will be called.\n\n#### onMessage\n\nthis method needs to be implemented. it will be called once a message arrives from native side. The type of message is in string.\n\n#### onError (iOS only)\n\nthis 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.\n\n## Notes\n\n> 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.\n\n> You can still pass your own javascript to be injected into webview. However, Bridge script will be injected first and then your custom script.\n\n\n## Simple Example\nThis example can be found in `examples` folder.\n\n```js\nconst injectScript = `\n (function () {\n if (WebViewBridge) {\n\n WebViewBridge.onMessage = function (message) {\n if (message === \"hello from react-native\") {\n WebViewBridge.send(\"got the message inside webview\");\n }\n };\n \n WebViewBridge.send(\"hello from webview\");\n }\n }());\n`;\n\nvar Sample2 = React.createClass({\n onBridgeMessage(message){\n const { webviewbridge } = this.refs;\n\n switch (message) {\n case \"hello from webview\":\n webviewbridge.sendToBridge(\"hello from react-native\");\n break;\n case \"got the message inside webview\":\n console.log(\"we have got a message from webview! yeah\");\n break;\n }\n },\n \n render() {\n return (\n <WebViewBridge\n ref=\"webviewbridge\"\n onBridgeMessage={this.onBridgeMessage.bind(this)}\n injectedJavaScript={injectScript}\n source={{uri: \"http://google.com\"}}/>\n );\n }\n});\n```\n",
"readmeFilename": "README.md",
"repository": {
"type": "git",
"url": "git+ssh://git@github.com/alinz/react-native-webview-bridge.git"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"version": "2.2.0"
}