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 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)