one 1.2.37 → 1.2.38

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

@@ -1,34 +0,0 @@
-import type { NativeStackNavigationOptions } from '@react-navigation/native-stack'
-import type { ImageSourcePropType } from 'react-native'
-import type { ScreenStackHeaderConfigProps } from 'react-native-screens'
-
-export interface StackHeaderBackButtonProps {
-  children?: string
-  style?: NativeStackNavigationOptions['headerBackTitleStyle']
-  withMenu?: boolean
-  displayMode?: ScreenStackHeaderConfigProps['backButtonDisplayMode']
-  hidden?: boolean
-  src?: ImageSourcePropType
-}
-
-/**
- * Configuration component for the back button in stack headers.
- */
-export function StackHeaderBackButton(_props: StackHeaderBackButtonProps) {
-  return null
-}
-
-export function appendStackHeaderBackButtonPropsToOptions(
-  options: NativeStackNavigationOptions,
-  props: StackHeaderBackButtonProps
-): NativeStackNavigationOptions {
-  return {
-    ...options,
-    headerBackTitle: props.children,
-    headerBackTitleStyle: props.style,
-    headerBackImageSource: props.src,
-    headerBackButtonDisplayMode: props.displayMode,
-    headerBackButtonMenuEnabled: props.withMenu,
-    headerBackVisible: props.hidden !== undefined ? !props.hidden : undefined,
-  }
-}

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

@@ -1,109 +0,0 @@
-import type { NativeStackNavigationOptions } from '@react-navigation/native-stack'
-import { Children, isValidElement, type ReactNode } from 'react'
-import { StyleSheet, type ColorValue, type StyleProp } from 'react-native'
-import type { ScreenStackHeaderConfigProps } from 'react-native-screens'
-
-import {
-  appendStackHeaderBackButtonPropsToOptions,
-  StackHeaderBackButton,
-} from './StackHeaderBackButton'
-import { StackHeaderLeft, appendStackHeaderLeftPropsToOptions } from './StackHeaderLeft'
-import { StackHeaderRight, appendStackHeaderRightPropsToOptions } from './StackHeaderRight'
-import {
-  appendStackHeaderSearchBarPropsToOptions,
-  StackHeaderSearchBar,
-} from './StackHeaderSearchBar'
-import { appendStackHeaderTitlePropsToOptions, StackHeaderTitle } from './StackHeaderTitle'
-import { isChildOfType } from '../../utils/children'
-
-export interface StackHeaderProps {
-  children?: ReactNode
-  hidden?: boolean
-  asChild?: boolean
-  blurEffect?: ScreenStackHeaderConfigProps['blurEffect']
-  style?: StyleProp<{
-    color?: ColorValue
-    backgroundColor?: ScreenStackHeaderConfigProps['backgroundColor']
-    shadowColor?: undefined | 'transparent'
-  }>
-  largeStyle?: StyleProp<{
-    backgroundColor?: ScreenStackHeaderConfigProps['largeTitleBackgroundColor']
-    shadowColor?: undefined | 'transparent'
-  }>
-}
-
-/**
- * Configuration component for stack headers.
- * Use child components to configure different parts of the header.
- *
- * @example
- * ```tsx
- * <Stack.Header blurEffect="regular">
- *   <Stack.Header.Title large>My Title</Stack.Header.Title>
- *   <Stack.Header.Right asChild>
- *     <Button>Action</Button>
- *   </Stack.Header.Right>
- * </Stack.Header>
- * ```
- */
-export function StackHeaderComponent(_props: StackHeaderProps) {
-  return null
-}
-
-export function appendStackHeaderPropsToOptions(
-  options: NativeStackNavigationOptions,
-  props: StackHeaderProps
-): NativeStackNavigationOptions {
-  const flattenedStyle = StyleSheet.flatten(props.style)
-  const flattenedLargeStyle = StyleSheet.flatten(props.largeStyle)
-
-  if (props.hidden) {
-    return { ...options, headerShown: false }
-  }
-
-  if (props.asChild) {
-    return { ...options, header: () => props.children }
-  }
-
-  let updatedOptions: NativeStackNavigationOptions = {
-    ...options,
-    headerShown: !props.hidden,
-    headerBlurEffect: props.blurEffect,
-    headerStyle: {
-      backgroundColor: flattenedStyle?.backgroundColor as string | undefined,
-    },
-    headerLargeStyle: {
-      backgroundColor: flattenedLargeStyle?.backgroundColor as string | undefined,
-    },
-    headerShadowVisible: flattenedStyle?.shadowColor !== 'transparent',
-    headerLargeTitleShadowVisible: flattenedLargeStyle?.shadowColor !== 'transparent',
-  }
-
-  function appendChildOptions(child: React.ReactElement, options: NativeStackNavigationOptions) {
-    let result = options
-    if (isChildOfType(child, StackHeaderTitle)) {
-      result = appendStackHeaderTitlePropsToOptions(result, child.props)
-    } else if (isChildOfType(child, StackHeaderLeft)) {
-      result = appendStackHeaderLeftPropsToOptions(result, child.props)
-    } else if (isChildOfType(child, StackHeaderRight)) {
-      result = appendStackHeaderRightPropsToOptions(result, child.props)
-    } else if (isChildOfType(child, StackHeaderBackButton)) {
-      result = appendStackHeaderBackButtonPropsToOptions(result, child.props)
-    } else if (isChildOfType(child, StackHeaderSearchBar)) {
-      result = appendStackHeaderSearchBarPropsToOptions(result, child.props)
-    } else {
-      console.warn(
-        `Warning: Unknown child element passed to Stack.Header: ${(child.type as { name: string }).name ?? child.type}`
-      )
-    }
-    return result
-  }
-
-  Children.forEach(props.children, (child) => {
-    if (isValidElement(child)) {
-      updatedOptions = appendChildOptions(child, updatedOptions)
-    }
-  })
-
-  return updatedOptions
-}

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

