react-native-navbar icon indicating copy to clipboard operation
react-native-navbar copied to clipboard

Different left button on different screens

Open berdof opened this issue 8 years ago • 0 comments

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?

berdof avatar Mar 07 '17 05:03 berdof