Different left button on different screens

[Alex Berdyshev]

I want to have burger button for drawer opening when there is only one route in stack. When we pushed a route to navigator I want to display back button. I wrote this code to handle this logic:

@autobind
  renderLeftButton(routes) {
    if (routes.length === 1) {
      return (
        <View style={styles.leftBtn}>
          <Icon
            style={styles.leftBtnBackIcon}
            name="ios-menu-outline"/>
        </View>
      );
    }

    return (
      <Icon
        style={styles.leftBtnBackIcon}
        name="ios-arrow-back-outline"/>
    );
  }

  render() {
    const currentRoutes = this.props.navigator.getCurrentRoutes();
    const currentRoute = currentRoutes[currentRoutes.length - 1];
    const tintColor = '#ffffff';
    const {
      props:{
        title = currentRoute.title,
      }
    } = this;

    let leftButtonConfig = {
      tintColor,
      title: this.renderLeftButton(currentRoutes),
    };

    const titleConfig = {
      tintColor,
      title,
    };

    if (currentRoutes.length === 1) {
      leftButtonConfig.handler = this.props.openDrawer;
    } else {
      leftButtonConfig.handler = this.props.navigator.pop;
    }

    return (
      <NavigationBarOrig
        containerStyle={styles.header}
        statusBar={{
          style: 'light-content'
        }}
        title={titleConfig}
        leftButton={leftButtonConfig}
      />
    )
  }

The problem is no component updates on navigator.pop action. So the appearance of buttons don't change. Does anybody know the right solution to get this work?