@sigmela/router 0.3.2 → 0.3.4

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,
@@ -116,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

@@ -4,13 +4,28 @@ 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) {
+      startTransition(() => {
+        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 +45,10 @@ export const Navigation = /*#__PURE__*/memo(({
   }));
   useEffect(() => {
     return router.subscribeRoot(() => {
-      setRoot({
-        rootId: router.getRootStackId()
+      startTransition(() => {
+        setRoot({
+          rootId: router.getRootStackId()
+        });
       });
     });
   }, [router]);

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

@@ -5,7 +5,7 @@ import { TabBarContext } from "./TabBarContext.js";
 import { useRouter } from "../RouterContext.js";
 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,
@@ -168,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,
@@ -191,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);
     }
@@ -347,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.2",
+  "version": "0.3.4",
   "description": "React Native Router",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",