@sigmela/router 0.0.11

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

@@ -0,0 +1,244 @@
+import type { ColorValue, StyleProp, ViewStyle, TextStyle } from 'react-native';
+import type { BottomTabsScreenAppearance, BottomTabsScreenProps, ScreenProps as RNSScreenProps, ScreenStackHeaderConfigProps, TabBarItemLabelVisibilityMode, TabBarMinimizeBehavior } from 'react-native-screens';
+export type TabItem = Omit<BottomTabsScreenProps, 'isFocused' | 'children'>;
+export type NavigationState<Route extends TabItem> = {
+    index: number;
+    routes: Route[];
+};
+export type Scope = 'global' | 'tab' | 'root';
+export type ScreenOptions = Partial<RNSScreenProps> & {
+    header?: ScreenStackHeaderConfigProps;
+};
+export type HistoryItem = {
+    key: string;
+    scope: Scope;
+    routeId: string;
+    component: React.ComponentType<any>;
+    options?: ScreenOptions;
+    params?: Record<string, unknown>;
+    query?: Record<string, unknown>;
+    passProps?: any;
+    tabIndex?: number;
+    stackId?: string;
+    pattern?: string;
+    path?: string;
+};
+export type VisibleRoute = {
+    routeId: string;
+    stackId?: string;
+    tabIndex?: number;
+    scope: Scope;
+    path?: string;
+    params?: Record<string, unknown>;
+    query?: Record<string, unknown>;
+} | null;
+export type CompiledRoute = {
+    routeId: string;
+    scope: Scope;
+    path: string;
+    match: (path: string) => false | {
+        params: Record<string, any>;
+    };
+    component: React.ComponentType<any>;
+    controller?: import('./createController').Controller<any, any>;
+    options?: ScreenOptions;
+    tabIndex?: number;
+    stackId?: string;
+};
+export type TabBarConfig = {
+    /**
+     * @summary Specifies the minimize behavior for the tab bar.
+     *
+     * Available starting from iOS 26.
+     *
+     * The following values are currently supported:
+     *
+     * - `automatic` - resolves to the system default minimize behavior
+     * - `never` - the tab bar does not minimize
+     * - `onScrollDown` - the tab bar minimizes when scrolling down and
+     *   expands when scrolling back up
+     * - `onScrollUp` - the tab bar minimizes when scrolling up and expands
+     *   when scrolling back down
+     *
+     * The supported values correspond to the official UIKit documentation:
+     * @see {@link https://developer.apple.com/documentation/uikit/uitabbarcontroller/minimizebehavior|UITabBarController.MinimizeBehavior}
+     *
+     * @default Defaults to `automatic`.
+     *
+     * @platform ios
+     * @supported iOS 26 or higher
+     */
+    tabBarMinimizeBehavior?: TabBarMinimizeBehavior;
+};
+export interface NavigationAppearance {
+    tabBar?: {
+        /**
+         * @summary Specifies the standard tab bar appearance.
+         *
+         * Allows to customize the appearance depending on the tab bar item layout (stacked,
+         * inline, compact inline) and state (normal, selected, focused, disabled).
+         *
+         * @platform ios
+         */
+        standardAppearance?: BottomTabsScreenAppearance;
+        /**
+         * @summary Specifies the tab bar appearace when edge of scrollable content aligns
+         * with the edge of the tab bar.
+         *
+         * Allows to customize the appearance depending on the tab bar item layout (stacked,
+         * inline, compact inline) and state (normal, selected, focused, disabled).
+         *
+         * If this property is `undefined`, UIKit uses `standardAppearance`, modified to
+         * have a transparent background.
+         *
+         * @platform ios
+         */
+        scrollEdgeAppearance?: BottomTabsScreenAppearance;
+        /**
+         * @summary Specifies the background color for the entire tab bar.
+         *
+         * @platform android
+         */
+        backgroundColor?: ColorValue;
+        tabBarItemStyle?: {
+            /**
+             * @summary Specifies the font family used for the title of each tab bar item.
+             *
+             * @platform android
+             */
+            titleFontFamily?: TextStyle['fontFamily'];
+            /**
+             * @summary Specifies the font size used for the title of each tab bar item.
+             *
+             * The size is represented in scale-independent pixels (sp).
+             *
+             * @platform android
+             */
+            titleFontSize?: TextStyle['fontSize'];
+            /**
+             * @summary Specifies the font size used for the title of each tab bar item in active state.
+             *
+             * The size is represented in scale-independent pixels (sp).
+             *
+             * @platform android
+             */
+            titleFontSizeActive?: TextStyle['fontSize'];
+            /**
+             * @summary Specifies the font weight used for the title of each tab bar item.
+             *
+             * @platform android
+             */
+            titleFontWeight?: TextStyle['fontWeight'];
+            /**
+             * @summary Specifies the font style used for the title of each tab bar item.
+             *
+             * @platform android
+             */
+            titleFontStyle?: TextStyle['fontStyle'];
+            /**
+             * @summary Specifies the font color used for the title of each tab bar item.
+             *
+             * @platform android
+             */
+            titleFontColor?: TextStyle['color'];
+            /**
+             * @summary Specifies the font color used for the title of each tab bar item in active state.
+             *
+             * If not provided, `tabBarItemTitleFontColor` is used.
+             *
+             * @platform android
+             */
+            titleFontColorActive?: TextStyle['color'];
+            /**
+             * @summary Specifies the icon color for each tab bar item.
+             *
+             * @platform android
+             */
+            iconColor?: ColorValue;
+            /**
+             * @summary Specifies the icon color for each tab bar item in active state.
+             *
+             * If not provided, `tabBarItemIconColor` is used.
+             *
+             * @platform android
+             */
+            iconColorActive?: ColorValue;
+            /**
+             * @summary Specifies the background color of the active indicator.
+             *
+             * @platform android
+             */
+            activeIndicatorColor?: ColorValue;
+            /**
+             * @summary Specifies if the active indicator should be used.
+             *
+             * @default true
+             *
+             * @platform android
+             */
+            activeIndicatorEnabled?: boolean;
+            /**
+             * @summary Specifies the color of each tab bar item's ripple effect.
+             *
+             * @platform android
+             */
+            rippleColor?: ColorValue;
+            /**
+             * @summary Specifies the label visibility mode.
+             *
+             * The label visibility mode defines when the labels of each item bar should be displayed.
+             *
+             * The following values are available:
+             * - `auto` - the label behaves as in “labeled” mode when there are 3 items or less, or as in “selected” mode when there are 4 items or more
+             * - `selected` - the label is only shown on the selected navigation item
+             * - `labeled` - the label is shown on all navigation items
+             * - `unlabeled` - the label is hidden for all navigation items
+             *
+             * The supported values correspond to the official Material Components documentation:
+             * @see {@link https://github.com/material-components/material-components-android/blob/master/docs/components/BottomNavigation.md#making-navigation-bar-accessible|Material Components documentation}
+             *
+             * @default auto
+             * @platform android
+             */
+            labelVisibilityMode?: TabBarItemLabelVisibilityMode;
+        };
+        /**
+         * @summary Specifies the color used for selected tab's text and icon color.
+         *
+         * Starting from iOS 26, it also impacts glow of Liquid Glass tab
+         * selection view.
+         *
+         * `tabBarItemTitleFontColor` and `tabBarItemIconColor` defined on
+         * BottomTabsScreen component override this color.
+         *
+         * @platform ios
+         */
+        tintColor?: ColorValue;
+        /**
+         * @summary Experimental prop for changing container control.
+         *
+         * If set to true, tab screen changes need to be handled by JS using
+         * onNativeFocusChange callback (controlled/programatically-driven).
+         *
+         * If set to false, tab screen change will not be prevented by the
+         * native side (managed/natively-driven).
+         *
+         * On iOS, some features are not fully implemented for managed tabs
+         * (e.g. overrideScrollViewContentInsetAdjustmentBehavior).
+         *
+         * On Android, only controlled tabs are currently supported.
+         *
+         * @default Defaults to `false`.
+         *
+         * @platform android, ios
+         */
+        experimentalControlNavigationStateInJS?: boolean;
+    };
+    screenStyle?: StyleProp<ViewStyle>;
+    /**
+     * Global header appearance applied to all screens with visible headers.
+     * Per-screen header options override these.
+     */
+    header?: ScreenStackHeaderConfigProps;
+}
+//# sourceMappingURL=types.d.ts.map

