TabBarIOS.Item will not ignore tintColor even with renderAsOriginal

[qualifyapp]

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

[qualifyapp]

I should add that this only appears to happen on iPhone5s and under.

[lacker]

Why are the images rendered with a tint? Is that how tab bars work by default on iOS?

[urbancvek]

@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]

Also @qualifyapp are you still having this issue or can we close it?

[XHTeng]

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 ?

[ghost]

I am also facing same problem on on iPhone5s and under(devices only, works fine on simulator). @XHTeng Have you found any work around for this problem?

[hramos]

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:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

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.