diff --git a/404.html b/404.html index f4f4c1a..88a5cab 100644 --- a/404.html +++ b/404.html @@ -27,7 +27,7 @@
WebViewBridge

Appearance

404

PAGE NOT FOUND

But if you don't change your direction, and if you keep looking, you may end up where you are heading.
Take me home
- + \ No newline at end of file diff --git a/assets/exporting-type-declarations_generate-declaration-file.md.10J0rAdR.js b/assets/exporting-type-declarations_generate-declaration-file.md.mmjxn8lb.js similarity index 96% rename from assets/exporting-type-declarations_generate-declaration-file.md.10J0rAdR.js rename to assets/exporting-type-declarations_generate-declaration-file.md.mmjxn8lb.js index 4f0c7b1..339074b 100644 --- a/assets/exporting-type-declarations_generate-declaration-file.md.10J0rAdR.js +++ b/assets/exporting-type-declarations_generate-declaration-file.md.mmjxn8lb.js @@ -1,4 +1,4 @@ -import{_ as s,c as i,o as a,U as e}from"./chunks/framework.ypo7A6Nx.js";const y=JSON.parse('{"title":"Generate Declaration File Setup","description":"","frontmatter":{},"headers":[],"relativePath":"exporting-type-declarations/generate-declaration-file.md","filePath":"exporting-type-declarations/generate-declaration-file.md"}'),t={name:"exporting-type-declarations/generate-declaration-file.md"},n=e(`

Generate Declaration File Setup ​

In some scenarios, you may have a react-native project and a web project as separate repositories.

Exporting types is a key part of webview-bridge, so here's a guide to sharing types across different projects. This guide is for moving types from methods declared in the React Native Project to the Web Project.

Steps for Exporting Types ​

1. Installing dts-bundle-generator: ​

NOTE

For more information and additional details, please visit the dts-bundle-generator GitHub repository at https://github.com/timocov/dts-bundle-generator.

To start, you'll need to add dts-bundle-generator to your project. This is done using the following command:

sh
$ npm add dts-bundle-generator --save-dev
sh
$ pnpm add dts-bundle-generator -D
sh
$ yarn add dts-bundle-generator --dev

2. Creating the Build Configuration File: ​

Next, create a tsconfig.build.json file with the necessary compiler options:

json
{
+import{_ as s,c as i,o as a,U as e}from"./chunks/framework.ypo7A6Nx.js";const y=JSON.parse('{"title":"Generate Declaration File Setup","description":"","frontmatter":{},"headers":[],"relativePath":"exporting-type-declarations/generate-declaration-file.md","filePath":"exporting-type-declarations/generate-declaration-file.md"}'),t={name:"exporting-type-declarations/generate-declaration-file.md"},n=e(`
Generate Declaration File Setup ​
In some scenarios, you may have a react-native project and a web project as separate repositories.
Exporting types is a key part of webview-bridge, so here's a guide to sharing types across different projects. This guide is for moving types from methods declared in the React Native Project to the Web Project.
Steps for Exporting Types ​
1. Installing dts-bundle-generator: ​
NOTE
For more information and additional details, please visit the dts-bundle-generator GitHub repository at https://github.com/timocov/dts-bundle-generator.
To start, you'll need to add dts-bundle-generator to your project. This is done using the following command:
sh
$ npm add dts-bundle-generator --save-dev
sh
$ pnpm add dts-bundle-generator -D
sh
$ yarn add dts-bundle-generator --dev
2. Creating the Build Configuration File: ​
Next, create a tsconfig.build.json file with the necessary compiler options:
json
{
   "compilerOptions": {
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -19,6 +19,6 @@ import{_ as s,c as i,o as a,U as e}from"./chunks/framework.ypo7A6Nx.js";const y=
     }
   },
 });
-export type AppBridge = typeof appBridge;
4. Generating Type Definitions: ​
Use dts-bundle-generator to create your type definitions file:
sh
$ npm dts-bundle-generator -o output.ts src/bridge.ts --project=tsconfig.build.json --no-check
sh
$ pnpm dts-bundle-generator -o output.ts src/bridge.ts --project=tsconfig.build.json --no-check
sh
$ yarn dts-bundle-generator -o output.ts src/bridge.ts  --project=tsconfig.build.json --no-check
5. Copying the Type Definitions File: ​
Once you have generated output.ts, copy this file to your web project.
6. Importing in the Web Project: ​
In your web project, import the types as shown below:
ts
import { AppBridge } from "./output";
+export type AppBridge = typeof appBridge;
4. Generating Type Definitions: ​
Use dts-bundle-generator to create your type definitions file:
sh
$ npm dts-bundle-generator -o output.ts src/bridge.ts --project=tsconfig.build.json --no-check
sh
$ pnpm dts-bundle-generator -o output.ts src/bridge.ts --project=tsconfig.build.json --no-check
sh
$ yarn dts-bundle-generator -o output.ts src/bridge.ts  --project=tsconfig.build.json --no-check
5. Copying the Type Definitions File: ​
Once you have generated output.ts, copy this file to your web project.
6. Importing in the Web Project: ​
In your web project, import the types as shown below:
ts
import { AppBridge } from "./output";
 
 const bridge = linkBridge<AppBridge>();
By following these steps, you ensure that type consistency and interoperability are maintained across your React Native and web projects, even when they are housed in multi repositories.
`,23),p=[n];function l(h,r,k,o,d,g){return a(),i("div",null,p)}const F=s(t,[["render",l]]);export{y as __pageData,F as default};
diff --git a/assets/exporting-type-declarations_generate-declaration-file.md.10J0rAdR.lean.js b/assets/exporting-type-declarations_generate-declaration-file.md.mmjxn8lb.lean.js
similarity index 100%
rename from assets/exporting-type-declarations_generate-declaration-file.md.10J0rAdR.lean.js
rename to assets/exporting-type-declarations_generate-declaration-file.md.mmjxn8lb.lean.js
diff --git a/assets/exporting-type-declarations_monorepo.md.9njZrMyr.js b/assets/exporting-type-declarations_monorepo.md.aPXfH2N4.js
similarity index 97%
rename from assets/exporting-type-declarations_monorepo.md.9njZrMyr.js
rename to assets/exporting-type-declarations_monorepo.md.aPXfH2N4.js
index 2fc134c..a6be9d2 100644
--- a/assets/exporting-type-declarations_monorepo.md.9njZrMyr.js
+++ b/assets/exporting-type-declarations_monorepo.md.aPXfH2N4.js
@@ -18,4 +18,4 @@ import{_ as s,c as i,o as a,U as e}from"./chunks/framework.ypo7A6Nx.js";const y=
   "name": "your-react-native-project",
   "types": "src/bridge.ts", // This file is where the bridge file is defined.
   ...
-}

2. Add Internal Package in the Web Project: ​

In your web project, add the React Native project as an internal package:

sh
$ npm add your-react-native-project --save-dev
sh
$ pnpm add your-react-native-project -D
sh
$ yarn add your-react-native-project --dev

That's all there is to it! To export types from the Web Project to the React Native Project, simply reverse the process.

NOTE

You can explore a practical example and further understand the implementation by visiting the example GitHub repository. This repository provides a hands-on demonstration of the concepts and steps outlined in this guide.

`,16),p=[n];function h(l,r,o,k,d,c){return a(),i("div",null,p)}const E=s(t,[["render",h]]);export{y as __pageData,E as default}; +}

2. Add Internal Package in the Web Project: ​

In your web project, add the React Native project as an internal package:

sh
$ npm add your-react-native-project --save-dev
sh
$ pnpm add your-react-native-project -D
sh
$ yarn add your-react-native-project --dev

That's all there is to it! To export types from the Web Project to the React Native Project, simply reverse the process.

NOTE

You can explore a practical example and further understand the implementation by visiting the example GitHub repository. This repository provides a hands-on demonstration of the concepts and steps outlined in this guide.

