@sigmela/router 0.3.3 → 0.3.5

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

@@ -4,9 +4,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 { Platform, 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 +20,10 @@ const DrawerStackRenderer = /*#__PURE__*/memo(({
 }) => {
   const router = useRouter();
   const stackId = stack.getId();
-  const [history, setHistory] = useState(() => router.getStackHistory(stackId));
+
+  // On Android Fabric, start with empty history so the parent Screen's
+  // Fragment can attach before child ScreenStackItems mount.
+  const [history, setHistory] = useState(Platform.OS === 'android' ? EMPTY_HISTORY : () => router.getStackHistory(stackId));
   useEffect(() => {
     const update = () => {
       startTransition(() => {
@@ -124,9 +128,11 @@ export const RenderDrawer = /*#__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/module/Navigation.js

@@ -11,7 +11,9 @@ function useStackHistory(router, stackId) {
   const [history, setHistory] = useState(() => stackId ? router.getStackHistory(stackId) : EMPTY_HISTORY);
   useEffect(() => {
     if (!stackId) {
-      setHistory(EMPTY_HISTORY);
+      startTransition(() => {
+        setHistory(EMPTY_HISTORY);
+      });
       return;
     }
     const update = () => {

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 { StyleSheet } from 'react-native';
+import { memo, useMemo, useRef, useState, useEffect, startTransition } from 'react';
+import { Platform, 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.
@@ -38,12 +39,15 @@ 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));
+  // On Android Fabric, start with empty history so the parent Screen's
+  // Fragment can attach before child ScreenStackItems mount. The useEffect
+  // below populates via startTransition on the next commit.
+  const isAndroid = Platform.OS === 'android';
+  const hydratedRef = useRef(!isAndroid);
+  const [primaryHistory, setPrimaryHistory] = useState(isAndroid ? EMPTY_HISTORY : () => router.getStackHistory(primaryId));
+  const [secondaryHistory, setSecondaryHistory] = useState(isAndroid ? EMPTY_HISTORY : () => router.getStackHistory(secondaryId));
   useEffect(() => {
+    hydratedRef.current = true;
     const updatePrimary = () => {
       startTransition(() => {
         setPrimaryHistory(router.getStackHistory(primaryId));
@@ -66,11 +70,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.
+  // On Android, 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));
+
+  // On Android Fabric, start with empty history so the parent Screen's
+  // Fragment can attach before child ScreenStackItems mount.
+  const [history, setHistory] = useState(Platform.OS === 'android' ? EMPTY_HISTORY : () => router.getStackHistory(stackId));
   useEffect(() => {
     const update = () => {
       startTransition(() => {
@@ -176,6 +180,20 @@ export const RenderTabBar = /*#__PURE__*/memo(({
     index,
     config
   } = snapshot;
+
+  // Local focus state driven by startTransition so that isFocused changes
+  // are deferred until the native Fragment lifecycle completes (Android Fabric).
+  const [focusedTabKey, setFocusedTabKey] = useState(() => tabs[index]?.tabKey);
+
+  // Sync focusedTabKey when index changes from external sources (programmatic navigation).
+  useEffect(() => {
+    const key = tabs[index]?.tabKey;
+    if (key && key !== focusedTabKey) {
+      startTransition(() => {
+        setFocusedTabKey(key);
+      });
+    }
+  }, [tabs, index, focusedTabKey]);
   const {
     iconColor,
     iconColorActive,
@@ -199,7 +217,10 @@ export const RenderTabBar = /*#__PURE__*/memo(({
     const tabIndex = tabs.findIndex(route => route.tabKey === tabKey);
     if (tabIndex === -1) return;
 
-    // Keep native Tabs.Host focus state as the source of truth.
+    // Defer isFocused update so the native Fragment has time to attach.
+    startTransition(() => {
+      setFocusedTabKey(tabKey);
+    });
     if (tabIndex !== index) {
       tabBar.onIndexChange(tabIndex);
     }
@@ -355,7 +376,7 @@ export const RenderTabBar = /*#__PURE__*/memo(({
       experimentalControlNavigationStateInJS: config.experimentalControlNavigationStateInJS,
       ...containerProps,
       children: tabs.map((tab, i) => {
-        const isFocused = tab.tabKey === tabs[index]?.tabKey;
+        const isFocused = tab.tabKey === focusedTabKey;
         const stack = tabBar.stacks[tab.tabKey];
         const node = tabBar.nodes[tab.tabKey];
         const Screen = tabBar.screens[tab.tabKey];

package/package.json

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