davbyte-mobile-native 0.1.0

package/dist/HybridShell.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode } from "react";
+import { type NativeBridge } from "davbyte-mobile-bridge/native";
+import { type TabConfig } from "./defineTab.js";
+import type { WebViewHostRef } from "./types.js";
+type HybridShellContextValue = {
+    tabs: TabConfig[];
+    activeTab: string;
+    setActiveTab: (id: string) => void;
+    webViewRef: React.RefObject<WebViewHostRef | null>;
+    bridge: NativeBridge;
+    onMessageFromWeb: (data: {
+        type: string;
+        payload?: unknown;
+    }) => void;
+    handleTabPress: (id: string) => void;
+    bottomNavHeight: number;
+};
+export declare function useHybridShell(): HybridShellContextValue;
+export type HybridShellProps<TId extends string = string> = {
+    children: ReactNode;
+    tabs?: TabConfig<TId>[];
+    defaultTab?: TId;
+    onTabChange?: (id: TId) => void;
+};
+export declare function HybridShell<TId extends string = string>({ children, tabs, defaultTab, onTabChange, }: HybridShellProps<TId>): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=HybridShell.d.ts.map

package/dist/HybridShell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HybridShell.d.ts","sourceRoot":"","sources":["../src/HybridShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAGL,KAAK,YAAY,EAClB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACnE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,KAAK,uBAAuB,GAAG;IAC7B,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,MAAM,EAAE,YAAY,CAAC;IACrB,gBAAgB,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IACtE,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,eAAe,EAAE,MAAM,CAAC;CACzB,CAAC;AAIF,wBAAgB,cAAc,IAAI,uBAAuB,CAMxD;AAED,MAAM,MAAM,gBAAgB,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,IAAI;IAC1D,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,IAAI,CAAC;CACjC,CAAC;AAEF,wBAAgB,WAAW,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,EAAE,EACvD,QAAQ,EACR,IAAI,EACJ,UAAU,EACV,WAAW,GACZ,EAAE,gBAAgB,CAAC,GAAG,CAAC,+BA0EvB"}

package/dist/HybridShell.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { createNativeBridge, tabNavigationPlugin, } from "davbyte-mobile-bridge/native";
+import { BOTTOM_NAV_HEIGHT } from "./defineTab.js";
+const HybridShellContext = createContext(null);
+export function useHybridShell() {
+    const ctx = useContext(HybridShellContext);
+    if (!ctx) {
+        throw new Error("useHybridShell must be used within HybridShell");
+    }
+    return ctx;
+}
+export function HybridShell({ children, tabs, defaultTab, onTabChange, }) {
+    const tabList = tabs ?? [];
+    const initialTab = defaultTab ?? tabList[0]?.id ?? "";
+    const [activeTab, setActiveTabState] = useState(initialTab);
+    const webViewRef = useRef(null);
+    const activeTabRef = useRef(activeTab);
+    activeTabRef.current = activeTab;
+    const postToWebView = useCallback((data) => {
+        webViewRef.current?.postMessageToWebView(data);
+    }, []);
+    const bridgeRef = useRef(null);
+    if (!bridgeRef.current) {
+        bridgeRef.current = createNativeBridge({ postToWebView });
+    }
+    const bridge = bridgeRef.current;
+    const validViews = useMemo(() => tabList.map((t) => t.id), [tabList]);
+    useEffect(() => {
+        if (tabList.length === 0)
+            return;
+        const cleanup = bridge.use(tabNavigationPlugin({
+            validViews,
+            getActiveTab: () => activeTabRef.current,
+            setActiveTab: (view) => {
+                setActiveTabState(view);
+                onTabChange?.(view);
+            },
+        }));
+        return cleanup;
+    }, [bridge, tabList.length, validViews, onTabChange]);
+    const setActiveTab = useCallback((id) => {
+        setActiveTabState(id);
+        onTabChange?.(id);
+    }, [onTabChange]);
+    const handleTabPress = useCallback((id) => {
+        setActiveTab(id);
+        bridge.navigateTo(id);
+    }, [setActiveTab, bridge]);
+    const onMessageFromWeb = useMemo(() => bridge.createMessageHandler(), [bridge]);
+    const bottomNavHeight = tabList.length > 0 ? BOTTOM_NAV_HEIGHT : 0;
+    const value = {
+        tabs: tabList,
+        activeTab,
+        setActiveTab,
+        webViewRef,
+        bridge,
+        onMessageFromWeb,
+        handleTabPress,
+        bottomNavHeight,
+    };
+    return (_jsx(HybridShellContext.Provider, { value: value, children: children }));
+}

package/dist/NativeTabBar.d.ts

@@ -0,0 +1,9 @@
+export type NativeTabBarProps = {
+    activeColor?: string;
+    inactiveColor?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    bottomInset?: number;
+};
+export declare function NativeTabBar({ activeColor, inactiveColor, backgroundColor, borderColor, bottomInset, }: NativeTabBarProps): import("react").JSX.Element | null;
+//# sourceMappingURL=NativeTabBar.d.ts.map

