Question: How to change color for "inactive" tab item?

[JonasJonny]

Hello, I couldn't find a way how to change default text color (gray) to white or anything. Background for active/inactive tab will be nice feature too. But text is really important because when I will change "barTintColor" then gray looks really bad. For active tab "tintColor" is working as expected. Styles are also not working.

Thank you for any help.

[JonasJonny]

I can change text color through Objective-C.

// Add this code to change StateNormal text Color,
[UITabBarItem.appearance setTitleTextAttributes:
@{NSForegroundColorAttributeName : [UIColor colorWithRed:0.424 green:0.29 blue:0.529 alpha:1]}
forState:UIControlStateNormal];

// then if StateSelected should be different, you should add this code
[UITabBarItem.appearance setTitleTextAttributes:
@{NSForegroundColorAttributeName : [UIColor whiteColor]}
forState:UIControlStateSelected];

But I can't find where you generate images from icon fonts to change default image color http://stackoverflow.com/questions/22767098/how-to-change-inactive-icon-text-color-on-tab-bar

---

This feature would be really helpful if we change barTintColor.

[corymsmith]

Are you thinking this should be a property on my tab bar implementation? Are you wanting the text color to match the icon or allow them to be styled separately?

[JonasJonny]

• Definitely it should be in SMXTabBar implementation
• I think there should be at least SMXTabBar property to change "Inactive tab" text or icon color
• It doesn't matter if icon color will follow text color or text color will follow icon color
• As you can see the stackoverflow link above. If you change barTintColor to blue then grey text is no longer good color. I found out I can change the bar text color as you can see above (I know it is not a great way but it works at least). But there is no way how to change icon color and remains grey :(.

[JonasJonny]

This is the best result which I can achieve.

inactive violet text is [UIColor colorWithRed:0.424 green:0.29 blue:0.529 alpha:1] or #6c4a87

There should be at least SMXTabBar implementation to color the unselected icons to different color than iOS native grey. But it makes sense to change also the unselected tab text color. Separately or together doesn't matter.

[corymsmith]

Yeah I see what you mean, the issue is that the underlying native tab bar doesn't have a way to specify the unselected icon color unless you use separate images for each state. I've tried a few things but will have to dig a bit deeper to see how we can fully solve this. If you have any thoughts on implementation or get it working feel free to send over a Pull Request

[JonasJonny]

Unfortunately I don't have enough iOS skills to solve this problem alone. I don't know if you generate image from icon font to use it as active state or how is it possible to change the icon color through tintColor. I tried to change some values in "createImageForIcon" (IconGenerator.m) or in "FAKIconImageManager.m" but without luck. Maybe if the "new property" is set you can call another function to generate and use two images for normal state and selected state. If not use the current code. But I don't know how this could be difficult. Maybe this could help you somehow http://jslim.net/blog/2014/05/05/ios-customize-uitabbar-appearance/.

[meric426]

+1

[KFoxder]

+1

[sunnylqm]

@corymsmith http://stackoverflow.com/questions/26551458/change-tintcolor-of-unselected-uitabbarcontroller-item-title-and-background-imag This answer from SO solved the problem. (UIControlStateNormal, UIControlStateSelected and UIImageRenderingModeAlwaysOriginal) . Please check it out.

[jorgenskogmo]

Is this happening?

[corymsmith]

@baseio Haven't had time to implement yet, would love a PR since lots of people have asked for it.

[ka05]

Just in case someone needs this in swift UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName : UIColor.blueColor()], forState: UIControlState.Normal) // changes the default color UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName : UIColor.blackColor()], forState: UIControlState.Selected) // changes the selected color

[corymsmith]

Closing this as support for this library is being discontinued, I highly recommend using https://github.com/oblador/react-native-vector-icons instead as its more fully featured, I've added a warning to the Readme about this as well.