`,16),p=[n];function h(l,r,o,k,d,c){return a(),i("div",null,p)}const E=s(t,[["render",h]]);export{y as __pageData,E as default}; diff --git a/assets/exporting-type-declarations_monorepo.md.9njZrMyr.lean.js b/assets/exporting-type-declarations_monorepo.md.aPXfH2N4.lean.js similarity index 100% rename from assets/exporting-type-declarations_monorepo.md.9njZrMyr.lean.js rename to assets/exporting-type-declarations_monorepo.md.aPXfH2N4.lean.js diff --git a/assets/getting-started.md.LLOuplJZ.js b/assets/getting-started.md._MY93zJJ.js similarity index 97% rename from assets/getting-started.md.LLOuplJZ.js rename to assets/getting-started.md._MY93zJJ.js index cf1bcd7..557a099 100644 --- a/assets/getting-started.md.LLOuplJZ.js +++ b/assets/getting-started.md._MY93zJJ.js @@ -1,4 +1,4 @@ -import{_ as s,c as i,o as a,U as t}from"./chunks/framework.ypo7A6Nx.js";const c=JSON.parse('{"title":"Getting Started","description":"","frontmatter":{},"headers":[],"relativePath":"getting-started.md","filePath":"getting-started.md"}'),n={name:"getting-started.md"},e=t(`

Getting Started ​

Installation ​

React Native Project ​

sh
$ npm add @webview-bridge/react-native react-native-webview
sh
$ pnpm add @webview-bridge/react-native react-native-webview
sh
$ yarn add @webview-bridge/react-native react-native-webview

Web Project ​

sh
$ npm add @webview-bridge/web
sh
$ pnpm add @webview-bridge/web
sh
$ yarn add @webview-bridge/web

Using a Native Method ​

This guide covers how to use methods declared in React Native within a web.

React Native Part ​

Register functions in the bridge object in your React Native code

IMPORTANT

You need to export the created typeof appBridge and share its type with the web project. Failing to do so will result in a lack of type safety. This principle is similar to how tRPC operates.

For detailed guides, visit:
Monorepo setup: Exporting Type Declarations in a Monorepo
Custom declaration file: Exporting Type Declarations with a Custom Declaration File
Generate declaration file: Exporting Type Declarations with a Generate Declaration File

tsx
import { createWebView, bridge } from "@webview-bridge/react-native";
+import{_ as s,c as i,o as a,U as t}from"./chunks/framework.ypo7A6Nx.js";const c=JSON.parse('{"title":"Getting Started","description":"","frontmatter":{},"headers":[],"relativePath":"getting-started.md","filePath":"getting-started.md"}'),n={name:"getting-started.md"},e=t(`
Getting Started ​
Installation ​
React Native Project ​
sh
$ npm add @webview-bridge/react-native react-native-webview
sh
$ pnpm add @webview-bridge/react-native react-native-webview
sh
$ yarn add @webview-bridge/react-native react-native-webview
Web Project ​
sh
$ npm add @webview-bridge/web
sh
$ pnpm add @webview-bridge/web
sh
$ yarn add @webview-bridge/web
Using a Native Method ​
This guide covers how to use methods declared in React Native within a web.
React Native Part ​
Register functions in the bridge object in your React Native code
IMPORTANT
You need to export the created typeof appBridge and share its type with the web project. Failing to do so will result in a lack of type safety. This principle is similar to how tRPC operates.
For detailed guides, visit:
 Monorepo setup: Exporting Type Declarations in a Monorepo
 Custom declaration file: Exporting Type Declarations with a Custom Declaration File
 Generate declaration file: Exporting Type Declarations with a Generate Declaration File
tsx
import { createWebView, bridge } from "@webview-bridge/react-native";
 
 // Register functions in the bridge object in your React Native code
 export const appBridge = bridge({
@@ -57,4 +57,4 @@ import{_ as s,c as i,o as a,U as t}from"./chunks/framework.ypo7A6Nx.js";const c=
     bridge.openInAppBrowser();
 } else {
     console.warn("native method not supported")
-}
`,26),h=[e];function l(p,k,r,d,E,g){return a(),i("div",null,h)}const y=s(n,[["render",l]]);export{c as __pageData,y as default};
+}
`,26),h=[e];function p(l,k,r,d,E,g){return a(),i("div",null,h)}const y=s(n,[["render",p]]);export{c as __pageData,y as default}; diff --git a/assets/getting-started.md.LLOuplJZ.lean.js b/assets/getting-started.md._MY93zJJ.lean.js similarity index 68% rename from assets/getting-started.md.LLOuplJZ.lean.js rename to assets/getting-started.md._MY93zJJ.lean.js index c7359ba..80e7104 100644 --- a/assets/getting-started.md.LLOuplJZ.lean.js +++ b/assets/getting-started.md._MY93zJJ.lean.js @@ -1 +1 @@ -import{_ as s,c as i,o as a,U as t}from"./chunks/framework.ypo7A6Nx.js";const c=JSON.parse('{"title":"Getting Started","description":"","frontmatter":{},"headers":[],"relativePath":"getting-started.md","filePath":"getting-started.md"}'),n={name:"getting-started.md"},e=t("",26),h=[e];function l(p,k,r,d,E,g){return a(),i("div",null,h)}const y=s(n,[["render",l]]);export{c as __pageData,y as default}; +import{_ as s,c as i,o as a,U as t}from"./chunks/framework.ypo7A6Nx.js";const c=JSON.parse('{"title":"Getting Started","description":"","frontmatter":{},"headers":[],"relativePath":"getting-started.md","filePath":"getting-started.md"}'),n={name:"getting-started.md"},e=t("",26),h=[e];function p(l,k,r,d,E,g){return a(),i("div",null,h)}const y=s(n,[["render",p]]);export{c as __pageData,y as default}; diff --git a/assets/shared-state_react.md.vFvfO4mw.js b/assets/shared-state_react.md.pBUV30N5.js similarity index 98% rename from assets/shared-state_react.md.vFvfO4mw.js rename to assets/shared-state_react.md.pBUV30N5.js index 29560d8..34ea298 100644 --- a/assets/shared-state_react.md.vFvfO4mw.js +++ b/assets/shared-state_react.md.pBUV30N5.js @@ -1,4 +1,4 @@ -import{_ as s,c as i,o as a,U as t}from"./chunks/framework.ypo7A6Nx.js";const o=JSON.parse('{"title":"Shared State in React","description":"","frontmatter":{},"headers":[],"relativePath":"shared-state/react.md","filePath":"shared-state/react.md"}'),n={name:"shared-state/react.md"},e=t(`

Shared State in React ​

This guide integrates the state declared in Shared State in React Native with React within a WebView.

Installation ​

sh
$ npm add @webview-bridge/react @webview-bridge/web
sh
$ pnpm add @webview-bridge/react @webview-bridge/web
sh
$ yarn add @webview-bridge/react @webview-bridge/web

linkBridge ​

Use the linkBridge function to connect with the WebView as shown below.

Assume AppBridge, used as a generic, is declared in React Native with the following structure (refer to Shared State in React Native):

React Native Part ​

