refactor: add description to headerTitle and headerLeft

packages/elements/src/types.tsx

@@ -8,25 +8,6 @@ import type {
 
 export type Layout = { width: number; height: number };
 
-export type HeaderTitleProps = {
-  /**
-   * The title text of the header.
-   */
-  children: string;
-  /**
-   * Whether title font should scale to respect Text Size accessibility settings.
-   */
-  allowFontScaling?: boolean;
-  /**
-   * Tint color for the header.
-   */
-  tintColor?: string;
-  /**
-   * Style object for the title element.
-   */
-  style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
-};
-
 export type HeaderOptions = {
   /**
    * String or a function that returns a React Element to be used by the header.
@@ -121,6 +102,29 @@ export type HeaderOptions = {
   headerStatusBarHeight?: number;
 };
 
+export type HeaderTitleProps = {
+  /**
+   * The title text of the header.
+   */
+  children: string;
+  /**
+   * Whether title font should scale to respect Text Size accessibility settings.
+   */
+  allowFontScaling?: boolean;
+  /**
+   * Tint color for the header.
+   */
+  tintColor?: string;
+  /**
+   * Callback to trigger when the size of the title element changes.
+   */
+  onLayout?: (e: LayoutChangeEvent) => void;
+  /**
+   * Style object for the title element.
+   */
+  style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
+};
+
 export type HeaderBackButtonProps = {
   /**
    * Whether the button is disabled.

packages/stack/src/types.tsx

@@ -1,5 +1,6 @@
 import type {
   HeaderBackButton,
+  HeaderBackButtonProps,
   HeaderOptions,
   HeaderTitleProps,
 } from '@react-navigation/elements';
@@ -14,13 +15,7 @@ import type {
   StackNavigationState,
 } from '@react-navigation/native';
 import type * as React from 'react';
-import type {
-  Animated,
-  StyleProp,
-  TextStyle,
-  ViewProps,
-  ViewStyle,
-} from 'react-native';
+import type { Animated, StyleProp, TextStyle, ViewStyle } from 'react-native';
 
 export type StackNavigationEventMap = {
   /**
@@ -125,17 +120,22 @@ export type StackHeaderMode = 'float' | 'screen';
 
 export type StackPresentationMode = 'card' | 'modal';
 
-export type StackHeaderOptions = Omit<HeaderOptions, 'headerTitle'> & {
-  headerTitle?:
-    | string
-    | ((
-        props: HeaderTitleProps & {
-          /**
-           * Callback to trigger when the size of the title element changes.
-           */
-          onLayout?: ViewProps['onLayout'];
-        }
-      ) => React.ReactNode);
+export type StackHeaderOptions = Omit<
+  HeaderOptions,
+  'headerLeft' | 'headerTitle'
+> & {
+  /**
+   * String or a function that returns a React Element to be used by the header.
+   * Defaults to screen `title` or route name.
+   *
+   * It receives `allowFontScaling`, `tintColor`, `style` and `children` in the options object as an argument.
+   * The title string is passed in `children`.
+   */
+  headerTitle?: string | ((props: HeaderTitleProps) => React.ReactNode);
+  /**
+   * Function which returns a React Element to display on the left side of the header.
+   */
+  headerLeft?: (props: HeaderBackButtonProps) => React.ReactNode;
   /**
    * Whether back button title font should scale to respect Text Size accessibility settings. Defaults to `false`.
    */