React-native-navigation: `disableIconTint` does not work correctly on iOS

Created on 7 Feb 2019  路  4Comments  路  Source: wix/react-native-navigation

Issue Description

Considering a pushed screen with two right buttons and a colored back button in the topBar. The back button is set via static options() method. The two right buttons are setted dinamically via Navigation.mergeOptions() method

The two right buttons always take the color setted for the backButton (ignoring disableIconTint property)

Steps to Reproduce / Code Snippets / Screenshots

Push function

    Navigation.push(this.props.componentId, {
      component: {
        name: SID_SCREEN_NAME,
        passProps: {
          // ...some props passed into the next screen
        }
      }
    })

RightButtons set by Navigation.mergeOptions

    let rightButtons = []

    if (!notFound && !loadFailed)
      rightButtons = [{
        id: this.isFavourite ? 'remove-fav' : 'add-fav',
        disableIconTint: true,
        showAsAction: 'always',
        icon: this.isFavourite ? ICONS.star_filled : ICONS.star,
      }, {
        id: 'share',
        icon: ICONS.share,
        title: 'Condividi',
        disableIconTint: true,
        showAsAction: 'always',
      }]

    // OLD V1 method
    // props.navigator.setButtons({ rightButtons, animated: true })

    Navigation.mergeOptions(this.props.componentId, {
      topBar: {
        rightButtons
      }
    })

BackButton set by static options()

  static options() {
    return {
      topBar: {
        animate: true,
        visible: true,
        drawBehind: false,
        backButton: {
          color: COLORS.darkgray,
        }
      },
    }
  }

Environment

  • React Native Navigation version: 2.8.0
  • React Native version: 0.57.8
  • Platform(s) (iOS, Android, or both?): iOS
  • Device info (Simulator/Device? OS version? Debug/Release?): Simulator Debug
馃彋 stale

Most helpful comment

Latest version of this library 2.20.2 has this same problem. There's not really any documentation about how this is supposed to work. Is it not possible to have an icon that's got 2 different colors?

All 4 comments

I have the same problem, I would like to display the default colours of my icon but I can't disable icon tint

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

The issue has been closed for inactivity.

Latest version of this library 2.20.2 has this same problem. There's not really any documentation about how this is supposed to work. Is it not possible to have an icon that's got 2 different colors?

Was this page helpful?
0 / 5 - 0 ratings