React-native-router-flux: How to change back button ? Any examples ?

[melihmucuk]

I can't change default back button on iOS. Whats the problem ? I tried renderBackButton, renderLeftButton and backButtonImage props, but didn't change.

<Scene
  key="entry"
  component={Entry}
  title="Title"
  titleStyle={styles.title}
  navigationBarStyle={styles.navBar}
  renderLeftButton={() => this._backButton.bind(this)}
  renderBackButton={() => this._backButton.bind(this)}
  backButtonImage={backButton}/>

var backButton = (<Image source={this.state.backIcon} style={{width: 30, height: 30}} />);

_backButton(){
    return (
      <View style={{paddingHorizontal: 5, paddingVertical: 7}}>
        <TouchableOpacity
          style={{padding: 10}}
          onPress={() => Actions.pop()}>
          <Icon
            name="arrow-left"
            size={20}
            color="#e67e22" />
        </TouchableOpacity>
      </View>);
  }

Version

"dependencies": {
    "react": "^0.14.8",
    "react-native": "^0.22.2",
    "react-native-router-flux": "^3.2.6",
    "react-native-vector-icons": "^1.3.3"
  }

[SudoPlz]

I could not get it to work either, till then I just go and tamper the back_chevron.png img in the node_modules/react-native-router-flux/src directory.

[lee-gray]

@melihmucuk try adding it to your root Scene, I don't know why but it worked for me.

<Scene key="root" backButtonImage={require('../images/back_chevron.png')}>
    <Scene key="foo" component={fooView} title="Foo" />
    <Scene key="bar" component={barView} title="Bar" />
</Scene>

[AlexDM0]

I just used the renderBackButton method:

renderBackButton={backButtonFunction}

with

let backButtonFunction = function() {
  if (this.props.navigationState.index === 0) {
    return null;
  }
  return (
      <TouchableOpacity style={[{
        width: 100,
        height: 37,
        position: 'absolute',
        bottom: 4,
        left: 2,
        padding: 8,
        justifyContent:'center',
    }]} onPress={Actions.pop}>
        <View style={{flexDirection:'row', alignItems:'center'}}>
          <Icon name="ios-arrow-back" size={25} color={'#ffffff'} style={{marginTop:2,paddingRight:6}} />
          <Text style={styles.topBarLeft}>Back</Text>
        </View>
      </TouchableOpacity>
  );
};

Works like a charm.

[SudoPlz]

Will try that, thanks for reporting this brother.

[AlexDM0]

Keep in mind that you dont use an arrow function or bind it. It depends on the this of the environment where it is being executed. I reverse engineered it from the method implemented in the router source and hardcoded the styling into it.

Cheers

[Lida]

I think there is a bug with the current implementation that only use the renderLeft/Right/BackButton props set on the root scene. They are only bound on NavBar's componentWillMount.

I have a local commit that fixes this in my fork.

[SudoPlz]

Can you open a pull request?

[Paul-Todd]

I second that - this fixes an issue where the first scene (master scene) has a left button for settings. The remaining scenes (detail scenes) have the standard behaviour.

[stinodes]

Hey @AlexDM0 ,
Where did you define that function?
I can't seem to get it to work in my project.

[AlexDM0]

I defined it in my router file but it shouldn't matter where you define is since the scope will be where it is executed. In fact that is the only reason it works. Did you put it in the scene props?

On 18 Apr 2016, at 09:57, Stijn Tytgat [email protected] wrote:

Hey @AlexDM0 ,
Where did you define that function?
I can't seem to get it to work in my project.

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub

[stinodes]

Thanks for the quick response!
I did include it in the scene's props, but it somehow keeps saying that this.props.navigationState is undefined.
I don't think anything's off with my props though:
<Scene key="key" component={Component} renderBackButton={backButtonFunction}/>
I've tried defining the function inside of the render-method, outside of the class, as method of the class. None seemed to solve it though.

[AlexDM0]

Which version are you using? You didn't use arrow functions or bind?

On 18 Apr 2016, at 10:05, Stijn Tytgat [email protected] wrote:

Thanks for the quick response!
I did include it in the scene's props, but it somehow keeps saying that this.props.navigationState is undefined.
I don't think anything's off with my props though:

I've tried defining the function inside of the render-method, outside of the class, as method of the class. None seemed to solve it though.

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub

[stinodes]

I have used neither of those.
react-native-router-flux: 3.2.12
react-native: 0.23.1

[AlexDM0]

I'm not sure if it could be related but so far router-flux requires 0.22. I'll check my exact router flux version when I get to work.

If it doesn't work anymore I'll make a pull req to fix it and properly pass the props instead of hoping the this is alright.

On 18 Apr 2016, at 10:12, Stijn Tytgat [email protected] wrote:

I have used neither of those.
react-native-router-flux: 3.2.12
react-native: 0.23.1

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub

[stinodes]

Thanks, I'll try reverting back to an older version or RN.
Perhaps that'll fix it.

[AlexDM0]

I tested it with rn 0.22 and router-flux 3.22, everything seems to work fine.

[stinodes]

I couldn't get it to work. Started using the NavigatorExperimental now, which seems to work fine

[AlexDM0]

My bad, it doesnt work with 3.22... I'll look into it

[stinodes]

I might just be looking over something I did wrong. No worries.
Thanks for helping out though :)

[AlexDM0]

The navbar now correctly gets the tab it should and the this is not bound anymore causing the app to crash. I'll make a pull to fix this.

[alirezavalizade]

how to change color of Backbutton in react native router flux ?

Im try backButtonBarStyle but not working...i cant find any solution.tnx for your helps

<Scene key="app"  navigationBarStyle={{backgroundColor: '#1e2226',borderBottomColor:"#1e2226"}}  titleStyle={{color : "#FFF"}}>
    <Scene  key="welcome" component={LauchContainer} title="Welcome" />
    <Scene key="ProductDetail"  backButtonBarStyle={{color : "#FFF"}} component={ProductDetail} />
  </Scene>

[crismali]

@alirezavalizade I managed to change the color by passing leftButtonIconStyle to the scene with a tintColor.

const styles = StyleSheet.create({
  backButton: {
    tintColor: 'white'
  }
})

// ...later

<Scene key='foo' component={Foo} leftButtonIconStyle={styles.backButton} />