[TabBarIOS] TabBarIOS.Item selectedIcon always tinted by tintColor

[cauchywei]

I have couples of icons as TabBar Icon, but when I try to set icon and selectedIcon , I found that (unselected) icon always tinted by gray, selectedIcon always tinted by tintColor ( default is blue). so the gay tint and tintColor covered all the icon's detail.

I noticed @urbancvek has resolved a similar issue in @urbancvek c206417, so we can set renderAsOriginal in TabBarIOS.Item to prevent gray tinting from iOS default props, but it can't prevent tintColor tinting selectedIcon.

I have resolved the issue through modifying RCTTabItem.m and RCTTabItemManager.m, I will pull a request to fixed it

[urbancvek]

Hey is this picture from my old code or did you take a picture afterwards you modified the code?

I know you can do this with the code I've written. But you cannot control the color of the image with tintColor or unselectedTintColor, this is intented use of renderAsOriginal prop... renderAsOriginal tells the app "Just ignore the tintColors and render the image as you are given".

So all you have to do is create two separate images: one for unselected and selected state. Make them look exactly as you would like them to look in an app. Then just pass them as icon and selectedIcon and set renderAsOriginal prop to true. All you have to do next is to set tintColor and unselectedTintColor to control the text under the icon and that's it. You should get the result expected.

If you have any other question just post them and I'll try to help 😃

[cauchywei]

Thanks for your reply @urbancvek 😁 This picture from my modified code

(1) What confusing me is that I have changed RCTTabBarItem.m line 87 from

self.barItem.image = _icon;

to

self.barItem.image = [_icon imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

like your code while it only work with unselectedIcon look like the following picture (I use react-native-0.25.1)

(2) So I add the following code (also modified other files ) to control selectedIcon，it works!

- (void)setSelectedIcon:(UIImage *)selectedIcon
{
    _selectedIcon = selectedIcon;
    self.barItem.selectedImage =  [selectedIcon imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
}

(3) According to my practice, my "Enhancing TabBarItem" means we can add 3 props ( renderAsOriginal, renderIconAsOriginal, renderSelectedIconAsOriginal) to TabBarItem, to control whether icon or selectedIcon is tinted by tintColor respectively 😌

[urbancvek]

Yeah you are actually right. Selected icon is controlled by tintColor and it shouldn't be. I didn't notice it because I have set tintColor to the same one as my picture. You can create a PR for that, but I would only use one renderAsOriginal that controls both icon and selectedIcon, because it's more of a bugfix of my code rather than a new feature. Also make sure you create checks if the selectedIcon even exists, otherwise you may receive some errors. Thanks for a fix in advance 😃

[cauchywei]

Yeah, I will do it later, thanks for your tips :)

[zhaotai]

hi, has the problem from @cauchywei been solved ? I have updated the react-native to 0.27-rc2 but I'm still stuck with that problem. The selected icon still will be tint by tintColor although I set the renderAsOriginal to true.

[urbancvek]

@zhaotai I think the fix is not included in a release yet.. have you found it in release notes? If you want the latest repo with this fix included you can just npm install https://github.com/facebook/react-native.git. This will clone this repo's current state and will have everything in it.

[zhaotai]

@urbancvek Thanks, guy. I have solved this problem by changing the image. The white space in the picture is replaced by transparent block. And it works. Also, you must change the image type to .png.

[urbancvek]

Awesome!! 🎉

[michalchudziak]

You can use renderAsOriginal flag on your <TabBarIOS.Item> to fix this issue 😇.