wovvmap-webview-bridge

A typed bridge between React Native and a WebView for Wovvmap maps. It provides:
- WebViewScreen wrapper for React Native WebView
- BridgeService helpers to send events to the WebView
- Zustand store (useBridgeStorage) that keeps incoming state in sync
- Strongly typed message contracts

Installation

``bash
npm install react-native-webview zustand


or


yarn add react-native-webview zustand
`

Quick start

$3

Use the web entrypoint so you don't need react-native or react-native-webview in your web app.

`tsx
import React from "react";
import { WebIframeScreen } from "wovvmap-webview-bridge/web";

export default function App() {
return (
url="https://your-map-app-url.com"
origin="https://your-map-app-url.com"
onload={() => console.log("iframe loaded")}
style={{ width: "100%", height: "100vh" }}
/>
);
}
`

You can also attach to your own iframe ref:

`tsx
import React, { useEffect, useRef } from "react";
import {
attachIframeBridge,
registerBridgeHandler,
sendStartPointToBridge,
} from "wovvmap-webview-bridge/web";

export default function App() {
const iframeRef = useRef(null);

useEffect(() => {
if (!iframeRef.current) return;

const cleanup = attachIframeBridge({
iframe: iframeRef.current,
origin: "https://your-map-app-url.com",
onLoad: () => sendStartPointToBridge("A1"),
});

registerBridgeHandler("isSceneClick", (payload) => {
console.log("Scene clicked", payload);
});

return cleanup;
}, []);

return (
ref={iframeRef}
src="https://your-map-app-url.com"
style={{ width: "100%", height: "100%", border: 0 }}
title="Wovv Map"
/>
);
}
`

$3

`tsx
import React from "react";
import { WebViewScreen } from "wovvmap-webview-bridge";

export default function App() {
return ;
}
`

$3

`tsx
import {
sendStartPointToBridge,
sendEndPointToBridge,
sendActiveFloorToBridge,
sendPathNextBtnClick,
sendPathPreBtnClick,
sendPathFinishBtnClick,
sendSelectCategory,
sendZoomIn,
sendZoomOut,
sendClearStartAndEndPoint,
sendPathFilter,
sendGetDirectionToBridge,
sendNavigateToBridge,
sendMapThemeToBridge,
} from "wovvmap-webview-bridge";

sendStartPointToBridge("A1");
sendEndPointToBridge("B5");
sendActiveFloorToBridge(2);
sendPathNextBtnClick();
sendPathPreBtnClick();
sendPathFinishBtnClick();
sendSelectCategory(["Food", "Fashion"]);
sendZoomIn();
sendZoomOut();
sendClearStartAndEndPoint();
sendPathFilter();
sendGetDirectionToBridge();
sendNavigateToBridge("map-id-123");
sendMapThemeToBridge({ "theme-path-color": "#00AAFF" });
`

$3

You can register handlers for click events. All other events are stored in the Zustand store.

`tsx
import { registerBridgeHandler } from "wovvmap-webview-bridge";

registerBridgeHandler("isSceneClick", (payload) => {
console.log("Scene clicked", payload);
});

registerBridgeHandler("isShapeClick", (payload) => {
console.log("Shape clicked", payload.value);
});
`

$3

`tsx
import { useBridgeStorage } from "wovvmap-webview-bridge";

const state = useBridgeStorage((s) => ({
isBridgeLoaded: s.isBridgeLoaded,
isMapLoaded: s.isMapLoaded,
searchablePoints: s.searchablePoints,
amenities: s.amenities,
allOffers: s.allOffers,
activeFloor: s.activeFloor,
stepByStepList: s.stepByStepList,
pathSummary: s.pathSummary,
categories: s.categories,
subCategories: s.subCategories,
}));
`

Store fields:
- isBridgeLoaded
- isMapLoaded
- searchablePoints
- amenities
- allOffers
- activeFloor
- elevator, escalator
- floorImages
- stepByStepList
- pathSummary
- nextPreState
- pointsByKey
- categories
- subCategories
- cameraControllerState

Bridge message contracts

$3

Keys and payloads:
- pong: boolean
- isConnection: boolean
- mapLoaded: boolean
- _searchablePoints: NodePoint[]
- _allAmenities: AmenityWithNodePoint[]
- _allOffers: string[]
- _activeFloor: number
- FloorImg: FloorImage[]
- categories: Record
- subCategories: Record
- isSceneClick: no value
- isShapeClick: NodePoint
- stepByStepList: StepByStepResult
- pathNextPreState: NavState
- cameraControllerState: { cameraPosition: CameraPosition; controlsPosition: ControlsPosition }

$3

Keys and payloads:
- applyCSS: { selector: string; style: Partial }
- ping: boolean
- setEndPoint: string
- setStartPoint: string
- setActiveFloor: number
- pathNextBtnClick: no value
- pathPreBtnClick: no value
- pathFinishBtnClick: no value
- setSelectCategory: string | string[] | null
- zoomIn: no value
- zoomOut: no value
- clearStartAndEndPoint: no value
- setPathFilter: filterPath
- getDirection: no value
- setMapTheme: Theme | null
- navigateTo: string
- editableView: MapApiResponse
- pathHighlightByStepIndex: number

Exported API

$3

- WebViewScreen
- WebIframeScreen (web only)

$3

- sendStartPointToBridge
- sendEndPointToBridge
- sendActiveFloorToBridge
- sendPathNextBtnClick
- sendPathPreBtnClick
- sendPathFinishBtnClick
- sendSelectCategory
- sendZoomIn
- sendZoomOut
- sendClearStartAndEndPoint
- sendGetDirectionToBridge
- sendPathFilter
- sendNavigateToBridge
- sendMapThemeToBridge

$3

- registerBridgeHandler

$3

- useBridgeStorage (Zustand)

$3

- IncomingMessage, OutgoingMessage
- NodePoint
- AmenityWithNodePoint
- Category, SubCategory, ExternalId
- Environment, DayHours, WeeklyHours
- NodePointOffer, BrandInfo
- MapExportContext, GeometryFloor, GeometryNodePoint, GeometryLayer
- NodeMetadata, AssetPayloads
- FloorImage
- StepInstruction, PathSummary, StepByStepResult
- NavState
- filterPath
- Theme
- CameraPosition, ControlsPosition
- MapApiResponse, MapDataExport

File structure

`
src/
index.ts
webviewBridge/
WebViewScreen.tsx
BridgeService.ts
BridgeStorage.ts
WebViewBridgeRef.ts
handlers/
WebBridgeHandlers.ts
types/
types.ts
``

License

MIT