@sigmela/router 0.3.1 → 0.3.3

package/lib/module/Drawer/RenderDrawer.native.js

@@ -6,7 +6,7 @@ import { useRouter } from "../RouterContext.js";
 import { ScreenStackItem } from 'react-native-screens';
 import { Pressable, StyleSheet, View, Text } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useCallback, useSyncExternalStore, memo, useEffect, useState, useMemo } from 'react';
+import { useCallback, useSyncExternalStore, memo, useEffect, useState, useMemo, startTransition } from 'react';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TIMING_CONFIG = {
@@ -19,9 +19,17 @@ const DrawerStackRenderer = /*#__PURE__*/memo(({
 }) => {
   const router = useRouter();
   const stackId = stack.getId();
-  const subscribe = useCallback(cb => router.subscribeStack(stackId, cb), [router, stackId]);
-  const get = useCallback(() => router.getStackHistory(stackId), [router, stackId]);
-  const history = useSyncExternalStore(subscribe, get, get);
+  const [history, setHistory] = useState(() => router.getStackHistory(stackId));
+  useEffect(() => {
+    const update = () => {
+      startTransition(() => {
+        setHistory(router.getStackHistory(stackId));
+      });
+    };
+    const unsub = router.subscribeStack(stackId, update);
+    update();
+    return unsub;
+  }, [router, stackId]);
   return /*#__PURE__*/_jsx(StackRenderer, {
     appearance: appearance,
     stackId: stackId,

package/lib/module/Navigation.js

@@ -4,13 +4,26 @@ import { ScreenStackItem } from "./ScreenStackItem/index.js";
 import { RouterContext } from "./RouterContext.js";
 import { ScreenStack } from "./ScreenStack/index.js";
 import { StyleSheet } from 'react-native';
-import { useSyncExternalStore, memo, useCallback, useEffect, useRef, useState } from 'react';
+import { memo, useEffect, useRef, useState, startTransition } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 const EMPTY_HISTORY = [];
 function useStackHistory(router, stackId) {
-  const subscribe = useCallback(cb => stackId ? router.subscribeStack(stackId, cb) : () => {}, [router, stackId]);
-  const get = useCallback(() => stackId ? router.getStackHistory(stackId) : EMPTY_HISTORY, [router, stackId]);
-  return useSyncExternalStore(subscribe, get, get);
+  const [history, setHistory] = useState(() => stackId ? router.getStackHistory(stackId) : EMPTY_HISTORY);
+  useEffect(() => {
+    if (!stackId) {
+      setHistory(EMPTY_HISTORY);
+      return;
+    }
+    const update = () => {
+      startTransition(() => {
+        setHistory(router.getStackHistory(stackId));
+      });
+    };
+    const unsub = router.subscribeStack(stackId, update);
+    update();
+    return unsub;
+  }, [router, stackId]);
+  return history;
 }
 
 /**
@@ -30,8 +43,10 @@ export const Navigation = /*#__PURE__*/memo(({
   }));
   useEffect(() => {
     return router.subscribeRoot(() => {
-      setRoot({
-        rootId: router.getRootStackId()
+      startTransition(() => {
+        setRoot({
+          rootId: router.getRootStackId()
+        });
       });
     });
   }, [router]);

package/lib/module/SplitView/RenderSplitView.native.js

@@ -4,33 +4,67 @@ import { ScreenStackItem } from "../ScreenStackItem/index.js";
 import { ScreenStack } from "../ScreenStack/index.js";
 import { SplitViewContext } from "./SplitViewContext.js";
 import { useRouter } from "../RouterContext.js";
-import { memo, useCallback, useSyncExternalStore, useMemo } from 'react';
+import { memo, useMemo, useState, useEffect, startTransition } from 'react';
 import { StyleSheet } from 'react-native';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * On native (iPhone), SplitView renders primary and secondary screens
- * in a SINGLE ScreenStack to get native push/pop animations.
+ * On native, SplitView renders primary and secondary screens in a SINGLE
+ * ScreenStack to get native push/pop animations.
  *
  * The combined history is: [...primaryHistory, ...secondaryHistory]
  * This way, navigating from primary to secondary is a native push.
+ *
+ * On Android (Fabric) react-native-screens manages each ScreenStackItem via
+ * an Android Fragment.  Fragment lifecycle (onCreateView) is asynchronous,
+ * but Fabric's layout pass is synchronous.  If a new commit is dispatched
+ * while the previous Fragment transaction is still in flight, Fabric tries
+ * to insert child views into a Screen whose Fragment isn't attached yet:
+ *
+ *   "addViewAt: Parent Screen does not have its Fragment attached"
+ *
+ * The fix follows the same pattern used in react-native-screens' own
+ * BottomTabsContainer example: subscribe via useEffect and apply updates
+ * inside `startTransition`.  This marks the update as non-urgent, letting
+ * React defer the Fabric commit until pending Fragment transactions complete.
+ *
+ * See: https://github.com/software-mansion/react-native-screens/blob/ddd1a9e/
+ *      apps/src/shared/gamma/containers/bottom-tabs/BottomTabsContainer.tsx
  */
 export const RenderSplitView = /*#__PURE__*/memo(({
   splitView,
   appearance
 }) => {
   const router = useRouter();
-
-  // Subscribe to primary stack
   const primaryId = splitView.primary.getId();
-  const subscribePrimary = useCallback(cb => router.subscribeStack(primaryId, cb), [router, primaryId]);
-  const getPrimary = useCallback(() => router.getStackHistory(primaryId), [router, primaryId]);
-  const primaryHistory = useSyncExternalStore(subscribePrimary, getPrimary, getPrimary);
-
-  // Subscribe to secondary stack
   const secondaryId = splitView.secondary.getId();
-  const subscribeSecondary = useCallback(cb => router.subscribeStack(secondaryId, cb), [router, secondaryId]);
-  const getSecondary = useCallback(() => router.getStackHistory(secondaryId), [router, secondaryId]);
-  const secondaryHistory = useSyncExternalStore(subscribeSecondary, getSecondary, getSecondary);
+
+  // Subscribe to both stacks via useEffect + startTransition.
+  // startTransition defers the Fabric commit so the FragmentManager has
+  // time to finish pending transactions between commits.
+  const [primaryHistory, setPrimaryHistory] = useState(() => router.getStackHistory(primaryId));
+  const [secondaryHistory, setSecondaryHistory] = useState(() => router.getStackHistory(secondaryId));
+  useEffect(() => {
+    const updatePrimary = () => {
+      startTransition(() => {
+        setPrimaryHistory(router.getStackHistory(primaryId));
+      });
+    };
+    const updateSecondary = () => {
+      startTransition(() => {
+        setSecondaryHistory(router.getStackHistory(secondaryId));
+      });
+    };
+    const unsub1 = router.subscribeStack(primaryId, updatePrimary);
+    const unsub2 = router.subscribeStack(secondaryId, updateSecondary);
+
+    // Sync in case the store changed between useState init and useEffect
+    updatePrimary();
+    updateSecondary();
+    return () => {
+      unsub1();
+      unsub2();
+    };
+  }, [router, primaryId, secondaryId]);
 
   // Fallback: if primary is empty, seed with first route
   const primaryHistoryToRender = useMemo(() => {
@@ -56,9 +90,6 @@ export const RenderSplitView = /*#__PURE__*/memo(({
   const combinedHistory = useMemo(() => {
     return [...primaryHistoryToRender, ...secondaryHistory];
   }, [primaryHistoryToRender, secondaryHistory]);
-
-  // Use primary stack ID for the combined ScreenStack
-  // (secondary items will animate as if pushed onto this stack)
   return /*#__PURE__*/_jsx(SplitViewContext.Provider, {
     value: splitView,
     children: /*#__PURE__*/_jsx(ScreenStack, {

package/lib/module/StackRenderer.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import { memo, useCallback, useSyncExternalStore } from 'react';
+import { memo, useEffect, useState, startTransition } from 'react';
 import { ScreenStackItem } from "./ScreenStackItem/index.js";
 import { ScreenStack } from "./ScreenStack/index.js";
 import { useRouter } from "./RouterContext.js";
@@ -13,15 +13,19 @@ export const StackRenderer = /*#__PURE__*/memo(({
 }) => {
   const router = useRouter();
   const hasHistoryProp = history != null;
-  const subscribe = useCallback(cb => {
-    if (hasHistoryProp) return () => {};
-    return router.subscribeStack(stackId, cb);
+  const [internalHistory, setInternalHistory] = useState(() => hasHistoryProp ? history : router.getStackHistory(stackId));
+  useEffect(() => {
+    if (hasHistoryProp) return;
+    const update = () => {
+      startTransition(() => {
+        setInternalHistory(router.getStackHistory(stackId));
+      });
+    };
+    const unsub = router.subscribeStack(stackId, update);
+    update();
+    return unsub;
   }, [router, stackId, hasHistoryProp]);
-  const get = useCallback(() => {
-    if (hasHistoryProp) return history;
-    return router.getStackHistory(stackId);
-  }, [router, stackId, hasHistoryProp, history]);
-  const historyForThisStack = useSyncExternalStore(subscribe, get, get);
+  const historyForThisStack = hasHistoryProp ? history : internalHistory;
   return /*#__PURE__*/_jsx(ScreenStack, {
     style: [styles.flex, appearance?.screen],
     children: historyForThisStack.map(item => /*#__PURE__*/_jsx(ScreenStackItem, {

package/lib/module/TabBar/RenderTabBar.native.js

@@ -3,9 +3,9 @@
 import { StackRenderer } from "../StackRenderer.js";
 import { TabBarContext } from "./TabBarContext.js";
 import { useRouter } from "../RouterContext.js";
-import { Tabs, ScreenStackItem } from 'react-native-screens';
+import { Tabs } from 'react-native-screens';
 import { Platform, StyleSheet, View } from 'react-native';
-import { useCallback, useSyncExternalStore, memo, useEffect, useState, useMemo } from 'react';
+import { useCallback, useSyncExternalStore, memo, useEffect, useState, useMemo, startTransition } from 'react';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const isImageSource = value => {
   if (value == null) return false;
@@ -136,9 +136,17 @@ const TabStackRenderer = /*#__PURE__*/memo(({
 }) => {
   const router = useRouter();
   const stackId = stack.getId();
-  const subscribe = useCallback(cb => router.subscribeStack(stackId, cb), [router, stackId]);
-  const get = useCallback(() => router.getStackHistory(stackId), [router, stackId]);
-  const history = useSyncExternalStore(subscribe, get, get);
+  const [history, setHistory] = useState(() => router.getStackHistory(stackId));
+  useEffect(() => {
+    const update = () => {
+      startTransition(() => {
+        setHistory(router.getStackHistory(stackId));
+      });
+    };
+    const unsub = router.subscribeStack(stackId, update);
+    update();
+    return () => unsub();
+  }, [router, stackId]);
   return /*#__PURE__*/_jsx(StackRenderer, {
     appearance: appearance,
     stackId: stackId,
@@ -190,81 +198,54 @@ export const RenderTabBar = /*#__PURE__*/memo(({
     const tabKey = event.nativeEvent.tabKey;
     const tabIndex = tabs.findIndex(route => route.tabKey === tabKey);
     if (tabIndex === -1) return;
-    const targetTab = tabs[tabIndex];
-    if (!targetTab) return;
-    const targetStack = tabBar.stacks[targetTab.tabKey];
-    const targetNode = tabBar.nodes[targetTab.tabKey];
 
-    // Update TabBar UI state
+    // Keep native Tabs.Host focus state as the source of truth.
     if (tabIndex !== index) {
       tabBar.onIndexChange(tabIndex);
     }
-
-    // Navigate to the target stack's first route if needed
+  }, [tabs, tabBar, index]);
+  const seedTabIfNeeded = useCallback(targetTab => {
+    if (!targetTab) return;
+    const targetStack = tabBar.stacks[targetTab.tabKey];
+    const targetNode = tabBar.nodes[targetTab.tabKey];
     if (targetStack) {
       const stackId = targetStack.getId();
       const stackHistory = router.getStackHistory(stackId);
-      // Only navigate if stack is empty (first visit)
       if (stackHistory.length === 0) {
         const firstRoute = targetStack.getFirstRoute();
         if (firstRoute?.path) {
           router.navigate(firstRoute.path);
         }
       }
-    } else if (targetNode) {
-      // For nodes like SplitView, check if we need to seed it
+      return;
+    }
+    if (targetNode) {
       const nodeId = targetNode.getId?.();
-      if (nodeId) {
-        const nodeHistory = router.getStackHistory(nodeId);
-        if (nodeHistory.length === 0) {
-          const seed = targetNode.seed?.();
-          if (seed?.path) {
-            const prefix = targetTab.tabPrefix ?? '';
-            const fullPath = prefix && !seed.path.startsWith(prefix) ? `${prefix}${seed.path.startsWith('/') ? '' : '/'}${seed.path}` : seed.path;
-            router.navigate(fullPath);
-          }
+      if (!nodeId) return;
+      const nodeHistory = router.getStackHistory(nodeId);
+      if (nodeHistory.length === 0) {
+        const seed = targetNode.seed?.();
+        if (seed?.path) {
+          const prefix = targetTab.tabPrefix ?? '';
+          const fullPath = prefix && !seed.path.startsWith(prefix) ? `${prefix}${seed.path.startsWith('/') ? '' : '/'}${seed.path}` : seed.path;
+          router.navigate(fullPath);
         }
       }
     }
-  }, [tabs, tabBar, index, router]);
+  }, [tabBar.nodes, tabBar.stacks, router]);
+  useEffect(() => {
+    seedTabIfNeeded(tabs[index]);
+  }, [tabs, index, seedTabIfNeeded]);
   const onTabPress = useCallback(nextIndex => {
     const targetTab = tabs[nextIndex];
     if (!targetTab) return;
-    const targetStack = tabBar.stacks[targetTab.tabKey];
-    const targetNode = tabBar.nodes[targetTab.tabKey];
 
     // Update TabBar UI state
     if (nextIndex !== index) {
       tabBar.onIndexChange(nextIndex);
     }
-
-    // Navigate to the target stack's first route if needed
-    if (targetStack) {
-      const stackId = targetStack.getId();
-      const stackHistory = router.getStackHistory(stackId);
-      // Only navigate if stack is empty (first visit)
-      if (stackHistory.length === 0) {
-        const firstRoute = targetStack.getFirstRoute();
-        if (firstRoute?.path) {
-          router.navigate(firstRoute.path);
-        }
-      }
-    } else if (targetNode) {
-      // For nodes like SplitView, check if we need to seed it
-      const nodeId = targetNode.getId?.();
-      if (nodeId) {
-        const nodeHistory = router.getStackHistory(nodeId);
-        if (nodeHistory.length === 0) {
-          const seed = targetNode.seed?.();
-          if (seed?.path) {
-            const prefix = targetTab.tabPrefix ?? '';
-            const fullPath = prefix && !seed.path.startsWith(prefix) ? `${prefix}${seed.path.startsWith('/') ? '' : '/'}${seed.path}` : seed.path;
-            router.navigate(fullPath);
-          }
-        }
-      }
-    }
-  }, [tabs, tabBar, index, router]);
+    seedTabIfNeeded(targetTab);
+  }, [tabs, tabBar, index, seedTabIfNeeded]);
   const containerProps = useMemo(() => ({
     tabBarBackgroundColor: backgroundColor,
     tabBarItemTitleFontFamily: title?.fontFamily,
@@ -339,83 +320,67 @@ export const RenderTabBar = /*#__PURE__*/memo(({
     }
   }, [tabs, index]);
   if (CustomTabBar) {
-    return /*#__PURE__*/_jsx(ScreenStackItem, {
-      screenId: "root-tabbar",
-      headerConfig: {
-        hidden: true
-      },
-      style: StyleSheet.absoluteFill,
-      stackAnimation: "slide_from_right",
-      children: /*#__PURE__*/_jsxs(TabBarContext.Provider, {
-        value: tabBar,
-        children: [/*#__PURE__*/_jsx(View, {
-          style: styles.flex,
-          children: tabs.filter(t => visited[t.tabKey]).map(tab => {
-            const isActive = tab.tabKey === tabs[index]?.tabKey;
-            const stackForTab = tabBar.stacks[tab.tabKey];
-            const nodeForTab = tabBar.nodes[tab.tabKey];
-            const ScreenForTab = tabBar.screens[tab.tabKey];
-            return /*#__PURE__*/_jsx(View, {
-              style: [styles.flex, !isActive && styles.hidden],
-              children: stackForTab ? /*#__PURE__*/_jsx(TabStackRenderer, {
-                appearance: appearance,
-                stack: stackForTab
-              }) : nodeForTab ? /*#__PURE__*/_jsx(TabNodeRenderer, {
-                appearance: appearance,
-                node: nodeForTab
-              }) : ScreenForTab ? /*#__PURE__*/_jsx(ScreenForTab, {}) : null
-            }, `tab-content-${tab.tabKey}`);
-          })
-        }), /*#__PURE__*/_jsx(CustomTabBar, {
-          onTabPress: onTabPress,
-          activeIndex: index,
-          tabs: tabs
-        })]
-      })
-    });
-  }
-  return /*#__PURE__*/_jsx(ScreenStackItem, {
-    screenId: "root-tabbar",
-    headerConfig: {
-      hidden: true
-    },
-    style: StyleSheet.absoluteFill,
-    stackAnimation: "slide_from_right",
-    children: /*#__PURE__*/_jsx(TabBarContext.Provider, {
+    return /*#__PURE__*/_jsxs(TabBarContext.Provider, {
       value: tabBar,
-      children: /*#__PURE__*/_jsx(Tabs.Host, {
-        onNativeFocusChange: onNativeFocusChange,
-        bottomAccessory: config.bottomAccessory,
-        experimentalControlNavigationStateInJS: config.experimentalControlNavigationStateInJS,
-        ...containerProps,
-        children: tabs.map((tab, i) => {
-          const isFocused = tab.tabKey === tabs[index]?.tabKey;
-          const stack = tabBar.stacks[tab.tabKey];
-          const node = tabBar.nodes[tab.tabKey];
-          const Screen = tabBar.screens[tab.tabKey];
-          const convertedIcon = tabIcons[i];
-          const {
-            icon: _icon,
-            selectedIcon: _selectedIcon,
-            tabPrefix: _prefix,
-            ...tabScreenProps
-          } = tab;
-          return /*#__PURE__*/_jsx(Tabs.Screen, {
-            ...tabScreenProps,
-            scrollEdgeAppearance: iosAppearance,
-            standardAppearance: iosAppearance,
-            isFocused: isFocused,
-            icon: convertedIcon?.icon,
-            selectedIcon: convertedIcon?.selectedIcon,
-            children: stack ? /*#__PURE__*/_jsx(TabStackRenderer, {
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.flex,
+        children: tabs.filter(t => visited[t.tabKey]).map(tab => {
+          const isActive = tab.tabKey === tabs[index]?.tabKey;
+          const stackForTab = tabBar.stacks[tab.tabKey];
+          const nodeForTab = tabBar.nodes[tab.tabKey];
+          const ScreenForTab = tabBar.screens[tab.tabKey];
+          return /*#__PURE__*/_jsx(View, {
+            style: [styles.flex, !isActive && styles.hidden],
+            children: stackForTab ? /*#__PURE__*/_jsx(TabStackRenderer, {
               appearance: appearance,
-              stack: stack
-            }) : node ? /*#__PURE__*/_jsx(TabNodeRenderer, {
+              stack: stackForTab
+            }) : nodeForTab ? /*#__PURE__*/_jsx(TabNodeRenderer, {
               appearance: appearance,
-              node: node
-            }) : Screen ? /*#__PURE__*/_jsx(Screen, {}) : null
-          }, tab.tabKey);
+              node: nodeForTab
+            }) : ScreenForTab ? /*#__PURE__*/_jsx(ScreenForTab, {}) : null
+          }, `tab-content-${tab.tabKey}`);
         })
+      }), /*#__PURE__*/_jsx(CustomTabBar, {
+        onTabPress: onTabPress,
+        activeIndex: index,
+        tabs: tabs
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx(TabBarContext.Provider, {
+    value: tabBar,
+    children: /*#__PURE__*/_jsx(Tabs.Host, {
+      onNativeFocusChange: onNativeFocusChange,
+      bottomAccessory: config.bottomAccessory,
+      experimentalControlNavigationStateInJS: config.experimentalControlNavigationStateInJS,
+      ...containerProps,
+      children: tabs.map((tab, i) => {
+        const isFocused = tab.tabKey === tabs[index]?.tabKey;
+        const stack = tabBar.stacks[tab.tabKey];
+        const node = tabBar.nodes[tab.tabKey];
+        const Screen = tabBar.screens[tab.tabKey];
+        const convertedIcon = tabIcons[i];
+        const {
+          icon: _icon,
+          selectedIcon: _selectedIcon,
+          tabPrefix: _prefix,
+          ...tabScreenProps
+        } = tab;
+        return /*#__PURE__*/_jsx(Tabs.Screen, {
+          ...tabScreenProps,
+          scrollEdgeAppearance: iosAppearance,
+          standardAppearance: iosAppearance,
+          isFocused: isFocused,
+          icon: convertedIcon?.icon,
+          selectedIcon: convertedIcon?.selectedIcon,
+          children: stack ? /*#__PURE__*/_jsx(TabStackRenderer, {
+            appearance: appearance,
+            stack: stack
+          }) : node ? /*#__PURE__*/_jsx(TabNodeRenderer, {
+            appearance: appearance,
+            node: node
+          }) : Screen ? /*#__PURE__*/_jsx(Screen, {}) : null
+        }, tab.tabKey);
       })
     })
   });

package/lib/typescript/src/SplitView/RenderSplitView.native.d.ts

@@ -5,11 +5,27 @@ export interface RenderSplitViewProps {
     appearance?: NavigationAppearance;
 }
 /**
- * On native (iPhone), SplitView renders primary and secondary screens
- * in a SINGLE ScreenStack to get native push/pop animations.
+ * On native, SplitView renders primary and secondary screens in a SINGLE
+ * ScreenStack to get native push/pop animations.
  *
  * The combined history is: [...primaryHistory, ...secondaryHistory]
  * This way, navigating from primary to secondary is a native push.
+ *
+ * On Android (Fabric) react-native-screens manages each ScreenStackItem via
+ * an Android Fragment.  Fragment lifecycle (onCreateView) is asynchronous,
+ * but Fabric's layout pass is synchronous.  If a new commit is dispatched
+ * while the previous Fragment transaction is still in flight, Fabric tries
+ * to insert child views into a Screen whose Fragment isn't attached yet:
+ *
+ *   "addViewAt: Parent Screen does not have its Fragment attached"
+ *
+ * The fix follows the same pattern used in react-native-screens' own
+ * BottomTabsContainer example: subscribe via useEffect and apply updates
+ * inside `startTransition`.  This marks the update as non-urgent, letting
+ * React defer the Fabric commit until pending Fragment transactions complete.
+ *
+ * See: https://github.com/software-mansion/react-native-screens/blob/ddd1a9e/
+ *      apps/src/shared/gamma/containers/bottom-tabs/BottomTabsContainer.tsx
  */
 export declare const RenderSplitView: import("react").NamedExoticComponent<RenderSplitViewProps>;
 //# sourceMappingURL=RenderSplitView.native.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sigmela/router",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "React Native Router",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",