one 1.2.69 → 1.2.70

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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,123 @@
+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 }
+  }
+
+  const isTransparent = flattenedStyle?.backgroundColor === 'transparent'
+  const hasCustomShadow = flattenedStyle?.shadowColor !== undefined
+  const hasBackgroundColor = flattenedStyle?.backgroundColor !== undefined
+  const hasLargeBackgroundColor = flattenedLargeStyle?.backgroundColor !== undefined
+
+  let updatedOptions: NativeStackNavigationOptions = {
+    ...options,
+    headerShown: !props.hidden,
+    headerBlurEffect: props.blurEffect,
+    // Set headerTransparent when backgroundColor is 'transparent'
+    // This works on both iOS and Android for normal headers
+    // Note: When using SearchBar on iOS, if you don't have a ScrollView with
+    // contentInsetAdjustmentBehavior="automatic", set headerTransparent: false in options
+    ...(isTransparent && { headerTransparent: true }),
+    // Only set header styles when explicitly configured to avoid interfering with native defaults
+    ...(hasBackgroundColor && {
+      headerStyle: { backgroundColor: flattenedStyle.backgroundColor as string },
+    }),
+    ...(hasLargeBackgroundColor && {
+      headerLargeStyle: { backgroundColor: flattenedLargeStyle.backgroundColor as string },
+    }),
+    // Only set shadow visibility when explicitly configured
+    ...(hasCustomShadow && { headerShadowVisible: flattenedStyle?.shadowColor !== 'transparent' }),
+    ...(flattenedLargeStyle?.shadowColor !== undefined && {
+      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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,72 @@
+import type { NativeStackNavigationOptions } from '@react-navigation/native-stack'
+import { Platform, 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)
+
+  // Build title style only if there are actual style properties
+  const titleStyle = flattenedStyle
+    ? {
+        ...flattenedStyle,
+        ...(flattenedStyle?.fontWeight
+          ? { fontWeight: convertFontWeightToStringFontWeight(flattenedStyle.fontWeight) }
+          : {}),
+      }
+    : undefined
+
+  // Build large title style only if there are actual style properties
+  const largeTitleStyle = flattenedLargeStyle
+    ? {
+        ...flattenedLargeStyle,
+        ...(flattenedLargeStyle?.fontWeight
+          ? { fontWeight: convertFontWeightToStringFontWeight(flattenedLargeStyle.fontWeight) }
+          : {}),
+      }
+    : undefined
+
+  return {
+    ...options,
+    title: props.children,
+    headerLargeTitle: props.large,
+    // Large titles on iOS require headerTransparent for proper scroll behavior
+    // Only set on iOS since headerLargeTitle is iOS-only
+    ...(props.large && Platform.OS === 'ios' && { headerTransparent: true }),
+    headerTitleAlign: flattenedStyle?.textAlign,
+    // Only set styles when explicitly configured to avoid interfering with native defaults
+    ...(titleStyle && Object.keys(titleStyle).length > 0 && { headerTitleStyle: titleStyle }),
+    ...(largeTitleStyle &&
+      Object.keys(largeTitleStyle).length > 0 && { headerLargeTitleStyle: largeTitleStyle }),
+  }
+}

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

@@ -0,0 +1,66 @@
+'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.SearchBar placeholder="Search..." />
+ *   </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
+}