From 7c0fcc6cf58a0a601dc4749801dc68f28d4b0307 Mon Sep 17 00:00:00 2001
From: Mike Grabowski <grabbou@gmail.com>
Date: Fri, 27 Jan 2017 17:48:26 +0100
Subject: [PATCH] Add header.left property (#29)

* Add header.left property

* Add docs

* Updates

* Update

* Remove unused param

* Update'

* fix

* Make sure to guard undefined defaultProps
---
 docs/api/navigators/StackNavigator.md |  3 ++-
 src/TypeDefinition.js                 |  5 +++++
 src/views/CardStack.js                | 20 +++++++++++++++++---
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/docs/api/navigators/StackNavigator.md b/docs/api/navigators/StackNavigator.md
index 4b20ee56e1..7748c2a7e4 100644
--- a/docs/api/navigators/StackNavigator.md
+++ b/docs/api/navigators/StackNavigator.md
@@ -117,7 +117,8 @@ All `navigationOptions` for the `StackNavigator`:
 - `header` - a config object for the header bar:
   - `visible` - Boolean toggle of header visibility. Only works when `headerMode` is `screen`.
   - `title` - Title string used by the navigation bar, or a custom React component
-  - `right` - Custom component displayed on the right side of the header
+  - `right` - Custom React Element to display on the right side of the header
+  - `left` - Custom React Element to display on the left side of the header
   - `style` - Style object for the navigation bar
 
 ### Examples
diff --git a/src/TypeDefinition.js b/src/TypeDefinition.js
index 32c0597593..dc24a12cb3 100644
--- a/src/TypeDefinition.js
+++ b/src/TypeDefinition.js
@@ -113,6 +113,11 @@ export type HeaderConfig = {
    */
   right?: React.Element<*>,
 
+  /**
+   * Renders a custom left component
+   */
+  left?: React.Element<*>,
+
   /**
    * Style passed into navigation bar container
    */
diff --git a/src/views/CardStack.js b/src/views/CardStack.js
index c4987e320b..19df8080af 100644
--- a/src/views/CardStack.js
+++ b/src/views/CardStack.js
@@ -201,13 +201,27 @@ class CardStack extends React.Component<DefaultProps, Props, void> {
         style={header.style}
         mode={headerMode}
         onNavigateBack={() => this.props.navigation.goBack(null)}
+        renderLeftComponent={(props) => {
+          const navigation = this._getChildNavigation(props.scene);
+          const header = this.props.router.getScreenConfig(navigation, 'header');
+          if (header && header.left) {
+            return header.left;
+          }
+          const { renderLeftComponent } = this.props.headerComponent.defaultProps || {};
+          if (typeof renderLeftComponent === 'function') {
+            return renderLeftComponent(props);
+          }
+          return null;
+        }}
         renderRightComponent={({ scene }) => {
           const navigation = this._getChildNavigation(scene);
           const header = this.props.router.getScreenConfig(navigation, 'header');
-          const right = header && header.right;
-          return right;
+          if (header && header.right) {
+            return header.right;
+          }
+          return null;
         }}
-        renderTitleComponent={({ scene, navigationState }) => {
+        renderTitleComponent={({ scene }) => {
           const navigation = this._getChildNavigation(scene);
           const header = this.props.router.getScreenConfig(navigation, 'header');
           let title = null;