@sigmela/router 0.0.17 → 0.1.2

package/lib/module/NavigationStack.js

@@ -47,6 +47,12 @@ export class NavigationStack {
       stackPresentation: 'modal'
     });
   }
+  addSheet(path, mixedComponent, options) {
+    return this.addScreen(path, mixedComponent, {
+      ...options,
+      stackPresentation: 'sheet'
+    });
+  }
   getRoutes() {
     return this.routes.slice();
   }

package/lib/module/Router.js

@@ -1,6 +1,7 @@
 "use strict";
 
 import { nanoid } from 'nanoid/non-secure';
+import { Platform } from 'react-native';
 import qs from 'query-string';
 
 // Root transition option: allow string shorthand like 'fade'
@@ -22,6 +23,8 @@ export class Router {
     history: [],
     activeTabIndex: undefined
   };
+  sheetDismissers = new Map();
+
   // per-stack slices and listeners
   stackSlices = new Map();
   stackListeners = new Map();
@@ -75,12 +78,16 @@ export class Router {
       dedupe: !!dedupe
     });
   };
+  registerSheetDismisser = (key, dismisser) => {
+    this.sheetDismissers.set(key, dismisser);
+  };
+  unregisterSheetDismisser = key => {
+    this.sheetDismissers.delete(key);
+  };
   goBack = () => {
     if (this.isWebEnv()) {
-      // Web: only go back within the current active stack.
       const didPop = this.tryPopActiveStack();
       if (didPop) {
-        // Keep URL in sync with the new visible route without adding history entries
         const path = this.getVisibleRoute()?.path;
         if (path) this.replaceUrl(path);
       }
@@ -577,6 +584,9 @@ export class Router {
       ...(routeOptions ?? {}),
       ...(routerDefaults ?? {})
     };
+    if (merged.stackPresentation === 'modal' && merged.convertModalToSheetForAndroid && Platform.OS === 'android') {
+      merged.stackPresentation = 'sheet';
+    }
     return merged;
   }
   findStackById(stackId) {
@@ -715,13 +725,24 @@ export class Router {
   // Attempts to pop exactly one screen within the active stack only.
   // Returns true if a pop occurred; false otherwise.
   tryPopActiveStack() {
+    const handlePop = item => {
+      if (item.options?.stackPresentation === 'sheet') {
+        const dismisser = this.sheetDismissers.get(item.key);
+        if (dismisser) {
+          this.unregisterSheetDismisser(item.key);
+          dismisser();
+          return true;
+        }
+      }
+      this.applyHistoryChange('pop', item);
+      return true;
+    };
     if (this.global) {
       const gid = this.global.getId();
       const gslice = this.getStackHistory(gid);
       const gtop = gslice.length ? gslice[gslice.length - 1] : undefined;
       if (gtop) {
-        this.applyHistoryChange('pop', gtop);
-        return true;
+        return handlePop(gtop);
       }
     }
     if (this.tabBar) {
@@ -736,8 +757,7 @@ export class Router {
       if (slice.length > 1) {
         const top = slice[slice.length - 1];
         if (top) {
-          this.applyHistoryChange('pop', top);
-          return true;
+          return handlePop(top);
         }
       }
       return false;
@@ -748,8 +768,7 @@ export class Router {
       if (slice.length > 1) {
         const top = slice[slice.length - 1];
         if (top) {
-          this.applyHistoryChange('pop', top);
-          return true;
+          return handlePop(top);
         }
       }
     }

package/lib/module/ScreenStackItem/ScreenStackItem.js

@@ -2,6 +2,7 @@
 
 import { ScreenStackItem as RNSScreenStackItem } from 'react-native-screens';
 import { RouteLocalContext, useRouter } from "../RouterContext.js";
+import { ScreenStackSheetItem } from "../ScreenStackSheetItem/index.js";
 import { StyleSheet } from 'react-native';
 import { memo } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -11,6 +12,18 @@ export const ScreenStackItem = /*#__PURE__*/memo(({
   stackAnimation,
   appearance
 }) => {
+  const {
+    header,
+    stackPresentation,
+    ...screenProps
+  } = item.options || {};
+  const route = {
+    presentation: stackPresentation ?? 'push',
+    params: item.params,
+    query: item.query,
+    pattern: item.pattern,
+    path: item.path
+  };
   const router = useRouter();
   const onDismissed = () => {
     if (stackId) {
@@ -21,34 +34,32 @@ export const ScreenStackItem = /*#__PURE__*/memo(({
       }
     }
   };
-  const value = {
-    presentation: item.options?.stackPresentation ?? 'push',
-    params: item.params,
-    query: item.query,
-    pattern: item.pattern,
-    path: item.path
-  };
-  const {
-    header,
-    ...screenProps
-  } = item.options || {};
   const headerConfig = {
     ...header,
     hidden: !header?.title || header?.hidden,
     backgroundColor: appearance?.header?.backgroundColor ?? 'transparent'
   };
+  if (route.presentation === 'sheet') {
+    return /*#__PURE__*/_jsx(ScreenStackSheetItem, {
+      appearance: appearance?.sheet,
+      onDismissed: onDismissed,
+      route: route,
+      item: item
+    });
+  }
   return /*#__PURE__*/_jsx(RNSScreenStackItem, {
+    ...screenProps,
     screenId: item.key,
     onDismissed: onDismissed,
     style: StyleSheet.absoluteFill,
     contentStyle: appearance?.screen,
     headerConfig: headerConfig,
-    ...screenProps,
+    stackPresentation: stackPresentation,
     stackAnimation: stackAnimation ?? item.options?.stackAnimation,
     children: /*#__PURE__*/_jsx(RouteLocalContext.Provider, {
-      value: value,
+      value: route,
       children: /*#__PURE__*/_jsx(item.component, {
-        ...(item.passProps || {})
+        ...item.passProps
       })
     })
   }, item.key);

package/lib/module/ScreenStackSheetItem/ScreenStackSheetItem.native.js

@@ -0,0 +1,70 @@
+"use strict";
+
+import { ScreenStackItem as RNSScreenStackItem } from 'react-native-screens';
+import { NativeSheetView, Commands } from '@sigmela/native-sheet';
+import { RouteLocalContext, useRouter } from "../RouterContext.js";
+import { memo, useRef, useEffect } from 'react';
+import { StyleSheet } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ScreenStackSheetItem = /*#__PURE__*/memo(props => {
+  const {
+    item,
+    onDismissed,
+    route,
+    appearance
+  } = props;
+  const {
+    convertModalToSheetForAndroid
+  } = item.options || {};
+  const headerConfig = {
+    hidden: true
+  };
+  const ref = useRef(null);
+  const router = useRouter();
+  useEffect(() => {
+    if (route.presentation === 'sheet') {
+      router.registerSheetDismisser(item.key, () => {
+        if (ref.current) {
+          Commands.dismiss(ref.current);
+        }
+      });
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const handleSheetDismissed = () => {
+    router.unregisterSheetDismisser(item.key);
+    onDismissed();
+  };
+  return /*#__PURE__*/_jsx(RNSScreenStackItem, {
+    stackPresentation: "transparentModal",
+    headerConfig: headerConfig,
+    style: StyleSheet.absoluteFill,
+    contentStyle: styles.content,
+    screenId: item.key,
+    stackAnimation: "none",
+    onDismissed: onDismissed,
+    children: /*#__PURE__*/_jsx(NativeSheetView, {
+      containerBackgroundColor: appearance?.backgroundColor,
+      cornerRadius: appearance?.cornerRadius ?? 18,
+      onDismissed: handleSheetDismissed,
+      style: styles.flex,
+      ref: ref,
+      fullscreenTopInset: convertModalToSheetForAndroid ? appearance?.androidFullScreenTopInset ?? 40 : undefined,
+      children: /*#__PURE__*/_jsx(RouteLocalContext.Provider, {
+        value: route,
+        children: /*#__PURE__*/_jsx(item.component, {
+          ...item.passProps
+        })
+      })
+    })
+  }, `${item.key}-sheet-item`);
+});
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1
+  },
+  content: {
+    backgroundColor: 'transparent'
+  }
+});

package/lib/module/ScreenStackSheetItem/ScreenStackSheetItem.web.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export const ScreenStackSheetItem = () => {
+  return null; // TODO: Implement
+};

package/lib/module/ScreenStackSheetItem/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export { ScreenStackSheetItem } from './ScreenStackSheetItem';

package/lib/module/TabBar/TabBar.js

@@ -6,11 +6,13 @@ export class TabBar {
   screens = {};
   stacks = {};
   listeners = new Set();
-  constructor(config = {}) {
+  constructor(options = {}) {
     this.state = {
       tabs: [],
-      index: 0,
-      config
+      index: options.initialIndex ?? 0,
+      config: {
+        component: options.component
+      }
     };
   }
   addTab(tab) {

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

@@ -21,6 +21,7 @@ export declare class NavigationStack {
     getId(): string;
     addScreen(path: string, mixedComponent: MixedComponent, options?: ScreenOptions): NavigationStack;
     addModal(path: string, mixedComponent: MixedComponent, options?: ScreenOptions): NavigationStack;
+    addSheet(path: string, mixedComponent: MixedComponent, options?: ScreenOptions): NavigationStack;
     getRoutes(): BuiltRoute[];
     getFirstRoute(): BuiltRoute | undefined;
     getDefaultOptions(): ScreenOptions | undefined;

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

@@ -20,6 +20,7 @@ export declare class Router {
     private readonly registry;
     private state;
     private readonly routerScreenOptions;
+    private sheetDismissers;
     private stackSlices;
     private stackListeners;
     private activeTabListeners;
@@ -31,6 +32,8 @@ export declare class Router {
     constructor(config: RouterConfig);
     navigate: (path: string) => void;
     replace: (path: string, dedupe?: boolean) => void;
+    registerSheetDismisser: (key: string, dismisser: () => void) => void;
+    unregisterSheetDismisser: (key: string) => void;
     goBack: () => void;
     onTabIndexChange: (index: number) => void;
     setActiveTabIndex: (index: number) => void;

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

@@ -1,8 +1,8 @@
-import type { StackPresentationTypes } from 'react-native-screens';
 import React from 'react';
+import type { StackPresentationTypes } from './types';
 import type { Router } from './Router';
 export declare const RouterContext: React.Context<Router | null>;
-type RouteLocalContextValue = {
+export type RouteLocalContextValue = {
     presentation: StackPresentationTypes;
     params?: Record<string, unknown>;
     query?: Record<string, unknown>;
@@ -15,5 +15,4 @@ export declare const useCurrentRoute: () => import("./types").VisibleRoute;
 export declare function useParams<TParams extends Record<string, unknown> = Record<string, unknown>>(): TParams;
 export declare function useQueryParams<TQuery extends Record<string, unknown> = Record<string, unknown>>(): TQuery;
 export declare function useRoute(): RouteLocalContextValue;
-export {};
 //# sourceMappingURL=RouterContext.d.ts.map

package/lib/typescript/src/ScreenStackSheetItem/ScreenStackSheetItem.native.d.ts

@@ -0,0 +1,11 @@
+import type { RouteLocalContextValue } from '../RouterContext';
+import type { HistoryItem, SheetAppearance } from '../types';
+interface ScreenStackSheetItemProps {
+    route: RouteLocalContextValue;
+    appearance?: SheetAppearance;
+    onDismissed: () => void;
+    item: HistoryItem;
+}
+export declare const ScreenStackSheetItem: import("react").NamedExoticComponent<ScreenStackSheetItemProps>;
+export {};
+//# sourceMappingURL=ScreenStackSheetItem.native.d.ts.map

package/lib/typescript/src/ScreenStackSheetItem/ScreenStackSheetItem.web.d.ts

@@ -0,0 +1,2 @@
+export declare const ScreenStackSheetItem: () => null;
+//# sourceMappingURL=ScreenStackSheetItem.web.d.ts.map

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

@@ -0,0 +1,2 @@
+export { ScreenStackSheetItem } from './ScreenStackSheetItem';
+//# sourceMappingURL=index.d.ts.map

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

@@ -26,12 +26,17 @@ type TabBarConfig = Omit<InternalTabItem, 'tabKey' | 'key'> & {
     screen?: React.ComponentType<any>;
     component?: ComponentType<TabBarProps>;
 };
+type TabBarOptions = {
+    component?: ComponentType<TabBarProps>;
+    config?: TabBarConfig;
+    initialIndex?: number;
+};
 export declare class TabBar {
     screens: Record<string, React.ComponentType<any>>;
     stacks: Record<string, NavigationStack>;
     private listeners;
     private state;
-    constructor(config?: TabBarConfig);
+    constructor(options?: TabBarOptions);
     addTab(tab: Omit<TabBarConfig, 'tabKey'> & {
         key: string;
     }): TabBar;

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

@@ -1,5 +1,6 @@
 import type { ColorValue, StyleProp, ViewStyle, TextStyle } from 'react-native';
 import type { BottomTabsScreenProps, ScreenProps as RNSScreenProps, ScreenStackHeaderConfigProps, TabBarItemLabelVisibilityMode, TabBarMinimizeBehavior } from 'react-native-screens';
+export type StackPresentationTypes = 'push' | 'modal' | 'transparentModal' | 'containedModal' | 'containedTransparentModal' | 'fullScreenModal' | 'formSheet' | 'pageSheet' | 'sheet';
 export type TabItem = Omit<BottomTabsScreenProps, 'isFocused' | 'children'>;
 export type NavigationState<Route extends TabItem> = {
     index: number;
@@ -9,8 +10,10 @@ export type Scope = 'global' | 'tab' | 'root';
 export type TabBarIcon = {
     sfSymbolName?: string;
 } | string;
-export type ScreenOptions = Partial<RNSScreenProps> & {
+export type ScreenOptions = Partial<Omit<RNSScreenProps, 'stackPresentation'>> & {
     header?: ScreenStackHeaderConfigProps;
+    stackPresentation?: StackPresentationTypes;
+    convertModalToSheetForAndroid?: boolean;
     /**
      * Tab bar icon source for this route (used on web renderer, optional on native).
      */
@@ -77,6 +80,11 @@ export type TabBarConfig = {
      */
     tabBarMinimizeBehavior?: TabBarMinimizeBehavior;
 };
+export type SheetAppearance = {
+    androidFullScreenTopInset?: number;
+    backgroundColor?: ColorValue;
+    cornerRadius?: number;
+};
 export interface NavigationAppearance {
     tabBar?: {
         backgroundColor?: ColorValue;
@@ -99,5 +107,6 @@ export interface NavigationAppearance {
     };
     screen?: StyleProp<ViewStyle>;
     header?: ScreenStackHeaderConfigProps;
+    sheet?: SheetAppearance;
 }
 //# sourceMappingURL=types.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sigmela/router",
-  "version": "0.0.17",
+  "version": "0.1.2",
   "description": "React Native Router",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -44,9 +44,13 @@
     "release": "release-it --only-version"
   },
   "keywords": [
-    "react-native",
-    "ios",
-    "android"
+    "React Native Router",
+    "react-native-navigation",
+    "react-native-router",
+    "react-native-navigation",
+    "react-native-screens",
+    "react-native-bottom-tabs",
+    "react-native-bottom-sheet"
   ],
   "repository": {
     "type": "git",
@@ -71,6 +75,7 @@
     "@react-native/babel-preset": "0.81.1",
     "@react-native/eslint-config": "^0.81.1",
     "@release-it/conventional-changelog": "^10.0.1",
+    "@sigmela/native-sheet": "^0.0.1",
     "@types/jest": "^29.5.14",
     "@types/react": "^19.1.12",
     "commitlint": "^19.8.1",
@@ -88,6 +93,7 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
+    "@sigmela/native-sheet": ">=0.0.1",
     "react": "*",
     "react-native": "*",
     "react-native-screens": ">=4.16.0"