Add header.left property (#29)

* Add header.left property

* Add docs

* Updates

* Update

* Remove unused param

* Update'

* fix

* Make sure to guard undefined defaultProps

packages/react-navigation/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

packages/react-navigation/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
    */

packages/react-navigation/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;