Update NavBarContainer.js

Added support for hiding navbar per route
Style improvements

Author: davidLeonardi

components/NavBarContainer.js

@@ -9,7 +9,6 @@ var {
   View
 } = React;
 
-
 var NavBarContainer = React.createClass({
 
   getInitialState: function() {
@@ -41,22 +40,51 @@ var NavBarContainer = React.createClass({
 
   // We render both the current and the previous navbar (for animation)
   render: function() {
-    if(this.props.currentRoute.trans === true)
-      var trans = {backgroundColor: 'transparent'}
-    else
-      var trans = {}
+    var trans,
+      navbarStyle,
+      navbarContent;
 
-    return (
-      <View style={[styles.navbarContainer, this.props.style, trans]}>
-        {this.props.currentRoute.trans
-          ?( <View /> )
-          :( <NavBarContent
-            route={this.state.previousRoute}
-            backButtonComponent={this.props.backButtonComponent}
-            rightCorner={this.props.rightCorner}
-            titleStyle={this.props.titleStyle}
-            willDisappear="true" /> )
-        }
+    if (this.props.currentRoute.trans) {
+      trans = {backgroundColor: 'transparent'};
+    }
+    else {
+      trans = {};
+    }
+
+	if (this.props.currentRoute.hideNavigationBar) {
+      navbarStyle = styles.navbarContainerHidden;
+    } else {
+      navbarStyle = styles.navbarContainer;
+    }
+
+	if(this.props.currentRoute.trans) {
+      navbarContent = (
+        <NavBarContent
+        route={this.state.previousRoute}
+        backButtonComponent={this.props.backButtonComponent}
+        rightCorner={this.props.rightCorner}
+        titleStyle={this.props.titleStyle}
+        willDisappear="true"></NavBarContent>
+      );
+    } else if (this.props.currentRoute.hideNavigationBar) {
+      navbarContent = (
+        <NavBarContent
+          route={this.props.currentRoute}
+          backButtonComponent={this.props.backButtonComponent}
+          rightCorner={this.props.rightCorner}
+          titleStyle={this.props.titleStyle}
+          borderBottomWidth={this.props.borderBottomWidth}
+          borderColor={this.props.borderColor}
+          goBack={this.goBack}
+          goForward={this.goForward}
+          leftProps={this.props.leftProps}
+          rightProps={this.props.rightProps}
+          titleProps={this.props.titleProps}
+          customAction={this.customAction}>
+      </NavBarContent>
+      );
+    } else {
+      navbarContent = (
         <NavBarContent
           route={this.props.currentRoute}
           backButtonComponent={this.props.backButtonComponent}
@@ -69,22 +97,34 @@ var NavBarContainer = React.createClass({
           leftProps={this.props.leftProps}
           rightProps={this.props.rightProps}
           titleProps={this.props.titleProps}
-          customAction={this.customAction}
-        />
-      </View>    )
+          customAction={this.customAction}>
+        </NavBarContent>
+      );
+    }
+
+    return (
+      <View style={[navbarStyle, this.props.style, trans]}>
+        {navbarContent}
+      </View>
+    );
   }
 });
 
-
 var styles = StyleSheet.create({
   navbarContainer: {
     position: 'absolute',
     top: 0,
     left: 0,
     right: 0,
     height: 64
+  },
+  navbarContainerHidden: {
+    position: 'absolute',
+    top: -64,
+    left: 0,
+    right: 0,
+    height: 64
   }
 });
 
-
 module.exports = NavBarContainer;