Closed JJSLIoT closed 1 week ago
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.
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:
pnpm webpack
to generate the static HTML file for my React web app code to include it in the Webview? @JJSLIoT
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.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.
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 😀
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.
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?