1.0.0 • Published 3 months ago
react-native-webview-pc v1.0.0
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
1.0.0
3 months ago