{"id":4633,"url":"https://github.com/alinz/react-native-webview-bridge","last_synced_at":"2025-05-14T18:05:00.904Z","repository":{"id":33485326,"uuid":"37131088","full_name":"alinz/react-native-webview-bridge","owner":"alinz","description":"React Native Webview with Javascript Bridge ","archived":false,"fork":false,"pushed_at":"2024-05-26T11:59:13.000Z","size":934,"stargazers_count":1371,"open_issues_count":129,"forks_count":489,"subscribers_count":40,"default_branch":"master","last_synced_at":"2025-05-07T11:41:40.320Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alinz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-06-09T12:38:24.000Z","updated_at":"2025-04-23T05:51:25.000Z","dependencies_parsed_at":"2024-06-18T14:15:16.786Z","dependency_job_id":null,"html_url":"https://github.com/alinz/react-native-webview-bridge","commit_stats":{"total_commits":174,"total_committers":37,"mean_commits":4.702702702702703,"dds":"0.38505747126436785","last_synced_commit":"8f303f50c23d67f68a4219a4d33a0bac9d9237b5"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alinz%2Freact-native-webview-bridge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alinz%2Freact-native-webview-bridge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alinz%2Freact-native-webview-bridge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alinz%2Freact-native-webview-bridge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alinz","download_url":"https://codeload.github.com/alinz/react-native-webview-bridge/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254198514,"owners_count":22030965,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-01-05T20:17:18.534Z","updated_at":"2025-05-14T18:04:55.895Z","avatar_url":"https://github.com/alinz.png","language":"Objective-C","funding_links":[],"categories":["Components","Objective-C","Objective-C  Stars 1000以内排名整理"],"sub_categories":["Web"],"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\n\n[![GitHub tag](https://img.shields.io/github/tag/alinz/react-native-webview-bridge.svg)](https://github.com/alinz/react-native-webview-bridge)\n[![npm version](https://badge.fury.io/js/react-native-webview-bridge.svg)](https://badge.fury.io/js/react-native-webview-bridge)\n[![GitHub license](https://img.shields.io/github/license/alinz/react-native-webview-bridge.svg)](https://github.com/alinz/react-native-webview-bridge/blob/master/LICENSE)\n[![GitHub stars](https://img.shields.io/github/stars/alinz/react-native-webview-bridge.svg)](https://github.com/alinz/react-native-webview-bridge/stargazers)\n\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\u003cp align=\"center\"\u003e\n    \u003cimg src =\"https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/01.png\" /\u003e\n\u003c/p\u003e\n2. right click on `Libraries`\n3. select `Add Files to ...` option\n\u003cp align=\"center\"\u003e\n    \u003cimg src =\"https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/02.png\" /\u003e\n\u003c/p\u003e\n4. navigate to `node_modules/react-native-webview-bridge/ios` and add `React-Native-Webview-Bridge.xcodeproj` folder\n\u003cp align=\"center\"\u003e\n    \u003cimg src =\"https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/03.png\" /\u003e\n\u003c/p\u003e\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\u003cp align=\"center\"\u003e\n    \u003cimg src =\"https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/04.png\" /\u003e\n\u003c/p\u003e\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\u003cp align=\"center\"\u003e\n    \u003cimg src =\"https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/05.png\" /\u003e\n\u003c/p\u003e\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 \u003c 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 \u003c 0.29)\n\n```java\nprotected List\u003cReactPackage\u003e getPackages() {\n        return Arrays.\u003cReactPackage\u003easList(\n            new MainReactPackage(),\n                new WebViewBridgePackage() //\u003c- this\n        );\n    }\n```\n\n3. add the following codes to your `android/setting.gradle`\n\n\u003e 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\u003e 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\u003e 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 = createReactClass({\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      \u003cWebViewBridge\n        ref=\"webviewbridge\"\n        onBridgeMessage={this.onBridgeMessage.bind(this)}\n        injectedJavaScript={injectScript}\n        source={{uri: \"https://google.com\"}}/\u003e\n    );\n  }\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falinz%2Freact-native-webview-bridge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falinz%2Freact-native-webview-bridge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falinz%2Freact-native-webview-bridge/lists"}