Improve useWebViewMessage API

Author: inokawa

README.md

@@ -208,18 +208,19 @@ export default webViewRender(<Root />);
 
 import React from "react";
 import WebView from "react-native-webview";
-import { useWebViewMessage } from "react-native-react-bridge";
+import { emit, useWebViewMessage } from "react-native-react-bridge";
 import webApp from "./WebApp";
 
 const App = () => {
+  const ref = useRef(null);
   // useWebViewMessage hook create props for WebView and handle communication
   // The argument is callback to receive message from React
-  const { ref, onMessage, emit } = useWebViewMessage((message) => {
+  const onMessage = useWebViewMessage((message) => {
     // emit sends message to React
     //   type: event name
     //   data: some data which will be serialized by JSON.stringify
     if (message.type === "hello" && message.data === 123) {
-      emit({ type: "success", data: "succeeded!" });
+      emit(ref, { type: "success", data: "succeeded!" });
     }
   });
 

examples/DemoApp/App.js

@@ -6,7 +6,7 @@
  * @flow strict-local
  */
 
-import React, {useState} from 'react';
+import React, {useRef, useState} from 'react';
 import {
   SafeAreaView,
   StyleSheet,
@@ -16,12 +16,13 @@ import {
   TextInput,
 } from 'react-native';
 import WebView from 'react-native-webview';
-import {useWebViewMessage} from 'react-native-react-bridge';
+import {emit, useWebViewMessage} from 'react-native-react-bridge';
 import webApp from './WebApp';
 
 const App = () => {
   const [data, setData] = useState('This is React Native');
-  const {ref, onMessage, emit} = useWebViewMessage(message => {
+  const ref = useRef(null);
+  const onMessage = useWebViewMessage(message => {
     if (message.type === 'hi') {
       setData(message.data);
     }
@@ -44,7 +45,7 @@ const App = () => {
           value={data}
         />
         <Pressable
-          onPress={() => emit({type: 'hello', data: data})}
+          onPress={() => emit(ref, {type: 'hello', data: data})}
           style={styles.button}>
           <Text>send to Web</Text>
         </Pressable>

examples/DemoAppExpo/App.tsx

@@ -6,7 +6,7 @@
  * @flow strict-local
  */
 
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import {
   SafeAreaView,
   StyleSheet,
@@ -16,12 +16,13 @@ import {
   TextInput,
 } from "react-native";
 import WebView from "react-native-webview";
-import { useWebViewMessage } from "react-native-react-bridge";
+import { emit, useWebViewMessage } from "react-native-react-bridge";
 import webApp from "./WebApp";
 
 const App = () => {
   const [data, setData] = useState("This is React Native");
-  const { ref, onMessage, emit } = useWebViewMessage<string>((message) => {
+  const ref = useRef<WebView>(null);
+  const onMessage = useWebViewMessage<string>((message) => {
     if (message.type === "hi") {
       setData(message.data);
     }
@@ -44,7 +45,7 @@ const App = () => {
           value={data}
         />
         <Pressable
-          onPress={() => emit({ type: "hello", data: data })}
+          onPress={() => emit(ref, { type: "hello", data: data })}
           style={styles.button}
         >
           <Text>send to Web</Text>

src/native/index.ts

@@ -1,4 +1,4 @@
-import { useCallback, useRef } from "react";
+import { RefObject, useCallback } from "react";
 import type WebView from "react-native-webview";
 import type { WebViewMessageEvent, WebViewProps } from "react-native-webview";
 import { TO_WEB_EVENT_KEY } from "../constants";
@@ -28,23 +28,25 @@ export const buildEmitToWebView = <T>(
 export const useWebViewMessage = <T>(
   onSubscribe: (message: WebViewMessage<T>) => void
 ) => {
-  const ref = useRef<WebView>(null);
-  const onMessage: WebViewProps["onMessage"] = useCallback(
-    (event: WebViewMessageEvent) => {
+  return useCallback(
+    ((event: WebViewMessageEvent) => {
       try {
         const res = JSON.parse(event.nativeEvent.data);
         onSubscribe({ type: res.type, data: res.data });
       } catch (e) {
         // NOP
       }
-    },
+    }) satisfies WebViewProps["onMessage"],
     [onSubscribe]
   );
-  const emit = useCallback(
-    (message: ReactNativeMessage<T>) => {
-      ref.current?.injectJavaScript(buildEmitToWebView(message));
-    },
-    [ref]
-  );
-  return { ref, onMessage, emit };
+};
+
+/**
+ * A function to send a message to WebView.
+ */
+export const emit = <T>(
+  ref: RefObject<WebView>,
+  message: ReactNativeMessage<T>
+) => {
+  ref.current?.injectJavaScript(buildEmitToWebView(message));
 };

src/web/core.ts

@@ -8,7 +8,7 @@ export const getWebViewRootElement = (): HTMLElement =>
   document.getElementById(WEB_ROOT_ID)!;
 
 /**
- * A function to send a message to React Native
+ * A function to send a message to React Native.
  */
 export const emitToNative = <T>(message: WebViewMessage<T>) => {
   (window as any).ReactNativeWebView.postMessage(JSON.stringify(message));

src/web/react.spec.tsx

@@ -98,7 +98,7 @@ describe("send message to native", () => {
   const NativeApp = ({ target }: { target: string }) => {
     const [data, setData] = useState<null | string>(null);
     const [count, setCount] = useState(0);
-    const { onMessage } = useWebViewMessage<string>((m) => {
+    const onMessage = useWebViewMessage<string>((m) => {
       if (m.type === target) {
         setData(m.data);
       }