diff --git a/404.html b/404.html index f0189237..a492b8e6 100644 --- a/404.html +++ b/404.html @@ -15,7 +15,7 @@
RNBridge

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/api-examples.html b/api-examples.html index e1d19a38..cc47310d 100644 --- a/api-examples.html +++ b/api-examples.html @@ -122,7 +122,7 @@ }

Page Frontmatter ​

{
   "outline": "deep"
 }

More ​

Check out the documentation for the full list of runtime APIs.

- + \ No newline at end of file diff --git a/assets/getting-started.md.G5oX9Lkc.js b/assets/getting-started.md.P3Q6001c.js similarity index 96% rename from assets/getting-started.md.G5oX9Lkc.js rename to assets/getting-started.md.P3Q6001c.js index ee9c2750..3a8b929b 100644 --- a/assets/getting-started.md.G5oX9Lkc.js +++ b/assets/getting-started.md.P3Q6001c.js @@ -1,4 +1,4 @@ -import{_ as s,c as i,o as a,U as t}from"./chunks/framework.rrjNhaCN.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 -D @rnbridge/native react-native-webview
sh
$ pnpm add -D @rnbridge/native react-native-webview
sh
$ yarn add -D @rnbridge/native react-native-webview

Web Project ​

sh
$ npm add -D @rnbridge/web
sh
$ pnpm add -D @rnbridge/web
sh
$ yarn add -D @rnbridge/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.

tsx
import { createWebView } from "@rnbridge/native";
+import{_ as s,c as i,o as a,U as t}from"./chunks/framework.rrjNhaCN.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 -D @rnbridge/native react-native-webview
sh
$ pnpm add -D @rnbridge/native react-native-webview
sh
$ yarn add -D @rnbridge/native react-native-webview
Web Project ​
sh
$ npm add -D @rnbridge/web
sh
$ pnpm add -D @rnbridge/web
sh
$ yarn add -D @rnbridge/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.
tsx
import { createWebView } from "@rnbridge/native";
 import { bridge } from "@rnbridge/native";
 
 // Register functions in the bridge object in your React Native code
diff --git a/assets/getting-started.md.G5oX9Lkc.lean.js b/assets/getting-started.md.P3Q6001c.lean.js
similarity index 100%
rename from assets/getting-started.md.G5oX9Lkc.lean.js
rename to assets/getting-started.md.P3Q6001c.lean.js
diff --git a/backward-compatibility.html b/backward-compatibility.html
index 0e9a477a..669add23 100644
--- a/backward-compatibility.html
+++ b/backward-compatibility.html
@@ -58,7 +58,7 @@
     toast("The app is outdated. Please update.")
   }
 });
- + \ No newline at end of file diff --git a/getting-started.html b/getting-started.html index e185888c..8c944fcd 100644 --- a/getting-started.html +++ b/getting-started.html @@ -12,12 +12,12 @@ - + -
RNBridge

Appearance

Getting Started ​

Installation ​

React Native Project ​

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

Web Project ​

sh
$ npm add -D @rnbridge/web
sh
$ pnpm add -D @rnbridge/web
sh
$ yarn add -D @rnbridge/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.

tsx
import { createWebView } from "@rnbridge/native";
+    
RNBridge
Appearance
Getting Started ​
Installation ​
React Native Project ​
sh
$ npm add -D @rnbridge/native react-native-webview
sh
$ pnpm add -D @rnbridge/native react-native-webview
sh
$ yarn add -D @rnbridge/native react-native-webview
Web Project ​
sh
$ npm add -D @rnbridge/web
sh
$ pnpm add -D @rnbridge/web
sh
$ yarn add -D @rnbridge/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.
tsx
import { createWebView } from "@rnbridge/native";
 import { bridge } from "@rnbridge/native";
 
 // Register functions in the bridge object in your React Native code
