@sigmela/router 0.2.7 → 0.2.8

package/README.md

@@ -152,6 +152,47 @@ Key methods:
 - `addSheet(pathPattern, componentOrStack, options?)` (shorthand for `stackPresentation: 'sheet'`)
 - `addStack(prefixOrStack, maybeStack?)` — compose nested stacks under a prefix
 
+#### Provider Context
+
+You can wrap an entire stack with a React context provider by passing a `provider` option:
+
+```tsx
+import { ThemeProvider } from './theme';
+
+const stack = new NavigationStack({
+  header: { largeTitle: true },
+  provider: ThemeProvider,
+})
+  .addScreen('/feed', FeedScreen)
+  .addScreen('/feed/:id', FeedItemScreen);
+```
+
+The `provider` component wraps the entire stack renderer, making the context available to all screens in the stack. This is useful for:
+- **Theme providers**: Apply theme context to all screens
+- **Auth providers**: Share authentication state across screens
+- **Localization**: Provide i18n context to the entire stack
+
+**Composing multiple providers:**
+
+If you need multiple providers, create a composed component:
+
+```tsx
+const ComposedProvider = ({ children }) => (
+  <ThemeProvider>
+    <AuthProvider>
+      <I18nProvider>
+        {children}
+      </I18nProvider>
+    </AuthProvider>
+  </ThemeProvider>
+);
+
+const stack = new NavigationStack({ provider: ComposedProvider })
+  .addScreen('/', HomeScreen);
+```
+
+**Important:** The provider should be a stable reference (not an inline arrow function) to avoid unnecessary re-renders.
+
 ### Modal Stacks (Stack in Stack)
 
 You can pass an entire `NavigationStack` to `addModal()` or `addSheet()` to create a multi-screen flow inside a modal:

package/lib/module/NavigationStack.js

@@ -14,10 +14,12 @@ export class NavigationStack {
       this.stackId = idOrOptions ?? `stack-${nanoid()}`;
       this.defaultOptions = maybeOptions;
       this.debugEnabled = maybeDebug ?? false;
+      this.provider = maybeOptions?.provider;
     } else {
       this.stackId = `stack-${nanoid()}`;
       this.defaultOptions = idOrOptions;
       this.debugEnabled = false;
+      this.provider = idOrOptions?.provider;
     }
   }
   log(message, data) {
@@ -135,11 +137,16 @@ export class NavigationStack {
     // eslint-disable-next-line consistent-this
     const stackInstance = this;
     const stackId = stackInstance.getId();
+    const provider = this.provider;
     return function NavigationStackRenderer(props) {
-      return /*#__PURE__*/React.createElement(StackRenderer, {
+      const stackElement = /*#__PURE__*/React.createElement(StackRenderer, {
         stackId: stackId,
         appearance: props.appearance
       });
+      if (provider) {
+        return /*#__PURE__*/React.createElement(provider, null, stackElement);
+      }
+      return stackElement;
     };
   }
   seed() {

package/lib/module/styles.css

@@ -72,38 +72,24 @@
 
 /* Overlay on enter — fade in via transition */
 .screen-stack-item.modal.transition-entering > .stack-modal-overlay,
-.screen-stack-item.modal.phase-active.transition-preEnter > .stack-modal-overlay,
 .screen-stack-item.modal-right.transition-entering > .stack-modal-overlay,
-.screen-stack-item.modal-right.phase-active.transition-preEnter > .stack-modal-overlay,
 .screen-stack-item.contained-modal.transition-entering > .stack-modal-overlay,
-.screen-stack-item.contained-modal.phase-active.transition-preEnter > .stack-modal-overlay,
 .screen-stack-item.fullscreen-modal.transition-entering > .stack-modal-overlay,
-.screen-stack-item.fullscreen-modal.phase-active.transition-preEnter > .stack-modal-overlay,
 .screen-stack-item.formsheet.transition-entering > .stack-modal-overlay,
-.screen-stack-item.formsheet.phase-active.transition-preEnter > .stack-modal-overlay,
 .screen-stack-item.pagesheet.transition-entering > .stack-modal-overlay,
-.screen-stack-item.pagesheet.phase-active.transition-preEnter > .stack-modal-overlay,
-.screen-stack-item.sheet.transition-entering > .stack-modal-overlay,
-.screen-stack-item.sheet.phase-active.transition-preEnter > .stack-modal-overlay {
+.screen-stack-item.sheet.transition-entering > .stack-modal-overlay {
   background: rgba(0, 0, 0, 0.5);
   pointer-events: none;
   opacity: 0.5;
 }
 
 /* For modal-like in active / entered states — fully visible */
-.screen-stack-item.modal.phase-active > .stack-modal-overlay,
 .screen-stack-item.modal.transition-entered > .stack-modal-overlay,
-.screen-stack-item.modal-right.phase-active > .stack-modal-overlay,
 .screen-stack-item.modal-right.transition-entered > .stack-modal-overlay,
-.screen-stack-item.contained-modal.phase-active > .stack-modal-overlay,
 .screen-stack-item.contained-modal.transition-entered > .stack-modal-overlay,
-.screen-stack-item.fullscreen-modal.phase-active > .stack-modal-overlay,
 .screen-stack-item.fullscreen-modal.transition-entered > .stack-modal-overlay,
-.screen-stack-item.formsheet.phase-active > .stack-modal-overlay,
 .screen-stack-item.formsheet.transition-entered > .stack-modal-overlay,
-.screen-stack-item.pagesheet.phase-active > .stack-modal-overlay,
 .screen-stack-item.pagesheet.transition-entered > .stack-modal-overlay,
-.screen-stack-item.sheet.phase-active > .stack-modal-overlay,
 .screen-stack-item.sheet.transition-entered > .stack-modal-overlay {
   opacity: 0.5;
   background: rgba(0, 0, 0, 0.5);

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

@@ -1,4 +1,4 @@
-import type { ScreenOptions } from './types';
+import type { ScreenOptions, NavigationStackOptions } from './types';
 import React from 'react';
 import { type MixedComponent } from './createController';
 import type { NavigationNode, NodeRoute, NodeChild } from './navigationNode';
@@ -10,11 +10,12 @@ export declare class NavigationStack implements NavigationNode {
     private readonly children;
     private readonly defaultOptions;
     private readonly debugEnabled;
+    private readonly provider;
     constructor();
     constructor(id: string);
-    constructor(defaultOptions: ScreenOptions);
-    constructor(id: string, defaultOptions: ScreenOptions);
-    constructor(id: string, defaultOptions: ScreenOptions, debug: boolean);
+    constructor(defaultOptions: NavigationStackOptions);
+    constructor(id: string, defaultOptions: NavigationStackOptions);
+    constructor(id: string, defaultOptions: NavigationStackOptions, debug: boolean);
     private log;
     getId(): string;
     addScreen(pathPattern: string, mixedComponent: MixedComponent | NavigationNode, options?: ScreenOptions): NavigationStack;

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

@@ -43,6 +43,15 @@ export type ScreenOptions = Partial<Omit<RNSScreenProps, 'stackPresentation'>> &
      */
     maxWidth?: number;
 };
+export type NavigationStackOptions = ScreenOptions & {
+    /**
+     * Optional React component to wrap the entire stack renderer.
+     * Useful for providing context (theme, auth, etc.) to all screens in the stack.
+     */
+    provider?: React.ComponentType<{
+        children: React.ReactNode;
+    }>;
+};
 export type HistoryItem = {
     key: string;
     routeId: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sigmela/router",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "React Native Router",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",