@@ -1,29 +0,0 @@
-import type { NativeStackNavigationOptions } from '@react-navigation/native-stack'
-import type { ReactNode } from 'react'
-
-export interface StackHeaderLeftProps {
-  children?: ReactNode
-  asChild?: boolean
-}
-
-/**
- * Configuration component for custom left header content.
- * Use `asChild` to render custom components in the left header area.
- */
-export function StackHeaderLeft(_props: StackHeaderLeftProps) {
-  return null
-}
-
-export function appendStackHeaderLeftPropsToOptions(
-  options: NativeStackNavigationOptions,
-  props: StackHeaderLeftProps
-): NativeStackNavigationOptions {
-  if (!props.asChild) {
-    return options
-  }
-
-  return {
-    ...options,
-    headerLeft: () => props.children,
-  }
-}

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

@@ -1,29 +0,0 @@
-import type { NativeStackNavigationOptions } from '@react-navigation/native-stack'
-import type { ReactNode } from 'react'
-
-export interface StackHeaderRightProps {
-  children?: ReactNode
-  asChild?: boolean
-}
-
-/**
- * Configuration component for custom right header content.
- * Use `asChild` to render custom components in the right header area.
- */
-export function StackHeaderRight(_props: StackHeaderRightProps) {
-  return null
-}
-
-export function appendStackHeaderRightPropsToOptions(
-  options: NativeStackNavigationOptions,
-  props: StackHeaderRightProps
-): NativeStackNavigationOptions {
-  if (!props.asChild) {
-    return options
-  }
-
-  return {
-    ...options,
-    headerRight: () => props.children,
-  }
-}

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

@@ -1,21 +0,0 @@
-import type { NativeStackNavigationOptions } from '@react-navigation/native-stack'
-import type { SearchBarProps } from 'react-native-screens'
-
-export interface StackHeaderSearchBarProps extends SearchBarProps {}
-
-/**
- * Configuration component for adding a search bar to stack headers.
- */
-export function StackHeaderSearchBar(_props: StackHeaderSearchBarProps) {
-  return null
-}
-
-export function appendStackHeaderSearchBarPropsToOptions(
-  options: NativeStackNavigationOptions,
-  props: StackHeaderSearchBarProps
-): NativeStackNavigationOptions {
-  return {
-    ...options,
-    headerSearchBarOptions: props,
-  }
-}

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

