Left Custom Button is not showing

//index.ios.js

renderScene (route, navigator) {
    let Component = route.component;
    let navBar = route.navigationBar;

    if (navBar) {
      navBar = React.cloneElement(navBar, { navigator, route, });
    }
    return (
       <View style={styles.app}>
        {navBar}
        <Component
          navigator={navigator}
          route={route}/>
      </View>
    );
  }

  render() {
    return (
      <Navigator
        style={styles.app}
        initialRoute={{
          title: 'Login',
          component: Login,
        }}
        renderScene={this.renderScene}/>
    );
  }

//... //Login.js

onSignUp() {
    this.props.navigator.push({
      component: SignUp,
      footerText: this.footerText(),
      navigationBar: (
        <NavigationBar
          leftButton={<NavBarButton />}
          title={{title: "SIGN UP", tintColor: "white"}}
          style={styles.navigator} />
      )
    });
  }

//NavBarButton

export default class NavBarButton extends Component {

  render() {
    const { iconName, } = this.props;
    const charmander = 'http://oyster.ignimgs.com/mediawiki/apis.ign.com/pokemon-blue-version/d/d4/Charmander.gif';
    return (
      <TouchableOpacity style={styles.buttonNavBar} onPress={this.props.onPress}>
        <Image
          source={{ uri: charmander }}
          style={[{ width: 20, height: 20, }, this.props.style]}/>
      </TouchableOpacity>
    );
  }
}

I checked the example and followed it but the leftButton property doesn't get the custom button. Any suggestion?