From 23ca61679dbb50f397ac7a47c553072f551ccbc2 Mon Sep 17 00:00:00 2001
From: Mike Grabowski <grabbou@gmail.com>
Date: Fri, 27 Jan 2017 12:46:11 +0100
Subject: [PATCH] Replace header.bar with headerComponent

---
 src/TypeDefinition.js  |  3 ++-
 src/views/CardStack.js | 16 ++++++++++------
 src/views/Header.js    |  8 ++++----
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/TypeDefinition.js b/src/TypeDefinition.js
index 111cbea..32c0597 100644
--- a/src/TypeDefinition.js
+++ b/src/TypeDefinition.js
@@ -8,6 +8,7 @@ import {
 
 import type {
   HeaderMode,
+  HeaderProps,
 } from './views/Header';
 
 /**
@@ -242,7 +243,7 @@ export type NavigationContainerConfig = {
 export type NavigationStackViewConfig = {
   mode?: 'card' | 'modal',
   headerMode?: HeaderMode,
-  headerComponent?: ReactClass<*>,
+  headerComponent?: ReactClass<HeaderProps>,
 };
 
 export type NavigationStackRouterConfig = {
diff --git a/src/views/CardStack.js b/src/views/CardStack.js
index 15a6c0a..c4987e3 100644
--- a/src/views/CardStack.js
+++ b/src/views/CardStack.js
@@ -30,6 +30,7 @@ import type {
 
 import type {
   HeaderMode,
+  HeaderProps,
 } from './Header';
 
 import type { TransitionConfig } from './TransitionConfigs';
@@ -41,6 +42,7 @@ const NativeAnimatedModule = NativeModules && NativeModules.NativeAnimatedModule
 type Props = {
   screenProps?: {};
   headerMode: HeaderMode,
+  headerComponent?: ReactClass<HeaderProps>,
   mode: 'card' | 'modal',
   navigation: NavigationScreenProp<NavigationState, NavigationAction>,
   router: NavigationRouter,
@@ -61,6 +63,7 @@ type Props = {
 type DefaultProps = {
   mode: 'card' | 'modal',
   gesturesEnabled: boolean,
+  headerComponent: ReactClass<HeaderProps>,
 };
 
 class CardStack extends React.Component<DefaultProps, Props, void> {
@@ -87,6 +90,11 @@ class CardStack extends React.Component<DefaultProps, Props, void> {
      */
     headerMode: PropTypes.oneOf(['float', 'screen', 'none']),
 
+    /**
+     * Custom React component to be used as a header
+     */
+    headerComponent: PropTypes.func,
+
     /**
      * Style of the cards movement. Value could be `card` or `modal`.
      * Default value is `card`.
@@ -138,6 +146,7 @@ class CardStack extends React.Component<DefaultProps, Props, void> {
   static defaultProps: DefaultProps = {
     mode: 'card',
     gesturesEnabled: Platform.OS === 'ios',
+    headerComponent: Header,
   };
 
   componentWillMount() {
@@ -186,13 +195,8 @@ class CardStack extends React.Component<DefaultProps, Props, void> {
     const navigation = this._getChildNavigation(props.scene);
     const header = this.props.router.getScreenConfig(navigation, 'header') || {};
 
-    let HeaderComponent = Header;
-    if (header.bar) {
-      HeaderComponent = header.bar;
-    }
-
     return (
-      <HeaderComponent
+      <this.props.headerComponent
         {...props}
         style={header.style}
         mode={headerMode}
diff --git a/src/views/Header.js b/src/views/Header.js
index b0c762d..a20256d 100644
--- a/src/views/Header.js
+++ b/src/views/Header.js
@@ -39,7 +39,7 @@ type DefaultProps = {
   renderTitleComponent: SubViewRenderer,
 };
 
-type Props = NavigationSceneRendererProps & {
+export type HeaderProps = NavigationSceneRendererProps & {
   mode: HeaderMode,
   onNavigateBack: ?Function,
   renderLeftComponent: SubViewRenderer,
@@ -53,7 +53,7 @@ type SubViewName = 'left' | 'title' | 'right';
 const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56;
 const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : 0;
 
-class Header extends React.Component<DefaultProps, Props, *> {
+class Header extends React.Component<DefaultProps, HeaderProps, *> {
 
   static HEIGHT = APPBAR_HEIGHT + STATUSBAR_HEIGHT;
   static Title = HeaderTitle;
@@ -89,9 +89,9 @@ class Header extends React.Component<DefaultProps, Props, *> {
     style: PropTypes.any,
   };
 
-  props: Props;
+  props: HeaderProps;
 
-  shouldComponentUpdate(nextProps: Props, nextState: any): boolean {
+  shouldComponentUpdate(nextProps: HeaderProps, nextState: any): boolean {
     return ReactComponentWithPureRenderMixin.shouldComponentUpdate.call(
       this,
       nextProps,