From 50c2467905815dbb434beecd0e649fb4a7bc2e20 Mon Sep 17 00:00:00 2001 From: Urban Cvek Date: Tue, 3 May 2016 05:39:21 -0700 Subject: [PATCH] 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 | 2 ++ Libraries/Components/TabBarIOS/TabBarIOS.ios.js | 5 +++++ Libraries/Components/TabBarIOS/TabBarItemIOS.ios.js | 5 +++++ React/Views/RCTTabBar.h | 1 + React/Views/RCTTabBar.m | 6 ++++++ React/Views/RCTTabBarItem.h | 1 + React/Views/RCTTabBarItem.m | 7 ++++++- React/Views/RCTTabBarItemManager.m | 1 + React/Views/RCTTabBarManager.m | 1 + 9 files changed, 28 insertions(+), 1 deletion(-) diff --git a/Examples/UIExplorer/TabBarIOSExample.js b/Examples/UIExplorer/TabBarIOSExample.js index 0c5d95de15a..e1ef10a25c8 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 3d168509fd6..c2165da1794 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 bfdae543332..e4936ea67d6 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 ba0bbd7e68b..3129752ffe0 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 fee6d1a60ac..f8103c022fa 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 cee2df982e4..30919ed8bf7 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 a05ae75ee0a..06f313f1a73 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 d92e3a2d95e..ca807c9df8a 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 b5d79f88602..10b215f56fd 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)