tsx
// React Native sample
+import{_ as s,c as i,o as a,U as t}from"./chunks/framework.ypo7A6Nx.js";const o=JSON.parse('{"title":"Shared State in React","description":"","frontmatter":{},"headers":[],"relativePath":"shared-state/react.md","filePath":"shared-state/react.md"}'),n={name:"shared-state/react.md"},e=t(`
Shared State in React ​
This guide integrates the state declared in Shared State in React Native with React within a WebView.
Installation ​
sh
$ npm add @webview-bridge/react @webview-bridge/web
sh
$ pnpm add @webview-bridge/react @webview-bridge/web
sh
$ yarn add @webview-bridge/react @webview-bridge/web
linkBridge ​
Use the linkBridge function to connect with the WebView as shown below.
Assume AppBridge, used as a generic, is declared in React Native with the following structure (refer to Shared State in React Native):
React Native Part ​
tsx
// React Native sample
 import { bridge } from "@webview-bridge/react-native";
 
 type AppBridgeState = {
diff --git a/assets/shared-state_react.md.vFvfO4mw.lean.js b/assets/shared-state_react.md.pBUV30N5.lean.js
similarity index 100%
rename from assets/shared-state_react.md.vFvfO4mw.lean.js
rename to assets/shared-state_react.md.pBUV30N5.lean.js
diff --git a/assets/shared-state_vanilla.md.9G58G9l1.js b/assets/shared-state_vanilla.md.OaAuc3sv.js
similarity index 97%
rename from assets/shared-state_vanilla.md.9G58G9l1.js
rename to assets/shared-state_vanilla.md.OaAuc3sv.js
index d88a139..8dae214 100644
--- a/assets/shared-state_vanilla.md.9G58G9l1.js
+++ b/assets/shared-state_vanilla.md.OaAuc3sv.js
@@ -1,4 +1,4 @@
-import{_ as s,c as i,o as a,U as t}from"./chunks/framework.ypo7A6Nx.js";const c=JSON.parse('{"title":"Shared State in Vanilla","description":"","frontmatter":{},"headers":[],"relativePath":"shared-state/vanilla.md","filePath":"shared-state/vanilla.md"}'),e={name:"shared-state/vanilla.md"},n=t(`
Shared State in Vanilla ​
This guide integrates the state declared in Shared State in React Native with vanilla within a WebView.
Installation ​
sh
$ npm add @webview-bridge/web
sh
$ pnpm add @webview-bridge/web
sh
$ yarn add @webview-bridge/web
linkBridge ​
Use the linkBridge function to connect with the WebView as shown below.
Assume AppBridge, used as a generic, is declared in React Native with the following structure (refer to Shared State in React Native):
React Native Part ​
tsx
// React Native sample
+import{_ as s,c as i,o as a,U as t}from"./chunks/framework.ypo7A6Nx.js";const c=JSON.parse('{"title":"Shared State in Vanilla","description":"","frontmatter":{},"headers":[],"relativePath":"shared-state/vanilla.md","filePath":"shared-state/vanilla.md"}'),e={name:"shared-state/vanilla.md"},n=t(`
Shared State in Vanilla ​
This guide integrates the state declared in Shared State in React Native with vanilla within a WebView.
Installation ​
sh
$ npm add @webview-bridge/web
sh
$ pnpm add @webview-bridge/web
sh
$ yarn add @webview-bridge/web
linkBridge ​
Use the linkBridge function to connect with the WebView as shown below.
Assume AppBridge, used as a generic, is declared in React Native with the following structure (refer to Shared State in React Native):
React Native Part ​
tsx
// React Native sample
 import { bridge } from "@webview-bridge/react-native";
 
 type AppBridgeState = {
diff --git a/assets/shared-state_vanilla.md.9G58G9l1.lean.js b/assets/shared-state_vanilla.md.OaAuc3sv.lean.js
similarity index 100%
rename from assets/shared-state_vanilla.md.9G58G9l1.lean.js
rename to assets/shared-state_vanilla.md.OaAuc3sv.lean.js
diff --git a/assets/shared-state_vue.md.EZ3SEjo9.js b/assets/shared-state_vue.md.6d38aoM6.js
similarity index 96%
rename from assets/shared-state_vue.md.EZ3SEjo9.js
rename to assets/shared-state_vue.md.6d38aoM6.js
index cb99c89..5a70e84 100644
--- a/assets/shared-state_vue.md.EZ3SEjo9.js
+++ b/assets/shared-state_vue.md.6d38aoM6.js
@@ -1,4 +1,4 @@
-import{_ as s,c as i,o as a,U as t}from"./chunks/framework.ypo7A6Nx.js";const y=JSON.parse('{"title":"Shared State in Vue","description":"","frontmatter":{},"headers":[],"relativePath":"shared-state/vue.md","filePath":"shared-state/vue.md"}'),n={name:"shared-state/vue.md"},h=t(`
Shared State in Vue ​
This guide integrates the state declared in Shared State in React Native with Vue within a WebView.
Installation ​
sh
$ npm add @webview-bridge/vue @webview-bridge/web
sh
$ pnpm add @webview-bridge/vue @webview-bridge/web
sh
$ yarn add @webview-bridge/vue @webview-bridge/web
linkBridge ​
Use the linkBridge function to connect with the WebView as shown below.
Assume AppBridge, used as a generic, is declared in React Native with the following structure (refer to Shared State in React Native):
React Native Part ​
tsx
// React Native sample
+import{_ as s,c as i,o as a,U as t}from"./chunks/framework.ypo7A6Nx.js";const o=JSON.parse('{"title":"Shared State in Vue","description":"","frontmatter":{},"headers":[],"relativePath":"shared-state/vue.md","filePath":"shared-state/vue.md"}'),n={name:"shared-state/vue.md"},e=t(`
Shared State in Vue ​
This guide integrates the state declared in Shared State in React Native with Vue within a WebView.
Installation ​
sh
$ npm add @webview-bridge/vue @webview-bridge/web
sh
$ pnpm add @webview-bridge/vue @webview-bridge/web
sh
$ yarn add @webview-bridge/vue @webview-bridge/web
linkBridge ​
Use the linkBridge function to connect with the WebView as shown below.
Assume AppBridge, used as a generic, is declared in React Native with the following structure (refer to Shared State in React Native):
React Native Part ​
tsx
// React Native sample
 import { bridge } from "@webview-bridge/react-native";
 
 type AppBridgeState = {
@@ -46,4 +46,4 @@ import{_ as s,c as i,o as a,U as t}from"./chunks/framework.ypo7A6Nx.js";const y=
 
     <button @click="bridgeStore.increase()">Increase from web</button>
   </div>
-</template>
NOTE
You can explore a practical example and further understand the implementation by visiting bellow.
`,16),e=[h];function l(p,k,r,d,E,g){return a(),i("div",null,e)}const c=s(n,[["render",l]]);export{y as __pageData,c as default};
+</template>
NOTE
You can explore a practical example and further understand the implementation by visiting bellow.
`,16),h=[e];function l(p,k,r,d,E,g){return a(),i("div",null,h)}const c=s(n,[["render",l]]);export{o as __pageData,c as default};
diff --git a/assets/shared-state_vue.md.EZ3SEjo9.lean.js b/assets/shared-state_vue.md.6d38aoM6.lean.js
similarity index 52%
rename from assets/shared-state_vue.md.EZ3SEjo9.lean.js
rename to assets/shared-state_vue.md.6d38aoM6.lean.js
index 2febc82..874937a 100644
--- a/assets/shared-state_vue.md.EZ3SEjo9.lean.js
+++ b/assets/shared-state_vue.md.6d38aoM6.lean.js
@@ -1 +1 @@
-import{_ as s,c as i,o as a,U as t}from"./chunks/framework.ypo7A6Nx.js";const y=JSON.parse('{"title":"Shared State in Vue","description":"","frontmatter":{},"headers":[],"relativePath":"shared-state/vue.md","filePath":"shared-state/vue.md"}'),n={name:"shared-state/vue.md"},h=t("",16),e=[h];function l(p,k,r,d,E,g){return a(),i("div",null,e)}const c=s(n,[["render",l]]);export{y as __pageData,c as default};
+import{_ as s,c as i,o as a,U as t}from"./chunks/framework.ypo7A6Nx.js";const o=JSON.parse('{"title":"Shared State in Vue","description":"","frontmatter":{},"headers":[],"relativePath":"shared-state/vue.md","filePath":"shared-state/vue.md"}'),n={name:"shared-state/vue.md"},e=t("",16),h=[e];function l(p,k,r,d,E,g){return a(),i("div",null,h)}const c=s(n,[["render",l]]);export{o as __pageData,c as default};
diff --git a/assets/ssr_next-js-app-router.md.-yfUZr-3.js b/assets/ssr_next-js-app-router.md.UmBnB1cC.js
similarity index 99%
rename from assets/ssr_next-js-app-router.md.-yfUZr-3.js
rename to assets/ssr_next-js-app-router.md.UmBnB1cC.js
index 8edb550..acb72a3 100644
--- a/assets/ssr_next-js-app-router.md.-yfUZr-3.js
+++ b/assets/ssr_next-js-app-router.md.UmBnB1cC.js
@@ -1,4 +1,4 @@
-import{_ as s,c as i,o as a,U as n}from"./chunks/framework.ypo7A6Nx.js";const o=JSON.parse('{"title":"Setup with Remix","description":"","frontmatter":{},"headers":[],"relativePath":"ssr/next-js-app-router.md","filePath":"ssr/next-js-app-router.md"}'),t={name:"ssr/next-js-app-router.md"},h=n(`
Setup with Remix ​
This guide provides instructions on how to use webview-bridge in Next.js (App Router) applications.
Page Router
For page routing, apply the same approach: set up the Provider in _app.tsx and use it similarly.
What does it solve? ​
By design, webview-bridge relies on client-side rendering, which can lead to hydration mismatches due to fetching data from the connected app. Resolving hydration mismatches is challenging in such scenarios. This guide helps to use Providers client-side in an SSR environment, avoiding execution on the server, and enables the use of default hooks seamlessly.
Installation ​
sh
$ npm add @webview-bridge/react @webview-bridge/web
sh
$ pnpm add @webview-bridge/react @webview-bridge/web
sh
$ yarn add @webview-bridge/react @webview-bridge/web
createLinkBridgeProvider ​
providers/BridgeProvider.ts ​
tsx
"use client";
+import{_ as s,c as i,o as a,U as n}from"./chunks/framework.ypo7A6Nx.js";const o=JSON.parse('{"title":"Setup with Remix","description":"","frontmatter":{},"headers":[],"relativePath":"ssr/next-js-app-router.md","filePath":"ssr/next-js-app-router.md"}'),t={name:"ssr/next-js-app-router.md"},h=n(`
Setup with Remix ​
This guide provides instructions on how to use webview-bridge in Next.js (App Router) applications.
Page Router
For page routing, apply the same approach: set up the Provider in _app.tsx and use it similarly.
What does it solve? ​
By design, webview-bridge relies on client-side rendering, which can lead to hydration mismatches due to fetching data from the connected app. Resolving hydration mismatches is challenging in such scenarios. This guide helps to use Providers client-side in an SSR environment, avoiding execution on the server, and enables the use of default hooks seamlessly.
Installation ​
sh
$ npm add @webview-bridge/react @webview-bridge/web
sh
$ pnpm add @webview-bridge/react @webview-bridge/web
sh
$ yarn add @webview-bridge/react @webview-bridge/web
createLinkBridgeProvider ​
providers/BridgeProvider.ts ​
tsx
"use client";
 import { createLinkBridgeProvider } from "@webview-bridge/react";
 import type { AppBridge } from ""; // Import the type 'appBridge' declared in native
 
diff --git a/assets/ssr_next-js-app-router.md.-yfUZr-3.lean.js b/assets/ssr_next-js-app-router.md.UmBnB1cC.lean.js
similarity index 100%
rename from assets/ssr_next-js-app-router.md.-yfUZr-3.lean.js
rename to assets/ssr_next-js-app-router.md.UmBnB1cC.lean.js
diff --git a/assets/ssr_remix.md.j2ywf9WA.js b/assets/ssr_remix.md.ZClzWzQJ.js
similarity index 99%
rename from assets/ssr_remix.md.j2ywf9WA.js
rename to assets/ssr_remix.md.ZClzWzQJ.js
index 8cb624e..7449703 100644
--- a/assets/ssr_remix.md.j2ywf9WA.js
+++ b/assets/ssr_remix.md.ZClzWzQJ.js
@@ -1,4 +1,4 @@
-import{_ as s,c as i,o as a,U as n}from"./chunks/framework.ypo7A6Nx.js";const o=JSON.parse('{"title":"Setup with Remix","description":"","frontmatter":{},"headers":[],"relativePath":"ssr/remix.md","filePath":"ssr/remix.md"}'),h={name:"ssr/remix.md"},t=n(`
Setup with Remix ​
This guide provides instructions on how to use webview-bridge in Remix applications.
What does it solve? ​
By design, webview-bridge relies on client-side rendering, which can lead to hydration mismatches due to fetching data from the connected app. Resolving hydration mismatches is challenging in such scenarios. This guide helps to use Providers client-side in an SSR environment, avoiding execution on the server, and enables the use of default hooks seamlessly.
Installation ​
sh
$ npm add @webview-bridge/react @webview-bridge/web
sh
$ pnpm add @webview-bridge/react @webview-bridge/web
sh
$ yarn add @webview-bridge/react @webview-bridge/web
createLinkBridgeProvider ​
providers/BridgeProvider.ts ​
tsx
import { createLinkBridgeProvider } from "@webview-bridge/react";
+import{_ as s,c as i,o as a,U as n}from"./chunks/framework.ypo7A6Nx.js";const o=JSON.parse('{"title":"Setup with Remix","description":"","frontmatter":{},"headers":[],"relativePath":"ssr/remix.md","filePath":"ssr/remix.md"}'),t={name:"ssr/remix.md"},h=n(`
Setup with Remix ​
This guide provides instructions on how to use webview-bridge in Remix applications.
What does it solve? ​
By design, webview-bridge relies on client-side rendering, which can lead to hydration mismatches due to fetching data from the connected app. Resolving hydration mismatches is challenging in such scenarios. This guide helps to use Providers client-side in an SSR environment, avoiding execution on the server, and enables the use of default hooks seamlessly.
Installation ​
sh
$ npm add @webview-bridge/react @webview-bridge/web
sh
$ pnpm add @webview-bridge/react @webview-bridge/web
sh
$ yarn add @webview-bridge/react @webview-bridge/web
createLinkBridgeProvider ​
providers/BridgeProvider.ts ​
tsx
import { createLinkBridgeProvider } from "@webview-bridge/react";
 import type { AppBridge } from ""; // Import the type 'appBridge' declared in native
 
 export const { BridgeProvider, useBridgeStore, useBridgeStatus, useBridgeLoose } =
@@ -168,4 +168,4 @@ import{_ as s,c as i,o as a,U as n}from"./chunks/framework.ypo7A6Nx.js";const o=
 
 export default function Index() {
   return <BridgeHome />;
-}
Use clientLoader to load components using the bridge on the client side, with the primary goal of avoiding the hydration process.
`,22),l=[t];function k(p,e,E,r,d,g){return a(),i("div",null,l)}const F=s(h,[["render",k]]);export{o as __pageData,F as default};
+}
Use clientLoader to load components using the bridge on the client side, with the primary goal of avoiding the hydration process.
`,22),l=[h];function k(p,e,E,r,d,g){return a(),i("div",null,l)}const F=s(t,[["render",k]]);export{o as __pageData,F as default};
diff --git a/assets/ssr_remix.md.j2ywf9WA.lean.js b/assets/ssr_remix.md.ZClzWzQJ.lean.js
similarity index 50%
rename from assets/ssr_remix.md.j2ywf9WA.lean.js
rename to assets/ssr_remix.md.ZClzWzQJ.lean.js
index 2e14661..395830c 100644
--- a/assets/ssr_remix.md.j2ywf9WA.lean.js
+++ b/assets/ssr_remix.md.ZClzWzQJ.lean.js
@@ -1 +1 @@
-import{_ as s,c as i,o as a,U as n}from"./chunks/framework.ypo7A6Nx.js";const o=JSON.parse('{"title":"Setup with Remix","description":"","frontmatter":{},"headers":[],"relativePath":"ssr/remix.md","filePath":"ssr/remix.md"}'),h={name:"ssr/remix.md"},t=n("",22),l=[t];function k(p,e,E,r,d,g){return a(),i("div",null,l)}const F=s(h,[["render",k]]);export{o as __pageData,F as default};
+import{_ as s,c as i,o as a,U as n}from"./chunks/framework.ypo7A6Nx.js";const o=JSON.parse('{"title":"Setup with Remix","description":"","frontmatter":{},"headers":[],"relativePath":"ssr/remix.md","filePath":"ssr/remix.md"}'),t={name:"ssr/remix.md"},h=n("",22),l=[h];function k(p,e,E,r,d,g){return a(),i("div",null,l)}const F=s(t,[["render",k]]);export{o as __pageData,F as default};
diff --git a/assets/using-a-post-message.md.HdCADiDx.js b/assets/using-a-post-message.md._09uivbp.js
similarity index 97%
rename from assets/using-a-post-message.md.HdCADiDx.js
rename to assets/using-a-post-message.md._09uivbp.js
index d585034..cf26b5b 100644
--- a/assets/using-a-post-message.md.HdCADiDx.js
+++ b/assets/using-a-post-message.md._09uivbp.js
@@ -1,4 +1,4 @@
-import{_ as s,c as i,o as a,U as n,a6 as t}from"./chunks/framework.ypo7A6Nx.js";const c=JSON.parse('{"title":"Using PostMessage","description":"","frontmatter":{},"headers":[],"relativePath":"using-a-post-message.md","filePath":"using-a-post-message.md"}'),e={name:"using-a-post-message.md"},p=n('
Using PostMessage ​
This guide will teach you how to send events from React Native to web and subscribe to those events within the web.
Installation ​
You need additional libraries to define schemas. Supported schema libraries:
Please choose and use the library you prefer.
Follow the guidelines of each library for schema definition.
sh
$ npm add @webview-bridge/web zod
+import{_ as s,c as i,o as a,U as n,a6 as t}from"./chunks/framework.ypo7A6Nx.js";const c=JSON.parse('{"title":"Using PostMessage","description":"","frontmatter":{},"headers":[],"relativePath":"using-a-post-message.md","filePath":"using-a-post-message.md"}'),e={name:"using-a-post-message.md"},p=n('
Using PostMessage ​
This guide will teach you how to send events from React Native to web and subscribe to those events within the web.
Installation ​
You need additional libraries to define schemas. Supported schema libraries:
Please choose and use the library you prefer.
Follow the guidelines of each library for schema definition.
sh
$ npm add @webview-bridge/web zod
 # or 
 $ npm add @webview-bridge/web yup
 # or 
@@ -10,7 +10,7 @@ import{_ as s,c as i,o as a,U as n,a6 as t}from"./chunks/framework.ypo7A6Nx.js";
 # or 
 $ yarn add @webview-bridge/web yup
 # or 
-$ yarn add @webview-bridge/web superstruct
React Native Part ​
In React Native, you need to define events in advance and export the types.
NOTE
Even if you don't define the event schema, you can use postMessage loosely. If the types are not important, you can skip them and just use postMessage.
tsx
import { createWebView, postMessageSchema } from "@webview-bridge/react-native";
+$ yarn add @webview-bridge/web superstruct
React Native Part ​
In React Native, you need to define events in advance and export the types.
NOTE
Even if you don't define the event schema, you can use postMessage loosely. If the types are not important, you can skip them and just use postMessage.
tsx
import { createWebView, postMessageSchema } from "@webview-bridge/react-native";
 import { z } from "zod";
 
 const appPostMessageSchema = postMessageSchema({
diff --git a/assets/using-a-post-message.md.HdCADiDx.lean.js b/assets/using-a-post-message.md._09uivbp.lean.js
similarity index 100%
rename from assets/using-a-post-message.md.HdCADiDx.lean.js
rename to assets/using-a-post-message.md._09uivbp.lean.js
diff --git a/backward-compatibility/deprecated-method.html b/backward-compatibility/deprecated-method.html
index cbd0bd0..e500dc8 100644
--- a/backward-compatibility/deprecated-method.html
+++ b/backward-compatibility/deprecated-method.html
@@ -58,7 +58,7 @@
   await bridge.loose.getOldVersionMessage();
   console.log(oldVersionMessage);
 }

-    
+    
     
   
 
\ No newline at end of file
diff --git a/backward-compatibility/new-method.html b/backward-compatibility/new-method.html
index 9d6c2cd..41e0232 100644
--- a/backward-compatibility/new-method.html
+++ b/backward-compatibility/new-method.html
@@ -85,7 +85,7 @@
     console.warn(`Method '${method}' not found in native`);
   },
 });
When a method not present on the web is called, the fallback function is executed. In this case, the method name called from the web is passed.
This field can be useful for tracking errors with tools like Sentry.
- + \ No newline at end of file diff --git a/example/react-navigation.html b/example/react-navigation.html index f483e83..1e786b1 100644 --- a/example/react-navigation.html +++ b/example/react-navigation.html @@ -227,7 +227,7 @@ } export default App; - + \ No newline at end of file diff --git a/exporting-type-declarations/custom-declaration-file.html b/exporting-type-declarations/custom-declaration-file.html index 91b9694..43c38c7 100644 --- a/exporting-type-declarations/custom-declaration-file.html +++ b/exporting-type-declarations/custom-declaration-file.html @@ -69,7 +69,7 @@ export type AppBridge = BridgeStore<BridgeState>; const bridge = linkBridge<AppBridge>();

By following these steps, you ensure that type consistency and interoperability are maintained across your React Native and web projects, even when they are housed in multi repositories.

- + \ No newline at end of file diff --git a/exporting-type-declarations/generate-declaration-file.html b/exporting-type-declarations/generate-declaration-file.html index 066f81b..05af454 100644 --- a/exporting-type-declarations/generate-declaration-file.html +++ b/exporting-type-declarations/generate-declaration-file.html @@ -12,7 +12,7 @@ - + @@ -29,7 +29,7 @@ -
WebViewBridge

Appearance

Generate Declaration File Setup ​

In some scenarios, you may have a react-native project and a web project as separate repositories.

Exporting types is a key part of webview-bridge, so here's a guide to sharing types across different projects. This guide is for moving types from methods declared in the React Native Project to the Web Project.

Steps for Exporting Types ​

1. Installing dts-bundle-generator: ​

NOTE

For more information and additional details, please visit the dts-bundle-generator GitHub repository at https://github.com/timocov/dts-bundle-generator.

To start, you'll need to add dts-bundle-generator to your project. This is done using the following command:

sh
$ npm add dts-bundle-generator --save-dev
sh
$ pnpm add dts-bundle-generator -D
sh
$ yarn add dts-bundle-generator --dev

2. Creating the Build Configuration File: ​

Next, create a tsconfig.build.json file with the necessary compiler options:

json
{
+    
WebViewBridge
Appearance
Generate Declaration File Setup ​
In some scenarios, you may have a react-native project and a web project as separate repositories.
Exporting types is a key part of webview-bridge, so here's a guide to sharing types across different projects. This guide is for moving types from methods declared in the React Native Project to the Web Project.
Steps for Exporting Types ​
1. Installing dts-bundle-generator: ​
NOTE
For more information and additional details, please visit the dts-bundle-generator GitHub repository at https://github.com/timocov/dts-bundle-generator.
To start, you'll need to add dts-bundle-generator to your project. This is done using the following command:
sh
$ npm add dts-bundle-generator --save-dev
sh
$ pnpm add dts-bundle-generator -D
sh
$ yarn add dts-bundle-generator --dev
2. Creating the Build Configuration File: ​
Next, create a tsconfig.build.json file with the necessary compiler options:
json
{
   "compilerOptions": {
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -50,10 +50,10 @@
     }
   },
 });
-export type AppBridge = typeof appBridge;
4. Generating Type Definitions: ​
Use dts-bundle-generator to create your type definitions file:
sh
$ npm dts-bundle-generator -o output.ts src/bridge.ts --project=tsconfig.build.json --no-check
sh
$ pnpm dts-bundle-generator -o output.ts src/bridge.ts --project=tsconfig.build.json --no-check
sh
$ yarn dts-bundle-generator -o output.ts src/bridge.ts  --project=tsconfig.build.json --no-check
5. Copying the Type Definitions File: ​
Once you have generated output.ts, copy this file to your web project.
6. Importing in the Web Project: ​
In your web project, import the types as shown below:
ts
import { AppBridge } from "./output";
+export type AppBridge = typeof appBridge;
4. Generating Type Definitions: ​
Use dts-bundle-generator to create your type definitions file:
sh
$ npm dts-bundle-generator -o output.ts src/bridge.ts --project=tsconfig.build.json --no-check
sh
$ pnpm dts-bundle-generator -o output.ts src/bridge.ts --project=tsconfig.build.json --no-check
sh
$ yarn dts-bundle-generator -o output.ts src/bridge.ts  --project=tsconfig.build.json --no-check
5. Copying the Type Definitions File: ​
Once you have generated output.ts, copy this file to your web project.
6. Importing in the Web Project: ​
In your web project, import the types as shown below:
ts
import { AppBridge } from "./output";
 
 const bridge = linkBridge<AppBridge>();
By following these steps, you ensure that type consistency and interoperability are maintained across your React Native and web projects, even when they are housed in multi repositories.

-    
+    
     
   
 
\ No newline at end of file
diff --git a/exporting-type-declarations/monorepo.html b/exporting-type-declarations/monorepo.html
index aab8a37..2e6a488 100644
--- a/exporting-type-declarations/monorepo.html
+++ b/exporting-type-declarations/monorepo.html
@@ -12,7 +12,7 @@
     
     
     
-    
+    
     
     
     
@@ -49,8 +49,8 @@
   "name": "your-react-native-project",
   "types": "src/bridge.ts", // This file is where the bridge file is defined.
   ...
-}

2. Add Internal Package in the Web Project: ​

In your web project, add the React Native project as an internal package:

sh
$ npm add your-react-native-project --save-dev
sh
$ pnpm add your-react-native-project -D
sh
$ yarn add your-react-native-project --dev

That's all there is to it! To export types from the Web Project to the React Native Project, simply reverse the process.

NOTE

You can explore a practical example and further understand the implementation by visiting the example GitHub repository. This repository provides a hands-on demonstration of the concepts and steps outlined in this guide.

- +}

2. Add Internal Package in the Web Project: ​

In your web project, add the React Native project as an internal package:

sh
$ npm add your-react-native-project --save-dev
sh
$ pnpm add your-react-native-project -D
sh
$ yarn add your-react-native-project --dev

That's all there is to it! To export types from the Web Project to the React Native Project, simply reverse the process.

NOTE

You can explore a practical example and further understand the implementation by visiting the example GitHub repository. This repository provides a hands-on demonstration of the concepts and steps outlined in this guide.

+ \ No newline at end of file diff --git a/getting-started.html b/getting-started.html index 14a6605..5a1f68f 100644 --- a/getting-started.html +++ b/getting-started.html @@ -12,7 +12,7 @@ - + @@ -29,7 +29,7 @@ -
WebViewBridge

Appearance

Getting Started ​

Installation ​

React Native Project ​

sh
$ npm add @webview-bridge/react-native react-native-webview
sh
$ pnpm add @webview-bridge/react-native react-native-webview
sh
$ yarn add @webview-bridge/react-native react-native-webview

Web Project ​

sh
$ npm add @webview-bridge/web
sh
$ pnpm add @webview-bridge/web
sh
$ yarn add @webview-bridge/web

Using a Native Method ​

This guide covers how to use methods declared in React Native within a web.

React Native Part ​

Register functions in the bridge object in your React Native code

IMPORTANT

You need to export the created typeof appBridge and share its type with the web project. Failing to do so will result in a lack of type safety. This principle is similar to how tRPC operates.

For detailed guides, visit:
Monorepo setup: Exporting Type Declarations in a Monorepo
Custom declaration file: Exporting Type Declarations with a Custom Declaration File
Generate declaration file: Exporting Type Declarations with a Generate Declaration File

tsx
import { createWebView, bridge } from "@webview-bridge/react-native";
+    
WebViewBridge
Appearance
Getting Started ​
Installation ​
React Native Project ​
sh
$ npm add @webview-bridge/react-native react-native-webview
sh
$ pnpm add @webview-bridge/react-native react-native-webview
sh
$ yarn add @webview-bridge/react-native react-native-webview
Web Project ​
sh
$ npm add @webview-bridge/web
sh
$ pnpm add @webview-bridge/web
sh
$ yarn add @webview-bridge/web
Using a Native Method ​
This guide covers how to use methods declared in React Native within a web.
React Native Part ​
Register functions in the bridge object in your React Native code
IMPORTANT
You need to export the created typeof appBridge and share its type with the web project. Failing to do so will result in a lack of type safety. This principle is similar to how tRPC operates.
For detailed guides, visit:
 Monorepo setup: Exporting Type Declarations in a Monorepo
 Custom declaration file: Exporting Type Declarations with a Custom Declaration File
 Generate declaration file: Exporting Type Declarations with a Generate Declaration File
tsx
import { createWebView, bridge } from "@webview-bridge/react-native";
 
 // Register functions in the bridge object in your React Native code
 export const appBridge = bridge({
@@ -89,7 +89,7 @@
 } else {
     console.warn("native method not supported")
 }

-    
+    
     
   
 
\ No newline at end of file
diff --git a/hashmap.json b/hashmap.json
index 981e0eb..0bb2802 100644
--- a/hashmap.json
+++ b/hashmap.json
@@ -1 +1 @@
-{"exporting-type-declarations_monorepo.md":"9njZrMyr","index.md":"0XxVrJ9a","using-a-web-method.md":"yFqgfMGK","getting-started.md":"LLOuplJZ","what-is-webview-bridge.md":"KK0Ca6JH","shared-state_vue.md":"EZ3SEjo9","reference_web_register-web-method.md":"Jj2fgHxo","backward-compatibility_deprecated-method.md":"53HIVxBd","reference_web_link-bridge.md":"hMaVBAnk","shared-state_react.md":"vFvfO4mw","using-a-loose-native-method.md":"MceMYIh_","ssr_remix.md":"j2ywf9WA","backward-compatibility_new-method.md":"ciq7wRKr","reference_react-native_create-webview.md":"ncuednNn","ssr_next-js-app-router.md":"-yfUZr-3","using-a-native-method.md":"DN-w1jNM","shared-state_react-native.md":"7enjptWq","shared-state_vanilla.md":"9G58G9l1","exporting-type-declarations_custom-declaration-file.md":"4S8Fv285","using-a-post-message.md":"HdCADiDx","example_react-navigation.md":"2PLa2RdF","exporting-type-declarations_generate-declaration-file.md":"10J0rAdR"}
+{"what-is-webview-bridge.md":"KK0Ca6JH","using-a-web-method.md":"yFqgfMGK","reference_web_link-bridge.md":"hMaVBAnk","using-a-loose-native-method.md":"MceMYIh_","getting-started.md":"_MY93zJJ","exporting-type-declarations_generate-declaration-file.md":"mmjxn8lb","using-a-native-method.md":"DN-w1jNM","ssr_next-js-app-router.md":"UmBnB1cC","backward-compatibility_new-method.md":"ciq7wRKr","ssr_remix.md":"ZClzWzQJ","shared-state_vue.md":"6d38aoM6","backward-compatibility_deprecated-method.md":"53HIVxBd","reference_react-native_create-webview.md":"ncuednNn","using-a-post-message.md":"_09uivbp","shared-state_react.md":"pBUV30N5","shared-state_vanilla.md":"OaAuc3sv","reference_web_register-web-method.md":"Jj2fgHxo","exporting-type-declarations_custom-declaration-file.md":"4S8Fv285","index.md":"0XxVrJ9a","exporting-type-declarations_monorepo.md":"aPXfH2N4","shared-state_react-native.md":"7enjptWq","example_react-navigation.md":"2PLa2RdF"}
diff --git a/index.html b/index.html
index fdacc16..da81805 100644
--- a/index.html
+++ b/index.html
@@ -30,7 +30,7 @@
   
   
     
WebViewBridge
Appearance
WebViewBridge
Fully Type-Safe Integration for React Native WebView and Web
Get Started
View on GitHub
View on Example
✅
Type Safety
Guarantees reliable and error-free communication, enhancing development efficiency.
⏳
Backward Compatibility
Supports seamless fallbacks, ensuring compatibility with older versions of React Native apps
🚀
No App Review Needed
Eliminates the need for app review processes due to the JavaScript-only implementation.
🛠️
Lightweight Dependencies
Operates with `react-native-webview` alone, ensuring simple and streamlined integration.

-    
+    
     
   
 
\ No newline at end of file
diff --git a/reference/react-native/create-webview.html b/reference/react-native/create-webview.html
index 0a49b2e..4b0a037 100644
--- a/reference/react-native/create-webview.html
+++ b/reference/react-native/create-webview.html
@@ -30,7 +30,7 @@
   
   
     
WebViewBridge
Appearance
createWebView ​
The createWebView is used to create a WebView with an interface that enables communication with the web.
Options ​
PropTypeRequiredDefaultDescription
bridgeObjecttrueXRepresents the bridge between React Native and the WebView.
debugbooleanfalsefalseOutputs console.log from the web in React Native.
responseTimeoutnumberfalse2000Timeout duration when executing web methods.
fallback(method: keyof T) => voidfalseXCallback function called when a method from the bridge is not found.

-    
+    
     
   
 
\ No newline at end of file
diff --git a/reference/web/link-bridge.html b/reference/web/link-bridge.html
index 7fb17b6..4b8bccb 100644
--- a/reference/web/link-bridge.html
+++ b/reference/web/link-bridge.html
@@ -30,7 +30,7 @@
   
   
     
WebViewBridge
Appearance
linkBridge ​
The linkBridge is used to access methods set up in the React Native bridge.
Options ​
PropTypeRequiredDefaultDescription
timeoutnumberfalse2000Specifies the maximum time (in milliseconds) to wait for a response from the native code before timing out.
throwOnErrorboolean | T[]falsefalseDetermines whether to throw an error if the native method call fails. Default is false.
onFallback(methodName: T, args: unknown[]) => voidfalseXThis event is triggered when a method is executed but not found in native, with the executed method passed as an argument.
onReady(method: NativeMethod) => voidfalseXRuns when the native method is ready to use.

-    
+    
     
   
 
\ No newline at end of file
diff --git a/reference/web/register-web-method.html b/reference/web/register-web-method.html
index f89e82a..3c89066 100644
--- a/reference/web/register-web-method.html
+++ b/reference/web/register-web-method.html
@@ -30,7 +30,7 @@
   
   
     
WebViewBridge
Appearance
registerNativeMethod ​
The registerNativeMethod is register a web method to react native.
Options ​
PropTypeRequiredDefaultDescription
bridgeObjecttrueXRepresents the bridge between React Native and the WebView.

-    
+    
     
   
 
\ No newline at end of file
diff --git a/shared-state/react-native.html b/shared-state/react-native.html
index e2f8cad..48ab0a2 100644
--- a/shared-state/react-native.html
+++ b/shared-state/react-native.html
@@ -67,7 +67,7 @@
       </View>
     );
 }

NOTE

You can explore a practical example and further understand the implementation by visiting bellow.

- + \ No newline at end of file diff --git a/shared-state/react.html b/shared-state/react.html index 1a946d6..2a060c3 100644 --- a/shared-state/react.html +++ b/shared-state/react.html @@ -12,7 +12,7 @@ - + @@ -29,7 +29,7 @@ -
WebViewBridge

Appearance

Shared State in React ​

This guide integrates the state declared in Shared State in React Native with React within a WebView.

Installation ​

sh
$ npm add @webview-bridge/react @webview-bridge/web
sh
$ pnpm add @webview-bridge/react @webview-bridge/web
sh
$ yarn add @webview-bridge/react @webview-bridge/web

linkBridge ​

Use the linkBridge function to connect with the WebView as shown below.

Assume AppBridge, used as a generic, is declared in React Native with the following structure (refer to Shared State in React Native):

React Native Part ​

tsx
// React Native sample
+    
WebViewBridge
Appearance
Shared State in React ​
This guide integrates the state declared in Shared State in React Native with React within a WebView.
Installation ​
sh
$ npm add @webview-bridge/react @webview-bridge/web
sh
$ pnpm add @webview-bridge/react @webview-bridge/web
sh
$ yarn add @webview-bridge/react @webview-bridge/web
linkBridge ​
Use the linkBridge function to connect with the WebView as shown below.
Assume AppBridge, used as a generic, is declared in React Native with the following structure (refer to Shared State in React Native):
React Native Part ​
tsx
// React Native sample
 import { bridge } from "@webview-bridge/react-native";
 
 type AppBridgeState = {
@@ -75,7 +75,7 @@
     </div>
     );
 }
NOTE
You can explore a practical example and further understand the implementation by visiting bellow.

-    
+    
     
   
 
\ No newline at end of file
diff --git a/shared-state/vanilla.html b/shared-state/vanilla.html
index 733de71..f39b618 100644
--- a/shared-state/vanilla.html
+++ b/shared-state/vanilla.html
@@ -12,7 +12,7 @@
     
     
     
-    
+    
     
     
     
@@ -29,7 +29,7 @@
     
   
   
-    
WebViewBridge
Appearance
Shared State in Vanilla ​
This guide integrates the state declared in Shared State in React Native with vanilla within a WebView.
Installation ​
sh
$ npm add @webview-bridge/web
sh
$ pnpm add @webview-bridge/web
sh
$ yarn add @webview-bridge/web
linkBridge ​
Use the linkBridge function to connect with the WebView as shown below.
Assume AppBridge, used as a generic, is declared in React Native with the following structure (refer to Shared State in React Native):
React Native Part ​
tsx
// React Native sample
+    
WebViewBridge
Appearance
Shared State in Vanilla ​
This guide integrates the state declared in Shared State in React Native with vanilla within a WebView.
Installation ​
sh
$ npm add @webview-bridge/web
sh
$ pnpm add @webview-bridge/web
sh
$ yarn add @webview-bridge/web
linkBridge ​
Use the linkBridge function to connect with the WebView as shown below.
Assume AppBridge, used as a generic, is declared in React Native with the following structure (refer to Shared State in React Native):
React Native Part ​
tsx
// React Native sample
 import { bridge } from "@webview-bridge/react-native";
 
 type AppBridgeState = {
@@ -63,7 +63,7 @@
   console.log("state", state);
   console.log("prevState", prevState);
 });
NOTE
You can explore a practical example and further understand the implementation by visiting bellow.

-    
+    
     
   
 
\ No newline at end of file
diff --git a/shared-state/vue.html b/shared-state/vue.html
index a35a7ba..7cd23fe 100644
--- a/shared-state/vue.html
+++ b/shared-state/vue.html
@@ -12,7 +12,7 @@
     
     
     
-    
+    
     
     
     
@@ -29,7 +29,7 @@
     
   
   
-    
WebViewBridge
Appearance
Shared State in Vue ​
This guide integrates the state declared in Shared State in React Native with Vue within a WebView.
Installation ​
sh
$ npm add @webview-bridge/vue @webview-bridge/web
sh
$ pnpm add @webview-bridge/vue @webview-bridge/web
sh
$ yarn add @webview-bridge/vue @webview-bridge/web
linkBridge ​
Use the linkBridge function to connect with the WebView as shown below.
Assume AppBridge, used as a generic, is declared in React Native with the following structure (refer to Shared State in React Native):
React Native Part ​
tsx
// React Native sample
+    
WebViewBridge
Appearance
Shared State in Vue ​
This guide integrates the state declared in Shared State in React Native with Vue within a WebView.
Installation ​
sh
$ npm add @webview-bridge/vue @webview-bridge/web
sh
$ pnpm add @webview-bridge/vue @webview-bridge/web
sh
$ yarn add @webview-bridge/vue @webview-bridge/web
linkBridge ​
Use the linkBridge function to connect with the WebView as shown below.
Assume AppBridge, used as a generic, is declared in React Native with the following structure (refer to Shared State in React Native):
React Native Part ​
tsx
// React Native sample
 import { bridge } from "@webview-bridge/react-native";
 
 type AppBridgeState = {
@@ -78,7 +78,7 @@
     <button @click="bridgeStore.increase()">Increase from web</button>
   </div>
 </template>
NOTE
You can explore a practical example and further understand the implementation by visiting bellow.

-    
+    
     
   
 
\ No newline at end of file
diff --git a/ssr/next-js-app-router.html b/ssr/next-js-app-router.html
index 1fc6a88..3472053 100644
--- a/ssr/next-js-app-router.html
+++ b/ssr/next-js-app-router.html
@@ -12,7 +12,7 @@
     
     
     
-    
+    
     
     
     
@@ -29,7 +29,7 @@
     
   
   
-    
WebViewBridge
Appearance
Setup with Remix ​
This guide provides instructions on how to use webview-bridge in Next.js (App Router) applications.
Page Router
For page routing, apply the same approach: set up the Provider in _app.tsx and use it similarly.
What does it solve? ​
By design, webview-bridge relies on client-side rendering, which can lead to hydration mismatches due to fetching data from the connected app. Resolving hydration mismatches is challenging in such scenarios. This guide helps to use Providers client-side in an SSR environment, avoiding execution on the server, and enables the use of default hooks seamlessly.
Installation ​
sh
$ npm add @webview-bridge/react @webview-bridge/web
sh
$ pnpm add @webview-bridge/react @webview-bridge/web
sh
$ yarn add @webview-bridge/react @webview-bridge/web
createLinkBridgeProvider ​
providers/BridgeProvider.ts ​
tsx
"use client";
+    
WebViewBridge
Appearance
Setup with Remix ​
This guide provides instructions on how to use webview-bridge in Next.js (App Router) applications.
Page Router
For page routing, apply the same approach: set up the Provider in _app.tsx and use it similarly.
What does it solve? ​
By design, webview-bridge relies on client-side rendering, which can lead to hydration mismatches due to fetching data from the connected app. Resolving hydration mismatches is challenging in such scenarios. This guide helps to use Providers client-side in an SSR environment, avoiding execution on the server, and enables the use of default hooks seamlessly.
Installation ​
sh
$ npm add @webview-bridge/react @webview-bridge/web
sh
$ pnpm add @webview-bridge/react @webview-bridge/web
sh
$ yarn add @webview-bridge/react @webview-bridge/web
createLinkBridgeProvider ​
providers/BridgeProvider.ts ​
tsx
"use client";
 import { createLinkBridgeProvider } from "@webview-bridge/react";
 import type { AppBridge } from ""; // Import the type 'appBridge' declared in native
 
@@ -140,7 +140,7 @@
 };
 
 export default Page;
Use dynamic to load components using the bridge on the client side, with the primary goal of avoiding the hydration process.

-    
+    
     
   
 
\ No newline at end of file
diff --git a/ssr/remix.html b/ssr/remix.html
index 695084d..b60ea84 100644
--- a/ssr/remix.html
+++ b/ssr/remix.html
@@ -12,7 +12,7 @@
     
     
     
-    
+    
     
     
     
@@ -29,7 +29,7 @@
     
   
   
-    
WebViewBridge
Appearance
Setup with Remix ​
This guide provides instructions on how to use webview-bridge in Remix applications.
What does it solve? ​
By design, webview-bridge relies on client-side rendering, which can lead to hydration mismatches due to fetching data from the connected app. Resolving hydration mismatches is challenging in such scenarios. This guide helps to use Providers client-side in an SSR environment, avoiding execution on the server, and enables the use of default hooks seamlessly.
Installation ​
sh
$ npm add @webview-bridge/react @webview-bridge/web
sh
$ pnpm add @webview-bridge/react @webview-bridge/web
sh
$ yarn add @webview-bridge/react @webview-bridge/web
createLinkBridgeProvider ​
providers/BridgeProvider.ts ​
tsx
import { createLinkBridgeProvider } from "@webview-bridge/react";
+    
WebViewBridge
Appearance
Setup with Remix ​
This guide provides instructions on how to use webview-bridge in Remix applications.
What does it solve? ​
By design, webview-bridge relies on client-side rendering, which can lead to hydration mismatches due to fetching data from the connected app. Resolving hydration mismatches is challenging in such scenarios. This guide helps to use Providers client-side in an SSR environment, avoiding execution on the server, and enables the use of default hooks seamlessly.
Installation ​
sh
$ npm add @webview-bridge/react @webview-bridge/web
sh
$ pnpm add @webview-bridge/react @webview-bridge/web
sh
$ yarn add @webview-bridge/react @webview-bridge/web
createLinkBridgeProvider ​
providers/BridgeProvider.ts ​
tsx
import { createLinkBridgeProvider } from "@webview-bridge/react";
 import type { AppBridge } from ""; // Import the type 'appBridge' declared in native
 
 export const { BridgeProvider, useBridgeStore, useBridgeStatus, useBridgeLoose } =
@@ -200,7 +200,7 @@
 export default function Index() {
   return <BridgeHome />;
 }
Use clientLoader to load components using the bridge on the client side, with the primary goal of avoiding the hydration process.

-    
+    
     
   
 
\ No newline at end of file
diff --git a/using-a-loose-native-method.html b/using-a-loose-native-method.html
index 8eb30ac..aaff717 100644
--- a/using-a-loose-native-method.html
+++ b/using-a-loose-native-method.html
@@ -61,7 +61,7 @@
 if (bridge.isNativeMethodAvailable("openInAppBrowser")) {
     bridge.loose.openInAppBrowser("https://google.com"); // Open Google in the native inAppBrowser
 }

-    
+    
     
   
 
\ No newline at end of file
diff --git a/using-a-native-method.html b/using-a-native-method.html
index 030befc..ac58975 100644
--- a/using-a-native-method.html
+++ b/using-a-native-method.html
@@ -90,7 +90,7 @@
 } else {
     console.warn("native method not supported")
 }

-    
+    
     
   
 
\ No newline at end of file
diff --git a/using-a-post-message.html b/using-a-post-message.html
index c2ecac3..83215d4 100644
--- a/using-a-post-message.html
+++ b/using-a-post-message.html
@@ -12,7 +12,7 @@
     
     
     
-    
+    
     
     
     
@@ -29,7 +29,7 @@
     
   
   
-    
WebViewBridge
Appearance
Using PostMessage ​
This guide will teach you how to send events from React Native to web and subscribe to those events within the web.
Installation ​
You need additional libraries to define schemas. Supported schema libraries:
Please choose and use the library you prefer.
Follow the guidelines of each library for schema definition.
sh
$ npm add @webview-bridge/web zod
+    
WebViewBridge
Appearance
Using PostMessage ​
This guide will teach you how to send events from React Native to web and subscribe to those events within the web.
Installation ​
You need additional libraries to define schemas. Supported schema libraries:
Please choose and use the library you prefer.
Follow the guidelines of each library for schema definition.
sh
$ npm add @webview-bridge/web zod
 # or 
 $ npm add @webview-bridge/web yup
 # or 
@@ -41,7 +41,7 @@
 # or 
 $ yarn add @webview-bridge/web yup
 # or 
-$ yarn add @webview-bridge/web superstruct
React Native Part ​
In React Native, you need to define events in advance and export the types.
NOTE
Even if you don't define the event schema, you can use postMessage loosely. If the types are not important, you can skip them and just use postMessage.
tsx
import { createWebView, postMessageSchema } from "@webview-bridge/react-native";
+$ yarn add @webview-bridge/web superstruct
React Native Part ​
In React Native, you need to define events in advance and export the types.
NOTE
Even if you don't define the event schema, you can use postMessage loosely. If the types are not important, you can skip them and just use postMessage.
tsx
import { createWebView, postMessageSchema } from "@webview-bridge/react-native";
 import { z } from "zod";
 
 const appPostMessageSchema = postMessageSchema({
@@ -131,7 +131,7 @@
   window.alert(message);
 });
 unsubscribe2(); // Unsubscribe from the event

-    
+    
     
   
 
\ No newline at end of file
diff --git a/using-a-web-method.html b/using-a-web-method.html
index 0b6afb5..7b6da16 100644
--- a/using-a-web-method.html
+++ b/using-a-web-method.html
@@ -58,7 +58,7 @@
 if (WebMethod.current.isReady) {
   WebMethod.current.sum(1, 2).then((result) => setValue(result));
 }

-    
+    
     
   
 
\ No newline at end of file
diff --git a/what-is-webview-bridge.html b/what-is-webview-bridge.html
index ebae2ed..6be5027 100644
--- a/what-is-webview-bridge.html
+++ b/what-is-webview-bridge.html
@@ -30,7 +30,7 @@
   
   
     
WebViewBridge
Appearance
What is WebViewBridge ​
webview-bridge is a powerful interface that acts as a bridge between React Native and web applications using react-native-webview. It provides seamless interaction and ensures type safety.
Inspired by the functionality of tRPC, webview-bridge simplifies the communication process between react-native-webview and web applications.
What Does WebViewBridge Solve? ​
When developing apps with React Native WebView, there are occasions where web functionalities need to access React Native's features. Common examples include screen navigation, in-app browser and etc.
To implement these functionalities, each WebView project typically needs to establish its own communication interface. Conversely, there are times in a React Native app when features from the web need to be invoked.
Since WebView and the web operate as distinct entities, communication is usually implemented in a unidirectional manner.
However, webview-bridge transcends this limitation by utilizing event and promise-based mechanisms, enabling bidirectional communication. This approach allows for the retrieval of return values from functions as one would in a standard programming context.

-    
+    
     
   
 
\ No newline at end of file