@buoy-gg/route-events 2.1.3 → 2.1.4-beta.1

package/lib/commonjs/components/RouteEventsModalWithTabs.js

@@ -6,17 +6,67 @@ Object.defineProperty(exports, "__esModule", {
 exports.RouteEventsModalWithTabs = RouteEventsModalWithTabs;
 var _react = require("react");
 var _reactNative = require("react-native");
-var _expoRouter = require("expo-router");
+var _native = require("@react-navigation/native");
+var _core = require("@react-navigation/core");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _license = require("@buoy-gg/license");
 var _useRouteEvents = require("../hooks/useRouteEvents");
 var _RouteFilterViewV = require("./RouteFilterViewV2");
 var _RoutesSitemap = require("./RoutesSitemap");
+var _ReactNavigationRoutes = require("./ReactNavigationRoutes");
 var _NavigationStack = require("./NavigationStack");
 var _RouteEventsTimeline = require("./RouteEventsTimeline");
 var _jsxRuntime = require("react/jsx-runtime");
 // Free tier limit for route events
 const FREE_TIER_EVENT_LIMIT = 3;
+/**
+ * Find the path from root navigation state to a screen by name.
+ * Returns array of route names from root to the target, or null if not found.
+ */
+function findScreenPath(state, screenName) {
+  if (!state || !state.routes) return null;
+  for (const route of state.routes) {
+    if (route.name === screenName) {
+      return [route.name];
+    }
+    if (route.state) {
+      const nested = findScreenPath(route.state, screenName);
+      if (nested) {
+        return [route.name, ...nested];
+      }
+    }
+  }
+  return null;
+}
+
+/**
+ * Build a nested CommonActions.navigate() from a path of screen names.
+ * e.g. ["MainApp", "Settings", "SettingScreen"] becomes:
+ * navigate("MainApp", { screen: "Settings", params: { screen: "SettingScreen" } })
+ */
+function buildNestedNavigateAction(path) {
+  if (path.length === 0) return null;
+  if (path.length === 1) {
+    return _native.CommonActions.navigate({
+      name: path[0]
+    });
+  }
+
+  // Build nested params from the end
+  let params = {
+    screen: path[path.length - 1]
+  };
+  for (let i = path.length - 2; i >= 1; i--) {
+    params = {
+      screen: path[i],
+      params
+    };
+  }
+  return _native.CommonActions.navigate({
+    name: path[0],
+    params
+  });
+}
 function RouteEventsModalWithTabs({
   visible,
   onClose,
@@ -24,7 +74,9 @@ function RouteEventsModalWithTabs({
   onMinimize,
   enableSharedModalDimensions = false
 }) {
-  const router = (0, _expoRouter.useRouter)();
+  const router = (0, _sharedUi.useSafeRouter)();
+  const containerRef = (0, _react.useContext)(_core.NavigationContainerRefContext);
+  const hasExpoRouter = (0, _sharedUi.isExpoRouterAvailable)();
   const [activeTab, setActiveTab] = (0, _react.useState)("events");
   const [showUpgradeModal, setShowUpgradeModal] = (0, _react.useState)(false);
 
@@ -69,11 +121,34 @@ function RouteEventsModalWithTabs({
   }, []);
   const handleNavigate = (0, _react.useCallback)(pathname => {
     try {
-      router.push(pathname);
+      if (hasExpoRouter) {
+        router.push(pathname);
+      } else if (containerRef) {
+        // On RN CLI, pathname is /<ScreenName> — extract the screen name
+        const screenName = pathname.startsWith("/") ? pathname.slice(1) : pathname;
+
+        // Walk the state tree to find the nesting path to this screen
+        const rootState = containerRef.getRootState?.();
+        if (rootState) {
+          const path = findScreenPath(rootState, screenName);
+          if (path) {
+            const action = buildNestedNavigateAction(path);
+            if (action) {
+              containerRef.dispatch(action);
+              return;
+            }
+          }
+        }
+
+        // Fallback: try direct navigation (works for top-level screens)
+        containerRef.dispatch(_native.CommonActions.navigate({
+          name: screenName
+        }));
+      }
     } catch (error) {
       _reactNative.Alert.alert("Navigation Error", String(error));
     }
-  }, [router]);
+  }, [router, containerRef, hasExpoRouter]);
 
   // Load persisted tab state on mount
   (0, _react.useEffect)(() => {
@@ -294,7 +369,9 @@ function RouteEventsModalWithTabs({
   const footerNode = null;
   const renderContent = () => {
     if (activeTab === "routes") {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RoutesSitemap.RoutesSitemap, {
+      return hasExpoRouter ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_RoutesSitemap.RoutesSitemap, {
+        style: styles.contentWrapper
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReactNavigationRoutes.ReactNavigationRoutes, {
         style: styles.contentWrapper
       });
     }
@@ -393,7 +470,7 @@ function RouteEventsModalWithTabs({
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TabSelector, {
             tabs: [{
               key: "routes",
-              label: "Routes"
+              label: hasExpoRouter ? "Routes" : "Screens"
             }, {
               key: "events",
               label: `Events${events.length > 0 && activeTab !== "events" ? ` (${events.length})` : ""}`

package/lib/commonjs/components/RoutesSitemap.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.RoutesSitemap = RoutesSitemap;
 var _react = require("react");
 var _reactNative = require("react-native");
-var _expoRouter = require("expo-router");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _license = require("@buoy-gg/license");
 var _useRouteSitemap = require("../useRouteSitemap");
@@ -48,7 +47,7 @@ function RoutesSitemap({
       setShowUpgradeModal(false);
     }
   }, [showUpgradeModal, isPro]);
-  const router = (0, _expoRouter.useRouter)();
+  const router = (0, _sharedUi.useSafeRouter)();
   const {
     groups,
     stats,

package/lib/commonjs/index.js

@@ -105,6 +105,12 @@ Object.defineProperty(exports, "useRouteObserver", {
     return _useRouteObserver.useRouteObserver;
   }
 });
+Object.defineProperty(exports, "useRouteObserverReactNavigation", {
+  enumerable: true,
+  get: function () {
+    return _useRouteObserverReactNavigation.useRouteObserverReactNavigation;
+  }
+});
 Object.defineProperty(exports, "useRouteSitemap", {
   enumerable: true,
   get: function () {
@@ -119,6 +125,7 @@ var _NavigationStack = require("./components/NavigationStack");
 var _RouteEventItemCompact = require("./components/RouteEventItemCompact");
 var _RouteEventExpandedContent = require("./components/RouteEventExpandedContent");
 var _useRouteObserver = require("./useRouteObserver");
+var _useRouteObserverReactNavigation = require("./useRouteObserverReactNavigation");
 var _useRouteEvents = require("./hooks/useRouteEvents");
 var _useRouteSitemap = require("./useRouteSitemap");
 var _useNavigationStack = require("./useNavigationStack");

package/lib/commonjs/useNavigationStack.js

@@ -6,20 +6,75 @@ Object.defineProperty(exports, "__esModule", {
 exports.useNavigationStack = useNavigationStack;
 var _react = require("react");
 var _native = require("@react-navigation/native");
-var _expoRouter = require("expo-router");
+var _core = require("@react-navigation/core");
+var _sharedUi = require("@buoy-gg/shared-ui");
 /**
  * useNavigationStack - Hook to access current navigation stack state
  *
- * Provides real-time access to the navigation stack from Expo Router,
+ * Provides real-time access to the navigation stack,
  * showing what screens are currently mounted in memory and which is visible.
  *
- * Data source: @react-navigation/native
+ * Supports both Expo Router and React Navigation (RN CLI).
+ *
+ * - Expo Router: uses useNavigation/useNavigationState (inside navigator context)
+ * - RN CLI: uses NavigationContainerRefContext (works as sibling of navigators)
  */
 
 // ============================================================================
 // Type Definitions
 // ============================================================================
 
+// ============================================================================
+// Nested Navigation Helpers
+// ============================================================================
+
+/**
+ * Find the path from root navigation state to a screen by name.
+ * Returns array of route names from root to the target, or null if not found.
+ */
+function findScreenPath(state, screenName) {
+  if (!state || !state.routes) return null;
+  for (const route of state.routes) {
+    if (route.name === screenName) {
+      return [route.name];
+    }
+    if (route.state) {
+      const nested = findScreenPath(route.state, screenName);
+      if (nested) {
+        return [route.name, ...nested];
+      }
+    }
+  }
+  return null;
+}
+
+/**
+ * Build a nested CommonActions.navigate() from a path of screen names.
+ * e.g. ["MainApp", "Settings", "SettingScreen"] becomes:
+ * navigate("MainApp", { screen: "Settings", params: { screen: "SettingScreen" } })
+ */
+function buildNestedNavigateAction(path) {
+  if (path.length === 0) return null;
+  if (path.length === 1) {
+    return _native.CommonActions.navigate({
+      name: path[0]
+    });
+  }
+  let params = {
+    screen: path[path.length - 1]
+  };
+  for (let i = path.length - 2; i >= 1; i--) {
+    params = {
+      screen: path[i],
+      params
+    };
+  }
+  return _native.CommonActions.navigate({
+    name: path[0],
+    params
+  });
+}
+
 // ============================================================================
 // Main Hook
 // ============================================================================
@@ -74,7 +129,57 @@ function collectRoutesFromState(state, depth = 0, parentPath = "") {
 }
 
 /**
- * Access the current navigation stack from Expo Router
+ * Transform raw navigation state into display items
+ */
+function buildStack(navigationState, isExpo) {
+  if (!navigationState) return [];
+  try {
+    const routes = collectRoutesFromState(navigationState);
+
+    // Filter out internal Expo Router routes (layouts, __root, etc.)
+    // These only exist in Expo Router; on RN CLI all routes are user-defined
+    const filteredRoutes = isExpo ? routes.filter(route => {
+      if (route.name.startsWith("__")) return false;
+      if (route.name.includes("_layout")) return false;
+      if (route.name.startsWith("+not-found")) return false;
+      return true;
+    }) : routes;
+
+    // If we filtered everything out, just keep the last route
+    const finalRoutes = filteredRoutes.length > 0 ? filteredRoutes : routes.slice(-1);
+
+    // The last route in the collected list is the focused one
+    return finalRoutes.map((route, index) => {
+      let cleanPath = route.path || `/${route.name}`;
+      // Clean up Expo Router internal /__root prefix
+      if (isExpo) {
+        cleanPath = cleanPath.replace(/^\/__root/, "");
+      }
+      // Ensure we always have at least a /
+      if (!cleanPath || cleanPath === "") {
+        cleanPath = "/";
+      }
+      return {
+        key: route.key,
+        name: route.name,
+        pathname: cleanPath,
+        params: route.params || {},
+        isFocused: index === finalRoutes.length - 1,
+        index,
+        canPop: index > 0
+      };
+    });
+  } catch (err) {
+    console.error("Error transforming navigation state:", err);
+    return [];
+  }
+}
+
+/**
+ * Access the current navigation stack.
+ *
+ * Works in both Expo Router and RN CLI apps. On RN CLI, uses the
+ * NavigationContainer ref context so it works even as a sibling of navigators.
  *
  * @example
  * ```tsx
@@ -90,60 +195,37 @@ function collectRoutesFromState(state, depth = 0, parentPath = "") {
  * ```
  */
 function useNavigationStack() {
+  const isExpo = (0, _sharedUi.isExpoRouterAvailable)();
+  const containerRef = (0, _react.useContext)(_core.NavigationContainerRefContext);
+  const [navigationState, setNavigationState] = (0, _react.useState)(() => containerRef?.getRootState?.() ?? null);
   const [isLoaded, setIsLoaded] = (0, _react.useState)(false);
   const [error, setError] = (0, _react.useState)(null);
-  const navigation = (0, _native.useNavigation)();
 
-  // Subscribe to navigation state changes - this will cause re-renders when state updates
-  const navigationState = (0, _native.useNavigationState)(state => state);
-
-  // Mark as loaded once we have navigation
+  // Subscribe to navigation state changes via the container ref
   (0, _react.useEffect)(() => {
+    if (!containerRef) return;
+
+    // Get initial state
+    const initialState = containerRef.getRootState?.();
+    if (initialState) {
+      setNavigationState(initialState);
+    }
     setIsLoaded(true);
-  }, []);
+
+    // Listen for state changes
+    const unsubscribe = containerRef.addListener?.("state", () => {
+      const state = containerRef.getRootState?.();
+      if (state) {
+        setNavigationState(state);
+      }
+    });
+    return () => {
+      unsubscribe?.();
+    };
+  }, [containerRef]);
 
   // Transform navigation state into display items
-  const stack = (0, _react.useMemo)(() => {
-    if (!navigationState) return [];
-    try {
-      const routes = collectRoutesFromState(navigationState);
-
-      // Filter out internal Expo Router routes (layouts, __root, etc.)
-      const filteredRoutes = routes.filter(route => {
-        // Remove __root and other internal routes
-        if (route.name.startsWith("__")) return false;
-        if (route.name.includes("_layout")) return false;
-        if (route.name.startsWith("+not-found")) return false;
-        return true;
-      });
-
-      // If we filtered everything out, just keep the last route
-      const finalRoutes = filteredRoutes.length > 0 ? filteredRoutes : routes.slice(-1);
-
-      // The last route in the collected list is the focused one
-      return finalRoutes.map((route, index) => {
-        // Clean up pathname by removing /__root prefix
-        let cleanPath = route.path || `/${route.name}`;
-        cleanPath = cleanPath.replace(/^\/__root/, "");
-        // Ensure we always have at least a /
-        if (!cleanPath || cleanPath === "") {
-          cleanPath = "/";
-        }
-        return {
-          key: route.key,
-          name: route.name,
-          pathname: cleanPath,
-          params: route.params || {},
-          isFocused: index === finalRoutes.length - 1,
-          index,
-          canPop: index > 0
-        };
-      });
-    } catch (err) {
-      console.error("Error transforming navigation state:", err);
-      return [];
-    }
-  }, [navigationState]);
+  const stack = (0, _react.useMemo)(() => buildStack(navigationState, isExpo), [navigationState, isExpo]);
 
   // Get focused route
   const focusedRoute = (0, _react.useMemo)(() => {
@@ -154,77 +236,92 @@ function useNavigationStack() {
   const stackDepth = stack.length;
   const isAtRoot = stackDepth <= 1;
 
-  // Manual refresh (no-op since we're using React Navigation's state)
-  const refresh = () => {
-    // Navigation state updates automatically via useNavigationState
-  };
-
-  // Navigation actions
-  const navigateToIndex = index => {
-    if (index >= stack.length || index < 0) {
-      return;
-    }
-    const targetRoute = stack[index];
-    if (!targetRoute) {
-      return;
+  // Manual refresh
+  const refresh = (0, _react.useCallback)(() => {
+    if (!containerRef) return;
+    const state = containerRef.getRootState?.();
+    if (state) {
+      setNavigationState(state);
     }
+  }, [containerRef]);
 
-    // Use router directly from expo-router
-    if (!_expoRouter.router) {
-      return;
-    }
+  // Navigation actions - use Expo Router when available, fall back to React Navigation
+  const navigateToIndex = (0, _react.useCallback)(index => {
+    if (index >= stack.length || index < 0) return;
+    const targetRoute = stack[index];
+    if (!targetRoute) return;
     try {
-      _expoRouter.router.navigate(targetRoute.pathname);
+      const expoRouter = (0, _sharedUi.getSafeRouter)();
+      if (expoRouter) {
+        expoRouter.navigate(targetRoute.pathname);
+      } else if (containerRef) {
+        // Walk the state tree to build nested screen/params for deep navigation
+        const rootState = containerRef.getRootState?.();
+        if (rootState) {
+          const path = findScreenPath(rootState, targetRoute.name);
+          if (path) {
+            const action = buildNestedNavigateAction(path);
+            if (action) {
+              containerRef.dispatch(action);
+              return;
+            }
+          }
+        }
+        // Fallback: try direct navigation
+        containerRef.dispatch(_native.CommonActions.navigate({
+          name: targetRoute.name,
+          params: targetRoute.params
+        }));
+      }
     } catch (err) {
       console.error("Failed to navigate:", err);
     }
-  };
-  const popToIndex = index => {
-    if (index >= stack.length || index < 0) {
-      return;
-    }
+  }, [stack, containerRef]);
+  const popToIndex = (0, _react.useCallback)(index => {
+    if (index >= stack.length || index < 0) return;
     const currentIndex = stack.length - 1;
     const popCount = currentIndex - index;
-    if (popCount <= 0) {
-      return;
-    }
-
-    // Use router directly from expo-router
-    if (!_expoRouter.router) {
-      return;
-    }
+    if (popCount <= 0) return;
     try {
-      // Pop multiple times
-      for (let i = 0; i < popCount; i++) {
-        _expoRouter.router.back();
+      const expoRouter = (0, _sharedUi.getSafeRouter)();
+      if (expoRouter) {
+        for (let i = 0; i < popCount; i++) {
+          expoRouter.back();
+        }
+      } else if (containerRef) {
+        containerRef.dispatch(_native.StackActions.pop(popCount));
       }
     } catch (err) {
       console.error("Failed to pop:", err);
     }
-  };
-  const goBack = () => {
-    if (isAtRoot) {
-      return;
-    }
-
-    // Use router directly from expo-router
-    if (!_expoRouter.router) {
-      return;
-    }
+  }, [stack, containerRef]);
+  const goBack = (0, _react.useCallback)(() => {
+    if (isAtRoot) return;
     try {
-      _expoRouter.router.back();
+      const expoRouter = (0, _sharedUi.getSafeRouter)();
+      if (expoRouter) {
+        expoRouter.back();
+      } else if (containerRef) {
+        containerRef.goBack();
+      }
     } catch (err) {
       console.error("Failed to go back:", err);
     }
-  };
-  const popToTop = () => {
-    if (isAtRoot) {
-      return;
+  }, [isAtRoot, containerRef]);
+  const popToTop = (0, _react.useCallback)(() => {
+    if (isAtRoot) return;
+    try {
+      const expoRouter = (0, _sharedUi.getSafeRouter)();
+      if (expoRouter) {
+        // Pop to index 0 via expo-router
+        popToIndex(0);
+      } else if (containerRef) {
+        containerRef.dispatch(_native.StackActions.popToTop());
+      }
+    } catch (err) {
+      console.error("Failed to pop to top:", err);
     }
-
-    // Pop to index 0 (root)
-    popToIndex(0);
-  };
+  }, [isAtRoot, containerRef, popToIndex]);
   return {
     stack,
     focusedRoute,

package/lib/commonjs/useRouteObserver.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useRouteObserver = useRouteObserver;
 var _react = require("react");
-var _expoRouter = require("expo-router");
+var _sharedUi = require("@buoy-gg/shared-ui");
 var _RouteObserver = require("./RouteObserver");
 /**
  * useRouteObserver - React hook for observing route changes
@@ -33,9 +33,9 @@ var _RouteObserver = require("./RouteObserver");
  * ```
  */
 function useRouteObserver(callback) {
-  const pathname = (0, _expoRouter.usePathname)();
-  const segments = (0, _expoRouter.useSegments)();
-  const params = (0, _expoRouter.useGlobalSearchParams)();
+  const pathname = (0, _sharedUi.useSafePathname)();
+  const segments = (0, _sharedUi.useSafeSegments)();
+  const params = (0, _sharedUi.useSafeGlobalSearchParams)();
   const callbackRef = (0, _react.useRef)(callback);
   const previousPathnameRef = (0, _react.useRef)(undefined);
   const previousTimestampRef = (0, _react.useRef)(undefined);

package/lib/commonjs/useRouteObserverReactNavigation.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRouteObserverReactNavigation = useRouteObserverReactNavigation;
+var _react = require("react");
+var _core = require("@react-navigation/core");
+var _RouteObserver = require("./RouteObserver");
+/**
+ * useRouteObserverReactNavigation - React hook for observing route changes
+ * using @react-navigation/native APIs.
+ *
+ * This is the React Navigation (RN CLI) counterpart to useRouteObserver.ts
+ * which uses Expo Router hooks. Both emit to the same routeObserver singleton.
+ *
+ * Uses NavigationContainerRefContext so it works anywhere inside
+ * a NavigationContainer — does NOT need to be inside a navigator.
+ */
+
+/**
+ * Walk a React Navigation state tree to find the deepest focused route.
+ * Returns the route object and the array of route names from root to leaf.
+ */
+function getDeepestFocusedRoute(state) {
+  if (!state || !state.routes || state.routes.length === 0) {
+    return {
+      route: null,
+      segments: []
+    };
+  }
+  const route = state.routes[state.index ?? 0];
+  const segments = [route.name];
+  if (route.state) {
+    const nested = getDeepestFocusedRoute(route.state);
+    if (nested.route) {
+      return {
+        route: nested.route,
+        segments: [...segments, ...nested.segments]
+      };
+    }
+  }
+  return {
+    route,
+    segments
+  };
+}
+function emitRouteEvent(state, previousPathnameRef, previousTimestampRef, callbackRef) {
+  if (!state) return;
+  const {
+    route,
+    segments
+  } = getDeepestFocusedRoute(state);
+  if (!route) return;
+  const pathname = `/${route.name}`;
+
+  // Skip if pathname hasn't changed
+  if (pathname === previousPathnameRef.current) return;
+  const now = Date.now();
+  const timeSincePrevious = previousTimestampRef.current ? now - previousTimestampRef.current : undefined;
+  const event = {
+    pathname,
+    params: route.params || {},
+    segments,
+    timestamp: now,
+    previousPathname: previousPathnameRef.current,
+    timeSincePrevious
+  };
+  previousPathnameRef.current = pathname;
+  previousTimestampRef.current = now;
+  _RouteObserver.routeObserver.emit(event);
+  if (callbackRef.current) {
+    callbackRef.current(event);
+  }
+}
+
+/**
+ * Hook to observe route changes via @react-navigation/native.
+ * Automatically emits events to the global RouteObserver.
+ *
+ * Works anywhere inside a NavigationContainer (does not need to be inside a navigator).
+ */
+function useRouteObserverReactNavigation(callback) {
+  const containerRef = (0, _react.useContext)(_core.NavigationContainerRefContext);
+  const callbackRef = (0, _react.useRef)(callback);
+  const previousPathnameRef = (0, _react.useRef)(undefined);
+  const previousTimestampRef = (0, _react.useRef)(undefined);
+  (0, _react.useEffect)(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  (0, _react.useEffect)(() => {
+    if (!containerRef) return;
+
+    // Emit for the initial state
+    const initialState = containerRef.getRootState?.();
+    if (initialState) {
+      emitRouteEvent(initialState, previousPathnameRef, previousTimestampRef, callbackRef);
+    }
+
+    // Listen for state changes
+    const unsubscribe = containerRef.addListener?.("state", () => {
+      const state = containerRef.getRootState?.();
+      emitRouteEvent(state, previousPathnameRef, previousTimestampRef, callbackRef);
+    });
+    return () => {
+      unsubscribe?.();
+    };
+  }, [containerRef]);
+}