-
Notifications
You must be signed in to change notification settings - Fork 5
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Quick question about the potential usage of running local react web app code inside react native web view #63
Comments
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:
|
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 With this setup, Fast Refresh should function properly during development, and the built HTML should work fine in production.
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?
The text was updated successfully, but these errors were encountered: