Is it possible to change inactive TabBarIOS Icon color in React Native?

Question

As in subject, I am wondering if right now in React Native is an option to change color of inactive TabBar icon from default gray to custom color? With or without using react-native-vector-icons

Answer 1

I found solution, but your icon should be in "inactive" color. To achieve this go to RTCTabBarItem.m and change first line in method setIcon:

- (void)setIcon:(UIImage *)icon
{
  _icon = [icon imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
  if (_icon && _systemIcon != NSNotFound) {
    _systemIcon = NSNotFound;
    UITabBarItem *oldItem = _barItem;
    _barItem = [UITabBarItem new];
    _barItem.title = oldItem.title;
    _barItem.imageInsets = oldItem.imageInsets;
    _barItem.selectedImage = oldItem.selectedImage;
    _barItem.badgeValue = oldItem.badgeValue;
  }
  self.barItem.image = _icon;
}

Then in all TabBarIOS.Item add field selectedIcon with the same url as in icon (that's no matter), set tintColor of TabBarIOS to "active" color and that's all! TabBar will be rendered with default icon color (inactive), and active icon will be in tintColor. I think that TabBar field renderAsOriginal should do this, but it not works. After all I found this solution on github https://github.com/facebook/react-native/issues/3083

---

Another solution (may not works in some cases):

1. in xCode find file RCTTabBar.m (cmd + shift + f)
2. find - (instancetype)initWithFrame:(CGRect)frame
3. add before return self:

[[UIView appearanceWhenContainedIn: [UITabBar class], nil] setTintColor: [UIColor redColor]];
[[UITabBar appearance] setSelectedImageTintColor: [UIColor greenColor]];

4. Restart Simulator/Device

In code redColor is color of inactive buttons, and greenColor is color of active button. For more details checkout this Unselected UITabBar color?

Edit: I found great tool if you want convert RGB to UIColor http://uicolor.xyz/