@sigmela/router 0.3.2 → 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/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,

package/package.json

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