Export per-platform NavigatorNavigationBarStyles for consistent styling

Summary: This allows for the iOS-style navigation bar on Android and vice versa in order to simplify design. It is entirely optional in that NavigationBars will continue to defauly to their platform-specific style, but you can override it with the `navigationStyles` prop:

```js
<Navigator.NavigationBar
  navigationStyles={Navigator.NavigationBar.StylesIOS}
/>
```

Fixes #2995.
Closes https://github.com/facebook/react-native/pull/3028

Reviewed By: @​svcscm

Differential Revision: D2527902

Pulled By: @ericvicenti

fb-gh-sync-id: c7b1bfac200b5e03fc0d9dfb8acc8b916c825595

Libraries/CustomComponents/Navigator/Navigator.js

@@ -37,7 +37,6 @@ var NavigatorNavigationBar = require('NavigatorNavigationBar');
 var NavigatorSceneConfigs = require('NavigatorSceneConfigs');
 var PanResponder = require('PanResponder');
 var React = require('React');
-var StaticContainer = require('StaticContainer.react');
 var StyleSheet = require('StyleSheet');
 var Subscribable = require('Subscribable');
 var TimerMixin = require('react-timer-mixin');

Libraries/CustomComponents/Navigator/NavigatorBreadcrumbNavigationBar.js

@@ -27,9 +27,10 @@
 'use strict';
 
 var NavigatorBreadcrumbNavigationBarStyles = require('NavigatorBreadcrumbNavigationBarStyles');
-var NavigatorNavigationBarStyles = require('NavigatorNavigationBarStyles');
+var NavigatorNavigationBarStylesAndroid = require('NavigatorNavigationBarStylesAndroid');
+var NavigatorNavigationBarStylesIOS = require('NavigatorNavigationBarStylesIOS');
+var Platform = require('Platform');
 var React = require('React');
-var StaticContainer = require('StaticContainer.react');
 var StyleSheet = require('StyleSheet');
 var View = require('View');
 
@@ -38,6 +39,8 @@ var { Map } = require('immutable');
 var invariant = require('invariant');
 
 var Interpolators = NavigatorBreadcrumbNavigationBarStyles.Interpolators;
+var NavigatorNavigationBarStyles = Platform.OS === 'android' ?
+  NavigatorNavigationBarStylesAndroid : NavigatorNavigationBarStylesIOS;
 var PropTypes = React.PropTypes;
 
 /**

Libraries/CustomComponents/Navigator/NavigatorBreadcrumbNavigationBarStyles.android.js

@@ -1,23 +1,37 @@
 /**
- * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
+ * Copyright (c) 2015, Facebook, Inc.  All rights reserved.
  *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
+ * Facebook, Inc. ("Facebook") owns all right, title and interest, including
+ * all intellectual property and other proprietary rights, in and to the React
+ * Native CustomComponents software (the "Software").  Subject to your
+ * compliance with these terms, you are hereby granted a non-exclusive,
+ * worldwide, royalty-free copyright license to (1) use and copy the Software;
+ * and (2) reproduce and distribute the Software as part of your own software
+ * ("Your Software").  Facebook reserves all rights not expressly granted to
+ * you in this license agreement.
+ *
+ * THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS
+ * OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
+ * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED.
+ * IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR
+ * EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
+ * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
+ * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
+ * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF
+ * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  *
  * @providesModule NavigatorBreadcrumbNavigationBarStyles
  */
 'use strict';
 
-var Dimensions = require('Dimensions');
-var NavigatorNavigationBarStyles = require('NavigatorNavigationBarStyles');
+var NavigatorNavigationBarStylesAndroid = require('NavigatorNavigationBarStylesAndroid');
 
 var buildStyleInterpolator = require('buildStyleInterpolator');
 var merge = require('merge');
 
-var SCREEN_WIDTH = Dimensions.get('window').width;
-var NAV_BAR_HEIGHT = NavigatorNavigationBarStyles.General.NavBarHeight;
+var NAV_BAR_HEIGHT = NavigatorNavigationBarStylesAndroid.General.NavBarHeight;
 
 var SPACING = 8;
 var ICON_WIDTH = 40;

Libraries/CustomComponents/Navigator/NavigatorBreadcrumbNavigationBarStyles.ios.js

@@ -27,14 +27,14 @@
 'use strict';
 
 var Dimensions = require('Dimensions');
-var NavigatorNavigationBarStyles = require('NavigatorNavigationBarStyles');
+var NavigatorNavigationBarStylesIOS = require('NavigatorNavigationBarStylesIOS');
 
 var buildStyleInterpolator = require('buildStyleInterpolator');
 var merge = require('merge');
 
 var SCREEN_WIDTH = Dimensions.get('window').width;
-var STATUS_BAR_HEIGHT = NavigatorNavigationBarStyles.General.StatusBarHeight;
-var NAV_BAR_HEIGHT = NavigatorNavigationBarStyles.General.NavBarHeight;
+var STATUS_BAR_HEIGHT = NavigatorNavigationBarStylesIOS.General.StatusBarHeight;
+var NAV_BAR_HEIGHT = NavigatorNavigationBarStylesIOS.General.NavBarHeight;
 
 var SPACING = 4;
 var ICON_WIDTH = 40;

Libraries/CustomComponents/Navigator/NavigatorNavigationBar.js

@@ -27,7 +27,9 @@
 'use strict';
 
 var React = require('React');
-var NavigatorNavigationBarStyles = require('NavigatorNavigationBarStyles');
+var NavigatorNavigationBarStylesAndroid = require('NavigatorNavigationBarStylesAndroid');
+var NavigatorNavigationBarStylesIOS = require('NavigatorNavigationBarStylesIOS');
+var Platform = require('Platform');
 var StaticContainer = require('StaticContainer.react');
 var StyleSheet = require('StyleSheet');
 var View = require('View');
@@ -36,6 +38,9 @@ var { Map } = require('immutable');
 
 var COMPONENT_NAMES = ['Title', 'LeftButton', 'RightButton'];
 
+var NavigatorNavigationBarStyles = Platform.OS === 'android' ?
+  NavigatorNavigationBarStylesAndroid : NavigatorNavigationBarStylesIOS;
+
 var navStatePresentedIndex = function(navState) {
   if (navState.presentedIndex !== undefined) {
     return navState.presentedIndex;
@@ -57,11 +62,20 @@ var NavigatorNavigationBar = React.createClass({
       routeStack: React.PropTypes.arrayOf(React.PropTypes.object),
       presentedIndex: React.PropTypes.number,
     }),
+    navigationStyles: React.PropTypes.object,
     style: View.propTypes.style,
   },
 
   statics: {
     Styles: NavigatorNavigationBarStyles,
+    StylesAndroid: NavigatorNavigationBarStylesAndroid,
+    StylesIOS: NavigatorNavigationBarStylesIOS,
+  },
+
+  getDefaultProps() {
+    return {
+      navigationStyles: NavigatorNavigationBarStyles,
+    };
   },
 
   componentWillMount: function() {
@@ -104,14 +118,14 @@ var NavigatorNavigationBar = React.createClass({
     var interpolate;
     if (oldDistToCenter > 0 && newDistToCenter === 0 ||
         newDistToCenter > 0 && oldDistToCenter === 0) {
-      interpolate = NavigatorNavigationBarStyles.Interpolators.RightToCenter;
+      interpolate = this.props.navigationStyles.Interpolators.RightToCenter;
     } else if (oldDistToCenter < 0 && newDistToCenter === 0 ||
                newDistToCenter < 0 && oldDistToCenter === 0) {
-      interpolate = NavigatorNavigationBarStyles.Interpolators.CenterToLeft;
+      interpolate = this.props.navigationStyles.Interpolators.CenterToLeft;
     } else if (oldDistToCenter === newDistToCenter) {
-      interpolate = NavigatorNavigationBarStyles.Interpolators.RightToCenter;
+      interpolate = this.props.navigationStyles.Interpolators.RightToCenter;
     } else {
-      interpolate = NavigatorNavigationBarStyles.Interpolators.RightToLeft;
+      interpolate = this.props.navigationStyles.Interpolators.RightToLeft;
     }
 
     COMPONENT_NAMES.forEach(function (componentName) {
@@ -136,6 +150,9 @@ var NavigatorNavigationBar = React.createClass({
   },
 
   render: function() {
+    var navBarStyle = {
+      height: this.props.navigationStyles.General.TotalNavHeight,
+    };
     var navState = this.props.navState;
     var components = COMPONENT_NAMES.map(function (componentName) {
       return navState.routeStack.map(
@@ -144,7 +161,7 @@ var NavigatorNavigationBar = React.createClass({
     }, this);
 
     return (
-      <View style={[styles.navBarContainer, this.props.style]}>
+      <View style={[styles.navBarContainer, navBarStyle, this.props.style]}>
         {components}
       </View>
     );
@@ -172,7 +189,8 @@ var NavigatorNavigationBar = React.createClass({
     }
 
     var initialStage = index === navStatePresentedIndex(this.props.navState) ?
-      NavigatorNavigationBarStyles.Stages.Center : NavigatorNavigationBarStyles.Stages.Left;
+      this.props.navigationStyles.Stages.Center :
+      this.props.navigationStyles.Stages.Left;
     rendered = (
       <View
         ref={(ref) => {
@@ -193,7 +211,6 @@ var NavigatorNavigationBar = React.createClass({
 var styles = StyleSheet.create({
   navBarContainer: {
     position: 'absolute',
-    height: NavigatorNavigationBarStyles.General.TotalNavHeight,
     top: 0,
     left: 0,
     right: 0,

Libraries/CustomComponents/Navigator/NavigatorNavigationBarStylesAndroid.js

@@ -1,12 +1,28 @@
 /**
- * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
+ * Copyright (c) 2015, Facebook, Inc.  All rights reserved.
  *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
+ * Facebook, Inc. ("Facebook") owns all right, title and interest, including
+ * all intellectual property and other proprietary rights, in and to the React
+ * Native CustomComponents software (the "Software").  Subject to your
+ * compliance with these terms, you are hereby granted a non-exclusive,
+ * worldwide, royalty-free copyright license to (1) use and copy the Software;
+ * and (2) reproduce and distribute the Software as part of your own software
+ * ("Your Software").  Facebook reserves all rights not expressly granted to
+ * you in this license agreement.
  *
- * @providesModule NavigatorNavigationBarStyles
+ * THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS
+ * OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
+ * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED.
+ * IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR
+ * EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
+ * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
+ * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
+ * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF
+ * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ *
+ * @providesModule NavigatorNavigationBarStylesAndroid
  */
 'use strict';
 

Libraries/CustomComponents/Navigator/NavigatorNavigationBarStylesIOS.js

@@ -22,7 +22,7 @@
  * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF
  * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  *
- * @providesModule NavigatorNavigationBarStyles
+ * @providesModule NavigatorNavigationBarStylesIOS
  */
 'use strict';