package/package.json

@@ -0,0 +1,166 @@
+{
+  "name": "@sigmela/router",
+  "version": "0.0.11",
+  "description": "React Native Router",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace @sigmela/router-example",
+    "test": "jest",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "clean": "del-cli lib",
+    "prepare": "bob build && del-cli \"lib/**/*.map\"",
+    "release": "release-it --only-version"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sigmela/router.git"
+  },
+  "author": "https://github.com/bogoslavskiy <help@sigmela.com> (https://github.com/bogoslavskiy)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/sigmela/router/issues"
+  },
+  "homepage": "https://github.com/sigmela/router#readme",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/compat": "^1.3.2",
+    "@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",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.1.12",
+    "commitlint": "^19.8.1",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "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.16.0",
+    "release-it": "^19.0.4",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-screens": ">=4.16.0"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@3.6.1",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ],
+    "transformIgnorePatterns": [
+      "node_modules/(?!((jest-)?react-native|@react-native|react-native-screens|nanoid|query-string|decode-uri-component|split-on-first|filter-obj)/)"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true,
+          "sourceMaps": false
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "create-react-native-library": {
+    "languages": "js",
+    "type": "library",
+    "version": "0.54.3"
+  },
+  "dependencies": {
+    "nanoid": "^5.1.6",
+    "path-to-regexp": "^8.3.0",
+    "query-string": "^9.3.1"
+  }
+}

