diff --git a/Examples/UIExplorer/TabBarIOSExample.js b/Examples/UIExplorer/TabBarIOSExample.js index 0c5d95de1..e1ef10a25 100644 --- a/Examples/UIExplorer/TabBarIOSExample.js +++ b/Examples/UIExplorer/TabBarIOSExample.js @@ -54,6 +54,7 @@ var TabBarExample = React.createClass({ render: function() { return ( { diff --git a/Libraries/Components/TabBarIOS/TabBarIOS.ios.js b/Libraries/Components/TabBarIOS/TabBarIOS.ios.js index 3d168509f..c2165da17 100644 --- a/Libraries/Components/TabBarIOS/TabBarIOS.ios.js +++ b/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 ( diff --git a/Libraries/Components/TabBarIOS/TabBarItemIOS.ios.js b/Libraries/Components/TabBarIOS/TabBarItemIOS.ios.js index bfdae5433..e4936ea67 100644 --- a/Libraries/Components/TabBarIOS/TabBarItemIOS.ios.js +++ b/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. diff --git a/React/Views/RCTTabBar.h b/React/Views/RCTTabBar.h index ba0bbd7e6..3129752ff 100644 --- a/React/Views/RCTTabBar.h +++ b/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; diff --git a/React/Views/RCTTabBar.m b/React/Views/RCTTabBar.m index fee6d1a60..f8103c022 100644 --- a/React/Views/RCTTabBar.m +++ b/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; diff --git a/React/Views/RCTTabBarItem.h b/React/Views/RCTTabBarItem.h index cee2df982..30919ed8b 100644 --- a/React/Views/RCTTabBarItem.h +++ b/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; diff --git a/React/Views/RCTTabBarItem.m b/React/Views/RCTTabBarItem.m index a05ae75ee..06f313f1a 100644 --- a/React/Views/RCTTabBarItem.m +++ b/React/Views/RCTTabBarItem.m @@ -84,7 +84,12 @@ RCT_ENUM_CONVERTER(UITabBarSystemItem, (@{ _barItem.selectedImage = oldItem.selectedImage; _barItem.badgeValue = oldItem.badgeValue; } - self.barItem.image = _icon; + + if (_renderAsOriginal) { + self.barItem.image = [_icon imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; + } else { + self.barItem.image = _icon; + } } - (UIViewController *)reactViewController diff --git a/React/Views/RCTTabBarItemManager.m b/React/Views/RCTTabBarItemManager.m index d92e3a2d9..ca807c9df 100644 --- a/React/Views/RCTTabBarItemManager.m +++ b/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) diff --git a/React/Views/RCTTabBarManager.m b/React/Views/RCTTabBarManager.m index b5d79f886..10b215f56 100644 --- a/React/Views/RCTTabBarManager.m +++ b/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)