Repository navigation
TabBarIOS.Item will not ignore tintColor even with renderAsOriginal #9965
Description
Issue Description
I've been attempting to get the TabBar for our application completed and I've been running into a bit of trouble with the Icons. I've looked all over the place for about two days and even through the UIExplorer demonstrations, all the way down to @urbancvek 's PR notes.
The Images are all rendered with a tint, and no color can be seen, transparency in the image is also filled by the tint.
Steps to Reproduce / Code Snippets
You can simply copy the Example from UI explorer to see the problem, however here's a screenshot. (Excuse the oversized icons)
Please note, Icons are Colored, and the messaging Icon should not be filled out, although it is with the gray unselected tint color, the selectedIcon is also filled out with the tintColor from the TabBar.
I've tried changing just renderAsOriginal to renderAsOriginal={true} as shown in the documentation that it is a boolean value, however this didn't have any effect.
Expected Results
The images in the TabBarItem.IOS component should be rendered how they are designed when the renderAsOriginal prop is set to true, instead of being covered with a tint. Setting transparent to the tint color should not hide the Icon either, IMO.
Additional Information
- React Native version: 0.33.0 problem persisted in 0.32.0
- Platform(s) (iOS, Android, or both?): iOS
- Operating System (macOS, Linux, or Windows?): macOS
Activity
qualifyapp commentedon Sep 17, 2016
I should add that this only appears to happen on iPhone5s and under.
lacker commentedon Dec 15, 2016
Why are the images rendered with a tint? Is that how tab bars work by default on iOS?
urbancvek commentedon Dec 16, 2016
@lacker yes. By default iOS takes an image and renders it as a template (UIImageRenderingModeAlwaysTemplate). I've then added a check here RCTTabBarItem.m at line 90 and 101 for renderAsOriginal prop which then sets the image to display as original (UIImageRenderingModeAlwaysOriginal).
urbancvek commentedon Dec 16, 2016
Also @qualifyapp are you still having this issue or can we close it?
XHTeng commentedon Dec 27, 2016
I found that iPhone 5S and under will always run the self.barItem.image = _icon; ，not run self.barItem.image = [_icon imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; ，so I delete the judge ，but I don't know why is it ?
hramos commentedon Jul 21, 2017
Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!
If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:
If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.