@sigmela/router 0.3.0 → 0.3.1

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/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, ScreenStackItem } 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,7 +178,13 @@ 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;
@@ -263,6 +269,7 @@ export const RenderTabBar = /*#__PURE__*/memo(({
     tabBarBackgroundColor: backgroundColor,
     tabBarItemTitleFontFamily: title?.fontFamily,
     tabBarItemTitleFontSize: title?.fontSize,
+    tabBarItemTitleFontSizeActive: title?.activeFontSize,
     tabBarItemTitleFontWeight: title?.fontWeight,
     tabBarItemTitleFontStyle: title?.fontStyle,
     tabBarItemTitleFontColor: title?.color,
@@ -272,35 +279,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({});
@@ -358,25 +383,30 @@ export const RenderTabBar = /*#__PURE__*/memo(({
     stackAnimation: "slide_from_right",
     children: /*#__PURE__*/_jsx(TabBarContext.Provider, {
       value: tabBar,
-      children: /*#__PURE__*/_jsx(BottomTabs, {
+      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 icon = tabIcons[i];
-          return /*#__PURE__*/_jsx(BottomTabsScreen, {
+          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,
-            tabKey: tab.tabKey,
-            title: tab.title,
-            badgeValue: tab.badgeValue,
-            specialEffects: tab.specialEffects,
-            icon: icon?.icon,
-            selectedIcon: icon?.selectedIcon,
+            icon: convertedIcon?.icon,
+            selectedIcon: convertedIcon?.selectedIcon,
             children: stack ? /*#__PURE__*/_jsx(TabStackRenderer, {
               appearance: appearance,
               stack: stack

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/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.1",
   "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"
   }
 }