@sigmela/router 0.3.4 → 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(() => {

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(() => {

package/package.json

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