fix: accept functions instead of component for header elements

closes #225

Author: satya164

src/types.tsx

@@ -1,4 +1,10 @@
-import { Animated, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import {
+  Animated,
+  TextProps,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
 import {
   SafeAreaView,
   NavigationRoute,
@@ -93,7 +99,9 @@ export type HeaderTransitionConfig = {
 export type NavigationStackOptions = {
   title?: string;
   header?: ((props: HeaderProps) => React.ReactNode) | null;
-  headerTitle?: string;
+  headerTitle?:
+    | ((props: TextProps & { children?: string }) => React.ReactNode)
+    | React.ReactNode;
   headerTitleStyle?: StyleProp<TextStyle>;
   headerTitleContainerStyle?: StyleProp<ViewStyle>;
   headerTintColor?: string;
@@ -102,14 +110,16 @@ export type NavigationStackOptions = {
   headerBackTitle?: string | null;
   headerBackTitleStyle?: StyleProp<TextStyle>;
   headerTruncatedBackTitle?: string;
-  headerLeft?: React.FunctionComponent<HeaderBackButtonProps> | null;
+  headerLeft?:
+    | ((props: HeaderBackButtonProps) => React.ReactNode)
+    | React.ReactNode;
   headerLeftContainerStyle?: StyleProp<ViewStyle>;
   headerRight?: (() => React.ReactNode) | React.ReactNode;
   headerRightContainerStyle?: StyleProp<ViewStyle>;
-  headerBackImage?: React.FunctionComponent<{
-    tintColor: string;
+  headerBackImage?: (props: {
+    tintColor?: string;
     title?: string | null;
-  }>;
+  }) => React.ReactNode;
   headerPressColorAndroid?: string;
   headerBackground?: React.ReactNode;
   headerTransparent?: boolean;
@@ -175,7 +185,7 @@ export type HeaderBackButtonProps = {
   disabled?: boolean;
   onPress: () => void;
   pressColorAndroid?: string;
-  tintColor: string;
+  tintColor?: string;
   backImage?: NavigationStackOptions['headerBackImage'];
   title?: string | null;
   truncatedTitle?: string | null;

src/views/Header/Header.tsx

@@ -11,6 +11,7 @@ import {
   ViewStyle,
   LayoutChangeEvent,
   StyleProp,
+  TextProps,
 } from 'react-native';
 
 import {
@@ -29,6 +30,7 @@ import {
   HeaderLayoutPreset,
   SceneInterpolatorProps,
   HeaderProps,
+  HeaderBackButtonProps,
 } from '../../types';
 
 type Props = HeaderProps & {
@@ -216,27 +218,27 @@ class Header extends React.PureComponent<Props, State> {
           }
         : undefined;
 
-    const HeaderTitleComponent =
+    const render =
       headerTitle && typeof headerTitle !== 'string'
-        ? headerTitle
-        : HeaderTitle;
-    return (
-      <HeaderTitleComponent
-        onLayout={onLayout}
-        allowFontScaling={!!allowFontScaling}
-        style={[
-          color ? { color } : null,
-          layoutPreset === 'center'
-            ? // eslint-disable-next-line react-native/no-inline-styles
-              { textAlign: 'center' }
-            : // eslint-disable-next-line react-native/no-inline-styles
-              { textAlign: 'left' },
-          titleStyle,
-        ]}
-      >
-        {titleString}
-      </HeaderTitleComponent>
-    );
+        ? (headerTitle as (
+            props: TextProps & { children?: string }
+          ) => React.ReactNode)
+        : (props: TextProps & { children?: string }) => (
+            <HeaderTitle {...props} />
+          );
+
+    return render({
+      onLayout,
+      allowFontScaling: Boolean(allowFontScaling),
+      style: [
+        color ? { color } : null,
+        layoutPreset === 'center'
+          ? { textAlign: 'center' }
+          : { textAlign: 'left' },
+        titleStyle,
+      ],
+      children: titleString,
+    });
   };
 
   private renderLeftComponent = (props: SubviewProps) => {
@@ -259,7 +261,9 @@ class Header extends React.PureComponent<Props, State> {
     const width = this.state.widths[props.scene.key]
       ? (this.props.layout.initWidth - this.state.widths[props.scene.key]) / 2
       : undefined;
-    const RenderedLeftComponent = options.headerLeft || HeaderBackButton;
+    const RenderedLeftComponent =
+      (options.headerLeft as React.FunctionComponent<HeaderBackButtonProps>) ||
+      HeaderBackButton;
     const goBack = () => {
       // Go back on next tick because button ripple effect needs to happen on Android
       requestAnimationFrame(() => {
@@ -331,6 +335,11 @@ class Header extends React.PureComponent<Props, State> {
 
   private renderRightComponent = (props: SubviewProps) => {
     const { headerRight } = props.scene.descriptor.options;
+
+    if (typeof headerRight === 'function') {
+      return headerRight();
+    }
+
     return headerRight || null;
   };
 

src/views/Header/HeaderBackButton.tsx

@@ -54,9 +54,10 @@ class HeaderBackButton extends React.PureComponent<
     if (React.isValidElement(backImage)) {
       return backImage;
     } else if (backImage) {
-      const BackImage = backImage;
-
-      return <BackImage tintColor={tintColor} title={title} />;
+      return backImage({
+        tintColor,
+        title,
+      });
     } else {
       return (
         <Image

src/views/Header/ModularHeaderBackButton.tsx

@@ -45,9 +45,7 @@ class ModularHeaderBackButton extends React.PureComponent<Props, State> {
     if (React.isValidElement(backImage)) {
       return backImage;
     } else if (backImage) {
-      const BackImage = backImage;
-
-      return <BackImage tintColor={tintColor} />;
+      return backImage({ tintColor });
     } else {
       return (
         <Image