one 1.2.57 → 1.2.59

package/src/layouts/withLayoutContext.tsx

@@ -1,9 +1,11 @@
 import type { EventMapBase, NavigationState } from '@react-navigation/native'
 import React from 'react'
 import { useContextKey } from '../router/Route'
+import { registerProtectedRoutes, unregisterProtectedRoutes } from '../router/router'
 import { type ScreenProps, useSortedScreens } from '../router/useScreens'
 import type { PickPartial } from '../types'
 import { withStaticProperties } from '../utils/withStaticProperties'
+import { isProtectedElement } from '../views/Protected'
 import { Screen } from '../views/Screen'
 
 export function useFilterScreenChildren(
@@ -19,9 +21,16 @@ export function useFilterScreenChildren(
 ) {
   return React.useMemo(() => {
     const customChildren: any[] = []
+    const screens: any[] = []
+    const protectedScreens = new Set<string>()
 
-    const screens = React.Children.map(children, (child) => {
-      if (React.isValidElement(child) && child && child.type === Screen) {
+    /**
+     * Recursively process children, handling Protected elements.
+     * When exclude is true, all Screen children are added to protectedScreens instead of screens.
+     */
+    function flattenChild(child: React.ReactNode, exclude = false) {
+      // Handle Screen elements
+      if (React.isValidElement(child) && child.type === Screen) {
         if (
           typeof child.props === 'object' &&
           child.props &&
@@ -44,24 +53,42 @@ export function useFilterScreenChildren(
             )
           }
         }
-        return child.props as ScreenProps
+
+        const screenProps = child.props as ScreenProps
+        if (exclude && screenProps.name) {
+          protectedScreens.add(screenProps.name)
+        } else {
+          screens.push(screenProps)
+        }
+        return
+      }
+
+      // Handle Protected elements - recursively process children with guard logic
+      if (isProtectedElement(child)) {
+        // Key logic: exclude if parent excluded OR guard is false
+        const excludeChildren = exclude || !child.props.guard
+        React.Children.forEach(child.props.children, (nested) => {
+          flattenChild(nested, excludeChildren)
+        })
+        return
       }
 
+      // Handle other children (custom components in custom Navigator)
       if (isCustomNavigator) {
         customChildren.push(child)
-      } else {
+      } else if (child != null) {
         console.warn(
           `Layout children must be of type Screen, all other children are ignored. To use custom children, create a custom <Layout />. Update Layout Route at: "app${contextKey}/_layout"`
         )
       }
+    }
 
-      return null
-    })?.filter(Boolean)
+    React.Children.forEach(children, (child) => flattenChild(child))
 
     // Add an assertion for development
     if (process.env.NODE_ENV !== 'production') {
       // Assert if names are not unique
-      const names = screens?.map((screen) => screen.name)
+      const names = screens.map((screen) => screen.name)
       if (names && new Set(names).size !== names.length) {
         throw new Error('Screen names must be unique: ' + names)
       }
@@ -70,6 +97,7 @@ export function useFilterScreenChildren(
     return {
       screens,
       children: customChildren,
+      protectedScreens,
     }
   }, [children, contextKey, isCustomNavigator])
 }
@@ -92,13 +120,25 @@ export function withLayoutContext<
       (propsIn, ref) => {
         const { children, ...props } = propsIn as React.ComponentProps<T>
         const contextKey = useContextKey()
-        const { screens } = useFilterScreenChildren(children, {
+        const { screens, protectedScreens } = useFilterScreenChildren(children, {
           contextKey,
         })
 
+        // Register protected routes globally so linkTo can block navigation to them
+        // Register immediately (not just in effect) to catch navigation attempts during first render
+        registerProtectedRoutes(contextKey, protectedScreens)
+
+        React.useEffect(() => {
+          registerProtectedRoutes(contextKey, protectedScreens)
+          return () => {
+            unregisterProtectedRoutes(contextKey)
+          }
+        }, [contextKey, protectedScreens])
+
         const processed = processor ? processor(screens ?? ([] as any)) : screens
         const sorted = useSortedScreens((processed ?? []) as any, {
           onlyMatching: true,
+          protectedScreens,
         })
 
         // Prevent throwing an error when there are no screens.

package/src/link/Link.tsx

@@ -25,6 +25,7 @@ export const Link = React.forwardRef(function Link(
     replace,
     push,
     id,
+    mask,
     // TODO: This does not prevent default on the anchor tag.
     asChild,
     rel,
@@ -47,7 +48,11 @@ export const Link = React.forwardRef(function Link(
     return resolveHref(href)
   }, [href])
 
-  const props = useLinkTo({ href: resolvedHref, replace })
+  const resolvedMask = React.useMemo(() => {
+    return mask ? resolveHref(mask) : undefined
+  }, [mask])
+
+  const props = useLinkTo({ href: resolvedHref, replace, mask: resolvedMask })
 
   const onPress = (
     e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
@@ -67,7 +72,7 @@ export const Link = React.forwardRef(function Link(
       {...props}
       {...hrefAttrs}
       {...rest}
-      nativeID={id}
+      {...(process.env.TAMAGUI_TARGET === 'web' ? { id } : { nativeID: id })}
       style={asChild ? null : style}
       {...Platform.select({
         web: {

package/src/link/useLinkTo.tsx

@@ -29,7 +29,7 @@ function eventShouldPreventDefault(
   return false
 }
 
-export function useLinkTo(props: { href: string; replace?: boolean }) {
+export function useLinkTo(props: { href: string; replace?: boolean; mask?: string }) {
   const { linkTo } = useOneRouter()
 
   const onPress = (
@@ -46,13 +46,17 @@ export function useLinkTo(props: { href: string; replace?: boolean }) {
     }
 
     if (shouldHandle) {
-      linkTo(props.href, event)
+      const options = props.mask ? { mask: { href: props.mask } } : undefined
+      linkTo(props.href, event, options)
     }
   }
 
+  // For the displayed href, use the mask if provided (shows clean URL in status bar on hover)
+  const displayHref = props.mask || props.href
+
   return {
     // Ensure there's always a value for href. Manually append the baseUrl to the href prop that shows in the static HTML.
-    href: appendBaseUrl(stripGroupSegmentsFromPath(props.href) || '/'),
+    href: appendBaseUrl(stripGroupSegmentsFromPath(displayHref) || '/'),
     role: 'link' as const,
     onPress,
   }

package/src/router/Route.tsx

@@ -1,6 +1,8 @@
 import React, { createContext, type ReactNode, useContext } from 'react'
 import type { ErrorBoundaryProps } from '../views/Try'
+import type { LoaderProps } from '../types'
 import type { One } from '../vite/types'
+import type { ParamValidator, RouteValidationFn } from '../validateParams'
 import { getContextKey } from './matchers'
 import { RouteInfoContextProvider } from './RouteInfoContext'
 
@@ -18,9 +20,36 @@ export type LoadedRoute = {
   generateStaticParams?: (props: {
     params?: Record<string, string | string[]>
   }) => Record<string, string | string[]>[]
-  loader?: (props: {
-    params?: Record<string, string | string[]>
-  }) => Record<string, string | string[]>[]
+  loader?: (props: LoaderProps) => Record<string, string | string[]>[]
+  /**
+   * Validate route params before navigation.
+   * Use with Zod, Valibot, or a custom function.
+   *
+   * @example
+   * ```ts
+   * import { z } from 'zod'
+   * export const validateParams = z.object({
+   *   id: z.string().uuid()
+   * })
+   * ```
+   */
+  validateParams?: ParamValidator
+  /**
+   * Async route validation function.
+   * Runs before navigation to validate the route is accessible.
+   *
+   * @example
+   * ```ts
+   * export async function validateRoute({ params }) {
+   *   const exists = await checkResourceExists(params.id)
+   *   if (!exists) {
+   *     return { valid: false, error: 'Resource not found' }
+   *   }
+   *   return { valid: true }
+   * }
+   * ```
+   */
+  validateRoute?: RouteValidationFn
 }
 
 export type RouteNode = {

package/src/router/findRouteNode.ts

@@ -0,0 +1,127 @@
+import type { RouteNode } from './Route'
+
+/**
+ * Find a RouteNode from the route tree based on the navigation state.
+ * Walks through the state's routes recursively to find the deepest matching route.
+ */
+export function findRouteNodeFromState(
+  state: { routes: Array<{ name: string; state?: any }> } | undefined,
+  rootNode: RouteNode | null
+): RouteNode | null {
+  if (!state || !rootNode) {
+    return null
+  }
+
+  // Get the current route from state (the active one based on index)
+  const currentRoute = state.routes[state.routes.length - 1]
+  if (!currentRoute) {
+    return null
+  }
+
+  // Find the matching child node
+  const matchingNode = findNodeByRouteName(rootNode, currentRoute.name)
+  if (!matchingNode) {
+    return null
+  }
+
+  // If there's a nested state, continue recursively
+  if (currentRoute.state && currentRoute.state.routes) {
+    const nestedResult = findRouteNodeFromState(currentRoute.state, matchingNode)
+    if (nestedResult) {
+      return nestedResult
+    }
+  }
+
+  return matchingNode
+}
+
+/**
+ * Find a node by its route name in the tree.
+ * Searches children recursively.
+ */
+function findNodeByRouteName(node: RouteNode, routeName: string): RouteNode | null {
+  // Check if this node matches
+  if (node.route === routeName) {
+    return node
+  }
+
+  // Search children
+  for (const child of node.children) {
+    const found = findNodeByRouteName(child, routeName)
+    if (found) {
+      return found
+    }
+  }
+
+  return null
+}
+
+/**
+ * Extract params from navigation state.
+ * Collects params from all routes in the state hierarchy.
+ */
+export function extractParamsFromState(
+  state:
+    | { routes: Array<{ name: string; params?: Record<string, any>; state?: any }> }
+    | undefined
+): Record<string, string | string[]> {
+  if (!state) {
+    return {}
+  }
+
+  const params: Record<string, string | string[]> = {}
+
+  // Collect params from all routes in the state
+  for (const route of state.routes) {
+    if (route.params) {
+      Object.assign(params, route.params)
+    }
+    // Recurse into nested state
+    if (route.state) {
+      Object.assign(params, extractParamsFromState(route.state))
+    }
+  }
+
+  return params
+}
+
+/**
+ * Extract search params from href string.
+ */
+export function extractSearchFromHref(href: string): Record<string, string | string[]> {
+  const searchIndex = href.indexOf('?')
+  if (searchIndex === -1) {
+    return {}
+  }
+
+  const searchString = href.slice(searchIndex + 1)
+  const params: Record<string, string | string[]> = {}
+  const searchParams = new URLSearchParams(searchString)
+
+  searchParams.forEach((value, key) => {
+    const existing = params[key]
+    if (existing === undefined) {
+      params[key] = value
+    } else if (Array.isArray(existing)) {
+      existing.push(value)
+    } else {
+      params[key] = [existing, value]
+    }
+  })
+
+  return params
+}
+
+/**
+ * Extract pathname from href string.
+ */
+export function extractPathnameFromHref(href: string): string {
+  const searchIndex = href.indexOf('?')
+  const hashIndex = href.indexOf('#')
+
+  let endIndex = href.length
+  if (searchIndex !== -1) endIndex = Math.min(endIndex, searchIndex)
+  if (hashIndex !== -1) endIndex = Math.min(endIndex, hashIndex)
+
+  return href.slice(0, endIndex)
+}