@@ -1,61 +0,0 @@
-import type { NativeStackNavigationOptions } from '@react-navigation/native-stack'
-import { StyleSheet, type StyleProp, type TextStyle } from 'react-native'
-
-import { convertFontWeightToStringFontWeight } from '../../utils/style'
-
-export type StackHeaderTitleProps = {
-  children?: string
-  style?: StyleProp<{
-    fontFamily?: TextStyle['fontFamily']
-    fontSize?: TextStyle['fontSize']
-    fontWeight?: Exclude<TextStyle['fontWeight'], number>
-    color?: string
-    textAlign?: 'left' | 'center'
-  }>
-  largeStyle?: StyleProp<{
-    fontFamily?: TextStyle['fontFamily']
-    fontSize?: TextStyle['fontSize']
-    fontWeight?: Exclude<TextStyle['fontWeight'], number>
-    color?: string
-  }>
-  large?: boolean
-}
-
-/**
- * Configuration component for stack header title.
- * This component doesn't render anything - it's used to configure the header.
- */
-export function StackHeaderTitle(_props: StackHeaderTitleProps) {
-  return null
-}
-
-export function appendStackHeaderTitlePropsToOptions(
-  options: NativeStackNavigationOptions,
-  props: StackHeaderTitleProps
-): NativeStackNavigationOptions {
-  const flattenedStyle = StyleSheet.flatten(props.style)
-  const flattenedLargeStyle = StyleSheet.flatten(props.largeStyle)
-
-  return {
-    ...options,
-    title: props.children,
-    headerLargeTitle: props.large,
-    headerTitleAlign: flattenedStyle?.textAlign,
-    headerTitleStyle: {
-      ...flattenedStyle,
-      ...(flattenedStyle?.fontWeight
-        ? {
-            fontWeight: convertFontWeightToStringFontWeight(flattenedStyle?.fontWeight),
-          }
-        : {}),
-    },
-    headerLargeTitleStyle: {
-      ...flattenedLargeStyle,
-      ...(flattenedLargeStyle?.fontWeight
-        ? {
-            fontWeight: convertFontWeightToStringFontWeight(flattenedLargeStyle?.fontWeight),
-          }
-        : {}),
-    },
-  }
-}

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

@@ -1,65 +0,0 @@
-'use client'
-
-import type { NativeStackNavigationOptions } from '@react-navigation/native-stack'
-import { Children, isValidElement, useMemo, type PropsWithChildren } from 'react'
-
-import {
-  StackHeaderComponent,
-  appendStackHeaderPropsToOptions,
-  type StackHeaderProps,
-} from './StackHeaderComponent'
-import { Screen } from '../../views/Screen'
-
-export interface StackScreenProps extends PropsWithChildren {
-  name?: string
-  options?: NativeStackNavigationOptions
-}
-
-/**
- * Stack screen component with support for compositional header configuration.
- *
- * @example
- * ```tsx
- * <Stack.Screen name="home" options={{ title: 'Home' }}>
- *   <Stack.Header>
- *     <Stack.Header.Title large>Welcome</Stack.Header.Title>
- *   </Stack.Header>
- * </Stack.Screen>
- * ```
- */
-export function StackScreen({ children, options, ...rest }: StackScreenProps) {
-  const updatedOptions = useMemo(
-    () =>
-      appendScreenStackPropsToOptions(options ?? {}, {
-        children,
-      }),
-    [options, children]
-  )
-  return <Screen {...rest} options={updatedOptions} />
-}
-
-export function appendScreenStackPropsToOptions(
-  options: NativeStackNavigationOptions,
-  props: StackScreenProps
-): NativeStackNavigationOptions {
-  let updatedOptions = { ...options, ...props.options }
-
-  function appendChildOptions(child: React.ReactElement, options: NativeStackNavigationOptions) {
-    if (child.type === StackHeaderComponent) {
-      return appendStackHeaderPropsToOptions(options, child.props as StackHeaderProps)
-    } else {
-      console.warn(
-        `Warning: Unknown child element passed to Stack.Screen: ${(child.type as { name: string }).name ?? child.type}`
-      )
-    }
-    return options
-  }
-
-  Children.forEach(props.children, (child) => {
-    if (isValidElement(child)) {
-      updatedOptions = appendChildOptions(child, updatedOptions)
-    }
-  })
-
-  return updatedOptions
-}

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

