Using Images in TabBarIOS ~ Low Quality, Tint ruins image

Question

We're working on an iOS application using react-native. In this application we're making use of the TabBarIOS component. We have five tabs that has separate icons for the active tab, the layout of our images is like this:

|_images
|__tabbaricons
|___ tab-1-on.png          (35x35)
|___ [email protected]        (70x70)
|___ [email protected]        (105x105)
|___ tab-1-off.png         (35x35)
|___ [email protected]       (70x70)
|___ [email protected]       (105x105)

In the TabBarIOS component I have the Items decared like so:

<TabBarIOS.Item
    selected={currentTab.name === 'profile'}
    icon={require('./images/tabbaricons/profile-off.png')}
    selectedIcon={require('./images/tabbaricons/profile-on.png')}
    renderAsOriginal={true}
    title="" 
    onPress={() => {
        this.props.navigation.gotoTab({
            tabInformation: { name: 'profile', content: '' },
            statusBarStyle: 'light-content'
        })
    }}>
    <Profile navigator={this.props.navigator} navigation={this.props.navigation />
</TabBarIOS.Item>

Across the iPhone4s, iPhone5, and iPhone6s+ the icons are all low quality, they are also covered by the gray tint if they're not selected which completely ruins the image. When selected they are covered by the blue default tint. I tried setting the tint color to transparent but that made the tab icon invisible when it was active.

This tinting is completely setting us back as setting the icons in the tab bar was one of the things we put off to last, because it should have been overly simple. It's turning out to be one of the larger hassles.

Previously we were using a UIWebView and scaling a 512x512 image down to size for sharpness. I can't tell if these smaller icons are just really low quality, or if the fuzziness is presented by the TabBarIOS component itself.

EDIT: Naming issue on Icons was fixed, problem with rending the icons in Color continues even after the use of renderAsOriginal

Answer 1

First for your images, U didn't name them right, it should be:

|_images
|__tabbaricons
|___ tab-1-on.png          (35x35)
|___ [email protected]        (70x70)
|___ [email protected]        (105x105)
|___ tab-1-off.png         (35x35)
|___ [email protected]       (70x70)
|___ [email protected]       (105x105)

The system took the lower quality and apply it to all retina device which lead to a low quality images.

About the tint color, try to add this prop to the TabBarIOS.Item:

renderAsOriginal={true};

Please be aware of the fact that the text under the icon of the TabBar will be effected only via the tintColor so u need to manage the icon as u want for selected and unSelected as well as the tintColor for selected and unSelected