React-native-navigation: Custom buttons on Android does not work

[dabit1]

Hi!

I'm changing buttons to custom buttons. I changed 'sideMenu' button with an icon from react-native-vector-icons and it is working well. But when I try to change de 'back' button does not work, always show the default left arrow.

This is the code:

import MaterialIcon from 'react-native-vector-icons/MaterialIcons'

export default class Activity extends Component {

  static navigatorStyle = {
    navBarTextFontFamily: 'Raleway-Bold',
    navBarButtonColor: COLORS.overFirst
  }

  constructor(props) {
    super(props)

    MaterialIcon.getImageSource('arrow-back', 35, COLORS.overFirst).then(icon => {
      props.navigator.setButtons({
        leftButtons: [{
          icon,
          id: 'back'
        }]
      })
    })
  }

  //...
}

React native navigation version: 1.1.45
React native version: 0.43.3
Platfrom: Android
Device: Simulator

EDIT: I've noticed that also occurs with 'sideMenu', basically it seems that the problem is when I try to change button icon from a no-root screen.

[a289459798]

i same

[guyca]

Hey there,
back is reserved on Android for the default back button - read the docs for more information. You can use any other id if you'd like to use your own back button.

[dabit1]

If I use any other id simply occurs that no button appears. I thought that on Android I'm only able to use 4 types of left buttons, I'm wrong? If I'm right then the issue should be open. @guyca

[guyca]

@dabit1 Can you please confirm that you're not able to use a custom icon only when calling setButtons ? Does using a custom icon work with a static navigatorButtons object?

[dabit1]

I just tested it and I can confirm that I'm not able to use a custom icon using setButtons neither navigatorButtons. I've noticed a rare behavior, if I use both setButtons and navigatorButtons then the button setted in setButtons appears correctly:

This doesn't work:

import MaterialIcon from 'react-native-vector-icons/MaterialIcons'

export default class Activity extends Component {

  static navigatorStyle = {
    navBarTextFontFamily: 'Raleway-Bold',
    navBarButtonColor: COLORS.overFirst
  }

  constructor(props) {
    super(props)

    MaterialIcon.getImageSource('arrow-back', 35, COLORS.overFirst).then(icon => {
      props.navigator.setButtons({
        leftButtons: [{
          icon,
          id: 'back'
        }]
      })
    })
  }

  //...
}

This doesn't work:

import MaterialIcon from 'react-native-vector-icons/MaterialIcons'

export default class Activity extends Component {

  static navigatorButtons = {
    leftButtons: [
      {
        title: 'Test',
        id: 'testButton'
      }
    ]
  }

  static navigatorStyle = {
    navBarTextFontFamily: 'Raleway-Bold',
    navBarButtonColor: COLORS.overFirst
  }

  constructor(props) {
    super(props)
  }

  //...
}

This works (show the icon setted in setButtons():

import MaterialIcon from 'react-native-vector-icons/MaterialIcons'

export default class Activity extends Component {

  static navigatorStyle = {
    navBarTextFontFamily: 'Raleway-Bold',
    navBarButtonColor: COLORS.overFirst
  }

  static navigatorButtons = {
    leftButtons: [
      {
        title: 'Test',
        id: 'testButton'
      }
    ]
  }

  constructor(props) {
    super(props)

    MaterialIcon.getImageSource('arrow-back', 35, COLORS.overFirst).then(icon => {
      props.navigator.setButtons({
        leftButtons: [{
          icon,
          id: 'back'
        }]
      })
    })
  }

  //...
}

Even if I set navigatorButtons like this, works:

import MaterialIcon from 'react-native-vector-icons/MaterialIcons'

export default class Activity extends Component {

  static navigatorStyle = {
    navBarTextFontFamily: 'Raleway-Bold',
    navBarButtonColor: COLORS.overFirst
  }

  static navigatorButtons = {
    leftButtons: [
      {}
    ]
  }

  constructor(props) {
    super(props)

    MaterialIcon.getImageSource('arrow-back', 35, COLORS.overFirst).then(icon => {
      props.navigator.setButtons({
        leftButtons: [{
          icon,
          id: 'back'
        }]
      })
    })
  }

  //...
}

[guyca]

@dabit1 The left button must have an icon on Android. It can't be a text only button.

[dabit1]

Ok however I can't put an icon on static var because to load it need a promise

[guyca]

Yes that's true, I meant if you could check with a local image resource. Thanks 👍
Initially, we supported only four types of left buttons on Android. Recently we accepted a pr to support custom icons in left buttons on Android as well. I think custom icons don't work with the setButtons function.

[dabit1]

Ok. I checked and with a local image works fine. Then as you think the setButtons function doesn't work.

[guyca]

Hey @dabit1, 1.1.55 should address this issue, please let me know if any more issues arise, thanks. 👍

[dabit1]

Hi @guyca This PR didn't solve the problem. I've updated to 1.1.55, I've reinstalled the app but the problem persists exactly the same way :(

[jslz]

I am seeing the same problem. (See https://github.com/wix/react-native-navigation/issues/767 too I guess.)

Hmm, even after reading this issue and the docs, I am confused about how to get this working on Android. :-) The code here below is working for me on iOS but not on Android. I only see the right button. What should / can I do to get the 'Done' appearing as a left text button on Android? Thanks!

const DONE_ID = 'done';
const CANCEL_ID = 'cancel';
  static navigatorButtons = {
    leftButtons: [{
      title: '   Done',
      id: DONE_ID,
      buttonColor: 'white',
    }],
    rightButtons: [{
      title: 'Cancel   ',
      id: CANCEL_ID,
      buttonColor: 'white',
    }],
  };

[windydang26]

@jslz same issue. i cannot set only text button in left button on android.
@guyca said: "The left button must have an icon on Android. It can't be a text only button."
you should custom a header.

[ObidosDev]

also custom component can not be setted up to left button . \ _ / .