@sigmela/router 0.2.8 → 0.3.1

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

@@ -0,0 +1,100 @@
+import type { ImageSourcePropType } from 'react-native';
+import { NavigationStack } from '../NavigationStack';
+import type { ComponentType } from 'react';
+import React from 'react';
+import type { NavigationNode, NodeChild, NodeRoute } from '../navigationNode';
+import type { PlatformIcon } from 'react-native-screens';
+type LegacyIOSIconShape = {
+    sfSymbolName: string;
+} | {
+    imageSource: ImageSourcePropType;
+} | {
+    templateSource: ImageSourcePropType;
+};
+type ExtendedIcon = ImageSourcePropType | LegacyIOSIconShape | PlatformIcon;
+export type DrawerItemInternal = {
+    tabKey: string;
+    title?: string;
+    icon?: ExtendedIcon;
+    selectedIcon?: ExtendedIcon;
+    badgeValue?: string;
+    tabPrefix?: string;
+};
+export type DrawerProps = {
+    onItemPress: (index: number) => void;
+    items: DrawerItemInternal[];
+    activeIndex: number;
+    isOpen: boolean;
+    onClose: () => void;
+};
+export type DrawerDescriptor = {
+    renderer?: ComponentType<DrawerProps>;
+};
+type DrawerItemConfig = Omit<DrawerItemInternal, 'tabKey'> & {
+    stack?: NavigationStack;
+    node?: NavigationNode;
+    screen?: React.ComponentType<any>;
+    prefix?: string;
+    component?: ComponentType<DrawerProps>;
+};
+type DrawerOptions = {
+    component?: ComponentType<DrawerProps>;
+    initialIndex?: number;
+    width?: number;
+};
+export declare class Drawer implements NavigationNode {
+    private readonly drawerId;
+    screens: Record<string, React.ComponentType<any>>;
+    stacks: Record<string, NavigationStack>;
+    nodes: Record<string, NavigationNode>;
+    readonly width: number;
+    private listeners;
+    private openListeners;
+    private state;
+    constructor(options?: DrawerOptions);
+    getId(): string;
+    addTab(tab: Omit<DrawerItemConfig, 'tabKey'> & {
+        key: string;
+    }): Drawer;
+    setBadge(tabIndex: number, badge: string | null): void;
+    setTabBarConfig(config: Partial<{
+        component?: ComponentType<DrawerProps>;
+    }>): void;
+    onIndexChange(index: number): void;
+    open(): void;
+    close(): void;
+    toggle(): void;
+    getIsOpen(): boolean;
+    subscribeOpenState(listener: (isOpen: boolean) => void): () => void;
+    private notifyOpenListeners;
+    getState: () => {
+        tabs: DrawerItemInternal[];
+        config: {
+            component?: ComponentType<DrawerProps>;
+        };
+        index: number;
+        isOpen: boolean;
+    };
+    private setState;
+    private notifyListeners;
+    subscribe(listener: () => void): () => void;
+    getTabs(): DrawerItemInternal[];
+    getInitialIndex(): number;
+    getActiveChildId(): string | undefined;
+    switchToRoute(routeId: string): void;
+    hasRoute(routeId: string): boolean;
+    setActiveChildByRoute(routeId: string): void;
+    getNodeRoutes(): NodeRoute[];
+    getNodeChildren(): NodeChild[];
+    getRenderer(): React.ComponentType<any>;
+    seed(): {
+        routeId: string;
+        params?: Record<string, unknown>;
+        path: string;
+        stackId?: string;
+    } | null;
+    private findTabIndexByRoute;
+    private nodeHasRoute;
+}
+export {};
+//# sourceMappingURL=Drawer.d.ts.map

package/lib/typescript/src/Drawer/DrawerContext.d.ts

@@ -0,0 +1,3 @@
+import type { Drawer } from './Drawer';
+export declare const DrawerContext: import("react").Context<Drawer | null>;
+//# sourceMappingURL=DrawerContext.d.ts.map

package/lib/typescript/src/Drawer/DrawerIcon.web.d.ts

@@ -0,0 +1,7 @@
+import { type ImageSourcePropType } from 'react-native';
+export interface DrawerIconProps {
+    source: ImageSourcePropType;
+    tintColor?: string;
+}
+export declare const DrawerIcon: import("react").MemoExoticComponent<({ source, tintColor }: DrawerIconProps) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=DrawerIcon.web.d.ts.map

package/lib/typescript/src/Drawer/RenderDrawer.native.d.ts

@@ -0,0 +1,8 @@
+import type { Drawer } from './Drawer';
+import type { NavigationAppearance } from '../types';
+export interface RenderDrawerProps {
+    drawer: Drawer;
+    appearance?: NavigationAppearance;
+}
+export declare const RenderDrawer: import("react").NamedExoticComponent<RenderDrawerProps>;
+//# sourceMappingURL=RenderDrawer.native.d.ts.map

