$ show inokawa/react-native-react-bridge
This repository provides a library and build-time plugin for embedding a React (or Preact / React Native Web) web application inside a React Native WebView, with automatic bundling and two-way communication between the native and web sides. It consists of a Metro transformer plugin that uses Babel AST analysis to detect entry files (those calling webViewRender or webViewCreateRoot), then bundles the web app via esbuild with custom asset loaders for images, CSS, JSON, text, Markdown, and WebAssembly. The bundled output is wrapped in an HTML string and returned as the module source, which is then loaded into a react-native-webview at runtime. The library exposes React hooks (useWebViewMessage for native, useNativeMessage and emit for web) that handle message passing via window.postMessage and ReactNativeWebView.postMessage. The architecture is a classic library + build plugin pattern, with clear separation between native (React Native) and web (React DOM) concerns. The codebase is TypeScript, has end-to-end Playwright tests with HTML snapshots, unit tests, and thorough type definitions. It is designed for rapid prototyping or features that require web-specific APIs (e.g., WebAssembly, contenteditable) without rewriting the entire UI for React Native.
The LLM identified 4 files worth highlighting for reuse:
Provides the core message listening and emitting functions for the web side. Uses `window.addEventListener('message')` for receiving and `window.ReactNativeWebView.postMessage` (or a fallback) for sending. This module is framework-agnostic (no React dependency) and can be extracted and reused in any web application that needs to communicate with a React Native WebView.
Implements the `useWebViewMessage` hook for the native React Native side. It returns an object with `ref`, `onMessage`, and `emit` to be passed to a `<WebView>`. It handles JSON parsing of incoming messages, injects outgoing messages via `webViewRef.current.injectJavaScript()`. This hook is self-contained and easily reusable in any React Native project that needs to communicate with a web-based UI rendered in a WebView.
Configures esbuild to bundle the web application entry point into a single self-contained JavaScript string. It defines custom esbuild plugins for various asset types: JSON, text, Markdown, CSS (injected as `<style>`), images (base64 encoded), and WebAssembly (loaded as a JS module). The bundler also generates the final HTML wrapper using `html.ts`. This component demonstrates a modular, extensible approach to bundling assets for WebView delivery and can be reused as a standalone esbuild configuration for similar projects.
Generates the minimal HTML document that will be loaded inside the WebView. It includes charset, viewport meta, a root `<div id="rnrb-root">`, and a `<script>` tag containing the bundled JavaScript. This template is reusable for any WebView-based application and is kept intentionally simple for performance and compatibility.