Quick question about the potential usage of running local react web app code inside react native web view

[JJSLIoT]

Can this module be considered as an alternative to https://github.com/inokawa/react-native-react-bridge? That is, does it have the capability to run a React web app inside my React Native project's source code (not hosted anywhere on the internet) in a webview?

[gronxb]

Yes, you're right. It could be a good enough alternative.

That library seems to be a bridge between React Native and React. However, the key advantage of my library is that it bridges React Native with the Web, making it compatible with other frameworks like VanillaJS or Vue or React ... etc, Additionally, it offers type-safety and provides a shared state that can react on both sides.

For examples using static HTML, you can refer to this issue #61.

The example code can be found at the following location: Static HTML Example.

[JJSLIoT]

Thanks for the quick response @gronxb, the provided example looks good although I want to be entirely sure about some points before investing the time to try out this module in my project:

1. Does this mean, I will need to run pnpm webpack to generate the static HTML file for my React web app code to include it in the Webview?
2. Is there support for fast refresh: i.e. auto reload the web app inside WebView if I make any changes in its source code and save it?
3. Are there any known limitations with running a Web App specifically a React web app inside Webview? For example, the module that I mentioned: https://github.com/inokawa/react-native-react-bridge seems to be broken if I try to use libraries like MUI or three.js inside my react app on RN versions ≥ 0.72. Issue link.

[gronxb]

@JJSLIoT

1. Since you need to create a web bundle and include all the code in an HTML file, you do have to build it first. Before deploying, you’ll need to generate the final HTML using a bundler like Webpack or Vite. The example uses Webpack, but it doesn’t necessarily have to be Webpack. The key is that you end up with a single HTML file that contains all the necessary code.
2. You can use fast refresh but you might need to do some tweaking to get save refresh working within WebView.

Here’s an alternative approach for points 1 and 2:

import { bridge, createWebView } from "@webview-bridge/react-native";

const appBridge = bridge({
   // define your native method code
});

const Bridge = createWebView({
   bridge: appBridge
});

<Bridge.WebView
     source={require('html asset file path')}
/>;

In the above code, fast refresh will not occur.

import { bridge, createWebView } from "@webview-bridge/react-native";

const appBridge = bridge({
   // define your native method code
});

const Bridge = createWebView({
   bridge: appBridge
});

<Bridge.WebView
     source={{
         uri: 'http://localhost:3000', // WebView development environment 
     }}
/>;

In this setup, fast refresh will work as expected.

<Bridge.WebView
     source={__DEV__ ? {
         uri: 'http://localhost:3000', // WebView development environment 
     }: require('html asset file path')}
/>;

So, if you write your code like this, it would be ideal to go through the build process with a command like pnpm webpack in a continuous deployment (CD) environment when preparing for production.

With this setup, Fast Refresh should function properly during development, and the built HTML should work fine in production.

3. The example project works fine with React Native 0.72.5. My library only depends on react-native-webview and react, with no other external libraries or dependencies. So, I don’t anticipate you will encounter the issue you mentioned. However, if you do, I’ll be more than happy to help.

Since my library has no external dependencies, if you encounter errors related to other libraries (such as three.js, MUI, etc.), it is likely an issue with the bundler configuration rather than a problem with my library. As long as the bundler is set up correctly, there shouldn’t be any issues.

Thanks 😀

[JJSLIoT]

Thanks for the detailed explanation @gronxb much appreciated! The idea to have the React web app running on localhost during the development phase and generate the HTML file only for production seems very useful and interesting. I will definitely try this out.