package/dist/NativeTabBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeTabBar.d.ts","sourceRoot":"","sources":["../src/NativeTabBar.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,WAAuB,EACvB,aAAyB,EACzB,eAA2B,EAC3B,WAAuB,EACvB,WAAe,GAChB,EAAE,iBAAiB,sCAwDnB"}

package/dist/NativeTabBar.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Ionicons } from "@expo/vector-icons";
+import { Pressable, Text, View } from "react-native";
+import { useHybridShell } from "./HybridShell.js";
+import { BOTTOM_NAV_HEIGHT } from "./defineTab.js";
+export function NativeTabBar({ activeColor = "#00482A", inactiveColor = "#666666", backgroundColor = "#FFFFFF", borderColor = "#00482A", bottomInset = 0, }) {
+    const { tabs, activeTab, handleTabPress } = useHybridShell();
+    if (tabs.length === 0) {
+        return null;
+    }
+    return (_jsx(View, { style: {
+            position: "absolute",
+            bottom: bottomInset,
+            left: 0,
+            right: 0,
+            height: BOTTOM_NAV_HEIGHT,
+            backgroundColor,
+            borderTopWidth: 2,
+            borderTopColor: borderColor,
+            flexDirection: "row",
+            zIndex: 1000,
+        }, children: tabs.map((tab) => {
+            const isActive = activeTab === tab.id;
+            const iconName = isActive
+                ? String(tab.icon).replace("-outline", "")
+                : tab.icon;
+            return (_jsxs(Pressable, { style: {
+                    flex: 1,
+                    justifyContent: "center",
+                    alignItems: "center",
+                    paddingVertical: 8,
+                }, onPress: () => handleTabPress(tab.id), accessibilityRole: "tab", accessibilityState: { selected: isActive }, children: [_jsx(Ionicons, { name: iconName, size: 24, color: isActive ? activeColor : inactiveColor }), _jsx(Text, { style: {
+                            fontSize: 12,
+                            marginTop: 4,
+                            color: isActive ? activeColor : inactiveColor,
+                        }, children: tab.title })] }, tab.id));
+        }) }));
+}

package/dist/WebViewHost.d.ts

@@ -0,0 +1,8 @@
+import type { WebViewHostRef } from "./types.js";
+export type WebViewHostProps = {
+    html: string;
+    baseUrl?: string;
+    onLoadEnd?: () => void;
+};
+export declare const WebViewHost: import("react").ForwardRefExoticComponent<WebViewHostProps & import("react").RefAttributes<WebViewHostRef>>;
+//# sourceMappingURL=WebViewHost.d.ts.map

package/dist/WebViewHost.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebViewHost.d.ts","sourceRoot":"","sources":["../src/WebViewHost.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAiB,cAAc,EAAE,MAAM,YAAY,CAAC;AAEhE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,WAAW,6GAkDvB,CAAC"}

package/dist/WebViewHost.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { WebView } from "react-native-webview";
+import { useHybridShell } from "./HybridShell.js";
+export const WebViewHost = forwardRef(({ html, baseUrl = "https://localhost/", onLoadEnd }, _ref) => {
+    const { webViewRef, onMessageFromWeb } = useHybridShell();
+    const internalRef = useRef(null);
+    useImperativeHandle(webViewRef, () => ({
+        postMessageToWebView(data) {
+            internalRef.current?.postMessage(JSON.stringify(data));
+        },
+    }));
+    const handleMessage = (event) => {
+        try {
+            const data = JSON.parse(event.nativeEvent.data);
+            onMessageFromWeb(data);
+        }
+        catch {
+            // Invalid message — ignore
+        }
+    };
+    if (!html) {
+        return (_jsx(View, { style: styles.errorContainer, children: _jsx(Text, { style: styles.errorText, children: "Web content not loaded. Run `npm run build` in the web folder first." }) }));
+    }
+    return (_jsx(WebView, { ref: internalRef, source: { html, baseUrl }, onMessage: handleMessage, onLoadEnd: onLoadEnd, style: styles.webview, javaScriptEnabled: true, domStorageEnabled: true, scrollEnabled: true, bounces: true, nestedScrollEnabled: true, showsVerticalScrollIndicator: true, showsHorizontalScrollIndicator: false, overScrollMode: "always", allowsInlineMediaPlayback: true, mediaPlaybackRequiresUserAction: false }));
+});
+WebViewHost.displayName = "WebViewHost";
+const styles = StyleSheet.create({
+    webview: {
+        flex: 1,
+        backgroundColor: "transparent",
+    },
+    errorContainer: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: "white",
+    },
+    errorText: {
+        color: "#a31515",
+        textAlign: "center",
+        margin: 20,
+        fontSize: 16,
+    },
+});

package/dist/__mocks__/react-native.d.ts

