@sigmela/router 0.0.11 → 0.0.13

package/lib/module/Navigation.js

@@ -50,7 +50,7 @@ export const Navigation = /*#__PURE__*/memo(({
         stackAnimation: rootTransition,
         children: /*#__PURE__*/_jsx(RenderTabBar, {
           tabBar: router.tabBar,
-          appearance: appearance?.tabBar
+          appearance: appearance
         })
       }), rootItems.map(item => /*#__PURE__*/_jsx(ScreenStackItem, {
         stackId: rootId,

package/lib/module/StackRenderer.js

@@ -7,7 +7,8 @@ import { useRouter } from "./RouterContext.js";
 import { StyleSheet } from 'react-native';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const StackRenderer = /*#__PURE__*/memo(({
-  stack
+  stack,
+  screenStyle
 }) => {
   const router = useRouter();
   const stackId = stack.getId();
@@ -18,7 +19,8 @@ export const StackRenderer = /*#__PURE__*/memo(({
     style: styles.flex,
     children: historyForThisStack.map(item => /*#__PURE__*/_jsx(ScreenStackItem, {
       item: item,
-      stackId: stackId
+      stackId: stackId,
+      screenStyle: screenStyle
     }, item.key))
   });
 });

package/lib/module/TabBar/RenderTabBar.js

@@ -45,7 +45,7 @@ export const RenderTabBar = /*#__PURE__*/memo(({
     tabBarItemStyle,
     tintColor,
     backgroundColor
-  } = appearance ?? {};
+  } = appearance?.tabBar ?? {};
   useEffect(() => {
     router.ensureTabSeed(index);
   }, [index, router]);
@@ -113,7 +113,8 @@ export const RenderTabBar = /*#__PURE__*/memo(({
           isFocused: isFocused,
           ...mappedTabProps,
           children: stack ? /*#__PURE__*/_jsx(StackRenderer, {
-            stack: stack
+            stack: stack,
+            screenStyle: appearance?.screenStyle
           }) : Screen ? /*#__PURE__*/_jsx(Screen, {}) : null
         }, tab.tabKey);
       })

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

@@ -1,6 +1,8 @@
 import { NavigationStack } from './NavigationStack';
+import { type StyleProp, type ViewStyle } from 'react-native';
 export interface StackRendererProps {
     stack: NavigationStack;
+    screenStyle?: StyleProp<ViewStyle>;
 }
 export declare const StackRenderer: import("react").NamedExoticComponent<StackRendererProps>;
 //# sourceMappingURL=StackRenderer.d.ts.map

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

@@ -2,7 +2,7 @@ import type { NavigationAppearance } from '../types';
 import type { TabBar } from './TabBar';
 export interface RenderTabBarProps {
     tabBar: TabBar;
-    appearance?: NavigationAppearance['tabBar'];
+    appearance?: NavigationAppearance;
 }
 export declare const RenderTabBar: import("react").NamedExoticComponent<RenderTabBarProps>;
 //# sourceMappingURL=RenderTabBar.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sigmela/router",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "description": "React Native Router",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -13,7 +13,6 @@
     "./package.json": "./package.json"
   },
   "files": [
-    "src",
     "lib",
     "android",
     "ios",

package/src/Navigation.tsx

@@ -1,102 +0,0 @@
-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

@@ -1,106 +0,0 @@
-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,
-    };
-  }
-}