Update Header props type

src/components/Header.tsx

@@ -1,15 +1,15 @@
-import React, {ReactElement} from 'react';
+import React, {ReactNode} from 'react';
 import {StyleProp, TextStyle, View} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
 import EnvironmentBadge from './EnvironmentBadge';
 import Text from './Text';
 
 type HeaderProps = {
     /** Title of the Header */
-    title?: string | ReactElement;
+    title?: ReactNode;
 
     /** Subtitle of the header */
-    subtitle?: string | ReactElement;
+    subtitle?: ReactNode;
 
     /** Should we show the environment badge (dev/stg)?  */
     shouldShowEnvironmentBadge?: boolean;

src/components/HeaderWithBackButton/index.tsx

@@ -30,7 +30,7 @@ function HeaderWithBackButton({
     onThreeDotsButtonPress = () => {},
     report = null,
     policy,
-    personalDetails,
+    personalDetails = null,
     shouldShowAvatarWithDisplay = false,
     shouldShowBackButton = true,
     shouldShowBorderBottom = false,

src/components/HeaderWithBackButton/types.ts

@@ -1,4 +1,4 @@
-import {ReactElement} from 'react';
+import {ReactNode} from 'react';
 import {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import type {Action} from '@hooks/useSingleExecution';
 import type {StepCounterParams} from '@src/languages/types';
@@ -23,7 +23,7 @@ type HeaderWithBackButtonProps = ChildrenProps & {
     title?: string;
 
     /** Subtitle of the header */
-    subtitle: string | ReactElement;
+    subtitle?: ReactNode;
 
     /** Title color */
     titleColor?: string;
@@ -92,10 +92,10 @@ type HeaderWithBackButtonProps = ChildrenProps & {
     policy?: OnyxEntry<Policy>;
 
     /** Policies, if we're showing the details for a report and need participant details for AvatarWithDisplay */
-    personalDetails: OnyxCollection<PersonalDetails>;
+    personalDetails?: OnyxCollection<PersonalDetails>;
 
     /** Single execution function to prevent concurrent navigation actions */
-    singleExecution: <T extends unknown[]>(action: Action<T>) => Action<T>;
+    singleExecution?: <T extends unknown[]>(action: Action<T>) => Action<T>;
 
     /** Whether we should navigate to report page when the route have a topMostReport  */
     shouldNavigateToTopMostReport?: boolean;