@sigmela/router 0.2.6 → 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/ScreenStack/ScreenStack.web.js

@@ -466,6 +466,9 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
       children: /*#__PURE__*/_jsx("div", {
         ref: containerRef,
         className: containerClassName + (animating ? ' animating' : ''),
+        style: {
+          '--stack-transition-time': `${transitionTime}ms`
+        },
         children: keysToRender.map(key => {
           const transitionState = stateMap.get(key);
           if (!transitionState || !transitionState.isMounted) {

package/lib/module/styles.css

@@ -17,8 +17,10 @@
 
   /* Base transition for opening screen */
   transition:
-    transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1),
-    filter 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
+    transform var(--stack-transition-time, 300ms)
+      cubic-bezier(0.22, 0.61, 0.36, 1),
+    filter var(--stack-transition-time, 300ms)
+      cubic-bezier(0.22, 0.61, 0.36, 1);
 }
 
 /* Inner container for regular screen */
@@ -43,6 +45,8 @@
   pointer-events: none;
   z-index: 1;
   will-change: opacity;
+  transition: opacity var(--stack-transition-time, 300ms)
+    cubic-bezier(0.22, 0.61, 0.36, 1);
 }
 
 /* Show overlay only for modal-like presentations.
@@ -53,26 +57,6 @@
   display: none;
 }
 
-/* Keyframes for overlay appearance */
-@keyframes modal-overlay-enter {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 0.5;
-  }
-}
-
-/* Keyframes for overlay disappearance */
-@keyframes modal-overlay-exit {
-  from {
-    opacity: 0.5;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
 /* Overlay in initial state — transparent */
 .screen-stack-item.modal.transition-preEnter > .stack-modal-overlay,
 .screen-stack-item.modal-right.transition-preEnter > .stack-modal-overlay,
@@ -86,47 +70,33 @@
   pointer-events: none;
 }
 
-/* Overlay on enter — start animation */
+/* 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;
-  animation: modal-overlay-enter 300ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
+  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);
   pointer-events: auto;
 }
 
-/* Overlay on modal-like close — disappearance animation */
+/* Overlay on modal-like close — fade out via transition */
 .screen-stack-item.modal.phase-exiting > .stack-modal-overlay,
 .screen-stack-item.modal.transition-exiting > .stack-modal-overlay,
 .screen-stack-item.modal-right.phase-exiting > .stack-modal-overlay,
@@ -143,7 +113,7 @@
 .screen-stack-item.sheet.transition-exiting > .stack-modal-overlay {
   background: rgba(0, 0, 0, 0.5);
   pointer-events: none;
-  animation: modal-overlay-exit 300ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
+  opacity: 0;
 }
 
 /* Overlay for transparent-modal — transparent */

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.6",
+  "version": "0.2.8",
   "description": "React Native Router",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",