react-native-react-bridge

An easy way to integrate your React (or Preact/React Native Web) app into React Native app with WebView.

[!NOTE] You may also like Expo DOM components

Why?

If you'd like to run your React web app in React Native, rewriting it for React Native or using react-native-web is preferred way in most cases. But sometimes rewriting is overkill, when you are just prototyping, or when the app includes something not available on React Native, like rich text editor with contenteditable or complicated logic with WebAssembly.

So how we run React app in React Native app as it is? It's logically possible if you run your web code in WebView using react-native-webview. However bundling React code with React Native is troublesome and implementing communication between React Native and WebView is so hard.

This library gives a bridge to make it easy. This will bundle the whole React app by some additional codes and it will be automatically re-compiled if you edit it. You rarely need to think which code you are editing for React or React Native, like isomorphic. The communication between React app and React Native app will be also simplified by this.

Features

• Create React (or Preact/React Native Web) app bundle for WebView automatically in build process of React Native
  • All JS modules (with or without JSX/TypeScript) will be bundled with esbuild.
  • NOTE: Only the edits in the entry file of web will invoke rebuild because of the limitation of metro's build process.
• Handle communication between React Native and WebView with React hook style
  • With useWebViewMessage hook, you can subscribe messages from WebView.
  • With useNativeMessage hook, you can subscribe messages from React Native.
  • emit function sends message.
• Support bundling some assets in web side with ES6 import syntax
  • .json is imported as an object, like require in Node.js.
  • .txt and .md are imported as string, like raw-loader.
  • .css is injected to the HTML head of WebView, like css-loader with style-loader.
  • .bmp, .gif, .png, .jpg, .jpeg, .webp and .svg are loaded as base64 encoded url, like url-loader.
  • .htm and .html are loaded as string, which can be rendered with React's dangerouslySetInnerHTML.
  • .wasm is imported like Node.js, which is compatible with ES Module Integration Proposal for WebAssembly.

If you have some feature requests or improvements, please create a issue or PR.

Install

1npm install react-native-react-bridge react-native-webview
2
3# Necessary only if you render React app in WebView
4npm install react-dom
5
6# Necessary only if you render Preact app in WebView
7# preact >= 10.0
8npm install preact
9
10# Necessary only if you render React Native Web app in WebView
11npm install react-dom react-native-web

Requirements

• react >= 16.14
• react-native >= 0.60

Usage

1. Fix metro.config.js to use babelTransformer from this library.

React Native

1module.exports = {
2  transformer: {
3    // This detects entry points of React app and transforms them
4    // For the other files this will switch to use default `metro-react-native-babel-transformer` for transforming
5    babelTransformerPath: require.resolve('react-native-react-bridge/lib/plugin'),
6    ...
7  },
8/*
9  // optional config
10  rnrb: {
11    // Set `true` if you use Preact in web side.
12    // This will alias imports from `react` and `react-dom` to `preact/compat` automatically.
13    preact: true,
14    // Set `true` if you use react-native-web in web side.
15    // This will alias imports from `react-native` to `react-native-web` automatically.
16    web: true
17  },
18*/
19  ...
20};

Expo

1const { getDefaultConfig } = require("expo/metro-config");
2
3const config = getDefaultConfig(__dirname);
4
5config.transformer.babelTransformerPath = require.resolve(
6  "react-native-react-bridge/lib/plugin"
7);
8
9module.exports = config;

Projects with Multiple Transformers

If your project at some point requires a metro configuration with additional transformers, consider making a separate customTransformer.js file in the project root with logic for delegating files types to the appropriate transformer, and modifying metro.config.js file to reference the customer transformer file. For example, if you are using react-native-svg-transformer, this would be your custom transformer file:

1// root/customTransformer.js
2const reactNativeReactBridgeTransformer = require("react-native-react-bridge/lib/plugin");
3const svgTransformer = require("react-native-svg-transformer");
4
5module.exports.transform = function ({ src, filename, options }) {
6  if (filename.endsWith(".svg")) {
7    return svgTransformer.transform({ src, filename, options });
8  } else {
9    return reactNativeReactBridgeTransformer.transform({
10      src,
11      filename,
12      options,
13    });
14  }
15};

