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

package/lib/module/RouteTracker.js

@@ -3,15 +3,15 @@
 /**
  * RouteTracker - A component to place inside your navigation tree
  *
- * This component calls useRouteObserver() which uses expo-router hooks
- * (usePathname, useSegments, etc.) to track navigation changes.
+ * Automatically detects whether Expo Router or React Navigation is available
+ * and uses the appropriate route observation method.
  *
  * IMPORTANT: This component MUST be placed inside your navigation tree
- * (as a child of Stack, Tabs, or Slot) for route tracking to work.
+ * (as a child of Stack, Tabs, Slot, or NavigationContainer) for route tracking to work.
  *
  * @example
  * ```tsx
- * // In your _layout.tsx
+ * // Expo Router - in your _layout.tsx
  * import { RouteTracker } from '@buoy-gg/route-events';
  *
  * export default function RootLayout() {
@@ -25,11 +25,38 @@
  *     </>
  *   );
  * }
+ *
+ * // React Navigation (RN CLI) - inside NavigationContainer
+ * import { RouteTracker } from '@buoy-gg/route-events';
+ *
+ * function App() {
+ *   return (
+ *     <NavigationContainer>
+ *       <RootNavigator />
+ *       <RouteTracker />
+ *       <FloatingDevTools ... />
+ *     </NavigationContainer>
+ *   );
+ * }
  * ```
  */
 
+import { isExpoRouterAvailable } from "@buoy-gg/shared-ui";
 import { useRouteObserver } from "./useRouteObserver";
-export function RouteTracker() {
+import { useRouteObserverReactNavigation } from "./useRouteObserverReactNavigation";
+import { jsx as _jsx } from "react/jsx-runtime";
+function ExpoRouteTracker() {
   useRouteObserver();
   return null;
+}
+function ReactNavigationRouteTracker() {
+  useRouteObserverReactNavigation();
+  return null;
+}
+export function RouteTracker() {
+  const hasExpo = isExpoRouterAvailable();
+  if (hasExpo) {
+    return /*#__PURE__*/_jsx(ExpoRouteTracker, {});
+  }
+  return /*#__PURE__*/_jsx(ReactNavigationRouteTracker, {});
 }

package/lib/module/components/NavigationStack.js

@@ -13,7 +13,6 @@ import { ChevronDown, ChevronRight, Info, InlineCopyButton, ProUpgradeModal, buo
 import { useIsPro } from "@buoy-gg/license";
 import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
 import { useNavigationStack } from "../useNavigationStack";
-import { useRouter } from "expo-router";
 
 // ============================================================================
 // Types
@@ -37,7 +36,6 @@ export function NavigationStack({
     goBack,
     popToTop
   } = useNavigationStack();
-  const router = useRouter();
   const [expandedIndex, setExpandedIndex] = useState(null);
   const [showHelp, setShowHelp] = useState(false);
   const [showUpgradeModal, setShowUpgradeModal] = useState(false);
@@ -226,7 +224,9 @@ export function NavigationStack({
       })]
     }), /*#__PURE__*/_jsx(ScrollView, {
       style: styles.stackScroll,
-      contentContainerStyle: styles.stackContent,
+      contentContainerStyle: [styles.stackContent, {
+        paddingBottom: showHelp ? 72 : 56
+      }],
       children: [...stack].reverse().map((item, reverseIndex) => {
         const actualIndex = stack.length - 1 - reverseIndex;
         const isExpanded = expandedIndex === actualIndex;
@@ -255,17 +255,16 @@ export function NavigationStack({
               }), /*#__PURE__*/_jsx(InlineCopyButton, {
                 value: item.pathname,
                 buttonStyle: styles.copyRouteButton
-              }), item.isFocused ? /*#__PURE__*/_jsx(View, {
-                style: styles.focusedBadge,
+              }), /*#__PURE__*/_jsx(View, {
+                style: [styles.statusBadge, {
+                  backgroundColor: item.isFocused ? `${buoyColors.success}15` : "#3B82F615",
+                  borderColor: item.isFocused ? `${buoyColors.success}40` : "#3B82F640"
+                }],
                 children: /*#__PURE__*/_jsx(Text, {
-                  style: styles.focusedBadgeText,
-                  children: "VISIBLE"
-                })
-              }) : /*#__PURE__*/_jsx(View, {
-                style: styles.memoryBadge,
-                children: /*#__PURE__*/_jsx(Text, {
-                  style: styles.memoryBadgeText,
-                  children: "MEMORY"
+                  style: [styles.statusBadgeText, {
+                    color: item.isFocused ? buoyColors.success : "#3B82F6"
+                  }],
+                  children: item.isFocused ? "FOCUSED" : "MOUNTED"
                 })
               })]
             }), isExpanded && /*#__PURE__*/_jsxs(View, {
@@ -472,28 +471,15 @@ const styles = StyleSheet.create({
     padding: 4,
     marginLeft: 4
   },
-  focusedBadge: {
-    backgroundColor: buoyColors.success,
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 4
-  },
-  focusedBadgeText: {
-    fontSize: 9,
-    fontWeight: "700",
-    color: buoyColors.base,
-    fontFamily: "monospace"
-  },
-  memoryBadge: {
-    backgroundColor: buoyColors.input,
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 4
+  statusBadge: {
+    borderRadius: 4,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderWidth: 1
   },
-  memoryBadgeText: {
-    fontSize: 9,
+  statusBadgeText: {
+    fontSize: 10,
     fontWeight: "600",
-    color: buoyColors.textSecondary,
     fontFamily: "monospace"
   },
   expandedContent: {
@@ -523,8 +509,13 @@ const styles = StyleSheet.create({
     marginBottom: 8
   },
   actionsContainer: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
     borderTopWidth: 1,
     borderTopColor: buoyColors.border,
+    backgroundColor: buoyColors.base,
     paddingHorizontal: 8,
     paddingTop: 8,
     paddingBottom: 8