@sigmela/router 0.3.0 → 0.3.2

package/README.md

@@ -8,9 +8,11 @@ This library is **URL-first**: you navigate by **paths** (`/users/42?tab=posts`)
 
 - **Stacks**: predictable stack-based navigation
 - **Tabs**: `TabBar` with native + web renderers (or custom tab bar)
+- **Drawer**: side-panel navigation (`Drawer`)
 - **Split view**: master/details navigation (`SplitView`)
 - **Modals & sheets**: via `stackPresentation` (`modal`, `sheet`, …)
 - **Controllers**: async/guarded navigation (only present when ready)
+- **Appearance**: global styling via `NavigationAppearance` (tab bar colors, fonts, blur effects, etc.)
 - **Web History integration**: keeps Router state in sync with `pushState`, `replaceState`, `popstate`
 - **Dynamic root**: swap root navigation tree at runtime (`router.setRoot`)
 - **Type-safe hooks**: `useParams`, `useQueryParams`, `useRoute`, `useCurrentRoute`
@@ -27,7 +29,7 @@ yarn add @sigmela/native-sheet
 
 - `react`
 - `react-native`
-- `react-native-screens` (>= `4.18.0`)
+- `react-native-screens` (>= `4.24.0`)
 - `@sigmela/native-sheet` (>= `0.0.1`) — only if you use sheets
 
 ### Web CSS
@@ -292,10 +294,45 @@ Key methods:
 Notes:
 - Exactly one of `stack`, `node`, `screen` must be provided.
 - Use `prefix` to mount a tab's routes under a base path (e.g. `/mail`).
+- All `TabsScreenProps` from `react-native-screens` are forwarded to native. This includes lifecycle events (`onWillAppear`, `onDidAppear`, `onWillDisappear`, `onDidDisappear`), accessibility props (`testID`, `accessibilityLabel`, `tabBarItemTestID`, `tabBarItemAccessibilityLabel`), `orientation`, `systemItem`, `freezeContents`, `placeholder`, `scrollEdgeEffects`, badge styling, and more.
+
+#### `setTabBarConfig()`
+
+Runtime tab bar configuration:
+
+```tsx
+tabBar.setTabBarConfig({
+  bottomAccessory: (environment) => <MiniPlayer layout={environment} />,  // iOS 26+
+  experimentalControlNavigationStateInJS: true,
+});
+```
 
 Web behavior note:
 - The built-in **web** tab bar renderer resets Router history on tab switch (to keep URL and Router state consistent) using `router.reset(firstRoutePath)`.
 
+### `Drawer`
+
+`Drawer` provides side-panel navigation, similar to `TabBar` but with a slide-out panel.
+
+```tsx
+import { Drawer, NavigationStack } from '@sigmela/router';
+
+const homeStack = new NavigationStack().addScreen('/', HomeScreen);
+const settingsStack = new NavigationStack().addScreen('/settings', SettingsScreen);
+
+const drawer = new Drawer({ width: 280 })
+  .addTab({ key: 'home', stack: homeStack, title: 'Home' })
+  .addTab({ key: 'settings', stack: settingsStack, title: 'Settings' });
+```
+
+Key methods:
+- `addTab({ key, stack?, node?, screen?, prefix?, title?, icon?, ... })`
+- `open()`, `close()`, `toggle()` — manage drawer state
+- `getIsOpen()` — current open state
+- `subscribeOpenState(listener)` — subscribe to open/close changes
+- `onIndexChange(index)` — switch active tab
+- `setBadge(index, badge | null)`
+
 ### `SplitView`
 
 `SplitView` renders **two stacks**: `primary` and `secondary`.
@@ -350,6 +387,54 @@ stack.addScreen('/users/:userId', UserDetails);
 
 If you never call `present()`, the screen is not pushed/replaced.
 