@@ -1,267 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import React from 'react'
-
-import { StackHeaderTitle, appendStackHeaderTitlePropsToOptions } from '../StackHeaderTitle'
-import { StackHeaderLeft, appendStackHeaderLeftPropsToOptions } from '../StackHeaderLeft'
-import { StackHeaderRight, appendStackHeaderRightPropsToOptions } from '../StackHeaderRight'
-import {
-  StackHeaderBackButton,
-  appendStackHeaderBackButtonPropsToOptions,
-} from '../StackHeaderBackButton'
-import {
-  StackHeaderSearchBar,
-  appendStackHeaderSearchBarPropsToOptions,
-} from '../StackHeaderSearchBar'
-import { StackHeaderComponent, appendStackHeaderPropsToOptions } from '../StackHeaderComponent'
-import { appendScreenStackPropsToOptions } from '../StackScreen'
-
-describe('Stack Header Composition', () => {
-  describe('StackHeaderTitle', () => {
-    it('sets title from children', () => {
-      const result = appendStackHeaderTitlePropsToOptions({}, { children: 'My Title' })
-      expect(result.title).toBe('My Title')
-    })
-
-    it('sets headerLargeTitle when large is true', () => {
-      const result = appendStackHeaderTitlePropsToOptions({}, { large: true })
-      expect(result.headerLargeTitle).toBe(true)
-    })
-
-    it('sets headerTitleAlign from style.textAlign', () => {
-      const result = appendStackHeaderTitlePropsToOptions(
-        {},
-        {
-          style: { textAlign: 'center' },
-        }
-      )
-      expect(result.headerTitleAlign).toBe('center')
-    })
-
-    it('converts numeric fontWeight to string', () => {
-      const result = appendStackHeaderTitlePropsToOptions(
-        {},
-        {
-          style: { fontWeight: '700' },
-        }
-      )
-      expect(result.headerTitleStyle).toMatchObject({ fontWeight: '700' })
-    })
-
-    it('preserves existing options', () => {
-      const result = appendStackHeaderTitlePropsToOptions(
-        { animation: 'slide_from_right' },
-        { children: 'Title' }
-      )
-      expect(result.animation).toBe('slide_from_right')
-      expect(result.title).toBe('Title')
-    })
-  })
-
-  describe('StackHeaderLeft', () => {
-    it('does not set headerLeft without asChild', () => {
-      const result = appendStackHeaderLeftPropsToOptions(
-        {},
-        {
-          children: <button>Back</button>,
-        }
-      )
-      expect(result.headerLeft).toBeUndefined()
-    })
-
-    it('sets headerLeft with asChild', () => {
-      const CustomButton = () => <button>Back</button>
-      const result = appendStackHeaderLeftPropsToOptions(
-        {},
-        {
-          asChild: true,
-          children: <CustomButton />,
-        }
-      )
-      expect(result.headerLeft).toBeDefined()
-      expect(typeof result.headerLeft).toBe('function')
-    })
-  })
-
-  describe('StackHeaderRight', () => {
-    it('does not set headerRight without asChild', () => {
-      const result = appendStackHeaderRightPropsToOptions(
-        {},
-        {
-          children: <button>Action</button>,
-        }
-      )
-      expect(result.headerRight).toBeUndefined()
-    })
-
-    it('sets headerRight with asChild', () => {
-      const CustomButton = () => <button>Action</button>
-      const result = appendStackHeaderRightPropsToOptions(
-        {},
-        {
-          asChild: true,
-          children: <CustomButton />,
-        }
-      )
-      expect(result.headerRight).toBeDefined()
-      expect(typeof result.headerRight).toBe('function')
-    })
-  })
-
-  describe('StackHeaderBackButton', () => {
-    it('sets headerBackTitle from children', () => {
-      const result = appendStackHeaderBackButtonPropsToOptions(
-        {},
-        {
-          children: 'Go Back',
-        }
-      )
-      expect(result.headerBackTitle).toBe('Go Back')
-    })
-
-    it('sets headerBackVisible to false when hidden', () => {
-      const result = appendStackHeaderBackButtonPropsToOptions(
-        {},
-        {
-          hidden: true,
-        }
-      )
-      expect(result.headerBackVisible).toBe(false)
-    })
-
-    it('sets headerBackButtonMenuEnabled', () => {
-      const result = appendStackHeaderBackButtonPropsToOptions(
-        {},
-        {
-          withMenu: true,
-        }
-      )
-      expect(result.headerBackButtonMenuEnabled).toBe(true)
-    })
-
-    it('sets headerBackButtonDisplayMode', () => {
-      const result = appendStackHeaderBackButtonPropsToOptions(
-        {},
-        {
-          displayMode: 'minimal',
-        }
-      )
-      expect(result.headerBackButtonDisplayMode).toBe('minimal')
-    })
-  })
-
-  describe('StackHeaderSearchBar', () => {
-    it('sets headerSearchBarOptions', () => {
-      const result = appendStackHeaderSearchBarPropsToOptions(
-        {},
-        {
-          placeholder: 'Search...',
-          autoCapitalize: 'none',
-        }
-      )
-      expect(result.headerSearchBarOptions).toMatchObject({
-        placeholder: 'Search...',
-        autoCapitalize: 'none',
-      })
-    })
-  })
-
-  describe('StackHeaderComponent', () => {
-    it('sets headerShown false when hidden', () => {
-      const result = appendStackHeaderPropsToOptions({}, { hidden: true })
-      expect(result.headerShown).toBe(false)
-    })
-
-    it('sets headerBlurEffect', () => {
-      const result = appendStackHeaderPropsToOptions({}, { blurEffect: 'regular' })
-      expect(result.headerBlurEffect).toBe('regular')
-    })
-
-    it('sets headerShadowVisible false when shadowColor is transparent', () => {
-      const result = appendStackHeaderPropsToOptions(
-        {},
-        {
-          style: { shadowColor: 'transparent' },
-        }
-      )
-      expect(result.headerShadowVisible).toBe(false)
-    })
-
-    it('processes child Title component', () => {
-      const result = appendStackHeaderPropsToOptions(
-        {},
-        {
-          children: <StackHeaderTitle large>Test Title</StackHeaderTitle>,
-        }
-      )
-      expect(result.title).toBe('Test Title')
-      expect(result.headerLargeTitle).toBe(true)
-    })
-
-    it('processes child BackButton component', () => {
-      const result = appendStackHeaderPropsToOptions(
-        {},
-        {
-          children: <StackHeaderBackButton hidden>Back</StackHeaderBackButton>,
-        }
-      )
-      expect(result.headerBackTitle).toBe('Back')
-      expect(result.headerBackVisible).toBe(false)
-    })
-
-    it('processes multiple children', () => {
-      const result = appendStackHeaderPropsToOptions(
-        {},
-        {
-          children: [
-            <StackHeaderTitle key="title" large>
-              My Screen
-            </StackHeaderTitle>,
-            <StackHeaderBackButton key="back" hidden />,
-          ],
-        }
-      )
-      expect(result.title).toBe('My Screen')
-      expect(result.headerLargeTitle).toBe(true)
-      expect(result.headerBackVisible).toBe(false)
-    })
-  })
-
-  describe('StackScreen composition', () => {
-    it('merges options with Header composition', () => {
-      const result = appendScreenStackPropsToOptions(
-        { animation: 'slide_from_right' },
-        {
-          options: { gestureEnabled: true },
-          children: (
-            <StackHeaderComponent blurEffect="regular">
-              <StackHeaderTitle large>Composed Title</StackHeaderTitle>
-            </StackHeaderComponent>
-          ),
-        }
-      )
-
-      expect(result.animation).toBe('slide_from_right')
-      expect(result.gestureEnabled).toBe(true)
-      expect(result.headerBlurEffect).toBe('regular')
-      expect(result.title).toBe('Composed Title')
-      expect(result.headerLargeTitle).toBe(true)
-    })
-
-    it('composition overrides options prop', () => {
-      const result = appendScreenStackPropsToOptions(
-        {},
-        {
-          options: { title: 'Options Title' },
-          children: (
-            <StackHeaderComponent>
-              <StackHeaderTitle>Composed Title</StackHeaderTitle>
-            </StackHeaderComponent>
-          ),
-        }
-      )
-
-      // Composition should override the options prop title
-      expect(result.title).toBe('Composed Title')
-    })
-  })
-})

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

