React-native-router-flux: Scene/Navigation title/Left/Right is not updated while title={title} value was changed

Created on 15 Oct 2018  路  3Comments  路  Source: aksonov/react-native-router-flux

Version

  • react-native-router-flux v^4.0.5
  • react v16.5.0
  • react-native v0.57.1

Actual behaviour

Scene props is not changed. Static. While i see logs that prop was changed.

Steps to reproduce

 class A {
       onPress = () => {
            Actions.push('B') 
      }
  }

 class B {
      #Failure:
      componentDidMount() {
             Actions.refresh({
             leftTitle: 'Add',
              onLeft: () => {
              // TODO 
              alert('3456')
              },
             rightTitle: 'decrease',
              onRight: () => {
              // TODO 
               alert('123');
              }
        });
    }

      #Failure:
      componentWillReceiveProps() {
             Actions.refresh({
             leftTitle: 'Add',
              onLeft: () => {
              // TODO 
              alert('3456')
              },
             rightTitle: 'decrease',
              onRight: () => {
              // TODO 
               alert('123');
              }
        });
    }

  #BUT:

  render(){
     return(
       <Text style={{marginTop:64}} onPress={this.change} />
     )
  }

 #SUCCESS:
 change = () => {
       Actions.refresh({
           leftTitle: 'Add',
           onLeft: () => {
             // TODO
             alert('3456')
           },
           rightTitle: 'decrease',
           onRight: () => {
             // TODO 
             alert('123');
           }
       });
    };
 }

when this component re-renders, scene's title is not updated.

so,How to use Actions.refresh?? OR other refreshing navigation methods?

Most helpful comment

I tried this method. @Sunil Patel .But I don't know if it's right?

 componentWillMount() {
    this.props.navigation.setParams({
        'onRight': this.handleIconTouch,
        'title':'test',
        rightTitle:'save',
    })
}

https://stackoverflow.com/questions/39034340/how-to-make-right-button-in-navigation-bar-using-react-native-router-flux/44134096#44134096

All 3 comments

I tried this method. @Sunil Patel .But I don't know if it's right?

 componentWillMount() {
    this.props.navigation.setParams({
        'onRight': this.handleIconTouch,
        'title':'test',
        rightTitle:'save',
    })
}

https://stackoverflow.com/questions/39034340/how-to-make-right-button-in-navigation-bar-using-react-native-router-flux/44134096#44134096

@RtzX me too!!!

I had a similar problem, my solution is very similar to @RtzX 's: https://github.com/aksonov/react-native-router-flux/issues/3478

Was this page helpful?
0 / 5 - 0 ratings