package/lib/typescript/src/Drawer/RenderDrawer.web.d.ts

@@ -0,0 +1,8 @@
+import type { NavigationAppearance } from '../types';
+import type { Drawer } from './Drawer';
+export interface RenderDrawerProps {
+    drawer: Drawer;
+    appearance?: NavigationAppearance;
+}
+export declare const RenderDrawer: import("react").NamedExoticComponent<RenderDrawerProps>;
+//# sourceMappingURL=RenderDrawer.web.d.ts.map

package/lib/typescript/src/Drawer/useDrawer.d.ts

@@ -0,0 +1,2 @@
+export declare const useDrawer: () => import("./Drawer").Drawer;
+//# sourceMappingURL=useDrawer.d.ts.map

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

@@ -11,6 +11,7 @@ export declare class NavigationStack implements NavigationNode {
     private readonly defaultOptions;
     private readonly debugEnabled;
     private readonly provider;
+    private _cachedRenderer;
     constructor();
     constructor(id: string);
     constructor(defaultOptions: NavigationStackOptions);

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

@@ -26,14 +26,22 @@ export declare class Router {
     private stackById;
     private routeById;
     private stackActivators;
+    private compiledRouteById;
     private stackHistories;
     private activeRoute;
+    private activeRouteListeners;
     private rootListeners;
     private rootTransition?;
     private suppressRootTransitionOnNextRead;
     private lastBrowserIndex;
     private suppressHistorySyncCount;
+    private abortController?;
     private navigationToken;
+    private lastParsedPath;
+    private lastParsedResult;
+    private lastMatchedPathname;
+    private lastMatchedQuery;
+    private lastMatchedResult;
     constructor(config: RouterConfig);
     isDebugEnabled(): boolean;
     isStackBeingDismissed(stackId?: string): boolean;
@@ -61,6 +69,7 @@ export declare class Router {
     dismiss: () => void;
     getState: () => RouterState;
     subscribe(listener: Listener): () => void;
+    subscribeActiveRoute: (listener: Listener) => (() => void);
     getStackHistory: (stackId?: string) => HistoryItem[];
     /**
      * Returns all history items in navigation order.
@@ -174,6 +183,7 @@ export declare class Router {
     private activateStack;
     private ensureStackHasSeed;
     private updateActiveRouteFromStack;
+    private emitDepth;
     private emit;
     private getTopOfStack;
     private findExistingRoute;
@@ -193,6 +203,7 @@ export declare class Router {
     private parsePath;
     private mergeOptions;
     private findStackById;
+    private getCompiledRoute;
     private areShallowEqual;
     private matchQueryPattern;
     private isWebEnv;
@@ -210,6 +221,8 @@ export declare class Router {
     private buildUrlFromActiveRoute;
     private patchBrowserHistoryOnce;
     private setupBrowserHistory;
+    private destroyed;
+    destroy(): void;
     private syncUrlAfterInternalPop;
     private popFromActiveStack;
     private buildHistoryFromUrl;

package/lib/typescript/src/ScreenStack/ScreenStackContext.d.ts

@@ -1,7 +1,7 @@
 import type { ScreenStackItemPhase } from '../ScreenStackItem/ScreenStackItem.types';
 import type { TransitionStatus } from 'react-transition-state';
 export type PresentationTypeClass = 'push' | 'modal' | 'modal-right' | 'transparent-modal' | 'contained-modal' | 'contained-transparent-modal' | 'fullscreen-modal' | 'formsheet' | 'pagesheet' | 'sheet';
-export type AnimationType = 'push-enter' | 'push-exit' | 'push-background' | 'pop-enter' | 'pop-exit' | 'pop-background' | 'modal-enter' | 'modal-exit' | 'modal-right-enter' | 'modal-right-exit' | 'transparent-modal-enter' | 'transparent-modal-exit' | 'contained-modal-enter' | 'contained-modal-exit' | 'fullscreen-modal-enter' | 'fullscreen-modal-exit' | 'formsheet-enter' | 'formsheet-exit' | 'pagesheet-enter' | 'pagesheet-exit' | 'sheet-enter' | 'sheet-exit' | 'no-animate' | 'none';
+export type AnimationType = 'push-enter' | 'push-exit' | 'push-background' | 'pop-enter' | 'pop-exit' | 'pop-background' | 'modal-enter' | 'modal-exit' | 'modal-right-enter' | 'modal-right-exit' | 'transparent-modal-enter' | 'transparent-modal-exit' | 'contained-modal-enter' | 'contained-modal-exit' | 'contained-transparent-modal-enter' | 'contained-transparent-modal-exit' | 'fullscreen-modal-enter' | 'fullscreen-modal-exit' | 'formsheet-enter' | 'formsheet-exit' | 'pagesheet-enter' | 'pagesheet-exit' | 'sheet-enter' | 'sheet-exit' | 'no-animate' | 'none';
 export type ScreenStackItemState = {
     presentationType: PresentationTypeClass;
     animationType: AnimationType;

package/lib/typescript/src/ScreenStack/animationHelpers.d.ts

@@ -1,6 +1,6 @@
 import type { StackPresentationTypes } from '../types';
 import type { PresentationTypeClass, AnimationType } from './ScreenStackContext';
 export declare function getPresentationTypeClass(presentation: StackPresentationTypes): PresentationTypeClass;
-export declare function getAnimationTypeForPresentation(presentation: StackPresentationTypes, isEntering: boolean, direction: 'forward' | 'back'): string;
+export declare function getAnimationTypeForPresentation(presentation: StackPresentationTypes, isEntering: boolean, direction: 'forward' | 'back'): AnimationType;
 export declare function computeAnimationType(_key: string, isInStack: boolean, isTop: boolean, direction: 'forward' | 'back', presentation: StackPresentationTypes, isInitialPhase: boolean, animated?: boolean, isBulkRemoval?: boolean): AnimationType;
 //# sourceMappingURL=animationHelpers.d.ts.map

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

@@ -9,10 +9,12 @@ export type SplitViewOptions = {
 };
 export declare class SplitView implements NavigationNode {
     private readonly splitViewId;
+    private readonly secondaryWrapper;
     readonly primary: NavigationStack;
     readonly secondary: NavigationStack;
     readonly minWidth: number;
     readonly primaryMaxWidth: number;
+    private _cachedRenderer;
     constructor(options: SplitViewOptions);
     getId(): string;
     getNodeRoutes(): NodeRoute[];

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>;
@@ -64,6 +72,7 @@ export declare class TabBar implements NavigationNode {
     stacks: Record<string, NavigationStack>;
     nodes: Record<string, NavigationNode>;
     private listeners;
+    private _cachedRenderer;
     private state;
     constructor(options?: TabBarOptions);
     getId(): string;

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

@@ -2,13 +2,18 @@ export { useTabBar } from './TabBar/useTabBar';
 export { useTabBarHeight, TAB_BAR_HEIGHT } from './TabBar/useTabBarHeight';
 export { TabBar } from './TabBar/TabBar';
 export type { TabBarProps } from './TabBar/TabBar';
+export { Drawer } from './Drawer/Drawer';
+export type { DrawerProps } from './Drawer/Drawer';
+export { useDrawer } from './Drawer/useDrawer';
 export { SplitView } from './SplitView/SplitView';
 export type { SplitViewOptions } from './SplitView/SplitView';
 export { useSplitView } from './SplitView/useSplitView';
 export type { NavigationAppearance } from './types';
+export type { ScreenOptions, ActiveRoute, StackPresentationTypes, NavigationStackOptions, } from './types';
 export { Router } from './Router';
 export { Navigation } from './Navigation';
 export { createController } from './createController';
+export type { Controller, ComponentWithController } from './createController';
 export { NavigationStack } from './NavigationStack';
 export type { HistoryItem } from './types';
 export { StackRenderer } from './StackRenderer';

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[];
@@ -59,7 +59,7 @@ export type HistoryItem = {
     options?: ScreenOptions;
     params?: Record<string, unknown>;
     query?: Record<string, unknown>;
-    passProps?: any;
+    passProps?: Record<string, unknown>;
     stackId?: string;
     pattern?: string;
     path?: string;
@@ -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.2.8",
+  "version": "0.3.1",
   "description": "React Native Router",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -47,7 +47,6 @@
     "React Native Router",
     "react-native-navigation",
     "react-native-router",
-    "react-native-navigation",
     "react-native-screens",
     "react-native-bottom-tabs",
     "react-native-bottom-sheet"
@@ -72,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",
@@ -84,20 +83,36 @@
     "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",
-    "react-native-screens": "^4.18.0",
+    "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-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"
   },
   "peerDependencies": {
     "@sigmela/native-sheet": ">=0.0.1",
     "react": "*",
-    "react-native": "*",
+    "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": {
+    "@sigmela/native-sheet": {
+      "optional": true
+    },
+    "react-native-reanimated": {
+      "optional": true
+    },
+    "react-native-safe-area-context": {
+      "optional": true
+    }
+  },
   "workspaces": [
     "example"
   ],
@@ -106,7 +121,8 @@
     "preset": "react-native",
     "modulePathIgnorePatterns": [
       "<rootDir>/example/node_modules",
-      "<rootDir>/lib/"
+      "<rootDir>/lib/",
+      "<rootDir>/.worktrees/"
     ],
     "transformIgnorePatterns": [
       "node_modules/(?!((jest-)?react-native|@react-native|react-native-screens|@sigmela/native-sheet|nanoid|query-string|decode-uri-component|split-on-first|filter-obj)/)"
@@ -171,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"
   }
 }