one 1.26.0 → 2.0.0-beta.33.1

package/src/headless/types.ts

@@ -1,5 +1,4 @@
 import type { ComponentType, ReactElement, ReactNode } from 'react'
-import type { StackToolbarConfig } from '../layouts/stack-utils/StackToolbar.types'
 
 // shared contract for headless web navigators. see plans/headless-navigators.md
 
@@ -11,7 +10,7 @@ export type ScreenEntry = {
   isFocused: boolean
   keepMounted: boolean
   // compiled options: semantic keys plus opaque passthrough of preset keys
-  options: Record<string, any> & { toolbar?: StackToolbarConfig }
+  options: Record<string, any>
   // lazy: rendering it mounts the route (descriptor.render underneath)
   element: ReactElement
 }

package/src/headless/useStack.ts

@@ -13,7 +13,6 @@ import {
 
 import type { UseStackResult } from './types'
 import { getPathFromState } from '../fork/getPathFromState'
-import { exposeStackToolbarConfig } from '../layouts/stack-utils/StackToolbar.shared'
 import { getResolvedLinking } from '../router/linkingConfig'
 
 export type HeadlessStackDescriptors = Record<
@@ -40,7 +39,7 @@ export function StackStateProvider({
   const value = useMemo<UseStackResult>(() => {
     const screens = state.routes.map((route, index) => {
       const descriptor = descriptors[route.key]!
-      const options = exposeStackToolbarConfig(descriptor.options)
+      const options = descriptor.options
       const href = (linking?.getPathFromState ?? getPathFromState)(
         { ...state, index },
         linking?.config

package/src/index.ts

@@ -105,18 +105,6 @@ export type {
   StackHeaderTitleProps,
   StackScreenOptions,
   StackScreenProps,
-  StackToolbarBadgeProps,
-  StackToolbarButtonProps,
-  StackToolbarConfig,
-  StackToolbarIconProps,
-  StackToolbarLabelProps,
-  StackToolbarMenuActionProps,
-  StackToolbarMenuProps,
-  StackToolbarPlacement,
-  StackToolbarProps,
-  StackToolbarSearchBarSlotProps,
-  StackToolbarSpacerProps,
-  StackToolbarViewProps,
 } from './layouts/stack-utils'
 export { useTabs } from './headless/useTabs'
 export { useDrawer } from './headless/useDrawer'

package/src/interfaces/router.ts

@@ -1,6 +1,7 @@
 import type {
   NavigationContainerRefWithCurrent,
   NavigationState,
+  ParamListBase,
   PartialState,
 } from '@react-navigation/core'
 import type { JSX, ReactNode } from 'react'
@@ -54,8 +55,7 @@ export namespace OneRouter {
     ? __routes['DynamicRouteTemplate']
     : string
 
-  export type NavigationRef =
-    NavigationContainerRefWithCurrent<ReactNavigation.RootParamList>
+  export type NavigationRef = NavigationContainerRefWithCurrent<ParamListBase>
 
   export type RelativePathString = `./${string}` | `../${string}` | '..'
   export type AbsoluteRoute = DynamicRouteTemplate | StaticRoutes

package/src/layouts/Drawer.tsx

@@ -21,10 +21,12 @@ const DrawerWithRender = React.forwardRef<unknown, ComponentProps<typeof RNDrawe
   (props, ref) => <RNDrawer {...(props as any)} ref={ref} />
 )
 
+type DrawerType = ReturnType<typeof withLayoutContext>
+
 // Preserve withLayoutContext's static Screen so user code like
 // `<Drawer.Screen ... />` keeps working through the render wrapper.
-export const Drawer = Object.assign(DrawerWithRender, {
+export const Drawer: DrawerType = Object.assign(DrawerWithRender, {
   Screen: RNDrawer.Screen,
-})
+}) as DrawerType
 
 export default Drawer

package/src/layouts/Stack.tsx

@@ -14,14 +14,9 @@ import {
   StackHeaderComponent,
   StackHeaderSearchBar,
   StackScreen,
-  StackToolbar,
   type StackScreenProps,
 } from './stack-utils'
 import { withLayoutContext } from './withLayoutContext'
-import {
-  getStackToolbarImplementation,
-  type StackToolbarImplementation,
-} from './stack-utils/StackToolbarImplementation'
 
 const NativeStackNavigator = createStackNavigator().Navigator
 
@@ -36,19 +31,12 @@ const RNStack = withLayoutContext<
  * Pre-process children to convert StackScreen (with Header children) to Screen (with options).
  * This allows the Header Composition API to work in layout files.
  */
-function mapChildren(
-  children: React.ReactNode,
-  toolbarImplementation: StackToolbarImplementation | null
-): React.ReactNode {
+function mapChildren(children: React.ReactNode): React.ReactNode {
   return Children.toArray(children)
     .map((child, index) => {
       if (isChildOfType(child, StackScreen)) {
         // convert StackScreen to Screen with options extracted from Header children
-        const options = appendScreenStackPropsToOptions(
-          {},
-          child.props,
-          toolbarImplementation
-        )
+        const options = appendScreenStackPropsToOptions({}, child.props)
         const { children: _, ...rest } = child.props
         return <Screen key={child.props.name ?? index} {...rest} options={options} />
       }
@@ -58,7 +46,7 @@ function mapChildren(
         return React.cloneElement(
           child,
           { key: `protected-${index}` },
-          mapChildren(child.props.children, toolbarImplementation)
+          mapChildren(child.props.children)
         )
       }
 
@@ -83,8 +71,6 @@ function mapChildren(
 const StackWithComposition = React.forwardRef<unknown, ComponentProps<typeof RNStack>>(
   (props, ref) => {
     const { children, screenOptions, ...rest } = props
-    const toolbarImplementation = getStackToolbarImplementation()
-
     // extract Stack.Header from children for screenOptions
     const screenOptionsWithHeader = useMemo(() => {
       const stackHeader = Children.toArray(children).find((child) =>
@@ -97,30 +83,19 @@ const StackWithComposition = React.forwardRef<unknown, ComponentProps<typeof RNS
           if (typeof screenOptions === 'function') {
             return (...args: Parameters<typeof screenOptions>) => {
               const opts = screenOptions(...args)
-              return appendScreenStackPropsToOptions(
-                opts,
-                headerProps,
-                toolbarImplementation
-              )
+              return appendScreenStackPropsToOptions(opts, headerProps)
             }
           }
-          return appendScreenStackPropsToOptions(
-            screenOptions,
-            headerProps,
-            toolbarImplementation
-          )
+          return appendScreenStackPropsToOptions(screenOptions, headerProps)
         }
-        return appendScreenStackPropsToOptions({}, headerProps, toolbarImplementation)
+        return appendScreenStackPropsToOptions({}, headerProps)
       }
 
       return screenOptions
-    }, [children, screenOptions, toolbarImplementation])
+    }, [children, screenOptions])
 
     // pre-process children to convert StackScreen to Screen
-    const processedChildren = useMemo(
-      () => mapChildren(children, toolbarImplementation),
-      [children, toolbarImplementation]
-    )
+    const processedChildren = useMemo(() => mapChildren(children), [children])
     const navigatorProps = useMemo(() => getStackNavigatorProps(children), [children])
 
     return (
@@ -138,12 +113,18 @@ const StackWithComposition = React.forwardRef<unknown, ComponentProps<typeof RNS
   }
 )
 
-export const Stack = Object.assign(StackWithComposition, {
+type StackType = ReturnType<typeof withLayoutContext> & {
+  Screen: typeof StackScreen
+  Header: typeof StackHeader
+  Protected: typeof Protected
+  SearchBar: typeof StackHeaderSearchBar
+}
+
+export const Stack: StackType = Object.assign(StackWithComposition, {
   Screen: StackScreen,
   Header: StackHeader,
   Protected,
   SearchBar: StackHeaderSearchBar,
-  Toolbar: StackToolbar,
-})
+}) as StackType
 
 export default Stack

package/src/layouts/Tabs.tsx

@@ -1,103 +1,28 @@
 import {
-  BottomTabBar,
-  type BottomTabBarProps,
   type BottomTabNavigationEventMap,
   type BottomTabNavigationOptions,
   createBottomTabNavigator,
 } from '@react-navigation/bottom-tabs'
 import type { ParamListBase, TabNavigationState } from '@react-navigation/native'
-import React, { useMemo, type ComponentProps } from 'react'
-import { Platform, Pressable } from 'react-native'
 
-import type { OneRouter } from '../interfaces/router'
-import { Link } from '../link/Link'
 import { Protected } from '../views/Protected'
+import { processNativeTabsScreens } from './nativeTabsOptions'
 import { withLayoutContext } from './withLayoutContext'
 
-const DefaultTabBar = ({ state, ...restProps }: BottomTabBarProps) => {
-  /**
-   * With React Navigation v7, special routes such as +not-found and _sitemap
-   * are being added to `state.routes`, but we don't want them to be shown in
-   * the tab bar.
-   */
-  const filteredRoutes = state.routes.filter(
-    (r) => r.name !== '+not-found' && !r.name.startsWith('_sitemap')
-  )
-
-  return (
-    <BottomTabBar
-      state={{
-        ...state,
-        routes: filteredRoutes,
-      }}
-      {...restProps}
-    />
-  )
-}
-
 const BottomTabNavigator = createBottomTabNavigator().Navigator
 
-type BottomTabNavigationOptionsWithHref = BottomTabNavigationOptions & {
-  href?: OneRouter.Href | null
-}
-
 const RNTabs = withLayoutContext<
-  BottomTabNavigationOptionsWithHref,
+  BottomTabNavigationOptions,
   typeof BottomTabNavigator,
   TabNavigationState<ParamListBase>,
   BottomTabNavigationEventMap
->(BottomTabNavigator, (screens) => {
-  // Support the `href` shortcut prop.
-  return screens.map((screen) => {
-    if (typeof screen.options !== 'function' && screen.options?.href !== undefined) {
-      const { href, ...options } = screen.options
-      if (options.tabBarButton) {
-        throw new Error('Cannot use `href` and `tabBarButton` together.')
-      }
-      return {
-        ...screen,
-        options: {
-          ...options,
-          tabBarButton: (props) => {
-            if (href == null) {
-              return null
-            }
-            const children =
-              Platform.OS === 'web' ? (
-                props.children
-              ) : (
-                <Pressable>{props.children}</Pressable>
-              )
-            return (
-              <Link
-                {...(props as any)}
-                style={[{ display: 'flex' }, props.style]}
-                href={href}
-                asChild={Platform.OS !== 'web'}
-                // biome-ignore lint/correctness/noChildrenProp: children prop needed for asChild pattern
-                children={children}
-              />
-            )
-          },
-        },
-      }
-    }
-    return screen
-  })
-})
+>(BottomTabNavigator, processNativeTabsScreens)
 
-const TabsWithRender = React.forwardRef<unknown, ComponentProps<typeof RNTabs>>(
-  (props, ref) => {
-    const { tabBar, ...rest } = props as any
-    return <RNTabs {...rest} ref={ref} tabBar={tabBar ?? DefaultTabBar} />
-  }
-)
+type TabsType = ReturnType<typeof withLayoutContext> & { Protected: typeof Protected }
 
-export const Tabs = Object.assign(TabsWithRender, {
+export const Tabs: TabsType = Object.assign(RNTabs, {
   Protected,
-  // Preserve withLayoutContext's static Screen so user code like
-  // `<Tabs.Screen ... />` keeps working through the render wrapper.
   Screen: RNTabs.Screen,
-})
+}) as TabsType
 
 export default Tabs

package/src/layouts/nativeTabsOptions.ts

@@ -0,0 +1,38 @@
+import type { BottomTabNavigationOptions } from '@react-navigation/bottom-tabs'
+
+type NativeTabsScreen = {
+  name?: string
+  options?: BottomTabNavigationOptions | ((props: any) => BottomTabNavigationOptions)
+}
+
+export function processNativeTabsScreens<T extends NativeTabsScreen>(screens: T[]): T[] {
+  return screens.map((screen) => {
+    if (typeof screen.options === 'function') {
+      const getOptions = screen.options
+      return {
+        ...screen,
+        options: (props: any) => {
+          const options = getOptions(props)
+          assertNoNativeTabsHref(screen.name, options)
+          return options
+        },
+      }
+    }
+
+    assertNoNativeTabsHref(screen.name, screen.options)
+    return screen
+  }) as T[]
+}
+
+function assertNoNativeTabsHref(
+  screenName: string | undefined,
+  options: BottomTabNavigationOptions | undefined
+) {
+  if (options && 'href' in options) {
+    throw new Error(
+      `Tabs.Screen "${screenName ?? ''}" uses the web-only href option. ` +
+        'Native tabs use the route name. Put non-tab routes in a parent Stack, ' +
+        'and move custom href options to a .web layout.'
+    )
+  }
+}

package/src/layouts/stack-utils/README.md

@@ -25,7 +25,6 @@ import { Stack } from 'one'
 | `Stack.Header.Right` | Custom right header content |
 | `Stack.Header.BackButton` | Back button configuration |
 | `Stack.Header.SearchBar` | Search bar configuration |
-| `Stack.Toolbar` | Native iOS header and bottom toolbar items |
 
 ## Basic Usage
 

package/src/layouts/stack-utils/StackHeaderBackButton.tsx

@@ -30,7 +30,7 @@ export function appendStackHeaderBackButtonPropsToOptions(
     ...options,
     headerBackTitle: props.children,
     headerBackTitleStyle: props.style,
-    headerBackImageSource: props.src,
+    headerBackIcon: props.src ? { type: 'image' as const, source: props.src } : undefined,
     headerBackButtonDisplayMode: props.displayMode,
     headerBackButtonMenuEnabled: props.withMenu,
     headerBackVisible: props.hidden !== undefined ? !props.hidden : undefined,

package/src/layouts/stack-utils/StackHeaderTitle.tsx

@@ -67,9 +67,9 @@ export function appendStackHeaderTitlePropsToOptions(
   return {
     ...options,
     title: props.children,
-    headerLargeTitle: props.large,
+    headerLargeTitleEnabled: props.large,
     // Large titles on iOS require headerTransparent for proper scroll behavior
-    // Only set on iOS since headerLargeTitle is iOS-only
+    // Only set on iOS since headerLargeTitleEnabled is iOS-only
     ...(props.large && PLATFORM === 'ios' && { headerTransparent: true }),
     headerTitleAlign: flattenedStyle?.textAlign,
     // Only set styles when explicitly configured to avoid interfering with native defaults

package/src/layouts/stack-utils/StackScreen.tsx

@@ -9,15 +9,6 @@ import {
   appendStackHeaderPropsToOptions,
   type StackHeaderProps,
 } from './StackHeaderComponent'
-import {
-  StackToolbar,
-  appendStackToolbarPropsToOptions,
-  type StackToolbarProps,
-} from './StackToolbar'
-import {
-  getStackToolbarImplementation,
-  type StackToolbarImplementation,
-} from './StackToolbarImplementation'
 import { Screen } from '../../views/Screen'
 
 export type StackScreenOptions = Omit<NativeStackNavigationOptions, 'presentation'> & {
@@ -56,17 +47,12 @@ export interface StackScreenProps extends PropsWithChildren {
  * ```
  */
 export function StackScreen({ children, options, ...rest }: StackScreenProps) {
-  const toolbarImplementation = getStackToolbarImplementation()
   const updatedOptions = useMemo(
     () =>
-      appendScreenStackPropsToOptions(
-        options ?? {},
-        {
-          children,
-        },
-        toolbarImplementation
-      ),
-    [options, children, toolbarImplementation]
+      appendScreenStackPropsToOptions(options ?? {}, {
+        children,
+      }),
+    [options, children]
   )
   return <Screen {...rest} options={updatedOptions as NativeStackNavigationOptions} />
 }
@@ -115,8 +101,7 @@ export function validateStackPresentation(
 
 export function appendScreenStackPropsToOptions(
   options: StackScreenOptions,
-  props: StackScreenProps,
-  toolbarImplementation?: StackToolbarImplementation | null
+  props: StackScreenProps
 ): StackScreenOptions {
   let updatedOptions: StackScreenOptions = { ...options, ...props.options }
 
@@ -129,12 +114,6 @@ export function appendScreenStackPropsToOptions(
         options as NativeStackNavigationOptions,
         child.props as StackHeaderProps
       ) as StackScreenOptions
-    } else if (child.type === StackToolbar) {
-      return appendStackToolbarPropsToOptions(
-        options as NativeStackNavigationOptions,
-        child.props as StackToolbarProps,
-        toolbarImplementation
-      ) as StackScreenOptions
     } else {
       console.warn(
         `Warning: Unknown child element passed to Stack.Screen: ${(child.type as { name: string }).name ?? child.type}`

package/src/layouts/stack-utils/__tests__/composition.test.tsx

@@ -40,9 +40,9 @@ describe('Stack Header Composition', () => {
       expect(result.title).toBe('My Title')
     })
 
-    it('sets headerLargeTitle when large is true', () => {
+    it('sets headerLargeTitleEnabled when large is true', () => {
       const result = appendStackHeaderTitlePropsToOptions({}, { large: true })
-      expect(result.headerLargeTitle).toBe(true)
+      expect(result.headerLargeTitleEnabled).toBe(true)
     })
 
     it('sets headerTitleAlign from style.textAlign', () => {
@@ -183,14 +183,14 @@ describe('Stack Header Composition', () => {
 
     it('preserves existing options when setting headerRight', () => {
       const result = appendStackHeaderRightPropsToOptions(
-        { title: 'Existing Title', headerLargeTitle: true },
+        { title: 'Existing Title', headerLargeTitleEnabled: true },
         {
           asChild: true,
           children: <button>Action</button>,
         }
       )
       expect(result.title).toBe('Existing Title')
-      expect(result.headerLargeTitle).toBe(true)
+      expect(result.headerLargeTitleEnabled).toBe(true)
       expect(result.headerRight).toBeDefined()
     })
 
@@ -295,13 +295,13 @@ describe('Stack Header Composition', () => {
 
     it('preserves existing options when setting search bar', () => {
       const result = appendStackHeaderSearchBarPropsToOptions(
-        { title: 'Articles', headerLargeTitle: true },
+        { title: 'Articles', headerLargeTitleEnabled: true },
         {
           placeholder: 'Search...',
         }
       )
       expect(result.title).toBe('Articles')
-      expect(result.headerLargeTitle).toBe(true)
+      expect(result.headerLargeTitleEnabled).toBe(true)
       expect(result.headerSearchBarOptions).toMatchObject({
         placeholder: 'Search...',
       })
@@ -384,7 +384,7 @@ describe('Stack Header Composition', () => {
         }
       )
       expect(result.title).toBe('Test Title')
-      expect(result.headerLargeTitle).toBe(true)
+      expect(result.headerLargeTitleEnabled).toBe(true)
     })
 
     it('processes child BackButton component', () => {
@@ -411,7 +411,7 @@ describe('Stack Header Composition', () => {
         }
       )
       expect(result.title).toBe('My Screen')
-      expect(result.headerLargeTitle).toBe(true)
+      expect(result.headerLargeTitleEnabled).toBe(true)
       expect(result.headerBackVisible).toBe(false)
     })
 
@@ -477,7 +477,7 @@ describe('Stack Header Composition', () => {
         }
       )
       expect(result.title).toBe('Articles')
-      expect(result.headerLargeTitle).toBe(true)
+      expect(result.headerLargeTitleEnabled).toBe(true)
       expect(result.headerLeft).toBeDefined()
       expect(result.headerRight).toBeDefined()
       expect(result.headerSearchBarOptions).toMatchObject({
@@ -510,7 +510,7 @@ describe('Stack Header Composition', () => {
       expect(result.gestureEnabled).toBe(true)
       expect(result.headerBlurEffect).toBe('regular')
       expect(result.title).toBe('Composed Title')
-      expect(result.headerLargeTitle).toBe(true)
+      expect(result.headerLargeTitleEnabled).toBe(true)
     })
 
     it('works with StackHeader compound component (as used via Stack.Header)', () => {
@@ -526,7 +526,7 @@ describe('Stack Header Composition', () => {
       )
 
       expect(result.title).toBe('Large Title Test')
-      expect(result.headerLargeTitle).toBe(true)
+      expect(result.headerLargeTitleEnabled).toBe(true)
     })
 
     it('works with StackHeader compound component with Left child', () => {
@@ -545,7 +545,7 @@ describe('Stack Header Composition', () => {
       )
 
       expect(result.title).toBe('Articles')
-      expect(result.headerLargeTitle).toBe(true)
+      expect(result.headerLargeTitleEnabled).toBe(true)
       expect(result.headerLeft).toBeDefined()
     })
 
@@ -599,7 +599,7 @@ describe('Stack Header Composition', () => {
       )
 
       expect(result.title).toBe('Articles')
-      expect(result.headerLargeTitle).toBe(true)
+      expect(result.headerLargeTitleEnabled).toBe(true)
       expect(result.headerSearchBarOptions).toMatchObject({
         placeholder: 'Search articles...',
       })
@@ -629,7 +629,7 @@ describe('Stack Header Composition', () => {
       expect(result.animation).toBe('slide_from_right')
       expect(result.headerBlurEffect).toBe('regular')
       expect(result.title).toBe('My App')
-      expect(result.headerLargeTitle).toBe(true)
+      expect(result.headerLargeTitleEnabled).toBe(true)
       // headerTransparent is only auto-set on iOS, not on web/android (test runs in web mock)
       expect(result.headerTransparent).toBeUndefined()
       expect(result.headerLeft).toBeDefined()

package/src/layouts/stack-utils/index.tsx

@@ -10,7 +10,6 @@ import {
   type StackHeaderSearchBarProps,
 } from './StackHeaderSearchBar'
 import { StackHeaderTitle, type StackHeaderTitleProps } from './StackHeaderTitle'
-import { StackToolbar } from './StackToolbar'
 import { NAVIGATOR_CONFIG } from '../../headless/children'
 
 /**
@@ -39,24 +38,8 @@ export {
   type StackHeaderSearchBarProps,
   StackHeaderTitle,
   type StackHeaderTitleProps,
-  StackToolbar,
 }
 
-export type {
-  StackToolbarBadgeProps,
-  StackToolbarButtonProps,
-  StackToolbarConfig,
-  StackToolbarIconProps,
-  StackToolbarLabelProps,
-  StackToolbarMenuActionProps,
-  StackToolbarMenuProps,
-  StackToolbarPlacement,
-  StackToolbarProps,
-  StackToolbarSearchBarSlotProps,
-  StackToolbarSpacerProps,
-  StackToolbarViewProps,
-} from './StackToolbar'
-
 export {
   StackScreen,
   appendScreenStackPropsToOptions,

package/src/layouts/withLayoutContext.test.tsx

@@ -3,6 +3,7 @@ import TestRenderer, { act } from 'react-test-renderer'
 import { describe, expect, it } from 'vitest'
 import { Protected } from '../views/Protected'
 import { Screen } from '../views/Screen'
+import { processNativeTabsScreens } from './nativeTabsOptions'
 import { useFilterScreenChildren } from './withLayoutContext'
 
 function readGuardedRedirects(children: React.ReactNode) {
@@ -72,3 +73,18 @@ describe('Protected redirectTo', () => {
     expect(redirects.get('account')).toBeUndefined()
   })
 })
+
+describe('native Tabs options', () => {
+  it('rejects web-only href options instead of silently dropping them', () => {
+    expect(() =>
+      processNativeTabsScreens([{ name: 'hidden', options: { href: null } } as any])
+    ).toThrow('Tabs.Screen "hidden" uses the web-only href option')
+
+    const [screen] = processNativeTabsScreens([
+      { name: 'dynamic', options: () => ({ href: '/elsewhere' }) } as any,
+    ])
+    expect(() => (screen.options as any)({})).toThrow(
+      'Tabs.Screen "dynamic" uses the web-only href option'
+    )
+  })
+})

package/src/layouts/withLayoutContext.tsx

@@ -213,14 +213,14 @@ export function withLayoutContext<
         }
 
         return (
-          <Nav {...options?.props} {...props} id={contextKey} ref={ref}>
+          <Nav {...options?.props} {...props} ref={ref}>
             {sorted}
           </Nav>
         )
       }
     ),
     {
-      Screen,
+      Screen: Screen as React.ComponentType<ScreenProps<TOptions, State, EventMap>>,
     }
   )
 }

package/src/link/useLoadedNavigation.ts

@@ -1,13 +1,14 @@
 import {
   type NavigationProp,
   type NavigationState,
+  type ParamListBase,
   useNavigation,
 } from '@react-navigation/native'
 import { useCallback, useEffect, useRef, useState } from 'react'
 
 import { useOneRouter } from '../router/router'
 
-type GenericNavigation = NavigationProp<ReactNavigation.RootParamList> & {
+type GenericNavigation = NavigationProp<ParamListBase> & {
   getState(): NavigationState | undefined
 }