+## Appearance
+
+Pass `NavigationAppearance` to `<Navigation>` to customize styling globally:
+
+```tsx
+import { Navigation, type NavigationAppearance } from '@sigmela/router';
+
+const appearance: NavigationAppearance = {
+  tabBar: {
+    backgroundColor: '#ffffff',
+    iconColor: '#999999',
+    iconColorActive: '#007AFF',
+    badgeBackgroundColor: '#FF3B30',
+    iOSShadowColor: '#00000020',
+    title: {
+      fontFamily: 'Inter',
+      fontSize: 10,
+      color: '#999999',
+      activeColor: '#007AFF',
+      activeFontSize: 12,       // Android: active tab title font size
+    },
+
+    // Android-specific
+    androidActiveIndicatorEnabled: true,
+    androidActiveIndicatorColor: '#007AFF20',
+    androidRippleColor: '#007AFF10',
+    labelVisibilityMode: 'labeled',
+
+    // Tab bar behavior
+    hidden: false,                           // hide/show the tab bar
+    tintColor: '#007AFF',                    // iOS: selected tab tint + glow color
+    controllerMode: 'automatic',             // iOS 18+: 'automatic' | 'tabBar' | 'tabSidebar'
+    minimizeBehavior: 'automatic',           // iOS 26+: 'automatic' | 'never' | 'onScrollDown' | 'onScrollUp'
+    nativeContainerBackgroundColor: '#fff',   // native container background
+    iOSBlurEffect: 'systemDefault',          // iOS: tab bar blur effect
+  },
+  header: { /* ScreenStackHeaderConfigProps */ },
+  sheet: {
+    cornerRadius: 16,
+    backgroundColor: '#ffffff',
+  },
+};
+
+export default function App() {
+  return <Navigation router={router} appearance={appearance} />;
+}
+```
+
 ## Hooks
 
 ### `useRouter()`
