iOS overrides the `navBarButtonColor` when using PNGs

1
votes

Issue Description

In my application I have a navigation bar search button set up as follows:

static navigatorButtons = {
    leftButtons: [
        {
            id: 'back-nav-button',
            icon: require('../assets/images/icons/arrow-left.png')
        }
   ]
};

The button works as intended on both iOS and Android, but the button is blue on iOS. I understand that this is the desired behavior and that the color can be overridden by setting navBarButtonColor, but the problem is that it's a multi-colored button - meaning I want then button to simply contain the PNG image's colors, and not the navBarButtonColor.

I've tried setting navBarButtonColor to null, transparent, but nothing seems to work.

So my question is, is there a way to make navigation bar icons take on the color of the PNG provided, as is the case on Android?

Steps to Reproduce / Code Snippets / Screenshots

Simply run any RNN app on iOS with a simple static navigatorButtons = ... using a local multi-colored PNG and you'll see the colors of the icon get overwritten.

Environment

  • React Native Navigation version: 1.1.473
  • React Native version: 0.55.3
  • Platform(s) (iOS, Android, or both?): iOS
  • Device info (Simulator/Device? OS version? Debug/Release?): Android Emulator on Debug
2
iosreactjsreact-nativereact-native-navigationwix-react-native-navigation

2 Answers

2
votes

On iOS, UIBarButtonItem uses images created with source image's alpha channel. To display the actual image (not an alpha channel mask of it) you need to change your image's rendering mode to alwaysOriginal

Although, looking at React Native Image class documentation I can't see renderingMode property

0
votes

We've managed to find a workaround for this. By setting the disableIconTint button property to true, it disables the icon color override. See the following example:

static navigatorButtons = {
    leftButtons: [
        {
            id: 'back-nav-button',
            icon: require('../assets/images/icons/arrow-left.png'),
            disableIconTint: true // Add this line to use the PNG's color
        }
   ]
};