@sigmela/router 0.3.4 → 0.3.6

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

@@ -3,10 +3,10 @@
 import { StackRenderer } from "../StackRenderer.js";
 import { DrawerContext } from "./DrawerContext.js";
 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, startTransition } from 'react';
+const EMPTY_HISTORY = [];
 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,7 +19,9 @@ const DrawerStackRenderer = /*#__PURE__*/memo(({
 }) => {
   const router = useRouter();
   const stackId = stack.getId();
-  const [history, setHistory] = useState(() => router.getStackHistory(stackId));
+
+  // Start with empty history — useEffect populates via startTransition.
+  const [history, setHistory] = useState(EMPTY_HISTORY);
   useEffect(() => {
     const update = () => {
       startTransition(() => {
@@ -133,69 +135,61 @@ export const RenderDrawer = /*#__PURE__*/memo(({
     }
   }, [tabs, index]);
   const CustomDrawer = config.component;
-  return /*#__PURE__*/_jsx(ScreenStackItem, {
-    screenId: "root-drawer",
-    headerConfig: {
-      hidden: true
-    },
-    style: StyleSheet.absoluteFill,
-    stackAnimation: "slide_from_right",
-    children: /*#__PURE__*/_jsx(DrawerContext.Provider, {
-      value: drawer,
-      children: /*#__PURE__*/_jsxs(View, {
-        style: styles.container,
-        children: [/*#__PURE__*/_jsx(Animated.View, {
-          style: [styles.sidebar, {
-            width: drawerWidth
-          }, drawerStyle],
-          children: CustomDrawer ? /*#__PURE__*/_jsx(CustomDrawer, {
-            onItemPress: onItemPress,
-            activeIndex: index,
-            items: tabs,
-            isOpen: isOpen,
-            onClose: handleOverlayPress
-          }) : /*#__PURE__*/_jsx(View, {
-            style: [styles.sidebarContent, {
-              paddingTop: insets.top + 12
-            }],
-            children: tabs.map((tab, i) => {
-              const isActive = i === index;
-              return /*#__PURE__*/_jsx(Pressable, {
-                onPress: () => onItemPress(i),
-                style: [styles.item, isActive && styles.itemActive],
-                children: /*#__PURE__*/_jsx(Text, {
-                  style: [styles.itemText, isActive && styles.itemTextActive],
-                  children: tab.title
-                })
-              }, tab.tabKey);
-            })
-          })
-        }), /*#__PURE__*/_jsx(Animated.View, {
-          style: [styles.overlay, overlayStyle],
-          children: /*#__PURE__*/_jsx(Pressable, {
-            style: StyleSheet.absoluteFill,
-            onPress: handleOverlayPress
-          })
-        }), /*#__PURE__*/_jsx(Animated.View, {
-          style: [styles.main, mainStyle],
-          children: tabs.filter(t => visited[t.tabKey]).map(tab => {
-            const isActive = tab.tabKey === tabs[index]?.tabKey;
-            const stackForTab = drawer.stacks[tab.tabKey];
-            const nodeForTab = drawer.nodes[tab.tabKey];
-            const ScreenForTab = drawer.screens[tab.tabKey];
-            return /*#__PURE__*/_jsx(View, {
-              style: [styles.flex, !isActive && styles.hidden],
-              children: stackForTab ? /*#__PURE__*/_jsx(DrawerStackRenderer, {
-                appearance: appearance,
-                stack: stackForTab
-              }) : nodeForTab ? /*#__PURE__*/_jsx(DrawerNodeRenderer, {
-                appearance: appearance,
-                node: nodeForTab
-              }) : ScreenForTab ? /*#__PURE__*/_jsx(ScreenForTab, {}) : null
-            }, `drawer-content-${tab.tabKey}`);
+  return /*#__PURE__*/_jsx(DrawerContext.Provider, {
+    value: drawer,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.container,
+      children: [/*#__PURE__*/_jsx(Animated.View, {
+        style: [styles.sidebar, {
+          width: drawerWidth
+        }, drawerStyle],
+        children: CustomDrawer ? /*#__PURE__*/_jsx(CustomDrawer, {
+          onItemPress: onItemPress,
+          activeIndex: index,
+          items: tabs,
+          isOpen: isOpen,
+          onClose: handleOverlayPress
+        }) : /*#__PURE__*/_jsx(View, {
+          style: [styles.sidebarContent, {
+            paddingTop: insets.top + 12
+          }],
+          children: tabs.map((tab, i) => {
+            const isActive = i === index;
+            return /*#__PURE__*/_jsx(Pressable, {
+              onPress: () => onItemPress(i),
+              style: [styles.item, isActive && styles.itemActive],
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.itemText, isActive && styles.itemTextActive],
+                children: tab.title
+              })
+            }, tab.tabKey);
           })
-        })]
-      })
+        })
+      }), /*#__PURE__*/_jsx(Animated.View, {
+        style: [styles.overlay, overlayStyle],
+        children: /*#__PURE__*/_jsx(Pressable, {
+          style: StyleSheet.absoluteFill,
+          onPress: handleOverlayPress
+        })
+      }), /*#__PURE__*/_jsx(Animated.View, {
+        style: [styles.main, mainStyle],
+        children: tabs.filter(t => visited[t.tabKey]).map(tab => {
+          const isActive = tab.tabKey === tabs[index]?.tabKey;
+          const stackForTab = drawer.stacks[tab.tabKey];
+          const nodeForTab = drawer.nodes[tab.tabKey];
+          const ScreenForTab = drawer.screens[tab.tabKey];
+          return /*#__PURE__*/_jsx(View, {
+            style: [styles.flex, !isActive && styles.hidden],
+            children: stackForTab ? /*#__PURE__*/_jsx(DrawerStackRenderer, {
+              appearance: appearance,
+              stack: stackForTab
+            }) : nodeForTab ? /*#__PURE__*/_jsx(DrawerNodeRenderer, {
+              appearance: appearance,
+              node: nodeForTab
+            }) : ScreenForTab ? /*#__PURE__*/_jsx(ScreenForTab, {}) : null
+          }, `drawer-content-${tab.tabKey}`);
+        })
+      })]
     })
   });
 });

package/lib/module/Navigation.js

@@ -8,7 +8,7 @@ import { memo, useEffect, useRef, useState, startTransition } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 const EMPTY_HISTORY = [];
 function useStackHistory(router, stackId) {
-  const [history, setHistory] = useState(() => stackId ? router.getStackHistory(stackId) : EMPTY_HISTORY);
+  const [history, setHistory] = useState(EMPTY_HISTORY);
   useEffect(() => {
     if (!stackId) {
       startTransition(() => {

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

@@ -4,9 +4,10 @@ import { ScreenStackItem } from "../ScreenStackItem/index.js";
 import { ScreenStack } from "../ScreenStack/index.js";
 import { SplitViewContext } from "./SplitViewContext.js";
 import { useRouter } from "../RouterContext.js";
-import { memo, useMemo, useState, useEffect, startTransition } from 'react';
+import { memo, useMemo, useRef, useState, useEffect, startTransition } from 'react';
 import { StyleSheet } from 'react-native';
 import { jsx as _jsx } from "react/jsx-runtime";
+const EMPTY_HISTORY = [];
 /**
  * On native, SplitView renders primary and secondary screens in a SINGLE
  * ScreenStack to get native push/pop animations.
@@ -14,21 +15,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * 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
+ * History starts empty and is populated via useEffect + startTransition,
+ * following the pattern from react-native-screens' BottomTabsContainer.
+ * This lets the parent Screen attach before child ScreenStackItems mount.
  */
 export const RenderSplitView = /*#__PURE__*/memo(({
   splitView,
@@ -38,12 +27,12 @@ export const RenderSplitView = /*#__PURE__*/memo(({
   const primaryId = splitView.primary.getId();
   const secondaryId = splitView.secondary.getId();
 
-  // 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));
+  // Start with empty history — useEffect populates via startTransition.
+  const hydratedRef = useRef(false);
+  const [primaryHistory, setPrimaryHistory] = useState(EMPTY_HISTORY);
+  const [secondaryHistory, setSecondaryHistory] = useState(EMPTY_HISTORY);
   useEffect(() => {
+    hydratedRef.current = true;
     const updatePrimary = () => {
       startTransition(() => {
         setPrimaryHistory(router.getStackHistory(primaryId));
@@ -66,11 +55,14 @@ export const RenderSplitView = /*#__PURE__*/memo(({
     };
   }, [router, primaryId, secondaryId]);
 
-  // Fallback: if primary is empty, seed with first route
+  // Fallback: if primary is empty, seed with first route.
+  // Skip the seed during the initial empty mount (before useEffect
+  // hydrates history) so no ScreenStackItems mount before the parent Fragment attaches.
   const primaryHistoryToRender = useMemo(() => {
     if (primaryHistory.length > 0) {
       return primaryHistory;
     }
+    if (!hydratedRef.current) return [];
     const first = splitView.primary.getFirstRoute();
     if (!first) return [];
     const activePath = router.getActiveRoute()?.path;

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

@@ -7,6 +7,7 @@ import { Tabs } from 'react-native-screens';
 import { Platform, StyleSheet, View } from 'react-native';
 import { useCallback, useSyncExternalStore, memo, useEffect, useState, useMemo, startTransition } from 'react';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const EMPTY_HISTORY = [];
 const isImageSource = value => {
   if (value == null) return false;
   const valueType = typeof value;
@@ -136,7 +137,10 @@ const TabStackRenderer = /*#__PURE__*/memo(({
 }) => {
   const router = useRouter();
   const stackId = stack.getId();
-  const [history, setHistory] = useState(() => router.getStackHistory(stackId));
+
+  // Start with empty history — useEffect populates via startTransition.
+  // This avoids mounting ScreenStackItems before parent Fragments attach.
+  const [history, setHistory] = useState(EMPTY_HISTORY);
   useEffect(() => {
     const update = () => {
       startTransition(() => {
@@ -145,7 +149,7 @@ const TabStackRenderer = /*#__PURE__*/memo(({
     };
     const unsub = router.subscribeStack(stackId, update);
     update();
-    return () => unsub();
+    return unsub;
   }, [router, stackId]);
   return /*#__PURE__*/_jsx(StackRenderer, {
     appearance: appearance,
@@ -330,9 +334,11 @@ export const RenderTabBar = /*#__PURE__*/memo(({
   useEffect(() => {
     const key = tabs[index]?.tabKey;
     if (key) {
-      setVisited(prev => prev[key] ? prev : {
-        ...prev,
-        [key]: true
+      startTransition(() => {
+        setVisited(prev => prev[key] ? prev : {
+          ...prev,
+          [key]: true
+        });
       });
     }
   }, [tabs, index]);

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

@@ -11,21 +11,9 @@ export interface RenderSplitViewProps {
  * 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
+ * History starts empty and is populated via useEffect + startTransition,
+ * following the pattern from react-native-screens' BottomTabsContainer.
+ * This lets the parent Screen attach before child ScreenStackItems mount.
  */
 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.4",
+  "version": "0.3.6",
   "description": "React Native Router",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",