{"_id":"23mofang-react-native-webview-bridge","_rev":"2-c65f38c9f26bc7cd4878f901f508e730","name":"23mofang-react-native-webview-bridge","description":"React Native WebView Javascript Bridge","dist-tags":{"latest":"0.35.0"},"versions":{"0.35.0":{"name":"23mofang-react-native-webview-bridge","version":"0.35.0","description":"React Native WebView Javascript Bridge","main":"webview-bridge","directories":{"doc":"doc","example":"examples"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+ssh://git@github.com/alinz/react-native-webview-bridge.git"},"keywords":["react-native","react-component","ios","webview-bridge"],"author":{"name":"Ali Najafizadeh"},"contributors":[{"name":"Hunter Medney"}],"license":"MIT","bugs":{"url":"https://github.com/alinz/react-native-webview-bridge/issues"},"homepage":"https://github.com/alinz/react-native-webview-bridge","dependencies":{"invariant":"2.2.0","keymirror":"0.1.1"},"gitHead":"73a13197161d39102a945defcc16af3346d23f9c","_id":"23mofang-react-native-webview-bridge@0.35.0","_shasum":"7fc749187dfc166c28ac08f97283e2d8f8c8f8c1","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.11.2","_npmUser":{"name":"23mf","email":"1008@23mofang.com"},"dist":{"shasum":"7fc749187dfc166c28ac08f97283e2d8f8c8f8c1","tarball":"https://registry.npmjs.org/23mofang-react-native-webview-bridge/-/23mofang-react-native-webview-bridge-0.35.0.tgz","integrity":"sha512-4/2Hg2BXXMk9RKxtblTUsPdzW4+o0eOGtQHYW6/jxgz4MbdkQJl3Ckn6LdaYk/2tUuIL4/ncI6XK976hxHtnwg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICUu0vTJD8raGhRlVCgvDgztRwZED5K19cd1I87n4BcPAiBvNY4zSyQQ3PijzpvvSCl23UUKXuFO4lpOgbhaUW+gAA=="}]},"maintainers":[{"name":"23mf","email":"1008@23mofang.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/23mofang-react-native-webview-bridge-0.35.0.tgz_1504592087676_0.17930545983836055"}}},"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

\n \n

\n2. right click on `Libraries`\n3. select `Add Files to ...` option\n

\n \n

\n4. navigate to `node_modules/react-native-webview-bridge/ios` and add `React-Native-Webview-Bridge.xcodeproj` folder\n

\n \n

\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

\n \n

\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

\n \n

\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 getPackages() {\n return Arrays.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 \n );\n }\n});\n```\n","maintainers":[{"name":"23mf","email":"1008@23mofang.com"}],"time":{"modified":"2022-06-12T14:06:42.668Z","created":"2017-09-05T06:14:48.215Z","0.35.0":"2017-09-05T06:14:48.215Z"},"homepage":"https://github.com/alinz/react-native-webview-bridge","keywords":["react-native","react-component","ios","webview-bridge"],"repository":{"type":"git","url":"git+ssh://git@github.com/alinz/react-native-webview-bridge.git"},"contributors":[{"name":"Hunter Medney"}],"author":{"name":"Ali Najafizadeh"},"bugs":{"url":"https://github.com/alinz/react-native-webview-bridge/issues"},"license":"MIT","readmeFilename":"README.md"}