I have 2 screens listProducts and detailProduct. when I navigate from the list to detail I get all info about the product. so I would like to display product name on header of screen. I have made this method

DetailProduct.js:

componentWillReceiveProps(nextProps){
   if(nextProps.product.name !== undefined)
       this.props.navigation.setParams({ Name:  nextProps.product.name })
}

Navigator.js:

detailProduct: {
  screen: detailProduct,
  navigationOptions: ({ navigation }) => 
   ({title:navigation.getParam('Name', 'DefaultName'),})
}

but I get this error: [Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.] knowing that I use redux. Pleace How can I fix this probleme, how can I make header's title dynamic. thanks

1 Answers

0
teimurjan On

It seems that you need to change the condition from if(nextProps.product.name !== undefined) to if(nextProps.product.name !== undefined && nextProps.product.name !== this.props.navigation.getParam('Name')).

Otherwise, you will change the state every time.

Working demo