And this would be your metro config:

1// root/metro.config.js
2const { getDefaultConfig } = require("metro-config");
3
4module.exports = (async () => {
5  const {
6    resolver: { sourceExts, assetExts },
7  } = await getDefaultConfig();
8  return {
9    transformer: {
10      babelTransformerPath: require.resolve("./customTransformer.js"),
11    },
12    resolver: {
13      assetExts: assetExts.filter((ext) => ext !== "svg"),
14      sourceExts: [...sourceExts, "svg"],
15    },
16  };
17})();

Custom Esbuild options

To support custom Esbuild options, we can use Multiple Transformers method and replace the customTransformer.js file with the following code:

1// root/customTransformer.js
2const reactNativeReactBridgeTransformer = require("react-native-react-bridge/lib/plugin");
3
4const esbuildOptions = {
5  pluglins: [],
6};
7const transform =
8  reactNativeReactBridgeTransformer.createTransformer(esbuildOptions);
9
10module.exports.transform = function ({ src, filename, options }) {
11  return transform({ src, filename, options });
12};

2. Make entry file for web app.

• If you use React, React Native Web or Preact with React alias, import modules react-native-react-bridge/lib/web.
• If you use Preact, import modules from react-native-react-bridge/lib/web/preact.

1// WebApp.js
2
3import React, { useState } from "react";
4import {
5  webViewRender,
6  emit,
7  useNativeMessage,
8} from "react-native-react-bridge/lib/web";
9// Importing css is supported
10import "./example.css";
11// Images are loaded as base64 encoded string
12import image from "./foo.png";
13
14const Root = () => {
15  const [data, setData] = useState("");
16  // useNativeMessage hook receives message from React Native
17  useNativeMessage((message) => {
18    if (message.type === "success") {
19      setData(message.data);
20    }
21  });
22  return (
23    <div>
24      <img src={image} />
25      <div>{data}</div>
26      <button
27        onClick={() => {
28          // emit sends message to React Native
29          //   type: event name
30          //   data: some data which will be serialized by JSON.stringify
31          emit({ type: "hello", data: 123 });
32        }}
33      />
34    </div>
35  );
36};
37
38// This statement is detected by babelTransformer as an entry point
39// All dependencies are resolved, compressed and stringified into one file
40export default webViewRender(<Root />);

3. Use the entry file in your React Native app with WebView.

1// App.js
2
3import React from "react";
4import WebView from "react-native-webview";
5import { useWebViewMessage } from "react-native-react-bridge";
6import webApp from "./WebApp";
7
8const App = () => {
9  // useWebViewMessage hook create props for WebView and handle communication
10  // The argument is callback to receive message from React
11  const { ref, onMessage, emit } = useWebViewMessage((message) => {
12    // emit sends message to React
13    //   type: event name
14    //   data: some data which will be serialized by JSON.stringify
15    if (message.type === "hello" && message.data === 123) {
16      emit({ type: "success", data: "succeeded!" });
17    }
18  });
19
20  return (
21    <WebView
22      // ref, source and onMessage must be passed to react-native-webview
23      ref={ref}
24      // Pass the source code of React app
25      source={{ html: webApp }}
26      onMessage={onMessage}
27    />
28  );
29};

4. Start your React Native app!

Documentation

• API reference

FAQs

My webview displays a blank page.

react-native-webview has some ways to show errors occurred in webview. This may be helpful to troubleshoot it.

https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#onerror

Demo

This repository includes demo app.

1git clone git@github.com:inokawa/react-native-react-bridge.git
2cd examples/DemoApp
3npm install
4npm run ios # or npm run android

Contribute

All contributions are welcome. If you find a problem, feel free to create an issue or a PR.

Making a Pull Request

1. Fork this repo.
2. Run npm install.
3. Commit your fix.
4. Add tests to cover the fix.
5. Make a PR and confirm all the CI checks passed.