one 1.23.0 → 1.24.0

package/src/layouts/Stack.tsx

@@ -14,9 +14,14 @@ 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
 
@@ -31,12 +36,19 @@ 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): React.ReactNode {
+function mapChildren(
+  children: React.ReactNode,
+  toolbarImplementation: StackToolbarImplementation | null
+): 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)
+        const options = appendScreenStackPropsToOptions(
+          {},
+          child.props,
+          toolbarImplementation
+        )
         const { children: _, ...rest } = child.props
         return <Screen key={child.props.name ?? index} {...rest} options={options} />
       }
@@ -46,7 +58,7 @@ function mapChildren(children: React.ReactNode): React.ReactNode {
         return React.cloneElement(
           child,
           { key: `protected-${index}` },
-          mapChildren(child.props.children)
+          mapChildren(child.props.children, toolbarImplementation)
         )
       }
 
@@ -71,6 +83,7 @@ function mapChildren(children: React.ReactNode): React.ReactNode {
 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(() => {
@@ -84,19 +97,30 @@ 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)
+              return appendScreenStackPropsToOptions(
+                opts,
+                headerProps,
+                toolbarImplementation
+              )
             }
           }
-          return appendScreenStackPropsToOptions(screenOptions, headerProps)
+          return appendScreenStackPropsToOptions(
+            screenOptions,
+            headerProps,
+            toolbarImplementation
+          )
         }
-        return appendScreenStackPropsToOptions({}, headerProps)
+        return appendScreenStackPropsToOptions({}, headerProps, toolbarImplementation)
       }
 
       return screenOptions
-    }, [children, screenOptions])
+    }, [children, screenOptions, toolbarImplementation])
 
     // pre-process children to convert StackScreen to Screen
