Defining custom buttons on root scene

[AlessandroCorradini]

Version

Tell us which versions you are using:

• react-native-router-flux v@3.35.0
• react-native v0.31.0

How can I set my custom backButton only one time? I'm using react-native-vector-icons and this is my custom backButton.

const BackButton =
    <TouchableHighlight onPress={()=> Actions.pop()} style={{ width: 45, height: 45, position: 'absolute', top: 0, left: 0, justifyContent: 'center', alignItems: 'center'}} underlayColor="transparent" activeOpacity={0.3}>
        <Icon name="arrow-back" size={30} color="white" />
    </TouchableHighlight>;

I tried to apply renderBackButton to root scene, but doesn't work. Ex. navigationBarStyle and titleStyle work on root scene. If I have 100 scenes, adding renderBackButton method for each scene is very repetitive.

Thanks,
Alessandro.

[mdmush]

Without using renderBackButton,
you can change the backButton icon and functionality by simply editing the core NavBar.js file located in ./node_modules/react-native-router-flux/src/NavBar.js

Change this function in NavBar.js at Line 189 according to your need.

  renderBackButton() {
    const state = this.props.navigationState;
    const childState = state.children[state.index];
    const BackButton = (childState.component && childState.component.backButton) || state.backButton
      || childState.backButton;
    const textButtonStyle = [
      styles.barBackButtonText,
      this.props.backButtonTextStyle,
      state.backButtonTextStyle,
      childState.backButtonTextStyle,
    ];
    const style = [
      styles.backButton,
      this.props.leftButtonStyle,
      state.leftButtonStyle,
      childState.leftButtonStyle,
    ];

    if (state.index === 0) {
      return null;
    }

    if (BackButton) {
      return (
        <BackButton
          testID="backNavButton"
          textButtonStyle={textButtonStyle}
          {...childState}
          style={style}
        />
      );
    }
    let buttonImage = childState.backButtonImage ||
      state.backButtonImage || this.props.backButtonImage;
    let onPress = childState.onBack || childState.component.onBack;
    if (onPress) {
      onPress = onPress.bind(null, state);
    } else {
      onPress = Actions.pop;
    }

    let text = childState.backTitle ?
      <Text style={textButtonStyle}>
        {childState.backTitle}
      </Text>
      : null;

    return (
      <TouchableOpacity
        testID="backNavButton"
        style={style}
        onPress={onPress}
      >
        {buttonImage && !childState.hideBackImage &&
          <Image
            source={buttonImage}
            style={[
              styles.backButtonImage,
              this.props.leftButtonIconStyle,
              state.barButtonIconStyle,
              state.leftButtonIconStyle,
              childState.leftButtonIconStyle,
            ]}
          />
        }
        {text}
      </TouchableOpacity>
    );
  }

[AlessandroCorradini]

I've made a custom navBar :)

[AndrewHenderson]

@mdmush I don't think modifying the files in the node_modules folder is a stable solution.

@AlessandroCorradini Did you modify the node_modules version or create your own component? If it's the latter, were you able to get nested Scenes to display your custom navbar? #1489