package/src/Navigation.tsx

@@ -0,0 +1,102 @@
+import {
+  ScreenStack,
+  ScreenStackItem as RNNScreenStackItem,
+} from 'react-native-screens';
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useState,
+  useSyncExternalStore,
+} from 'react';
+import { RenderTabBar } from './TabBar/RenderTabBar';
+import { ScreenStackItem } from './ScreenStackItem';
+import { RouterContext } from './RouterContext';
+import { StyleSheet } from 'react-native';
+import { Router } from './Router';
+import type { NavigationAppearance } from './types';
+
+export interface NavigationProps {
+  router: Router;
+  appearance?: NavigationAppearance;
+}
+
+const EMPTY_HISTORY: any[] = [];
+
+function useStackHistory(router: Router, stackId?: string) {
+  const subscribe = useCallback(
+    (cb: () => void) =>
+      stackId ? router.subscribeStack(stackId, cb) : () => {},
+    [router, stackId]
+  );
+  const get = useCallback(
+    () => (stackId ? router.getStackHistory(stackId) : EMPTY_HISTORY),
+    [router, stackId]
+  );
+  return useSyncExternalStore(subscribe, get, get);
+}
+
+export const Navigation = memo<NavigationProps>(({ router, appearance }) => {
+  const [root, setRoot] = useState(() => ({
+    hasTabBar: router.hasTabBar(),
+    rootId: router.getRootStackId(),
+  }));
+
+  useEffect(() => {
+    return router.subscribeRoot(() => {
+      setRoot({
+        hasTabBar: router.hasTabBar(),
+        rootId: router.getRootStackId(),
+      });
+    });
+  }, [router]);
+
+  const { hasTabBar, rootId } = root;
+  const rootTransition = router.getRootTransition();
+  const globalId = router.getGlobalStackId();
+  const rootItems = useStackHistory(router, rootId);
+  const globalItems = useStackHistory(router, globalId);
+
+  return (
+    <RouterContext.Provider value={router}>
+      <ScreenStack style={styles.flex}>
+        {hasTabBar && (
+          <RNNScreenStackItem
+            screenId="root-tabbar"
+            headerConfig={{ hidden: true }}
+            style={styles.flex}
+            stackAnimation={rootTransition}
+          >
+            <RenderTabBar
+              tabBar={router.tabBar!}
+              appearance={appearance?.tabBar}
+            />
+          </RNNScreenStackItem>
+        )}
+        {rootItems.map((item) => (
+          <ScreenStackItem
+            key={item.key}
+            stackId={rootId}
+            item={item}
+            stackAnimation={rootTransition}
+            screenStyle={appearance?.screenStyle}
+            headerAppearance={appearance?.header}
+          />
+        ))}
+        {globalItems.map((item) => (
+          <ScreenStackItem
+            key={item.key}
+            stackId={globalId}
+            item={item}
+            screenStyle={appearance?.screenStyle}
+            headerAppearance={appearance?.header}
+          />
+        ))}
+      </ScreenStack>
+    </RouterContext.Provider>
+  );
+});
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+});

