Enable setting color of text and images on unselected tabs

Summary:
Hi,
This PR Solves this issue #3083.
This PR solves the problem of default color on TabBar being always grey. Which looks great if the barTintColor is unchanged. However if we set the barTintColor to something else (like blue in example) text and icons become quite unreadable.
![simulator screen shot 27 apr 2016 21 58 40](https://cloud.githubusercontent.com/assets/12081272/14866402/e51c7120-0cc3-11e6-9570-097b686c160f.png)

Commit (c206417) - Enable setting color of unselected tabs
Solves this issue with a prop (unselectedTintColor) on TabBarIOS to which you just pass a color like you can for barTintColor and tintColor.
This leaves us with a result that is on second picture. Notice the color of text on tabs.
![simulator screen shot 27 apr 2016 21 59 06](https://cloud.githubusercontent.com/assets/12081272/14866419/f77aa7e2-0cc3-11e6-8c90-33209009bc09.png)

Or change it to yellow for demonstrating purposes
![simulator screen shot 27 apr 2016 21 59 13](https://cloud.githubusercontent.com/assets/1208
Closes https://github.com/facebook/react-native/pull/7264

Differential Revision: D3240924

Pulled By: nicklockwood

fb-gh-sync-id: 14a0de28abd064756320b7a74f128c255caa6b12
fbshipit-source-id: 14a0de28abd064756320b7a74f128c255caa6b12

Examples/UIExplorer/TabBarIOSExample.js

@@ -54,6 +54,7 @@ var TabBarExample = React.createClass({
   render: function() {
     return (
       <TabBarIOS
+        unselectedTintColor="yellow"
         tintColor="white"
         barTintColor="darkslateblue">
         <TabBarIOS.Item
@@ -81,6 +82,7 @@ var TabBarExample = React.createClass({
         </TabBarIOS.Item>
         <TabBarIOS.Item
           icon={require('./flux.png')}
+          renderAsOriginal
           title="More"
           selected={this.state.selectedTab === 'greenTab'}
           onPress={() => {

Libraries/Components/TabBarIOS/TabBarIOS.ios.js

@@ -27,6 +27,10 @@ var TabBarIOS = React.createClass({
   propTypes: {
     ...View.propTypes,
     style: View.propTypes.style,
+    /**
+     * Color of text on unselected tabs
+     */
+    unselectedTintColor: ColorPropType,
     /**
      * Color of the currently selected tab icon
      */
@@ -45,6 +49,7 @@ var TabBarIOS = React.createClass({
     return (
       <RCTTabBar
         style={[styles.tabGroup, this.props.style]}
+        unselectedTintColor={this.props.unselectedTintColor}
         tintColor={this.props.tintColor}
         barTintColor={this.props.barTintColor}
         translucent={this.props.translucent !== false}>

Libraries/Components/TabBarIOS/TabBarItemIOS.ios.js

@@ -62,6 +62,11 @@ var TabBarItemIOS = React.createClass({
      * component to set selected={true}.
      */
     onPress: React.PropTypes.func,
+    /**
+     * If set to true it renders the image as original,
+     * it defaults to being displayed as a template
+     */
+    renderAsOriginal: React.PropTypes.bool,
     /**
      * It specifies whether the children are visible or not. If you see a
      * blank content, you probably forgot to add a selected one.

React/Views/RCTTabBar.h

@@ -11,6 +11,7 @@
 
 @interface RCTTabBar : UIView
 
+@property (nonatomic, strong) UIColor *unselectedTintColor;
 @property (nonatomic, strong) UIColor *tintColor;
 @property (nonatomic, strong) UIColor *barTintColor;
 @property (nonatomic, assign) BOOL translucent;

React/Views/RCTTabBar.m

@@ -109,6 +109,12 @@ RCT_NOT_IMPLEMENTED(- (instancetype)initWithCoder:(NSCoder *)aDecoder)
   [_tabViews enumerateObjectsUsingBlock:
    ^(RCTTabBarItem *tab, NSUInteger index, __unused BOOL *stop) {
     UIViewController *controller = _tabController.viewControllers[index];
+    if (_unselectedTintColor) {
+      [tab.barItem setTitleTextAttributes:@{NSForegroundColorAttributeName: _unselectedTintColor} forState:UIControlStateNormal];
+    }
+    
+    [tab.barItem setTitleTextAttributes:@{NSForegroundColorAttributeName: self.tintColor} forState:UIControlStateSelected];
+    
     controller.tabBarItem = tab.barItem;
     if (tab.selected) {
       _tabController.selectedViewController = controller;

React/Views/RCTTabBarItem.h

@@ -16,6 +16,7 @@
 @property (nonatomic, copy) id /* NSString or NSNumber */ badge;
 @property (nonatomic, strong) UIImage *icon;
 @property (nonatomic, assign) UITabBarSystemItem systemIcon;
+@property (nonatomic, assign) BOOL renderAsOriginal;
 @property (nonatomic, assign, getter=isSelected) BOOL selected;
 @property (nonatomic, readonly) UITabBarItem *barItem;
 @property (nonatomic, copy) RCTBubblingEventBlock onPress;

React/Views/RCTTabBarItem.m

@@ -84,8 +84,13 @@ RCT_ENUM_CONVERTER(UITabBarSystemItem, (@{
     _barItem.selectedImage = oldItem.selectedImage;
     _barItem.badgeValue = oldItem.badgeValue;
   }
+  
+  if (_renderAsOriginal) {
+    self.barItem.image = [_icon imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
+  } else {
     self.barItem.image = _icon;
   }
+}
 
 - (UIViewController *)reactViewController
 {

React/Views/RCTTabBarItemManager.m

@@ -22,6 +22,7 @@ RCT_EXPORT_MODULE()
 }
 
 RCT_EXPORT_VIEW_PROPERTY(badge, id /* NSString or NSNumber */)
+RCT_EXPORT_VIEW_PROPERTY(renderAsOriginal, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(selected, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(icon, UIImage)
 RCT_REMAP_VIEW_PROPERTY(selectedIcon, barItem.selectedImage, UIImage)

React/Views/RCTTabBarManager.m

@@ -21,6 +21,7 @@ RCT_EXPORT_MODULE()
   return [RCTTabBar new];
 }
 
+RCT_EXPORT_VIEW_PROPERTY(unselectedTintColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(tintColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(barTintColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(translucent, BOOL)