https://github.com/yukukotani/react-native-webview-rpc
A type-safe RPC between React Native function and JavaScript inside WebView, powered by Comlink
https://github.com/yukukotani/react-native-webview-rpc
comlink react-native typescript
Last synced: 3 months ago
JSON representation
A type-safe RPC between React Native function and JavaScript inside WebView, powered by Comlink
- Host: GitHub
- URL: https://github.com/yukukotani/react-native-webview-rpc
- Owner: yukukotani
- License: apache-2.0
- Created: 2024-03-24T15:50:52.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-31T03:24:51.000Z (8 months ago)
- Last Synced: 2025-03-17T23:44:41.434Z (3 months ago)
- Topics: comlink, react-native, typescript
- Language: TypeScript
- Homepage:
- Size: 393 KB
- Stars: 21
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native WebView RPC
React Native WebView RPC allows type-safe calls of React Native functions from JavaScript inside WebView.
## Installation
### Native side
```bash
npm install @react-native-webview-rpc/native
npm install react-native-webview comlink # peer dependencies
```
### Web side
```bash
npm install @react-native-webview-rpc/web
npm install comlink # peer dependencies
```
## Usage
### Native side
First, 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.
```tsx
// rpcs.tsx
import { Alert } from "react-native";
const rpcs = {
async alert(title: string, body: string) {
Alert.alert(title, body);
return "ok";
},
};
export type WebViewRpcs = typeof rpcs;
```
Then, create a message handler by `useWebViewRpcHandler` and pass it to WebView component.
```tsx
import { useRef } from "react";
import WebView from "react-native-webview";
import { useWebViewRpcHandler } from "@react-native-webview-rpc/native";
import { rpcs } from "./rpcs";
export default function App() {
const ref = useRef(null);
const onMessage = useWebViewRpcHandler(ref, rpcs);
return (
);
}
```
### Web side
Import 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.
```tsx
import type { WebViewRpcs } from "../native/rpcs";
import { wrap } from "@react-native-webview-rpc/web";
const rpcs = wrap();
```
Now you can call native functions from the web side.
```tsx
const result = await rpcs.alert("Hello", "World");
```
## Example
You can find the full example in the [examples](https://github.com/yukukotani/react-native-webview-rpc/tree/main/examples) directory.
## FAQ
### `Failed to return RPC response to WebView via postMessage`
In 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.
```tsx
import { SYMBOL_IGNORING_RPC_RESPONSE_ERROR } from "@react-native-webview-rpc/native";
const rpcs = {
async closeWebView() {
router.dismiss();
return SYMBOL_IGNORING_RPC_RESPONSE_ERROR;
},
};
```
## Related projects
- [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.)
- [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.
- [Comlink](https://github.com/GoogleChromeLabs/comlink): React Native WebView RPC's function style messaging is provided by Comlink.