@@ -58,7 +58,7 @@
 
 nativeMethod.getMessage().then((message) => console.log(message)); // Expecting "Hello, I'm native"
 nativeMethod.sum(1, 2).then((num) => console.log(num)); // Expecting 3

-    
+    
     
   
 
\ No newline at end of file
diff --git a/hashmap.json b/hashmap.json
index 9790a827..698f1187 100644
--- a/hashmap.json
+++ b/hashmap.json
@@ -1 +1 @@
-{"using-a-web-method.md":"IOPP9Q5B","what-is-rnbridge.md":"a9YwQD_V","index.md":"0RUHv3Jw","api-examples.md":"IB4sXcHo","reference_react-native-create-webview.md":"T8HpH-kZ","reference_web-register-web-method.md":"55V4nqXi","backward-compatibility.md":"5b1k0Xzb","reference_web-link-native-method.md":"Mf4Hqyoi","using-a-native-method.md":"-QAqkVOA","getting-started.md":"G5oX9Lkc"}
+{"using-a-native-method.md":"-QAqkVOA","using-a-web-method.md":"IOPP9Q5B","what-is-rnbridge.md":"a9YwQD_V","reference_react-native-create-webview.md":"T8HpH-kZ","getting-started.md":"P3Q6001c","index.md":"0RUHv3Jw","reference_web-link-native-method.md":"Mf4Hqyoi","reference_web-register-web-method.md":"55V4nqXi","api-examples.md":"IB4sXcHo","backward-compatibility.md":"5b1k0Xzb"}
diff --git a/index.html b/index.html
index 5dd04e83..a09d420d 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,7 @@
   
   
     
RNBridge
Appearance
RNBridge
Integration Web and React Native Webview
Get Started
View on GitHub
✅
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.
🛠️
Zero 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 7a2e5221..690b8002 100644
--- a/reference/react-native-create-webview.html
+++ b/reference/react-native-create-webview.html
@@ -18,7 +18,7 @@
   
   
     
RNBridge
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-native-method.html b/reference/web-link-native-method.html
index a849d5bd..32010036 100644
--- a/reference/web-link-native-method.html
+++ b/reference/web-link-native-method.html
@@ -18,7 +18,7 @@
   
   
     
RNBridge
Appearance
linkNativeMethod ​
The linkNativeMethod 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.
throwOnErrorbooleanfalsefalseDetermines whether to throw an error if the native method call fails. Default is false.
onFallback(method: keyof T) => voidfalseXThis event is triggered when a method is executed but not found in native, with the executed method passed as an argument.

-    
+    
     
   
 
\ No newline at end of file
diff --git a/reference/web-register-web-method.html b/reference/web-register-web-method.html
index 8efa7a2d..c81941ae 100644
--- a/reference/web-register-web-method.html
+++ b/reference/web-register-web-method.html
@@ -18,7 +18,7 @@
   
   
     
RNBridge
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/using-a-native-method.html b/using-a-native-method.html
index a20ea1f6..e8da7059 100644
--- a/using-a-native-method.html
+++ b/using-a-native-method.html
@@ -58,7 +58,7 @@
 
 nativeMethod.getMessage().then((message) => console.log(message)); // Expecting "Hello, I'm native"
 nativeMethod.sum(1, 2).then((num) => console.log(num)); // Expecting 3
- + \ No newline at end of file diff --git a/using-a-web-method.html b/using-a-web-method.html index d21bf181..384131f0 100644 --- a/using-a-web-method.html +++ b/using-a-web-method.html @@ -47,7 +47,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-rnbridge.html b/what-is-rnbridge.html index 92fc0905..81af859e 100644 --- a/what-is-rnbridge.html +++ b/what-is-rnbridge.html @@ -18,7 +18,7 @@
RNBridge

Appearance

What is RNBridge ​

rnbridge 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, rnbridge simplifies the communication process between react-native-webview and web applications.

What Does RNBridge 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, rnbridge 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