Static html or react support #61
Comments
|
what do you mean by using it in static HTML? Do you mean a case like this? <WebView
source={{ html: `
<script>
const bridge = linkBridge();
bridge.openInAppBrowser("https://www.google.com/");
</script>
<h1>This is a static HTML source!</h1>
`}}
/>And what do you mean by using it in React? The webview-bridge is currently usable in React. Are you referring to using React via CDN a here <WebView
source={{ html: `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Standalone React Example</title>
<!-- Include React and ReactDOM from a CDN -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// Your React code here
function App() {
return (
<div>
<h1>Hello, React!</h1>
<p>This is a standalone React example.</p>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>
`}}
/>
Do you want to use webview-bridge for both static HTML and react without npm support ? |
|
yes! thanks for shared example for react! But, Can this react code be extended with webpack, html-webpack-plugin, transpiled locally, inserted as html automatically while also generating the required types as suggested? https://javascript.plainenglish.io/how-to-integrate-react-native-web-existing-react-native-apps-8e4964ad2f0b In my case, I have p5js, p5js audio, react and need webview two way bridge to react native |
|
This example was recorded in a non-deployed web environment. Simulator.Screen.Recording.-.iPhone.15.-.2024-07-24.at.23.05.21.mp4Please check the link below: In this React Native project, I created a simple web page and bundled it using webpack. Bundling was done with
In this project, running > pnpm webpackwill generate The WebView can be used as follows: <WebView
// 1. pnpm webpack (output: dist/index.html)
source={require("./dist/index.html")}
style={{ height: "100%", flex: 1, width: "100%" }}
/>Although I did not use react-native-web and react as you provided, the structure I used is sufficiently expandable with React. Let me know if you need assistance! |
|
I'll mark this issue as resolved and close it. |
All the shared examples require us to host the website.
Is it possible to use webview-bridge using static html or react thats packed along with react native app?
The text was updated successfully, but these errors were encountered: