@idealyst/navigation 1.1.6 → 1.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/navigation",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "description": "Cross-platform navigation library for React and React Native",
   "readme": "README.md",
   "main": "src/index.ts",
@@ -43,8 +43,8 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/components": "^1.1.6",
-    "@idealyst/theme": "^1.1.6",
+    "@idealyst/components": "^1.1.7",
+    "@idealyst/theme": "^1.1.7",
     "@react-navigation/bottom-tabs": ">=7.0.0",
     "@react-navigation/drawer": ">=7.0.0",
     "@react-navigation/native": ">=7.0.0",
@@ -60,10 +60,10 @@
     "react-router-dom": ">=6.0.0"
   },
   "devDependencies": {
-    "@idealyst/components": "^1.1.6",
+    "@idealyst/components": "^1.1.7",
     "@idealyst/datagrid": "^1.0.93",
     "@idealyst/datepicker": "^1.0.93",
-    "@idealyst/theme": "^1.1.6",
+    "@idealyst/theme": "^1.1.7",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "react": "^19.1.0",

package/src/context/NavigatorContext.native.tsx

@@ -89,6 +89,29 @@ function hasNotFoundComponent(route: NavigatorParam): boolean {
     return false;
 }
 
+/**
+ * Normalize a path and substitute variables
+ */
+function normalizePath(path: string, vars?: Record<string, string>): string {
+    let normalizedPath = path;
+
+    // Convert empty string to '/'
+    if (normalizedPath === '' || normalizedPath === '/') {
+        normalizedPath = '/';
+    } else if (!normalizedPath.startsWith('/')) {
+        normalizedPath = `/${normalizedPath}`;
+    }
+
+    // Substitute variables in the path if provided
+    if (vars) {
+        Object.entries(vars).forEach(([key, value]) => {
+            normalizedPath = normalizedPath.replace(`:${key}`, value);
+        });
+    }
+
+    return normalizedPath;
+}
+
 // Utility function to parse path with parameters and find matching route
 const parseParameterizedPath = (path: string, rootRoute: any): { routeName: string, params: Record<string, string> } | null => {
     // Handle absolute paths like /event/123
@@ -166,14 +189,17 @@ const UnwrappedNavigatorProvider = ({ route }: NavigatorProviderProps) => {
             return;
         }
 
+        // Normalize path and substitute variables (e.g., /visit/:id with vars { id: "123" } becomes /visit/123)
+        const normalizedPath = normalizePath(params.path, params.vars);
+
         // Parse parameterized path for mobile
-        const parsed = parseParameterizedPath(params.path, route);
+        const parsed = parseParameterizedPath(normalizedPath, route);
 
         if (!parsed) {
             // Invalid route - try to find a handler
-            const handler = findInvalidRouteHandler(route, params.path);
+            const handler = findInvalidRouteHandler(route, normalizedPath);
             if (handler) {
-                const redirectParams = handler(params.path);
+                const redirectParams = handler(normalizedPath);
                 if (redirectParams) {
                     // Handler returned NavigateParams - redirect
                     return navigate(
@@ -187,14 +213,13 @@ const UnwrappedNavigatorProvider = ({ route }: NavigatorProviderProps) => {
             // Navigate to 404 screen if configured
             if (route.notFoundComponent) {
                 navigation.navigate(NOT_FOUND_SCREEN_NAME as never, {
-                    path: params.path,
-                    params: params.vars
+                    path: normalizedPath,
                 } as never);
                 return;
             }
 
             // No handler and no 404 screen - log warning
-            console.warn(`Navigation: Invalid route "${params.path}" and no handler or notFoundComponent configured.`);
+            console.warn(`Navigation: Invalid route "${normalizedPath}" and no handler or notFoundComponent configured.`);
             return;
         }
 
@@ -245,7 +270,7 @@ const UnwrappedNavigatorProvider = ({ route }: NavigatorProviderProps) => {
 
 const NavigatorProvider = ({ route }: NavigatorProviderProps) => {
     const {rt} = useUnistyles()
-    
+
     const isDarkMode = rt.themeName === 'dark';
 
     return (
@@ -264,14 +289,17 @@ const DrawerNavigatorProvider = ({ navigation, route, children }: { navigation:
             return;
         }
 
+        // Normalize path and substitute variables (e.g., /visit/:id with vars { id: "123" } becomes /visit/123)
+        const normalizedPath = normalizePath(params.path, params.vars);
+
         // Parse parameterized path for mobile
-        const parsed = parseParameterizedPath(params.path, route);
+        const parsed = parseParameterizedPath(normalizedPath, route);
 
         if (!parsed) {
             // Invalid route - try to find a handler
-            const handler = findInvalidRouteHandler(route, params.path);
+            const handler = findInvalidRouteHandler(route, normalizedPath);
             if (handler) {
-                const redirectParams = handler(params.path);
+                const redirectParams = handler(normalizedPath);
                 if (redirectParams) {
                     // Handler returned NavigateParams - redirect
                     return navigate(
@@ -285,14 +313,13 @@ const DrawerNavigatorProvider = ({ navigation, route, children }: { navigation:
             // Navigate to 404 screen if configured
             if (route.notFoundComponent) {
                 navigation.navigate(NOT_FOUND_SCREEN_NAME as never, {
-                    path: params.path,
-                    params: params.vars
+                    path: normalizedPath,
                 } as never);
                 return;
             }
 
             // No handler and no 404 screen - log warning
-            console.warn(`Navigation: Invalid route "${params.path}" and no handler or notFoundComponent configured.`);
+            console.warn(`Navigation: Invalid route "${normalizedPath}" and no handler or notFoundComponent configured.`);
             return;
         }
 

package/src/routing/router.native.tsx

@@ -213,24 +213,64 @@ const buildScreen = (params: RouteParam, Navigator: TypedNavigator, parentPath =
         component = buildNavigator(params, fullPath);
     }
 
-    // Build screen options, adding fullScreen presentation if specified
-    let screenOptions = params.options;
-    if (params.type === 'screen' && params.options?.fullScreen) {
-        screenOptions = {
-            ...params.options,
-            // Use fullScreenModal presentation to bypass parent navigator chrome
-            presentation: 'fullScreenModal',
-            // Hide header for true fullScreen experience
-            headerShown: params.options.headerShown ?? false,
-        } as ScreenOptions;
-    }
+    // Build screen options
+    // React Navigation expects headerLeft/headerRight to be functions returning elements
+    const buildScreenOptions = (navProps: any) => {
+        let options = params.options || {};
+
+        // Handle fullScreen presentation
+        if (params.type === 'screen' && options?.fullScreen) {
+            options = {
+                ...options,
+                presentation: 'fullScreenModal',
+                headerShown: options.headerShown ?? false,
+            };
+        }
+
+        // Wrap headerLeft if it's a component
+        if (options.headerLeft) {
+            const HeaderLeftContent = options.headerLeft as React.ComponentType<any>;
+            options = {
+                ...options,
+                headerLeft: () => (
+                    <HeaderWrapper
+                        content={HeaderLeftContent}
+                        route={params as NavigatorParam}
+                        navigation={navProps.navigation}
+                    />
+                ),
+            };
+        }
+
+        // Wrap headerRight if it's a component
+        if (options.headerRight) {
+            const HeaderRightContent = options.headerRight as React.ComponentType<any>;
+            options = {
+                ...options,
+                headerRight: () => (
+                    <HeaderWrapper
+                        content={HeaderRightContent}
+                        route={params as NavigatorParam}
+                        navigation={navProps.navigation}
+                    />
+                ),
+            };
+        }
+
+        return options;
+    };
+
+    // Use function form of options to access navigation props for header wrappers
+    const screenOptions = (params.options?.headerLeft || params.options?.headerRight)
+        ? buildScreenOptions
+        : params.options;
 
     return (
         <Navigator.Screen
             key={`${fullPath}-${index}`}
             name={fullPath}
             component={component}
-            options={screenOptions}
+            options={screenOptions as any}
         />
     )
 }