React Native Web View Procedure Call

Define functions on React Native and webview code, and call them on the opposite side. This library makes the communication between React Native code and web code inside a React Native Webview easier to work with, and type safe.

Getting started

Install the package on both the React Native and web app.

npm install react-native-webview-pc

You will also need react-naive-webview for the React Native app.

npm install react-native-webview

React Native

import WebView from "react-native-webview";
import { Share } from 'react-native';
import { useEffect, useRef, useState } from "react";
import { initNativeSide, onMessage, type Procedures } from "react-naive-webview-pc";

// Declare the procedures that will be called from the webview.
// They can be async, and take any number of arguments. Arguments and return values must be serializable.
// Allowed types are the ones supported by superjson: https://github.com/blitz-js/superjson#parse
const procedures: Procedures = {
    async nativeShare(message: string) {
        const result = await Share.share({ message });
        
        return {
            result,
            shared: result.action === Share.sharedAction,
        };
    }
};

export type NativeProcs = typeof procedures;

export const App = () => {
    const [initialized, setInitialized] = useState(false);
    const webviewRef = useRef<WebView>(null);

    useEffect(() => {
        if (!initialized && webviewRef.current?.injectJavaScript) {
            initNativeSide(procedures, webviewRef.current.injectJavaScript);
            setInitialized(true);
        }
    }, [webviewRef.current]);
    
    return (
        <WebView
          ref={webviewRef}
          source={{ uri: 'localhost:3000' }}
          onMessage={onMessage}
        />
    );
};

Web app inside the webview

import React from 'react';
import { initWebviewSide, call, type Procedures } from "react-naive-webview-pc";
import type { NativeProcs } from "somehow-over-the-workspace"; 

const procedures: Procedures = {
    getElementInnerText(selector: string) {
        const element = document.querySelector(selector);
        return element?.innerText;
    }
}

initWebviewSide(procedures);

export type WebProcs = typeof procedures;

export const App = () => {
    return (
        <div>
            <h1>Hello world.</h1>
            <button onClick={async () => {
                // Call the native procedure from the webview. Fully typed.
                const result = await call<NativeProcs>('nativeShare', ['Hello from the webview!']);
                console.log(result);
            }}>
                Share
            </button>
        </div>
    );
}

In this example, the webview invokes the nativeShare function, which is defined in the React Native code. Similarly, React Native code can call the getElementInnerText function, defined in the webview code.

How it works