@@ -0,0 +1,16 @@
+export declare const View = "View";
+export declare const Text = "Text";
+export declare const Pressable = "Pressable";
+export declare const StyleSheet: {
+    create: <T extends Record<string, unknown>>(styles: T) => T;
+};
+declare const _default: {
+    View: string;
+    Text: string;
+    Pressable: string;
+    StyleSheet: {
+        create: <T extends Record<string, unknown>>(styles: T) => T;
+    };
+};
+export default _default;
+//# sourceMappingURL=react-native.d.ts.map

package/dist/__mocks__/react-native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-native.d.ts","sourceRoot":"","sources":["../../src/__mocks__/react-native.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI,SAAS,CAAC;AAC3B,eAAO,MAAM,IAAI,SAAS,CAAC;AAC3B,eAAO,MAAM,SAAS,cAAc,CAAC;AACrC,eAAO,MAAM,UAAU;aACZ,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,UAAU,CAAC,KAAG,CAAC;CAC1D,CAAC;;;;;;iBADS,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,UAAU,CAAC,KAAG,CAAC;;;AAG3D,wBAAqD"}

package/dist/__mocks__/react-native.js

@@ -0,0 +1,7 @@
+export const View = "View";
+export const Text = "Text";
+export const Pressable = "Pressable";
+export const StyleSheet = {
+    create: (styles) => styles,
+};
+export default { View, Text, Pressable, StyleSheet };

package/dist/defineTab.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentProps } from "react";
+import type { Ionicons } from "@expo/vector-icons";
+export type TabConfig<TId extends string = string> = {
+    id: TId;
+    title: string;
+    icon: ComponentProps<typeof Ionicons>["name"];
+};
+export declare function defineTab<TId extends string>(config: TabConfig<TId>): TabConfig<TId>;
+export declare const BOTTOM_NAV_HEIGHT = 60;
+//# sourceMappingURL=defineTab.d.ts.map

package/dist/defineTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defineTab.d.ts","sourceRoot":"","sources":["../src/defineTab.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEnD,MAAM,MAAM,SAAS,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,IAAI;IACnD,EAAE,EAAE,GAAG,CAAC;IACR,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;CAC/C,CAAC;AAEF,wBAAgB,SAAS,CAAC,GAAG,SAAS,MAAM,EAAE,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC,GAAG,CAAC,CAEpF;AAED,eAAO,MAAM,iBAAiB,KAAK,CAAC"}

package/dist/defineTab.js

@@ -0,0 +1,4 @@
+export function defineTab(config) {
+    return config;
+}
+export const BOTTOM_NAV_HEIGHT = 60;

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export type { TabConfig } from "./defineTab.js";
+export { defineTab, BOTTOM_NAV_HEIGHT } from "./defineTab.js";
+export type { BridgeMessage, WebViewHostRef } from "./types.js";
+export { HybridShell, useHybridShell } from "./HybridShell.js";
+export type { HybridShellProps } from "./HybridShell.js";
+export { WebViewHost } from "./WebViewHost.js";
+export type { WebViewHostProps } from "./WebViewHost.js";
+export { NativeTabBar } from "./NativeTabBar.js";
+export type { NativeTabBarProps } from "./NativeTabBar.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,YAAY,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAC9D,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC/D,YAAY,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,YAAY,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,YAAY,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/index.js

@@ -0,0 +1,4 @@
+export { defineTab, BOTTOM_NAV_HEIGHT } from "./defineTab.js";
+export { HybridShell, useHybridShell } from "./HybridShell.js";
+export { WebViewHost } from "./WebViewHost.js";
+export { NativeTabBar } from "./NativeTabBar.js";

package/dist/types.d.ts

@@ -0,0 +1,6 @@
+import type { BridgeMessage } from "davbyte-mobile-bridge/core";
+export type WebViewHostRef = {
+    postMessageToWebView: (data: BridgeMessage) => void;
+};
+export type { BridgeMessage };
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,MAAM,cAAc,GAAG;IAC3B,oBAAoB,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;CACrD,CAAC;AAEF,YAAY,EAAE,aAAa,EAAE,CAAC"}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "davbyte-mobile-native",
+  "version": "0.1.0",
+  "description": "Native shell components for DavByte hybrid Expo + WebView apps",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "peerDependencies": {
+    "@expo/vector-icons": ">=14.0.0",
+    "davbyte-mobile-bridge": ">=0.1.0",
+    "react": ">=18.0.0",
+    "react-native": ">=0.76.0",
+    "react-native-safe-area-context": ">=4.0.0",
+    "react-native-webview": ">=13.0.0"
+  },
+  "devDependencies": {
+    "@expo/vector-icons": "^15.0.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.1.0",
+    "davbyte-mobile-bridge": "*",
+    "jsdom": "^27.0.0",
+    "react": "^19.1.0",
+    "react-native": "^0.81.0",
+    "react-native-webview": "^13.15.0",
+    "typescript": "^5.7.0",
+    "vitest": "^4.0.18"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DavByte/create-app.git",
+    "directory": "packages/davbyte-mobile-native"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}