{"id":16528594,"url":"https://github.com/yukukotani/react-native-webview-rpc","last_synced_at":"2025-03-21T09:31:40.083Z","repository":{"id":229477662,"uuid":"776843530","full_name":"yukukotani/react-native-webview-rpc","owner":"yukukotani","description":"A type-safe RPC between React Native function and JavaScript inside WebView, powered by Comlink","archived":false,"fork":false,"pushed_at":"2024-10-31T03:24:51.000Z","size":402,"stargazers_count":21,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-17T23:44:41.434Z","etag":null,"topics":["comlink","react-native","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yukukotani.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":"2024-03-24T15:50:52.000Z","updated_at":"2025-03-08T07:08:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"9963d450-bcdd-4d7d-92ec-9689d9183a31","html_url":"https://github.com/yukukotani/react-native-webview-rpc","commit_stats":null,"previous_names":["yukukotani/react-native-webview-rpc"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yukukotani%2Freact-native-webview-rpc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yukukotani%2Freact-native-webview-rpc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yukukotani%2Freact-native-webview-rpc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yukukotani%2Freact-native-webview-rpc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yukukotani","download_url":"https://codeload.github.com/yukukotani/react-native-webview-rpc/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244771984,"owners_count":20507900,"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":["comlink","react-native","typescript"],"created_at":"2024-10-11T17:40:57.897Z","updated_at":"2025-03-21T09:31:39.738Z","avatar_url":"https://github.com/yukukotani.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native WebView RPC\n\nReact Native WebView RPC allows type-safe calls of React Native functions from JavaScript inside WebView.\n\n## Installation\n\n### Native side\n\n```bash\nnpm install @react-native-webview-rpc/native\nnpm install react-native-webview comlink # peer dependencies\n```\n\n### Web side\n\n```bash\nnpm install @react-native-webview-rpc/web\nnpm install comlink # peer dependencies\n```\n\n## Usage\n\n### Native side\n\nFirst, you need to define functions that you want to expose to the WebView. You should also export the type of functions that will be imported from the web side later.\n\n```tsx\n// rpcs.tsx\nimport { Alert } from \"react-native\";\nconst rpcs = {\n  async alert(title: string, body: string) {\n    Alert.alert(title, body);\n    return \"ok\";\n  },\n};\n\nexport type WebViewRpcs = typeof rpcs;\n```\n\nThen, create a message handler by `useWebViewRpcHandler` and pass it to WebView component.\n\n```tsx\nimport { useRef } from \"react\";\nimport WebView from \"react-native-webview\";\nimport { useWebViewRpcHandler } from \"@react-native-webview-rpc/native\";\nimport { rpcs } from \"./rpcs\";\n\nexport default function App() {\n  const ref = useRef\u003cWebView\u003e(null);\n  const onMessage = useWebViewRpcHandler(ref, rpcs);\n\n  return (\n    \u003cWebView\n      ref={ref}\n      onMessage={onMessage}\n      source={{ uri: \"http://localhost:5173\" }}\n    /\u003e\n  );\n}\n```\n\n### Web side\n\nImport the type of native functions that is exported from the native side. Then, call `wrap` to create a proxy object that can call native functions.\n\n```tsx\nimport type { WebViewRpcs } from \"../native/rpcs\";\nimport { wrap } from \"@react-native-webview-rpc/web\";\nconst rpcs = wrap\u003cWebViewRpcs\u003e();\n```\n\nNow you can call native functions from the web side.\n\n```tsx\nconst result = await rpcs.alert(\"Hello\", \"World\");\n```\n\n## Example\n\nYou can find the full example in the [examples](https://github.com/yukukotani/react-native-webview-rpc/tree/main/examples) directory.\n\n![demo](https://github.com/yukukotani/react-native-webview-rpc/assets/16265411/1290ab39-0807-40c4-b0d0-153d52f9a512)\n\n## FAQ\n\n### `Failed to return RPC response to WebView via postMessage`\n\nIn some cases, like when the RPC closes the WebView, it's expected that the RPC cannot return the response to the WebView since it's already closed. In this case, you can ignore the error by returning `SYMBOL_IGNORING_RPC_RESPONSE_ERROR` from the RPC.\n\n```tsx\nimport { SYMBOL_IGNORING_RPC_RESPONSE_ERROR } from \"@react-native-webview-rpc/native\";\n\nconst rpcs = {\n  async closeWebView() {\n    router.dismiss();\n    return SYMBOL_IGNORING_RPC_RESPONSE_ERROR;\n  },\n};\n```\n\n## Related projects\n\n- [rn-webview-rpc](https://github.com/ronhe/rn-webview-rpc): The great prior art, but is built for old things (e.g. class component, JavaScriptCore, etc.)\n- [react-native-webview](https://github.com/react-native-webview/react-native-webview): React Native WebView RPC is built on top of React Native WebView's messaging system.\n- [Comlink](https://github.com/GoogleChromeLabs/comlink): React Native WebView RPC's function style messaging is provided by Comlink.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyukukotani%2Freact-native-webview-rpc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyukukotani%2Freact-native-webview-rpc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyukukotani%2Freact-native-webview-rpc/lists"}