-    const processedChildren = useMemo(() => mapChildren(children), [children])
+    const processedChildren = useMemo(
+      () => mapChildren(children, toolbarImplementation),
+      [children, toolbarImplementation]
+    )
     const navigatorProps = useMemo(() => getStackNavigatorProps(children), [children])
 
     return (
@@ -119,6 +143,7 @@ export const Stack = Object.assign(StackWithComposition, {
   Header: StackHeader,
   Protected,
   SearchBar: StackHeaderSearchBar,
+  Toolbar: StackToolbar,
 })
 
 export default Stack

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

@@ -25,6 +25,7 @@ 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/StackScreen.tsx

@@ -9,6 +9,15 @@ 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'> & {
@@ -47,12 +56,17 @@ export interface StackScreenProps extends PropsWithChildren {
  * ```
  */
 export function StackScreen({ children, options, ...rest }: StackScreenProps) {
+  const toolbarImplementation = getStackToolbarImplementation()
   const updatedOptions = useMemo(
     () =>
-      appendScreenStackPropsToOptions(options ?? {}, {
-        children,
-      }),
-    [options, children]
+      appendScreenStackPropsToOptions(
+        options ?? {},
+        {
+          children,
+        },
+        toolbarImplementation
+      ),
+    [options, children, toolbarImplementation]
   )
   return <Screen {...rest} options={updatedOptions as NativeStackNavigationOptions} />
 }
@@ -101,7 +115,8 @@ export function validateStackPresentation(
 
 export function appendScreenStackPropsToOptions(
   options: StackScreenOptions,
-  props: StackScreenProps
+  props: StackScreenProps,
+  toolbarImplementation?: StackToolbarImplementation | null
 ): StackScreenOptions {
   let updatedOptions: StackScreenOptions = { ...options, ...props.options }
 
@@ -114,6 +129,12 @@ 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/StackToolbar.shared.ts

@@ -0,0 +1,44 @@
+import type { NativeStackNavigationOptions } from '@react-navigation/native-stack'
+
+import type {
+  StackToolbarConfig,
+  StackToolbarPlacement,
+  StackToolbarProps,
+} from './StackToolbar.types'
+
+const optionKeys = {
+  left: '__oneStackToolbarLeft',
+  right: '__oneStackToolbarRight',
+  bottom: '__oneStackToolbarBottom',
+} as const satisfies Record<StackToolbarPlacement, string>
+
+export function appendStackToolbarConfig(
+  options: NativeStackNavigationOptions,
+  props: StackToolbarProps
+): NativeStackNavigationOptions {
+  return {
+    ...options,
+    [optionKeys[props.placement ?? 'bottom']]: props,
+  }
+}
+
+export function exposeStackToolbarConfig(
+  options: Record<string, any>
+): Record<string, any> {
+  const toolbar: StackToolbarConfig = {
+    left: options[optionKeys.left],
+    right: options[optionKeys.right],
+    bottom: options[optionKeys.bottom],
+  }
+
+  if (!toolbar.left && !toolbar.right && !toolbar.bottom) return options
+
+  const {
+    [optionKeys.left]: _left,
+    [optionKeys.right]: _right,
+    [optionKeys.bottom]: _bottom,
+    ...publicOptions
+  } = options
+
+  return { ...publicOptions, toolbar }
+}

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

@@ -0,0 +1,134 @@
+'use client'
+
+import type { NativeStackNavigationOptions } from '@react-navigation/native-stack'
+import { useMemo } from 'react'
+
+import { useIsomorphicLayoutEffect } from '@vxrn/use-isomorphic-layout-effect'
+import { NAVIGATOR_CONFIG } from '../../headless/children'
+import { useNavigation } from '../../router/useNavigation'
+import {
+  STACK_TOOLBAR_CHILD,
+  getStackToolbarImplementation,
+  type StackToolbarImplementation,
+} from './StackToolbarImplementation'
+import { appendStackToolbarConfig } from './StackToolbar.shared'
+import type {
+  StackToolbarBadgeProps,
+  StackToolbarButtonProps,
+  StackToolbarIconProps,
+  StackToolbarLabelProps,
+  StackToolbarMenuActionProps,
+  StackToolbarMenuProps,
+  StackToolbarProps,
+  StackToolbarSearchBarSlotProps,
+  StackToolbarSpacerProps,
+  StackToolbarViewProps,
+} from './StackToolbar.types'
+
+export function appendStackToolbarPropsToOptions(
+  options: NativeStackNavigationOptions,
+  props: StackToolbarProps,
+  implementation?: StackToolbarImplementation | null
+) {
+  const optionsWithConfig = appendStackToolbarConfig(options, props)
+  return implementation
+    ? implementation.appendPropsToOptions(optionsWithConfig, props)
+    : optionsWithConfig
+}
+
+function StackToolbarComponent(props: StackToolbarProps) {
+  const navigation = useNavigation()
+  const implementation = getStackToolbarImplementation()
+  const options = useMemo(
+    () => appendStackToolbarPropsToOptions({}, props, implementation),
+    [
+      implementation,
+      props.placement,
+      props.asChild,
+      props.children,
+      props.disableImePadding,
+      props.tintColor,
+      props.backgroundColor,
+    ]
+  )
+
+  useIsomorphicLayoutEffect(() => {
+    navigation.setOptions(options)
+  }, [navigation, options])
+
+  return implementation?.render(props) ?? null
+}
+
+export function StackToolbarButton(_props: StackToolbarButtonProps) {
+  return null
+}
+
+export function StackToolbarMenu(_props: StackToolbarMenuProps) {
+  return null
+}
+
+export function StackToolbarMenuAction(_props: StackToolbarMenuActionProps) {
+  return null
+}
+
+export function StackToolbarSpacer(_props: StackToolbarSpacerProps) {
+  return null
+}
+
+export function StackToolbarSearchBarSlot(_props: StackToolbarSearchBarSlotProps) {
+  return null
+}
+
+export function StackToolbarView(_props: StackToolbarViewProps) {
+  return null
+}
+
+export function StackToolbarLabel(_props: StackToolbarLabelProps) {
+  return null
+}
+
+export function StackToolbarIcon(_props: StackToolbarIconProps) {
+  return null
+}
+
+export function StackToolbarBadge(_props: StackToolbarBadgeProps) {
+  return null
+}
+
+Object.assign(StackToolbarButton, { [STACK_TOOLBAR_CHILD]: 'button' })
+Object.assign(StackToolbarMenu, { [STACK_TOOLBAR_CHILD]: 'menu' })
+Object.assign(StackToolbarMenuAction, { [STACK_TOOLBAR_CHILD]: 'menuAction' })
+Object.assign(StackToolbarSpacer, { [STACK_TOOLBAR_CHILD]: 'spacer' })
+Object.assign(StackToolbarSearchBarSlot, { [STACK_TOOLBAR_CHILD]: 'searchBarSlot' })
+Object.assign(StackToolbarView, { [STACK_TOOLBAR_CHILD]: 'view' })
+Object.assign(StackToolbarLabel, { [STACK_TOOLBAR_CHILD]: 'label' })
+Object.assign(StackToolbarIcon, { [STACK_TOOLBAR_CHILD]: 'icon' })
+Object.assign(StackToolbarBadge, { [STACK_TOOLBAR_CHILD]: 'badge' })
+
+export const StackToolbar = Object.assign(StackToolbarComponent, {
+  [NAVIGATOR_CONFIG]: true,
+  Button: StackToolbarButton,
+  Menu: StackToolbarMenu,
+  MenuAction: StackToolbarMenuAction,
+  Spacer: StackToolbarSpacer,
+  SearchBarSlot: StackToolbarSearchBarSlot,
+  View: StackToolbarView,
+  Label: StackToolbarLabel,
+  Icon: StackToolbarIcon,
+  Badge: StackToolbarBadge,
+})
+
+export type {
+  StackToolbarBadgeProps,
+  StackToolbarButtonProps,
+  StackToolbarConfig,
+  StackToolbarIconProps,
+  StackToolbarLabelProps,
+  StackToolbarMenuActionProps,
+  StackToolbarMenuProps,
+  StackToolbarPlacement,
+  StackToolbarProps,
+  StackToolbarSearchBarSlotProps,
+  StackToolbarSpacerProps,
+  StackToolbarViewProps,
+} from './StackToolbar.types'

package/src/layouts/stack-utils/StackToolbar.types.ts

@@ -0,0 +1,100 @@
+import type { ReactNode } from 'react'
+import type { ColorValue, ImageSourcePropType, StyleProp, TextStyle } from 'react-native'
+
+export type StackToolbarPlacement = 'left' | 'right' | 'bottom'
+
+export interface StackToolbarProps {
+  children?: ReactNode
+  placement?: StackToolbarPlacement
+  asChild?: boolean
+  /** Android-only. The Android toolbar host is not implemented yet. */
+  disableImePadding?: boolean
+  /** Android-only. The Android toolbar host is not implemented yet. */
+  tintColor?: ColorValue
+  /** Android-only. The Android toolbar host is not implemented yet. */
+  backgroundColor?: ColorValue
+}
+
+export type StackToolbarConfig = Partial<Record<StackToolbarPlacement, StackToolbarProps>>
+
+export interface StackToolbarIconProps {
+  src?: ImageSourcePropType
+  sf?: string
+  xcasset?: string
+  renderingMode?: 'template' | 'original'
+}
+
+export interface StackToolbarLabelProps {
+  children?: string
+}
+
+export interface StackToolbarBadgeProps {
+  children?: string
+  style?: StyleProp<
+    Pick<
+      TextStyle,
+      'fontFamily' | 'fontSize' | 'fontWeight' | 'color' | 'backgroundColor'
+    >
+  >
+}
+
+export interface StackToolbarItemProps {
+  children?: ReactNode
+  icon?: string | ImageSourcePropType
+  iconRenderingMode?: 'template' | 'original'
+  tintColor?: ColorValue
+  hidden?: boolean
+  disabled?: boolean
+  accessibilityLabel?: string
+  accessibilityHint?: string
+  hidesSharedBackground?: boolean
+  separateBackground?: boolean
+  style?: StyleProp<TextStyle>
+}
+
+export interface StackToolbarButtonProps extends StackToolbarItemProps {
+  image?: ImageSourcePropType
+  onPress?: () => void
+  selected?: boolean
+  variant?: 'plain' | 'done' | 'prominent'
+}
+
+export interface StackToolbarMenuProps extends StackToolbarItemProps {
+  image?: ImageSourcePropType
+  destructive?: boolean
+  title?: string
+  inline?: boolean
+  palette?: boolean
+  singleSelection?: boolean
+  elementSize?: 'auto' | 'small' | 'medium' | 'large'
+  variant?: 'plain' | 'done' | 'prominent'
+}
+
+export interface StackToolbarMenuActionProps extends StackToolbarItemProps {
+  image?: ImageSourcePropType
+  destructive?: boolean
+  discoverabilityLabel?: string
+  subtitle?: string
+  isOn?: boolean
+  onPress?: () => void
+  unstable_keepPresented?: boolean
+}
+
+export interface StackToolbarSpacerProps {
+  width?: number
+  hidden?: boolean
+  sharesBackground?: boolean
+}
+
+export interface StackToolbarSearchBarSlotProps {
+  hidden?: boolean
+  hidesSharedBackground?: boolean
+  separateBackground?: boolean
+}
+
+export interface StackToolbarViewProps {
+  children?: ReactNode
+  hidden?: boolean
+  hidesSharedBackground?: boolean
+  separateBackground?: boolean
+}

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

@@ -0,0 +1,39 @@
+'use client'
+
+import type { NativeStackNavigationOptions } from '@react-navigation/native-stack'
+import type { ReactNode } from 'react'
+
+import type { StackToolbarProps } from './StackToolbar.types'
+
+export const STACK_TOOLBAR_CHILD = Symbol.for('one.stack-toolbar.child')
+
+export type StackToolbarChildType =
+  | 'button'
+  | 'menu'
+  | 'menuAction'
+  | 'spacer'
+  | 'searchBarSlot'
+  | 'view'
+  | 'label'
+  | 'icon'
+  | 'badge'
+
+export type StackToolbarImplementation = {
+  appendPropsToOptions: (
+    options: NativeStackNavigationOptions,
+    props: StackToolbarProps
+  ) => NativeStackNavigationOptions
+  render: (props: StackToolbarProps) => ReactNode
+}
+
+let stackToolbarImplementation: StackToolbarImplementation | null = null
+
+export function registerStackToolbarImplementation(
+  implementation: StackToolbarImplementation
+) {
+  stackToolbarImplementation = implementation
+}
+
+export function getStackToolbarImplementation() {
+  return stackToolbarImplementation
+}

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

@@ -0,0 +1,70 @@
+import React from 'react'
+import { describe, expect, it, vi } from 'vitest'
+import type { StackToolbarImplementation } from '../StackToolbarImplementation'
+
+import { StackToolbar } from '../StackToolbar'
+import { STACK_TOOLBAR_CHILD } from '../StackToolbarImplementation'
+import { exposeStackToolbarConfig } from '../StackToolbar.shared'
+import { appendScreenStackPropsToOptions } from '../StackScreen'
+
+describe('Stack.Toolbar headless config', () => {
+  it('marks declaration children for installed implementations', () => {
+    expect(
+      (StackToolbar.Button as unknown as Record<symbol, string>)[STACK_TOOLBAR_CHILD]
+    ).toBe('button')
+    expect(
+      (StackToolbar.MenuAction as unknown as Record<symbol, string>)[STACK_TOOLBAR_CHILD]
+    ).toBe('menuAction')
+  })
+
+  it('preserves every placement for the headless stack implementation', () => {
+    const options = appendScreenStackPropsToOptions(
+      { title: 'Inbox' },
+      {
+        children: [
+          <StackToolbar key="left" placement="left">
+            <StackToolbar.Button icon="sidebar.left" />
+          </StackToolbar>,
+          <StackToolbar key="right" placement="right">
+            <StackToolbar.Button icon="square.and.arrow.up" />
+          </StackToolbar>,
+        ],
+      }
+    )
+
+    expect(exposeStackToolbarConfig(options)).toMatchObject({
+      title: 'Inbox',
+      toolbar: {
+        left: { placement: 'left' },
+        right: { placement: 'right' },
+      },
+    })
+  })
+
+  it('hands toolbar declarations to an installed implementation', () => {
+    const appendPropsToOptions = vi.fn((options) => ({
+      ...options,
+      headerShown: true,
+    }))
+    const implementation: StackToolbarImplementation = {
+      appendPropsToOptions,
+      render: () => null,
+    }
+    const toolbar = (
+      <StackToolbar placement="right">
+        <StackToolbar.Button icon="square.and.arrow.up">Share</StackToolbar.Button>
+      </StackToolbar>
+    )
+
+    const options = appendScreenStackPropsToOptions(
+      { title: 'Inbox' },
+      { children: toolbar },
+      implementation
+    )
+
+    expect(options.headerShown).toBe(true)
+    expect(appendPropsToOptions).toHaveBeenCalledOnce()
+    expect(appendPropsToOptions.mock.calls[0]?.[1]).toBe(toolbar.props)
+    expect(exposeStackToolbarConfig(options).toolbar.right).toBe(toolbar.props)
+  })
+})

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

@@ -10,6 +10,7 @@ import {
   type StackHeaderSearchBarProps,
 } from './StackHeaderSearchBar'
 import { StackHeaderTitle, type StackHeaderTitleProps } from './StackHeaderTitle'
+import { StackToolbar } from './StackToolbar'
 import { NAVIGATOR_CONFIG } from '../../headless/children'
 
 /**
@@ -38,8 +39,24 @@ 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/metro-config/buildOneMetroResolverOverrides.test.ts

@@ -0,0 +1,88 @@
+import path from 'node:path'
+import { describe, expect, it } from 'vitest'
+import { buildOneMetroResolverOverrides } from './buildOneMetroResolverOverrides'
+
+describe('buildOneMetroResolverOverrides', () => {
+  it('resolves every react-native-worklets import from the app root', () => {
+    const projectRoot = path.resolve(__dirname, '../../')
+    const nestedOrigin = path.join(
+      projectRoot,
+      'node_modules/react-native-reanimated/src/index.ts'
+    )
+    const resolvedOrigins: string[] = []
+    const config = buildOneMetroResolverOverrides({ projectRoot })({
+      resolver: {
+        resolveRequest: (
+          context: { originModulePath: string },
+          moduleName: string,
+          _platform: string
+        ) => {
+          resolvedOrigins.push(`${moduleName}:${context.originModulePath}`)
+          return { type: 'sourceFile', filePath: moduleName }
+        },
+      },
+    })
+    const resolveRequest = config.resolver?.resolveRequest
+
+    if (!resolveRequest) {
+      throw new Error('expected a Metro resolver override')
+    }
+
+    resolveRequest({ originModulePath: nestedOrigin }, 'react-native-worklets', 'ios')
+    resolveRequest(
+      { originModulePath: nestedOrigin },
+      'react-native-worklets/package.json',
+      'ios'
+    )
+    resolveRequest(
+      { originModulePath: nestedOrigin },
+      'react-native-safe-area-context',
+      'ios'
+    )
+
+    expect(resolvedOrigins).toEqual([
+      `react-native-worklets:${path.join(projectRoot, 'package.json')}`,
+      `react-native-worklets/package.json:${path.join(projectRoot, 'package.json')}`,
+      `react-native-safe-area-context:${nestedOrigin}`,
+    ])
+  })
+
+  it('keeps the compiled react-native-svg native entry point', () => {
+    const projectRoot = path.resolve(__dirname, '../../')
+    const config = buildOneMetroResolverOverrides({ projectRoot })({
+      resolver: {
+        resolveRequest: (
+          _context: { originModulePath: string },
+          moduleName: string,
+          _platform: string
+        ) => ({
+          type: 'sourceFile',
+          filePath: path.join(projectRoot, 'node_modules', moduleName, 'src', 'index.ts'),
+        }),
+      },
+    })
+    const resolveRequest = config.resolver?.resolveRequest
+
+    if (!resolveRequest) {
+      throw new Error('expected a Metro resolver override')
+    }
+
+    expect(
+      resolveRequest(
+        { originModulePath: path.join(projectRoot, 'app.tsx') },
+        'react-native-svg',
+        'ios'
+      )
+    ).toEqual({
+      type: 'sourceFile',
+      filePath: path.join(
+        projectRoot,
+        'node_modules',
+        'react-native-svg',
+        'lib',
+        'commonjs',
+        'index.js'
+      ),
+    })
+  })
+})