From 51452551312dacb34b625a04e0aaef527f794102 Mon Sep 17 00:00:00 2001
From: Nicolas Charpentier <nicolas.charpentier079@gmail.com>
Date: Thu, 4 Feb 2016 16:02:19 -0500
Subject: [PATCH] Add Material design style

---
 components/NavBarContainer.js |  7 ++++---
 components/NavBarContent.js   | 36 +++++++++++++++++++----------------
 index.js                      |  3 ++-
 styles.android.js             |  5 +++++
 styles.ios.js                 |  5 +++++
 5 files changed, 36 insertions(+), 20 deletions(-)
 create mode 100644 styles.android.js
 create mode 100644 styles.ios.js

diff --git a/components/NavBarContainer.js b/components/NavBarContainer.js
index f37ff72..5946412 100644
--- a/components/NavBarContainer.js
+++ b/components/NavBarContainer.js
@@ -1,6 +1,7 @@
 import React, { StyleSheet, View, PropTypes, Platform, BackAndroid } from 'react-native';
 
 import NavBarContent from './NavBarContent';
+import * as Styles from '../styles';
 
 const propTypes = {
   backButtonComponent: PropTypes.func,
@@ -39,14 +40,14 @@ class NavBarContainer extends React.Component {
         top: 0,
         left: 0,
         right: 0,
-        height: 64,
+        height: Styles.NAV_BAR_HEIGHT,
       },
       navbarContainerHidden: {
         position: 'absolute',
-        top: -64,
+        top: -Styles.NAV_BAR_HEIGHT,
         left: 0,
         right: 0,
-        height: 64,
+        height: Styles.NAV_BAR_HEIGHT,
       },
     });
   }
diff --git a/components/NavBarContent.js b/components/NavBarContent.js
index 4f6eed7..2696797 100644
--- a/components/NavBarContent.js
+++ b/components/NavBarContent.js
@@ -1,5 +1,6 @@
 import React, { StyleSheet, Text, View, Animated, Easing, PropTypes } from 'react-native';
 import NavButton from './NavButton';
+import * as Styles from '../styles';
 
 const propTypes = {
   backButtonComponent: PropTypes.func,
@@ -35,19 +36,20 @@ class NavBarContent extends React.Component {
         top: 0,
         left: 0,
         right: 0,
-        height: 64, // Default iOS navbar height
+        height: Styles.NAV_BAR_HEIGHT,
         justifyContent: 'center',
         alignItems: 'center',
         flexDirection: 'row',
-        paddingTop: 13,
+        paddingTop: Styles.NAV_BAR_PADDING_TOP,
       },
       navbarText: {
         color: 'white',
         fontSize: 17,
         margin: 10,
-        marginTop: 14,
+        marginTop: Styles.NAV_BAR_TEXT_MARGIN_TOP,
+        marginBottom: Styles.NAV_BAR_TEXT_MARGIN_TOP,
         fontWeight: '600',
-        textAlign: 'center',
+        textAlign: Styles.NAV_BAR_TEXT_ALIGN,
         alignItems: 'center',
       },
       corner: {
@@ -141,11 +143,13 @@ class NavBarContent extends React.Component {
       );
     }
 
-    leftCorner = (
-      <View style={[this.styles.corner, this.styles.alignLeft]}>
-        {leftCornerContent}
-      </View>
-    );
+    if (this.props.route.leftCorner || this.props.route.index > 0) {
+      leftCorner = (
+        <View style={[this.styles.corner, this.styles.alignLeft]}>
+          {leftCornerContent}
+        </View>
+      );
+    }
 
     /**
      * Set rightCorner
@@ -161,13 +165,13 @@ class NavBarContent extends React.Component {
           {...this.props.route.rightCornerProps}
         />
       );
-    }
 
-    rightCorner = (
-      <View style={[this.styles.corner, this.styles.alignRight]}>
-        {rightCornerContent}
-      </View>
-    );
+      rightCorner = (
+        <View style={[this.styles.corner, this.styles.alignRight]}>
+          {rightCornerContent}
+        </View>
+      );
+    }
 
     /**
      * Set title message
@@ -185,7 +189,7 @@ class NavBarContent extends React.Component {
     }
 
     titleComponent = (
-      <View style={{ flex: 3 }}>
+      <View style={{ flex: 6 }}>
         {titleContent}
       </View>
     );
diff --git a/index.js b/index.js
index 251bbd7..4afa592 100644
--- a/index.js
+++ b/index.js
@@ -9,6 +9,7 @@ import React, {
 import { EventEmitter } from 'fbemitter';
 
 import NavBarContainer from './components/NavBarContainer';
+import * as Styles from './styles';
 
 const propTypes = {
   backButtonComponent: PropTypes.func,
@@ -156,7 +157,7 @@ class Router extends React.Component {
     } else if (this.props.hideNavigationBar || route.hideNavigationBar) {
       margin = this.props.noStatusBar ? 0 : 20;
     } else {
-      margin = 64;
+      margin = Styles.NAV_BAR_HEIGHT;
     }
 
     return (
diff --git a/styles.android.js b/styles.android.js
new file mode 100644
index 0000000..200b689
--- /dev/null
+++ b/styles.android.js
@@ -0,0 +1,5 @@
+export const NAV_BAR_HEIGHT = 56;
+export const NAV_BAR_TEXT_ALIGN = 'left';
+export const NAV_BAR_TEXT_MARGIN_TOP = 0;
+export const NAV_BAR_TEXT_MARGIN_BOTTOM = 20;
+export const NAV_BAR_PADDING_TOP = 0;
diff --git a/styles.ios.js b/styles.ios.js
new file mode 100644
index 0000000..9c7f648
--- /dev/null
+++ b/styles.ios.js
@@ -0,0 +1,5 @@
+export const NAV_BAR_HEIGHT = 64;
+export const NAV_BAR_TEXT_ALIGN = 'center';
+export const NAV_BAR_TEXT_MARGIN_TOP = 14;
+export const NAV_BAR_TEXT_MARGIN_BOTTOM = 0;
+export const NAV_BAR_PADDING_TOP = 13;