package/src/NavigationStack.ts

@@ -0,0 +1,106 @@
+import type { ScreenOptions } from './types';
+import { nanoid } from 'nanoid/non-secure';
+import { match } from 'path-to-regexp';
+import {
+  type ComponentWithController,
+  type MixedComponent,
+} from './createController';
+
+type BuiltRoute = {
+  routeId: string;
+  path: string;
+  match: (path: string) => false | { params: Record<string, any> };
+  component: React.ComponentType<any>;
+  controller?: ComponentWithController['controller'];
+  options?: ScreenOptions; // per-screen options only (no stack defaults merged)
+};
+
+export class NavigationStack {
+  private readonly stackId: string;
+  private readonly routes: BuiltRoute[] = [];
+  private readonly defaultOptions: ScreenOptions | undefined;
+
+  // Overloads
+  constructor();
+  constructor(id: string);
+  constructor(defaultOptions: ScreenOptions);
+  constructor(id: string, defaultOptions: ScreenOptions);
+  constructor(
+    idOrOptions?: string | ScreenOptions,
+    maybeOptions?: ScreenOptions
+  ) {
+    if (typeof idOrOptions === 'string') {
+      this.stackId = idOrOptions ?? `stack-${nanoid()}`;
+      this.defaultOptions = maybeOptions;
+    } else {
+      this.stackId = `stack-${nanoid()}`;
+      this.defaultOptions = idOrOptions;
+    }
+  }
+
+  public getId(): string {
+    return this.stackId;
+  }
+
+  public addScreen(
+    path: string,
+    mixedComponent: MixedComponent,
+    options?: ScreenOptions
+  ): NavigationStack {
+    const { component, controller } = this.extractComponent(mixedComponent);
+    const routeId = `${this.stackId}-route-${this.routes.length}`;
+    const matcher = match(path);
+
+    this.routes.push({
+      routeId,
+      path,
+      match: (p: string) => {
+        const result = matcher(p);
+        return result ? { params: (result as any).params ?? {} } : false;
+      },
+      component,
+      controller,
+      options,
+    });
+
+    return this;
+  }
+
+  public addModal(
+    path: string,
+    mixedComponent: MixedComponent,
+    options?: ScreenOptions
+  ): NavigationStack {
+    return this.addScreen(path, mixedComponent, {
+      ...options,
+      stackPresentation: 'modal',
+    });
+  }
+
+  public getRoutes(): BuiltRoute[] {
+    return this.routes.slice();
+  }
+
+  public getFirstRoute(): BuiltRoute | undefined {
+    return this.routes[0];
+  }
+
+  public getDefaultOptions(): ScreenOptions | undefined {
+    return this.defaultOptions;
+  }
+
+  private extractComponent(component: MixedComponent) {
+    const componentWithController = component as ComponentWithController;
+    if (componentWithController?.component) {
+      return {
+        controller: componentWithController.controller,
+        component: componentWithController.component,
+      };
+    }
+
+    return {
+      component: component as React.ComponentType<any>,
+      controller: undefined,
+    };
+  }
+}