How to hide the default backButtonIcon in NavigatorIOS?

[faithfe]

My code is:

<NavigatorIOS 
        ref='nav'
        style={styles.container}
        tintColor={'#FFFFFF'}
        barTintColor={'#009FDE'}
        titleTextColor={'#FFFFFF'}
        initialRoute={{
          title: 'Title',
          component: List,
          backButtonTitle: ' ',
          backButtonIcon: require('image!back_button'),
          leftButtonIcon: require('image!back_button'),
          rightButtonTitle: 'Right',
          onRightButtonPress: this._onRightButtonPress,
          onLeftButtonPress: this._onLeftButtonPress

        }}/>

I want to use my own back icon ('back_button') for backButtonIcon, but there are two back icons in the next page. How to hide the default one? tks

[brentvatne]

Hi @faithfe - if you push a new route, you need to specify what the back button icon should be in that as well - not just in the initialRoute. Also, your left button looks like it also has the back button image.

If the above doesn't help, can you post a runnable example on https://rnplay.org/ please?

[faithfe]

thanks @brentvatne, it works!
Another question, i fail to use uri to locate the icon, but use 'require' is ok:
backButtonIcon: require('image!back_button'),
leftButtonIcon: {uri: 'http://xx/back_button.png'},

[ide]

@faithfe, only local images are supported with NavigatorIOS.

[faithfe]

@ide , ok, tks!

[richarddewit]

I still have this issue.

Both on my initialRoute and the next pushed route, I set the backButtonIcon to my desired image.

backButtonTitle: " ",
backButtonIcon: require('image!ButtonBack'),

But this comes out:

Although when I omit the Back button, and use a Left button instead, the issue is solved, but I have to make my own "Navigate back" function (this.refs.nav.pop()) which IMO shouldn't be the way it's intended.

leftButtonTitle: "",
leftButtonIcon: require("image!ButtonBack"),
onLeftButtonPress: this.refs.nav.pop,

But this way, the "Swipe to go back" functionality is gone..

[rmdort]

I am facing the same problem as @richarddewit

backButtonIcon, backButtonTitle is not working as expected. The left arrow is always visible. New routes with custom backButtonIcon or backButtonTitle doesnt show

this.props.navigator.push({
    title: 'Next',
    component: Next,
    backButtonIcon: require('./../img/Back.png')    
})

[ide]

I believe this is how UIKit behaves, though if there's a way to override the back button icon with UINavigationController please send a PR.