@sigmela/router 0.3.3 → 0.3.4

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

@@ -124,9 +124,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/TabBar/RenderTabBar.native.js

@@ -176,6 +176,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 +213,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 +372,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.4",
   "description": "React Native Router",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",