wovvmap-webview-bridge 1.0.0 → 1.0.1

package/README.md

@@ -0,0 +1,126 @@
+# 📱 Native Integration Guide – wovvmap-webview-bridge
+
+This guide explains how to use the `wovvmap-webview-bridge` package **from the React Native side**. This package helps you send data to a WebView and listen for data coming from the WebView.
+
+---
+
+## ✅ Installation
+
+```bash
+npm install wovvmap-webview-bridge
+# or
+yarn add wovvmap-webview-bridge
+```
+
+---
+
+## 🔌 Setup WebView
+
+Import and use the `<WebViewScreen />` component provided by the package:
+
+```tsx
+import React from 'react';
+import { View } from 'react-native';
+import { WebViewScreen } from 'wovvmap-webview-bridge';
+
+export default function App() {
+  return (
+    <View style={{ flex: 1 }}>
+      <WebViewScreen url="http://localhost:5173/map" />
+    </View>
+  );
+}
+```
+
+---
+
+## 📤 Send Data to WebView
+
+You can send navigation data (e.g. from, to, elevator, escalator) using `sendToWeb`:
+
+```ts
+import { sendToWeb } from 'wovvmap-webview-bridge';
+
+sendToWeb({
+  type: "setNavigationData",
+  payload: {
+    from: "store1",
+    to: "store9",
+    elevator: false,
+    escalator: true,
+    floor : 1
+  },
+});
+```
+
+---
+
+## 📥 Receive Events from WebView
+
+Use `registerBridgeHandler` to listen for events sent from the web:
+
+```ts
+import { registerBridgeHandler } from 'wovvmap-webview-bridge';
+
+registerBridgeHandler("pathData", (points) => {
+  console.log("📍 Received pathData:", points);
+});
+
+registerBridgeHandler("PathFindingResult", (result) => {
+  console.log("🧭 Path result:", result);
+});
+
+registerBridgeHandler("changeFloor", (floor) => {
+  console.log("🏢 Web requested floor change:", floor);
+});
+```
+
+---
+
+## 🧠 Data Types
+
+The bridge handles these types safely:
+
+```ts
+type SendToWebMessage = {
+  type: "setNavigationData";
+  payload: {
+    from?: string;
+    to?: string;
+    elevator?: boolean;
+    escalator?: boolean;
+    floor?: boolean;
+  };
+};
+```
+
+---
+
+## 💡 Tips
+
+- All bridge messages are serialized using `JSON.stringify`. Avoid non-serializable data like Maps or circular references.
+- WebView must have messaging enabled (already done in `<WebViewScreen />`).
+- You can directly access the `webviewRef` if needed.
+
+```ts
+import { webviewRef } from 'wovvmap-webview-bridge';
+```
+
+---
+
+## 📄 Summary of Exports (Native Side)
+
+```ts
+import {
+  WebViewScreen,
+  sendToWeb,
+  webviewRef,
+  registerBridgeHandler,
+} from 'wovvmap-webview-bridge';
+```
+
+---
+
+## 📘 Done!
+
+You're now ready to communicate seamlessly between React Native and your WebView 🎉

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wovvmap-webview-bridge",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [