NavigatorIOS custom nav bar colors

Summary:
NavigatorIOS with custom nav bar custom colors, working example included in
UIExplorer.

Based on pull request #318 to complete pending work based on comments.
Closes https://github.com/facebook/react-native/pull/695
Github Author: Eduardo <edo.lomeli@gmail.com>

Test Plan: Imported from GitHub, without a `Test Plan:` line.

Examples/UIExplorer/Navigator/NavigatorExample.js

@@ -175,4 +175,6 @@ var styles = StyleSheet.create({
   }
 });
 
+TabBarExample.external = true;
+
 module.exports = TabBarExample;

Examples/UIExplorer/NavigatorIOSColorsExample.js

@@ -0,0 +1,90 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+'use strict';
+
+var React = require('react-native');
+var {
+  NavigatorIOS,
+  StatusBarIOS,
+  StyleSheet,
+  Text,
+  View
+} = React;
+
+var EmptyPage = React.createClass({
+
+  render: function() {
+    return (
+      <View style={styles.emptyPage}>
+        <Text style={styles.emptyPageText}>
+          {this.props.text}
+        </Text>
+      </View>
+    );
+  },
+
+});
+
+var NavigatorIOSColors = React.createClass({
+
+  statics: {
+    title: '<NavigatorIOS> - Custom',
+    description: 'iOS navigation with custom nav bar colors',
+  },
+
+  render: function() {
+    // Set StatusBar with light contents to get better contrast
+    StatusBarIOS.setStyle(StatusBarIOS.Style['lightContent']);
+
+    return (
+      <NavigatorIOS
+        style={styles.container}
+        initialRoute={{
+          component: EmptyPage,
+          title: '<NavigatorIOS>',
+          rightButtonTitle: 'Done',
+          onRightButtonPress: () => {
+            StatusBarIOS.setStyle(StatusBarIOS.Style['default']);
+            this.props.onExampleExit();
+          },
+          passProps: {
+            text: 'The nav bar has custom colors with tintColor, ' +
+              'barTintColor and titleTextColor props.',
+          },
+        }}
+        tintColor="#FFFFFF"
+        barTintColor="#183E63"
+        titleTextColor="#FFFFFF"
+      />
+    );
+  },
+
+});
+
+var styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  emptyPage: {
+    flex: 1,
+    paddingTop: 64,
+  },
+  emptyPageText: {
+    margin: 10,
+  },
+});
+
+NavigatorIOSColors.external = true;
+
+module.exports = NavigatorIOSColors;

Examples/UIExplorer/UIExplorerList.js

@@ -26,7 +26,6 @@ var {
   TouchableHighlight,
   View,
 } = React;
-var NavigatorExample = require('./Navigator/NavigatorExample');
 
 var { TestModule } = React.addons;
 
@@ -39,7 +38,8 @@ var COMPONENTS = [
   require('./ListViewExample'),
   require('./ListViewPagingExample'),
   require('./MapViewExample'),
-  NavigatorExample,
+  require('./Navigator/NavigatorExample'),
+  require('./NavigatorIOSColorsExample'),
   require('./NavigatorIOSExample'),
   require('./PickerIOSExample'),
   require('./ScrollViewExample'),
@@ -181,10 +181,8 @@ class UIExplorerList extends React.Component {
   }
 
   _onPressRow(example) {
-    if (example === NavigatorExample) {
+    if (example.external) {
-      this.props.onExternalExampleRequested(
+      this.props.onExternalExampleRequested(example);
-        NavigatorExample
-      );
       return;
     }
     var Component = makeRenderable(example);

Libraries/Components/Navigation/NavigatorIOS.ios.js

@@ -252,6 +252,16 @@ var NavigatorIOS = React.createClass({
      */
     tintColor: PropTypes.string,
 
+    /**
+     * The background color of the navigation bar
+     */
+    barTintColor: PropTypes.string,
+
+    /**
+     * The text color of the navigation bar title
+     */
+    titleTextColor: PropTypes.string,
+
   },
 
   navigator: (undefined: ?Object),
@@ -554,7 +564,9 @@ var NavigatorIOS = React.createClass({
           rightButtonTitle={route.rightButtonTitle}
           onNavRightButtonTap={route.onRightButtonPress}
           navigationBarHidden={this.props.navigationBarHidden}
-          tintColor={this.props.tintColor}>
+          tintColor={this.props.tintColor}
+          barTintColor={this.props.barTintColor}
+          titleTextColor={this.props.titleTextColor}>
           <Component
             navigator={this.navigator}
             route={route}

React/Views/RCTWrapperViewController.m

@@ -80,10 +80,7 @@
       bar.barTintColor = _navItem.barTintColor;
     }
     if (_navItem.tintColor) {
-      BOOL canSetTintColor = _navItem.barTintColor == nil;
+      bar.tintColor = _navItem.tintColor;
-      if (canSetTintColor) {
-        bar.tintColor = _navItem.tintColor;
-      }
     }
     if (_navItem.titleTextColor) {
       [bar setTitleTextAttributes:@{NSForegroundColorAttributeName : _navItem.titleTextColor}];