@@ -1,35 +0,0 @@
-import { StackHeaderBackButton, type StackHeaderBackButtonProps } from './StackHeaderBackButton'
-import { StackHeaderComponent, type StackHeaderProps } from './StackHeaderComponent'
-import { StackHeaderLeft, type StackHeaderLeftProps } from './StackHeaderLeft'
-import { StackHeaderRight, type StackHeaderRightProps } from './StackHeaderRight'
-import { StackHeaderSearchBar, type StackHeaderSearchBarProps } from './StackHeaderSearchBar'
-import { StackHeaderTitle, type StackHeaderTitleProps } from './StackHeaderTitle'
-
-/**
- * Compound component for configuring stack headers.
- * Attach to Stack as `Stack.Header`.
- */
-export const StackHeader = Object.assign(StackHeaderComponent, {
-  Left: StackHeaderLeft,
-  Right: StackHeaderRight,
-  BackButton: StackHeaderBackButton,
-  Title: StackHeaderTitle,
-  SearchBar: StackHeaderSearchBar,
-})
-
-export {
-  StackHeaderBackButton,
-  type StackHeaderBackButtonProps,
-  StackHeaderComponent,
-  type StackHeaderProps,
-  StackHeaderLeft,
-  type StackHeaderLeftProps,
-  StackHeaderRight,
-  type StackHeaderRightProps,
-  StackHeaderSearchBar,
-  type StackHeaderSearchBarProps,
-  StackHeaderTitle,
-  type StackHeaderTitleProps,
-}
-
-export { StackScreen, appendScreenStackPropsToOptions, type StackScreenProps } from './StackScreen'