fix: pass onlayout to headerTitle (#9808)

similar to #9806 but for headerTitle's onlayout prop
react-navigation · Aug 9, 2021 · a79ce57 · a79ce57
1 parent 22799fc
commit a79ce57
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 23 deletions.
diff --git a/packages/elements/src/types.tsx b/packages/elements/src/types.tsx
@@ -8,6 +8,25 @@ 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.
@@ -16,26 +35,7 @@ export type HeaderOptions = {
    * It receives `allowFontScaling`, `tintColor`, `style` and `children` in the options object as an argument.
    * The title string is passed in `children`.
    */
-  headerTitle?:
-    | string
-    | ((props: {
-        /**
-         * 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>>;
-      }) => React.ReactNode);
+  headerTitle?: string | ((props: HeaderTitleProps) => React.ReactNode);
   /**
    * How to align the the header title.
    * Defaults to `center` on iOS and `left` on Android.

diff --git a/packages/stack/src/types.tsx b/packages/stack/src/types.tsx
@@ -1,6 +1,7 @@
 import type {
   HeaderBackButton,
   HeaderOptions,
+  HeaderTitleProps,
 } from '@react-navigation/elements';
 import type {
   Descriptor,
@@ -13,7 +14,13 @@ import type {
   StackNavigationState,
 } from '@react-navigation/native';
 import type * as React from 'react';
-import type { Animated, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type {
+  Animated,
+  StyleProp,
+  TextStyle,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
 
 export type StackNavigationEventMap = {
   /**
@@ -118,7 +125,17 @@ export type StackHeaderMode = 'float' | 'screen';
 
 export type StackPresentationMode = 'card' | 'modal';
 
-export type StackHeaderOptions = HeaderOptions & {
+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);
   /**
    * Whether back button title font should scale to respect Text Size accessibility settings. Defaults to `false`.
    */

diff --git a/packages/stack/src/views/Header/HeaderSegment.tsx b/packages/stack/src/views/Header/HeaderSegment.tsx
@@ -174,7 +174,7 @@ export default function HeaderSegment(props: Props) {
   const headerTitle: StackHeaderOptions['headerTitle'] =
     typeof title !== 'function'
       ? (props) => <HeaderTitle {...props} onLayout={handleTitleLayout} />
-      : title;
+      : (props) => title({ ...props, onLayout: handleTitleLayout });
 
   return (
     <Header