Add header.left property (#29)

* Add header.left property * Add docs * Updates * Update * Remove unused param * Update' * fix * Make sure to guard undefined defaultProps
react-navigation · Jan 27, 2017 · 7c0fcc6 · 7c0fcc6
1 parent c34a6d5
commit 7c0fcc6
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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;