@@ -410,6 +495,27 @@ function ScreenInsideTabs() {
 }
 ```
 
+### `useTabBarHeight()`
+
+Returns the tab bar height constant (`57`). Useful for bottom padding.
+
+### `useDrawer()`
+
+Returns the nearest `Drawer` from context (only inside drawer screens).
+
+```tsx
+import { useDrawer } from '@sigmela/router';
+
+function ScreenInsideDrawer() {
+  const drawer = useDrawer();
+  return <Button title="Open menu" onPress={() => drawer.open()} />;
+}
+```
+
+### `useSplitView()`
+
+Returns the nearest `SplitView` from context (only inside split view screens).
+
 ## Web integration
 
 ### History API syncing

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

@@ -5,6 +5,7 @@ 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 { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useCallback, useSyncExternalStore, memo, useEffect, useState, useMemo } from 'react';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -43,6 +44,7 @@ export const RenderDrawer = /*#__PURE__*/memo(({
   appearance = {}
 }) => {
   const router = useRouter();
+  const insets = useSafeAreaInsets();
   const drawerWidth = drawer.width;
   const subscribe = useCallback(cb => drawer.subscribe(cb), [drawer]);
   const snapshot = useSyncExternalStore(subscribe, drawer.getState, drawer.getState);
@@ -143,7 +145,9 @@ export const RenderDrawer = /*#__PURE__*/memo(({
             isOpen: isOpen,
             onClose: handleOverlayPress
           }) : /*#__PURE__*/_jsx(View, {
-            style: styles.sidebarContent,
+            style: [styles.sidebarContent, {
+              paddingTop: insets.top + 12
+            }],
             children: tabs.map((tab, i) => {
               const isActive = i === index;
               return /*#__PURE__*/_jsx(Pressable, {
@@ -200,8 +204,7 @@ const styles = StyleSheet.create({
     backgroundColor: '#ffffff'
   },
   sidebarContent: {
-    flex: 1,
-    paddingTop: 12
+    flex: 1
   },
   main: {
     flex: 1,

package/lib/module/SplitView/RenderSplitView.native.js

@@ -4,33 +4,67 @@ import { ScreenStackItem } from "../ScreenStackItem/index.js";
 import { ScreenStack } from "../ScreenStack/index.js";
 import { SplitViewContext } from "./SplitViewContext.js";
 import { useRouter } from "../RouterContext.js";
-import { memo, useCallback, useSyncExternalStore, useMemo } from 'react';
+import { memo, useMemo, useState, useEffect, startTransition } from 'react';
 import { StyleSheet } from 'react-native';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * On native (iPhone), SplitView renders primary and secondary screens
- * in a SINGLE ScreenStack to get native push/pop animations.
+ * On native, SplitView renders primary and secondary screens in a SINGLE
+ * ScreenStack to get native push/pop animations.
  *
  * The combined history is: [...primaryHistory, ...secondaryHistory]
  * This way, navigating from primary to secondary is a native push.
+ *
+ * On Android (Fabric) react-native-screens manages each ScreenStackItem via
+ * an Android Fragment.  Fragment lifecycle (onCreateView) is asynchronous,
+ * but Fabric's layout pass is synchronous.  If a new commit is dispatched
+ * while the previous Fragment transaction is still in flight, Fabric tries
+ * to insert child views into a Screen whose Fragment isn't attached yet:
+ *
+ *   "addViewAt: Parent Screen does not have its Fragment attached"
+ *
+ * The fix follows the same pattern used in react-native-screens' own
+ * BottomTabsContainer example: subscribe via useEffect and apply updates
+ * inside `startTransition`.  This marks the update as non-urgent, letting
+ * React defer the Fabric commit until pending Fragment transactions complete.
+ *
+ * See: https://github.com/software-mansion/react-native-screens/blob/ddd1a9e/
+ *      apps/src/shared/gamma/containers/bottom-tabs/BottomTabsContainer.tsx
  */
 export const RenderSplitView = /*#__PURE__*/memo(({
   splitView,
   appearance
 }) => {
   const router = useRouter();
-
-  // Subscribe to primary stack
   const primaryId = splitView.primary.getId();
-  const subscribePrimary = useCallback(cb => router.subscribeStack(primaryId, cb), [router, primaryId]);
-  const getPrimary = useCallback(() => router.getStackHistory(primaryId), [router, primaryId]);
-  const primaryHistory = useSyncExternalStore(subscribePrimary, getPrimary, getPrimary);
-
-  // Subscribe to secondary stack
   const secondaryId = splitView.secondary.getId();
-  const subscribeSecondary = useCallback(cb => router.subscribeStack(secondaryId, cb), [router, secondaryId]);
-  const getSecondary = useCallback(() => router.getStackHistory(secondaryId), [router, secondaryId]);
-  const secondaryHistory = useSyncExternalStore(subscribeSecondary, getSecondary, getSecondary);
+
+  // 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));
+  useEffect(() => {
+    const updatePrimary = () => {
+      startTransition(() => {
+        setPrimaryHistory(router.getStackHistory(primaryId));
+      });
+    };
+    const updateSecondary = () => {
+      startTransition(() => {
+        setSecondaryHistory(router.getStackHistory(secondaryId));
+      });
+    };
+    const unsub1 = router.subscribeStack(primaryId, updatePrimary);
+    const unsub2 = router.subscribeStack(secondaryId, updateSecondary);
+
+    // Sync in case the store changed between useState init and useEffect
+    updatePrimary();
+    updateSecondary();
+    return () => {
+      unsub1();
+      unsub2();
+    };
+  }, [router, primaryId, secondaryId]);
 
   // Fallback: if primary is empty, seed with first route
   const primaryHistoryToRender = useMemo(() => {
@@ -56,9 +90,6 @@ export const RenderSplitView = /*#__PURE__*/memo(({
   const combinedHistory = useMemo(() => {
     return [...primaryHistoryToRender, ...secondaryHistory];
   }, [primaryHistoryToRender, secondaryHistory]);
-
-  // Use primary stack ID for the combined ScreenStack
-  // (secondary items will animate as if pushed onto this stack)
   return /*#__PURE__*/_jsx(SplitViewContext.Provider, {
     value: splitView,
     children: /*#__PURE__*/_jsx(ScreenStack, {

package/lib/module/TabBar/RenderTabBar.native.js

@@ -3,7 +3,7 @@
 import { StackRenderer } from "../StackRenderer.js";
 import { TabBarContext } from "./TabBarContext.js";
 import { useRouter } from "../RouterContext.js";
-import { BottomTabsScreen, BottomTabs, ScreenStackItem } from 'react-native-screens';
+import { Tabs } from 'react-native-screens';
 import { Platform, StyleSheet, View } from 'react-native';
 import { useCallback, useSyncExternalStore, memo, useEffect, useState, useMemo } from 'react';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -178,91 +178,71 @@ export const RenderTabBar = /*#__PURE__*/memo(({
     title,
     backgroundColor,
     badgeBackgroundColor,
-    iOSShadowColor
+    iOSShadowColor,
+    hidden,
+    tintColor,
+    controllerMode,
+    minimizeBehavior,
+    nativeContainerBackgroundColor,
+    iOSBlurEffect
   } = appearance?.tabBar ?? {};
   const onNativeFocusChange = useCallback(event => {
     const tabKey = event.nativeEvent.tabKey;
     const tabIndex = tabs.findIndex(route => route.tabKey === tabKey);
     if (tabIndex === -1) return;
-    const targetTab = tabs[tabIndex];
-    if (!targetTab) return;
-    const targetStack = tabBar.stacks[targetTab.tabKey];
-    const targetNode = tabBar.nodes[targetTab.tabKey];
 
-    // Update TabBar UI state
+    // Keep native Tabs.Host focus state as the source of truth.
     if (tabIndex !== index) {
       tabBar.onIndexChange(tabIndex);
     }
-
-    // Navigate to the target stack's first route if needed
+  }, [tabs, tabBar, index]);
+  const seedTabIfNeeded = useCallback(targetTab => {
+    if (!targetTab) return;
+    const targetStack = tabBar.stacks[targetTab.tabKey];
+    const targetNode = tabBar.nodes[targetTab.tabKey];
     if (targetStack) {
       const stackId = targetStack.getId();
       const stackHistory = router.getStackHistory(stackId);
-      // Only navigate if stack is empty (first visit)
       if (stackHistory.length === 0) {
         const firstRoute = targetStack.getFirstRoute();
         if (firstRoute?.path) {
           router.navigate(firstRoute.path);
         }
       }
-    } else if (targetNode) {
-      // For nodes like SplitView, check if we need to seed it
+      return;
+    }
+    if (targetNode) {
       const nodeId = targetNode.getId?.();
-      if (nodeId) {
-        const nodeHistory = router.getStackHistory(nodeId);
-        if (nodeHistory.length === 0) {
-          const seed = targetNode.seed?.();
-          if (seed?.path) {
-            const prefix = targetTab.tabPrefix ?? '';
-            const fullPath = prefix && !seed.path.startsWith(prefix) ? `${prefix}${seed.path.startsWith('/') ? '' : '/'}${seed.path}` : seed.path;
-            router.navigate(fullPath);
-          }
+      if (!nodeId) return;
+      const nodeHistory = router.getStackHistory(nodeId);
+      if (nodeHistory.length === 0) {
+        const seed = targetNode.seed?.();
+        if (seed?.path) {
+          const prefix = targetTab.tabPrefix ?? '';
+          const fullPath = prefix && !seed.path.startsWith(prefix) ? `${prefix}${seed.path.startsWith('/') ? '' : '/'}${seed.path}` : seed.path;
+          router.navigate(fullPath);
         }
       }
     }
-  }, [tabs, tabBar, index, router]);
+  }, [tabBar.nodes, tabBar.stacks, router]);
+  useEffect(() => {
+    seedTabIfNeeded(tabs[index]);
+  }, [tabs, index, seedTabIfNeeded]);
   const onTabPress = useCallback(nextIndex => {
     const targetTab = tabs[nextIndex];
     if (!targetTab) return;
-    const targetStack = tabBar.stacks[targetTab.tabKey];
-    const targetNode = tabBar.nodes[targetTab.tabKey];
 
     // Update TabBar UI state
     if (nextIndex !== index) {
       tabBar.onIndexChange(nextIndex);
     }
-
-    // Navigate to the target stack's first route if needed
-    if (targetStack) {
-      const stackId = targetStack.getId();
-      const stackHistory = router.getStackHistory(stackId);
-      // Only navigate if stack is empty (first visit)
-      if (stackHistory.length === 0) {
-        const firstRoute = targetStack.getFirstRoute();
-        if (firstRoute?.path) {
-          router.navigate(firstRoute.path);
-        }
-      }
-    } else if (targetNode) {
-      // For nodes like SplitView, check if we need to seed it
-      const nodeId = targetNode.getId?.();
-      if (nodeId) {
-        const nodeHistory = router.getStackHistory(nodeId);
-        if (nodeHistory.length === 0) {
-          const seed = targetNode.seed?.();
-          if (seed?.path) {
-            const prefix = targetTab.tabPrefix ?? '';
-            const fullPath = prefix && !seed.path.startsWith(prefix) ? `${prefix}${seed.path.startsWith('/') ? '' : '/'}${seed.path}` : seed.path;
-            router.navigate(fullPath);
-          }
-        }
-      }
-    }
-  }, [tabs, tabBar, index, router]);
+    seedTabIfNeeded(targetTab);
+  }, [tabs, tabBar, index, seedTabIfNeeded]);
   const containerProps = useMemo(() => ({
     tabBarBackgroundColor: backgroundColor,
     tabBarItemTitleFontFamily: title?.fontFamily,
     tabBarItemTitleFontSize: title?.fontSize,
+    tabBarItemTitleFontSizeActive: title?.activeFontSize,
     tabBarItemTitleFontWeight: title?.fontWeight,
     tabBarItemTitleFontStyle: title?.fontStyle,
     tabBarItemTitleFontColor: title?.color,
@@ -272,35 +252,53 @@ export const RenderTabBar = /*#__PURE__*/memo(({
     tabBarItemActiveIndicatorColor: androidActiveIndicatorColor,
     tabBarItemActiveIndicatorEnabled: androidActiveIndicatorEnabled,
     tabBarItemRippleColor: androidRippleColor,
-    tabBarItemLabelVisibilityMode: labelVisibilityMode
-  }), [backgroundColor, title?.fontFamily, title?.fontSize, title?.fontWeight, title?.fontStyle, title?.color, title?.activeColor, iconColor, iconColorActive, androidActiveIndicatorColor, androidActiveIndicatorEnabled, androidRippleColor, labelVisibilityMode]);
-  const iosState = useMemo(() => ({
+    tabBarItemLabelVisibilityMode: labelVisibilityMode,
+    tabBarHidden: hidden,
+    tabBarTintColor: tintColor,
+    tabBarControllerMode: controllerMode,
+    tabBarMinimizeBehavior: minimizeBehavior,
+    nativeContainerStyle: nativeContainerBackgroundColor ? {
+      backgroundColor: nativeContainerBackgroundColor
+    } : undefined
+  }), [backgroundColor, title?.fontFamily, title?.fontSize, title?.activeFontSize, title?.fontWeight, title?.fontStyle, title?.color, title?.activeColor, iconColor, iconColorActive, androidActiveIndicatorColor, androidActiveIndicatorEnabled, androidRippleColor, labelVisibilityMode, hidden, tintColor, controllerMode, minimizeBehavior, nativeContainerBackgroundColor]);
+  const iosNormalState = useMemo(() => ({
     tabBarItemTitleFontFamily: title?.fontFamily,
     tabBarItemTitleFontSize: title?.fontSize,
     tabBarItemTitleFontWeight: title?.fontWeight,
     tabBarItemTitleFontStyle: title?.fontStyle,
     tabBarItemTitleFontColor: title?.color,
     tabBarItemBadgeBackgroundColor: badgeBackgroundColor,
-    tabBarItemTitleFontColorActive: title?.activeColor ?? title?.color,
-    tabBarItemIconColorActive: iconColorActive,
     tabBarItemIconColor: iconColor
+  }), [title?.fontFamily, title?.fontSize, title?.fontWeight, title?.fontStyle, title?.color, badgeBackgroundColor, iconColor]);
+  const iosSelectedState = useMemo(() => ({
+    tabBarItemTitleFontFamily: title?.fontFamily,
+    tabBarItemTitleFontSize: title?.fontSize,
+    tabBarItemTitleFontWeight: title?.fontWeight,
+    tabBarItemTitleFontStyle: title?.fontStyle,
+    tabBarItemTitleFontColor: title?.activeColor ?? title?.color,
+    tabBarItemBadgeBackgroundColor: badgeBackgroundColor,
+    tabBarItemIconColor: iconColorActive ?? iconColor
   }), [title?.fontFamily, title?.fontSize, title?.fontWeight, title?.fontStyle, title?.color, title?.activeColor, badgeBackgroundColor, iconColorActive, iconColor]);
   const iosAppearance = useMemo(() => Platform.select({
     default: undefined,
     ios: {
       tabBarBackgroundColor: backgroundColor,
       tabBarShadowColor: iOSShadowColor,
+      tabBarBlurEffect: iOSBlurEffect,
       compactInline: {
-        normal: iosState
+        normal: iosNormalState,
+        selected: iosSelectedState
       },
       stacked: {
-        normal: iosState
+        normal: iosNormalState,
+        selected: iosSelectedState
       },
       inline: {
-        normal: iosState
+        normal: iosNormalState,
+        selected: iosSelectedState
       }
     }
-  }), [backgroundColor, iOSShadowColor, iosState]);
+  }), [backgroundColor, iOSShadowColor, iOSBlurEffect, iosNormalState, iosSelectedState]);
   const CustomTabBar = config.component;
   const tabIcons = useMemo(() => tabs.map(tab => getTabIcon(tab)), [tabs]);
   const [visited, setVisited] = useState({});
@@ -314,78 +312,67 @@ export const RenderTabBar = /*#__PURE__*/memo(({
     }
   }, [tabs, index]);
   if (CustomTabBar) {
-    return /*#__PURE__*/_jsx(ScreenStackItem, {
-      screenId: "root-tabbar",
-      headerConfig: {
-        hidden: true
-      },
-      style: StyleSheet.absoluteFill,
-      stackAnimation: "slide_from_right",
-      children: /*#__PURE__*/_jsxs(TabBarContext.Provider, {
-        value: tabBar,
-        children: [/*#__PURE__*/_jsx(View, {
-          style: styles.flex,
-          children: tabs.filter(t => visited[t.tabKey]).map(tab => {
-            const isActive = tab.tabKey === tabs[index]?.tabKey;
-            const stackForTab = tabBar.stacks[tab.tabKey];
-            const nodeForTab = tabBar.nodes[tab.tabKey];
-            const ScreenForTab = tabBar.screens[tab.tabKey];
-            return /*#__PURE__*/_jsx(View, {
-              style: [styles.flex, !isActive && styles.hidden],
-              children: stackForTab ? /*#__PURE__*/_jsx(TabStackRenderer, {
-                appearance: appearance,
-                stack: stackForTab
-              }) : nodeForTab ? /*#__PURE__*/_jsx(TabNodeRenderer, {
-                appearance: appearance,
-                node: nodeForTab
-              }) : ScreenForTab ? /*#__PURE__*/_jsx(ScreenForTab, {}) : null
-            }, `tab-content-${tab.tabKey}`);
-          })
-        }), /*#__PURE__*/_jsx(CustomTabBar, {
-          onTabPress: onTabPress,
-          activeIndex: index,
-          tabs: tabs
-        })]
-      })
-    });
-  }
-  return /*#__PURE__*/_jsx(ScreenStackItem, {
-    screenId: "root-tabbar",
-    headerConfig: {
-      hidden: true
-    },
-    style: StyleSheet.absoluteFill,
-    stackAnimation: "slide_from_right",
-    children: /*#__PURE__*/_jsx(TabBarContext.Provider, {
+    return /*#__PURE__*/_jsxs(TabBarContext.Provider, {
       value: tabBar,
-      children: /*#__PURE__*/_jsx(BottomTabs, {
-        onNativeFocusChange: onNativeFocusChange,
-        ...containerProps,
-        children: tabs.map((tab, i) => {
-          const isFocused = tab.tabKey === tabs[index]?.tabKey;
-          const stack = tabBar.stacks[tab.tabKey];
-          const node = tabBar.nodes[tab.tabKey];
-          const Screen = tabBar.screens[tab.tabKey];
-          const icon = tabIcons[i];
-          return /*#__PURE__*/_jsx(BottomTabsScreen, {
-            scrollEdgeAppearance: iosAppearance,
-            standardAppearance: iosAppearance,
-            isFocused: isFocused,
-            tabKey: tab.tabKey,
-            title: tab.title,
-            badgeValue: tab.badgeValue,
-            specialEffects: tab.specialEffects,
-            icon: icon?.icon,
-            selectedIcon: icon?.selectedIcon,
-            children: stack ? /*#__PURE__*/_jsx(TabStackRenderer, {
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.flex,
+        children: tabs.filter(t => visited[t.tabKey]).map(tab => {
+          const isActive = tab.tabKey === tabs[index]?.tabKey;
+          const stackForTab = tabBar.stacks[tab.tabKey];
+          const nodeForTab = tabBar.nodes[tab.tabKey];
+          const ScreenForTab = tabBar.screens[tab.tabKey];
+          return /*#__PURE__*/_jsx(View, {
+            style: [styles.flex, !isActive && styles.hidden],
+            children: stackForTab ? /*#__PURE__*/_jsx(TabStackRenderer, {
               appearance: appearance,
-              stack: stack
-            }) : node ? /*#__PURE__*/_jsx(TabNodeRenderer, {
+              stack: stackForTab
+            }) : nodeForTab ? /*#__PURE__*/_jsx(TabNodeRenderer, {
               appearance: appearance,
-              node: node
-            }) : Screen ? /*#__PURE__*/_jsx(Screen, {}) : null
-          }, tab.tabKey);
+              node: nodeForTab
+            }) : ScreenForTab ? /*#__PURE__*/_jsx(ScreenForTab, {}) : null
+          }, `tab-content-${tab.tabKey}`);
         })
+      }), /*#__PURE__*/_jsx(CustomTabBar, {
+        onTabPress: onTabPress,
+        activeIndex: index,
+        tabs: tabs
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx(TabBarContext.Provider, {
+    value: tabBar,
+    children: /*#__PURE__*/_jsx(Tabs.Host, {
+      onNativeFocusChange: onNativeFocusChange,
+      bottomAccessory: config.bottomAccessory,
+      experimentalControlNavigationStateInJS: config.experimentalControlNavigationStateInJS,
+      ...containerProps,
+      children: tabs.map((tab, i) => {
+        const isFocused = tab.tabKey === tabs[index]?.tabKey;
+        const stack = tabBar.stacks[tab.tabKey];
+        const node = tabBar.nodes[tab.tabKey];
+        const Screen = tabBar.screens[tab.tabKey];
+        const convertedIcon = tabIcons[i];
+        const {
+          icon: _icon,
+          selectedIcon: _selectedIcon,
+          tabPrefix: _prefix,
+          ...tabScreenProps
+        } = tab;
+        return /*#__PURE__*/_jsx(Tabs.Screen, {
+          ...tabScreenProps,
+          scrollEdgeAppearance: iosAppearance,
+          standardAppearance: iosAppearance,
+          isFocused: isFocused,
+          icon: convertedIcon?.icon,
+          selectedIcon: convertedIcon?.selectedIcon,
+          children: stack ? /*#__PURE__*/_jsx(TabStackRenderer, {
+            appearance: appearance,
+            stack: stack
+          }) : node ? /*#__PURE__*/_jsx(TabNodeRenderer, {
+            appearance: appearance,
+            node: node
+          }) : Screen ? /*#__PURE__*/_jsx(Screen, {}) : null
+        }, tab.tabKey);
       })
     })
   });

package/lib/module/styles.css

@@ -1094,9 +1094,18 @@
 }
 
 /* ==================== DESKTOP DRAWER (>= 641px) ==================== */
+/* Inverted logic: sidebar is visible by default, data-drawer-open='true' hides it.
+   This way toggle() works on both viewports with a single boolean:
+   isOpen=false (default) → mobile: hidden, desktop: visible
+   isOpen=true  (toggled) → mobile: visible, desktop: hidden */
 @media (min-width: 641px) {
-  /* On desktop, drawer is always visible — data-drawer-open is irrelevant */
   .drawer-sidebar {
     border-right: 1px solid rgba(0, 0, 0, 0.08);
+    transition: margin-left var(--drawer-transition);
+  }
+
+  .drawer-container[data-drawer-open='true'] .drawer-sidebar {
+    margin-left: calc(-1 * var(--drawer-width));
+    border-right: none;
   }
 }

package/lib/typescript/src/SplitView/RenderSplitView.native.d.ts

@@ -5,11 +5,27 @@ export interface RenderSplitViewProps {
     appearance?: NavigationAppearance;
 }
 /**
- * On native (iPhone), SplitView renders primary and secondary screens
- * in a SINGLE ScreenStack to get native push/pop animations.
+ * On native, SplitView renders primary and secondary screens in a SINGLE
+ * ScreenStack to get native push/pop animations.
  *
  * The combined history is: [...primaryHistory, ...secondaryHistory]
  * This way, navigating from primary to secondary is a native push.
+ *
+ * On Android (Fabric) react-native-screens manages each ScreenStackItem via
+ * an Android Fragment.  Fragment lifecycle (onCreateView) is asynchronous,
+ * but Fabric's layout pass is synchronous.  If a new commit is dispatched
+ * while the previous Fragment transaction is still in flight, Fabric tries
+ * to insert child views into a Screen whose Fragment isn't attached yet:
+ *
+ *   "addViewAt: Parent Screen does not have its Fragment attached"
+ *
+ * The fix follows the same pattern used in react-native-screens' own
+ * BottomTabsContainer example: subscribe via useEffect and apply updates
+ * inside `startTransition`.  This marks the update as non-urgent, letting
+ * React defer the Fabric commit until pending Fragment transactions complete.
+ *
+ * See: https://github.com/software-mansion/react-native-screens/blob/ddd1a9e/
+ *      apps/src/shared/gamma/containers/bottom-tabs/BottomTabsContainer.tsx
  */
 export declare const RenderSplitView: import("react").NamedExoticComponent<RenderSplitViewProps>;
 //# sourceMappingURL=RenderSplitView.native.d.ts.map

package/lib/typescript/src/TabBar/TabBar.d.ts

@@ -4,7 +4,7 @@ import type { ComponentType } from 'react';
 import type { TabItem } from '../types';
 import React from 'react';
 import type { NavigationNode, NodeChild, NodeRoute } from '../navigationNode';
-import type { PlatformIcon } from 'react-native-screens';
+import type { PlatformIcon, TabAccessoryComponentFactory } from 'react-native-screens';
 type LegacyIOSIconShape = {
     sfSymbolName: string;
 } | {
@@ -52,6 +52,14 @@ type TabBarConfig = Omit<InternalTabItem, 'tabKey' | 'key'> & {
      * Custom tab bar component (UI). Kept for compatibility.
      */
     component?: ComponentType<TabBarProps>;
+    /**
+     * iOS 26+ bottom accessory factory.
+     */
+    bottomAccessory?: TabAccessoryComponentFactory;
+    /**
+     * Experimental: control navigation state in JS.
+     */
+    experimentalControlNavigationStateInJS?: boolean;
 };
 type TabBarOptions = {
     component?: ComponentType<TabBarProps>;

package/lib/typescript/src/types.d.ts

@@ -1,5 +1,5 @@
 import type { ColorValue, StyleProp, ViewStyle, TextStyle } from 'react-native';
-import type { BottomTabsScreenProps, ScreenProps as RNSScreenProps, ScreenStackHeaderConfigProps, TabBarItemLabelVisibilityMode, TabBarMinimizeBehavior } from 'react-native-screens';
+import type { TabsScreenProps, ScreenProps as RNSScreenProps, ScreenStackHeaderConfigProps, TabBarItemLabelVisibilityMode, TabBarMinimizeBehavior, TabBarControllerMode, TabAccessoryComponentFactory, TabsScreenBlurEffect } from 'react-native-screens';
 export type StackPresentationTypes = 'push' | 'modal' | 'modalRight' | 'transparentModal' | 'containedModal' | 'containedTransparentModal' | 'fullScreenModal' | 'formSheet' | 'pageSheet' | 'sheet';
 /**
  * Presentations that behave like modals (overlay on top of content).
@@ -9,7 +9,7 @@ export declare const MODAL_LIKE_PRESENTATIONS: ReadonlySet<StackPresentationType
  * Check if a presentation type is modal-like (renders as overlay).
  */
 export declare function isModalLikePresentation(presentation: StackPresentationTypes | undefined): boolean;
-export type TabItem = Omit<BottomTabsScreenProps, 'isFocused' | 'children'>;
+export type TabItem = Omit<TabsScreenProps, 'isFocused' | 'children'>;
 export type NavigationState<Route extends TabItem> = {
     index: number;
     routes: Route[];
@@ -98,6 +98,8 @@ export type CompiledRoute = {
 };
 export type TabBarConfig = {
     tabBarMinimizeBehavior?: TabBarMinimizeBehavior;
+    bottomAccessory?: TabAccessoryComponentFactory;
+    experimentalControlNavigationStateInJS?: boolean;
 };
 export type SheetAppearance = {
     androidFullScreenTopInset?: number;
@@ -115,6 +117,12 @@ export interface NavigationAppearance {
         androidRippleColor?: ColorValue;
         labelVisibilityMode?: TabBarItemLabelVisibilityMode;
         iOSShadowColor?: ColorValue;
+        hidden?: boolean;
+        tintColor?: ColorValue;
+        controllerMode?: TabBarControllerMode;
+        minimizeBehavior?: TabBarMinimizeBehavior;
+        nativeContainerBackgroundColor?: ColorValue;
+        iOSBlurEffect?: TabsScreenBlurEffect;
         title: {
             fontFamily?: TextStyle['fontFamily'];
             fontSize?: TextStyle['fontSize'];
@@ -122,6 +130,7 @@ export interface NavigationAppearance {
             fontStyle?: TextStyle['fontStyle'];
             color?: TextStyle['color'];
             activeColor?: TextStyle['color'];
+            activeFontSize?: TextStyle['fontSize'];
         };
     };
     screen?: StyleProp<ViewStyle>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sigmela/router",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "React Native Router",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -71,8 +71,8 @@
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.35.0",
     "@evilmartians/lefthook": "^1.12.3",
-    "@react-native/babel-preset": "0.81.1",
-    "@react-native/eslint-config": "^0.81.1",
+    "@react-native/babel-preset": "0.83.2",
+    "@react-native/eslint-config": "^0.83.2",
     "@release-it/conventional-changelog": "^10.0.1",
     "@sigmela/native-sheet": "^0.0.1",
     "@types/jest": "^29.5.14",
@@ -83,12 +83,13 @@
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
     "jest": "^29.7.0",
-    "prettier": "^3.6.2",
-    "react": "19.1.0",
-    "react-native": "0.81.4",
-    "react-native-builder-bob": "^0.40.13",
+    "prettier": "^3.8.1",
+    "react": "19.2.0",
+    "react-native": "0.83.2",
+    "react-native-builder-bob": "^0.40.18",
     "react-native-reanimated": "^4.2.2",
-    "react-native-screens": "^4.18.0",
+    "react-native-safe-area-context": "^5.7.0",
+    "react-native-screens": "^4.24.0",
     "react-native-worklets": "^0.7.4",
     "release-it": "^19.0.4",
     "typescript": "^5.9.2"
@@ -98,6 +99,7 @@
     "react": "*",
     "react-native": ">=0.72.0",
     "react-native-reanimated": ">=3.0.0",
+    "react-native-safe-area-context": ">=4.0.0",
     "react-native-screens": ">=4.18.0"
   },
   "peerDependenciesMeta": {
@@ -106,6 +108,9 @@
     },
     "react-native-reanimated": {
       "optional": true
+    },
+    "react-native-safe-area-context": {
+      "optional": true
     }
   },
   "workspaces": [
@@ -182,6 +187,6 @@
     "nanoid": "^5.1.6",
     "path-to-regexp": "^8.3.0",
     "query-string": "^9.3.1",
-    "react-transition-state": "^2.3.1"
+    "react-transition-state": "^2.3.3"
   }
 }