Add Material design style

Author: charpeni

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,
       },
     });
   }

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>
     );

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 (

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;

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;